Month: January 2016

The SEO for Responsive Website

responsive_webdesign_and_seo

Since the Google shows favoritism to user-friendly responsive websites. Today, most of the designers and web developers are engaged in designing a site which is adaptable to each screen size to improve the user experience.

But when it comes to SEO, can a responsive layout improves the ranking in the SERP’s. For this, you need to take every bit of your client site seriously to make it search engine friendly.

To fix all this you need to focus on SEO issues associated with many responsive websites. Why Responsive read here –

  • Google Loves Responsive
  • One Website, One URL
  • Responsive helps fight a High Bounce Rate
  • User Experience is enhanced
  • Let’s discuss in detail here-

Is The Website Indexed?

Obviously, if your site isn’t in search engine index .it will be invisible for people. See for yourself with a simple site:domain.com search, or verify it in Google’s Webmaster Tools if you use it.

Use no follow in the robots.txt to hide pages you don’t want to index.

disneyjunior-site-google-index-500-opt.png

Is The Website Crawlable? 

If a site is to be indexed, Google must be able to crawl the website — that is, to follow a link to every unique piece of content on your site and then store that new URL

Is The Website Readable Without Images, Flash Or JavaScript Enabled?

A responsive website design must be text based and information rich. It must include the term people use when searching.

disney-junior-text-comparison-opt

Is The Website Easy To Link To And Share? 

The more we can do to facilitate linking and sharing, the better off we’ll be in search results. As most of the facebook users use mobile to post or share any story.

Does The Website Load Quickly?

It not only affects the website performance but can be dangerous to SEO as well. Use effective tools to run websites faster, including the PageSpeed Insights tool.

Does The Website Contain Duplicate Content?

Ensure that search engines can understand which pages are intended for users and which pages are just copies of canonical pages.

Conclusion 

Clearly, creating a responsive website is not enough to improve websites online presence. Ensure that the site contains all the ingredients to be responsive. As Google gives high priority to user-friendly responsive web design so keep in mind, above mentioned tactics and really make your own responsive website competitive in search results.

iMediadesigns provide cost effective web design and development solutions and offer custom web design services in Toronto

 

Advertisements

Clear and Effective Communication in Web Design

communication in web design

An appealing web design does not just earn the user attention but also able to communicate certain information to its audience. Though there are many known factors available which can affect your site performance but a Communication is considered as one of the key elements of a good website that help website owners to improve its user experience.

An effective communication can affect any type of website, whether its e-commerce website, a blog, an information website for a service company, a portfolio website or a government website. So it is necessary for every designer or website owner to take this into consideration seriously to communicate with the people who surf your web pages and take benefit from your services.

In this article, we will look at the some of the primary methods of Communication in Web Design and typical challenges that designers face. Let’s start now.

1. Methods of Communication
There are many ways by which you can communicate with your audiences:
Text, Images, titles and headers, icons, design styles, colors, audio and video. All have some definite strengths that make them a tremendous method of communication.

2. Challenges of Creating a Website with Clear Communication
Typical challenges designers face that may different from one site to another are-

• TOO MUCH CONTENT- Deciding what kind, the amount of content and information to use.

• EVERY VISITOR IS DIFFERENT – Not every visitor will have the same level of understanding about the subject of the website.

• CLARITY- A clear Purpose or Priority in mind, Deliver a clear message.

• HAVING PERSONALITY REMEMBER – A website is the representation of the company or the person behind it.

• NOT OVERPOWERING THE COMMUNICATION WITH THE DESIGN.

• GAINING THE TRUST OF VISITORS.

3. What Should Be Communicated
You need to focus on some of the things when creating or developing a website:
• The purpose of the Company or Website.
• What is offered?
• How can visitors benefit?
• What action can Visitors take?

Conclusion
Also, use a clear website structure and navigation when developing a website to further improve communication. At the end, you must look at some of these factors that truly helps the business and visitors and improve the branding. Create a communication that relates to the target audience so that they will find whatever they are looking for. Or
You can consult iMediaDesigns, an Ecommerce Web development and Online Marketing agency for B2B and B2C clients in the luxury, fashion, lifestyle and retail industries.

7 Helpful In-Browser Web Development Tools

Web-Development-Tools-You-Should-Be-Using

Every web browser includes a useful set of web development tools which are commonly known as add-ons or extensions. These tools can do a lot of powerful things from inspecting the loadedHTML, JavaScript or CSScodes, editing, debugging, access FTP source files to showing off the changes .some are specially designed to evaluate the accessibility of your website. In This article, we explore how to use the basic functions of these in-browser web development tools.

You’ll find tools for popular Web browsers like Firefox and Internet Explorer. You may find a variety of tools discussed here useful for your next project.

Firebug

Authors: Joe Hewitt, Jan Odvarko, Rob Campbell, Firebug Working Group

Firebug is a free tool and a Firefox extension that allows you to inspect, edit and debug website code and Document Object Model (DOM) and JavaScript within your browser.Before this developer use alert () function to find out what line the code breaks.

You can turn styles on or off or add styles on the fly.

01_firebug

Web Developer 

Author: Chris Pederick

Web developer extension found on both chrome and firefox it provides a toolkit for viewing, editing and debugging websites.It’s helpful for exploring and understanding large CSS files and projects. It gives the control over any site and provide us a visual representation of how a site is built on the front end.”

02_web_developer_toolbar

YSlow

Author: Yahoo

YSlow is an extension for the Mozilla Firefox browser.It simply allows you to inspect the elements in detail which help you to improve your website performance and recommends solutions.

03_yslow

ColorZilla

Author: Alex Sirota, Isoart Labs

Colorzilla is a useful extension for firefox which identifies what colors are used on a Web page and what looks good for your web design, it creates a palette for you and lets you adjust the colors or copy/paste them elsewhere.

12_colorzilla

Internet Explorer Web Developer Toolbar

Author: Microsoft

IE web developer toolbar gives you access to many helpful options by editing the Web page’s DOM and HTML directly in the browser, for setting breakpoints, seeing the call stack and exploring the other Web page components.

04_ie_web_developer_toolbar

Fiddler Web Debugger 

Author: Telerik / Fiddler Web Debugger

Fiddler is a powerful Internet Explorer extension. It will help you to know exactly what happens when a client requests a Web page, upon start, Fiddler checks automatically for new versions.

05_fiddler

HttpWatch

Author: Simtec Limited

HttpWatch is another HTTP traffic viewer and debugger for Firefox and Internet Explorer.

8631_1

Conclusion

We have discussed some powerful in-browser tools that may help you to make your Web development process easy. With them, we can solve many web development problems we are facing today. Some are specific to particular Web technologies find out what’s your favorite web development tool, let us know in the comments section.

Creative Use of Video in Web Design: Background Videos

A stunning video or animation in the background have become an integral part of any web design. Ever since the designer were given the ability to add such video content in HTML5.These dynamic video has taken the place of static images in the website background. As it has become the best way to attract visitor’s attention also improves the time they spend on the site.As a result lead to more interaction between the website and the user.

We all know the video has been one of the powerful and efficient tools of visual presentation. You can direct a right message to a large number of audience. Using videos in the background or in a header is the excellent way to present a product or brand. Therefore creating professional videos are becoming popular in web design industry.

It gives you an opportunity to show off your skills by telling a unique story and conveying the right message. Here one of the important points to consider is the performance of such videos which largely depend on the user’s internet connection speed.

However they work well in portfolio websites, fashion websites and promotional campaigns.We have discovered some great websites with full-size video background which will amaze you. Also, see how they use the type of content to create such visually appealing and beautiful videos.
Fashion Websites: Clothes, Shoes, Jewellery

Uniqlock

Uniqlock is an advertising campaign for Uniqlo, one of Japan’s largest casual wear retailers. By including the video dance routines, time-signal music and clock utilities, the designer’s craft a 24/7 unique web development experience using the background video technique. It won one of six Black Pencils in the online advertising category at the D&AD Awards 2008 in London.

Uniqlock in Background Video Showcase

Gudrun og Gudrun

Gudrun og Gudrun is a hand-made clothing brand The designers use background video throughout the website to showcase their fashion show. The site is a bit older than others, yet still interesting and attractive.

Gudrun og Gudrun in Background Video Showcase

Valentino

Valentino is an international clothing company based in Italy. Although video elements play throughout the website, the home page does not automatically start a big video until you select one navigation item. The design is cleaner, user-friendly, better.

Valentino in Background Video Showcase

Random Dance

Random Dance, an internationally renowned British dance company, puts background video on full display on its home page. As you move deeper in, a smaller video player is used, which fits the flow and structure of the website.

Random Dance in Background Video Showcase

I Surf Because

The “I Surf Because” site is about the digital marketing campaign. Here, it uses a background video on the home page to push its campaign. An interesting point here is sometimes videos pause, show a tagline allowing for a comfortable reading and then continue again.

I Surf Because in Background Video Showcase

Beverages and Food Websites

LemonAid

LemonAid is an organic drink made entirely of a few organic, fair-trade ingredients, and it uses a retro-styled background video to tell everyone what it’s all about. the concept is fairly simple, and the implementation works well for the product. One major drawback: the font size is way too small.

LemonAid in Background Video Showcase

You might have noticed that the article is not about the technicalities of those cross-browser video backgrounds. What’s your opinion of video background in web design? Share with us in the comments section.

A Journey through Beautiful Typography in Web Design

The first impression is the last impression, your typography can improve user experience a lot because before a user read any word or clicked a button, an impression about your company has already made in their mind. It has a potential to tell a story behind the website and what you are about. Basically, the personality of your website or a way of communication between you and a user. You need to realize- what do you want to convey to a user? What do you want them to experience when the page loads?

Typography is defined as the art and technique that make the written language more readable. The typeface you used will determine how people respond to your website.

In this article, we will present websites that have established their brand by the typography to engage the user. Keep in mind, a good web typography is not only about the visual appearance but also the speed and performance of your web design. Let’s have a look.

Playful

The look of the website in not just about the typeface but the way it changes the process of communication. You would usually see axial typography on printed posters, which can be effective. On this website, the font choice is simple but the best part is the background pattern, which directs the movement of the user’s head from side to side as they read the text.

This-is-playful_tiny.png

Atelier

The website gives a dynamic feel, created by the different elements in it. The name Atelier” means “a workshop or a studio” and it is in a bold, aggressive yet elegant typeface, setting the tone for the design. The rhythm for the website established by the diagonal lines and the running slideshows grabs your attention. However, the main background image  is large 2560 x 5330 pixel, a central graphic which is 2.4MB in size.

Atelier_tiny

Cirq

The website is in the old-style design yet looks modern and updated. The website is for a vineyard and hence lived up to its vintage feel with new Technology for graphics. It is interesting to see how the shadow behind “Russian River” moves with your mouse and the text is embedded as images.

cirq_tiny

Max Di Capua

The layout and typography rely on modern sensibilities. The front page is sparse, with sans serif fonts which are easy to navigate and read. The typography is simple and widely spaced. However, this allows the design to breathe. The page design is responsive to the use of overlapping objects and placeholders.

8Ex9Jkx0NquA6wWEU0E_vTl72eJkfbmt4t8yenImKBVvK0kTmF0xjctABnaLJIm9.jpg

I Shot Him

I Shot Him delivers photographed welcome message, this website is the way to see the innovative use of the design elements, although the home page is not as interactive but the personality of the web design studio has depth and texture that reinforces a creative energy. This coupled with the hand-painted signs, and retro graphic style, interesting navigation, hover effect makes it visually very strong.

c3388c81f5339c79970c6943ec72ba40

Rijksmuseum

This site renders the beautiful photographs of the museum’s contents.The name Rijksmuseum seem larger than life and rich in typography. The main categories are interesting with their unique innovative design. The page size is less than 1MB and is well optimized.

Rijks-Museum_tiny

Conclusion 

The journey is not about what you want to say but how you say it. Depending on your objectives, you can experiment more and get creative with these different typefaces. We can be playful with the large letters, or get quirky and unique with handwritten type. Keep in mind, choose a typeface which is readable because there’s no use in showing off type that no one can read. Type can improve your whole designing experience when sets rhythm and creates an atmosphere.

It’s easy to attract your targeted users with large Retina-ready background images. But speed and performance of a website are also very important factor as Custom Web fonts can slow down loading times, finally, if you’d like to explore more interesting websites with a heavy focus on typography

iMediaDesigns is a full-service web design and development digital agency that helps the brand create unique identity and successful marketing campaigns.

 

 

Boost Your Mobile E-Commerce Sales with Mobile Design Patterns

mobile ecommerce design

When people shop on their mobile phones they expect an experience similar to or better than the one at a physical store.

As more and more people are using smartphones for accessing the web for activities like browsing their favorite sites, banking, playing games, shopping, and purchasing. As a designer, we need to create mobile optimized sites to attract as many users as we wanted to shop for our products or services. Also, if your site is not mobile-friendly, Google’s search engine ranking will suffer.

If you want more traffic or boost sales for your e-commerce store you must adopt these design patterns or techniques to meet the expectations and improve your site’s functionality. The Recent research stated that people are 67% more likely to convert if a website they’ve reached on their phone is mobile-friendly.

In this article, we’ll look at some design patterns and web development approaches used for mobile e-commerce functionality, includes the following:

• Home pages,
• Site-wide navigation,
• Suggested search,
• Search results,
• Search filtering and sorting,
• Product pages,
• Photo galleries,
• Shopping carts,
• Checking out with an account or as a guest,
• Forms.

Homepages

Design your home page with less textual content and help your customers to find what they are looking for. Display the promotions or discounts you offer. Single column pattern displaying products, a list of links to specific website areas, availability of search options are common design patterns that work favorably.

Navigation

Though there are several ways to design the menu but having navigation menus in the header section to easily move from one part of the site to other without having to return to the home page. Many large e-commerce websites balance the visual design of the navigation with the information displayed on the website.

Suggested search

Suggested search or you can say autocomplete display the potential results as soon as a shopper has typed their query for this you can use the auto-suggest a pattern that depends on the search engine technology.

Search results

There are two most commonly used pattern on mobile e-commerce websites table display and grid display. You can also allow shoppers to switch between the two views.

Sorting results

Common interface patterns for sorting are buttons and <select> menus.

Filtering Results

This enables the users to filter their results based on one or more attributes, like color, brand, and size. Common interface patterns for displaying filtering options are <select>menus, drop-down lists, and accordion displays.

Product pages

Pages where you can showcase all of your products in detail. It includes two approaches one long page showing all products with information or a page with a collection of patterns such as accordions, tabs, and photo galleries.

Shopping Cart

Use table pattern for shopping cart products. Also, offer other functionality, such as, to remove or add products, to save a product to a favorites or wish list, apply coupons, change the shipping address and so on.

Checkout

Limiting the initial checkout screen to two choices could improve conversions.

Conclusion

Due to the increase in internet sales, e-commerce store owners are continuously working on improving their online store functionality or creating a mobile optimized website design as consumers are more willing to purchase from the site which is mobile-friendly.
You can choose these design patterns for your e-commerce website. Or you can install google analytics to analyze your customer’s behavior to boost your sales and in a way your brand image.

Useful Ideas And Guidelines For Good Web Form Design

The input form is the main element for any website. It represents the conversion point between user and customer or you can say success or failure. That is why designers spend their quality time to these contact forms and put efforts into bringing users to sign-up.

These web forms are part of your web design process. Various techniques and elements can be used in Web forms to turn into successful conversion points. In this article, we’ll present some interesting examples and useful guidelines for Web form design.

One quality that almost always helps is a bit of quirkiness and fun. We also engaged in design and development of  unique web forms that can make the whole process a bit more enjoyable and human.

JARAD JOHNSON 

Jarad Johnson‘s contact form somewhat looks like a post card. The visual appearance of the form makes it stand out from the usual generic forms.

11jarad

RED TIKI 

Red Tiki’s uncommon look represent the company’s brand and identity. From the frame motif to the wooden character, this form looks nice and approachable. Little phrases like “This lovely form” and “We’re always keen to lend an ear” are fantastic ways to make the company more relatable.

3red

 APPLICOM 

Applicom’s form has a clean and professional look. Styling the form like a letter — with a stamp, subtle paper texture, striped edge and handwritten addressee name, it demonstrates a certain level of personality and care.

5applic (1)

SOPHIE HARDACH 

Sophie Hardach‘s form is another example of a post card idea implemented in a contact form. The input fields are a bit clearer than one would think, yet the “Submit”-button is a bit more difficult to find. The form is accessible. Excellent work!

20sophie

TWO PAPERDOLLS 

Two Paperdolls  contact form looks messy. However, the form fits wonderfully to the overall design of the page which is a “We Are Hiring” page for designers with a strong focus on typography.

10twopaper

KONTAIN 

Kontain uses a different kind of a date picker for letting users pick the date for the form. The designers have arranged the dates in four rows rather than displaying them all vertically. A nice idea for reducing the horizontal scrolling for the users.

16-1kontain

WOPATA

Wopata‘s slider for the timeframe in their contact form is much different from the generic sliders, select menus and radio buttons.

17wopata.jpg

IDYLLIC CREATIVE

Idyllic Creative‘s contact form is simple yet beautiful. Another example of a design agency which integrated a character from their work in their contact form.

ae05ee0b01252dfe550f8bca3a3b9ef0

DITIO 

They designed sign up form and a contact form in a hidden sidebar box. Once a trigger button “Inschrijven” is clicked, users can sign-up for their account and even upload a CV.

3ditio.jpg

Conclusion 

The article covers some simple yet best examples that you can use to create web forms for business websites. But to create a unique and innovative web form design you need to spend some extra time on your website or analyzing the other technical approaches that are not hard to implement and will lead you to much higher conversion rates.

USEFUL SOURCES 

 

 

 

 

 

A little journey through Small and Big E-commerce Websites

As eCommerce is growing enormously from past few years. Both small and big eCommerce business owners are trying their best to give best possible experience to users. For this most business owners are willing to hire a designer and a Web developer to help them create the perfect eCommerce site.

Online shopping has become a convenient way to buy anything without any fuss. But remember people don’t spend their money online easily or it can be time-consuming and unpleasant.You need to find a way to be useful or stand out your web design from the rest. Here we will explore some eCommerce websites website that creates pleasant online shopping experiences.

Interesting E-Commerce Websites

Bonobos

Bonobos’ shopping experience is smooth. The design is elegant and clean. Good typography and use of subtle colors help us focus on the products and features. When a new item is added to the cart, a sliding sidebar on the right, directing customers to either keep shopping or check out. And the most important thing is the favicon – a bananas icon!

bonobos-opt

 

 

 

 

 

 

 

 

Martina Sperl

Martina Sperl’s website features polished photography of her products, with a simple navigation panel fixed on the right side of the page. The bold hover effect shows the item number and price boldly in a large sans-serif typeface. You can also view detail and get a 3-D view of the furniture. You can click on the “heart” icon to express your love for a product. Powered by WordPress.

Martinasperl

MadeForFun

Well, this online shop could be made for fun, however, quite snappy indeed. You can quickly customize each product with features displayed using an accordion pattern. The shop has rainbow-alike horizontal lines which still fit quite well into the design.

madeforfunmadesimo-opt
Indigo

Indigo’s site is a great example for those who have a relatively large inventory .they can have a quite nice user experience. Though navigation in the sidebar looks interesting, present at the bottom of each product page. As you add an item to the cart, the item is visually added to the shopping cart in the bar. The best part is it provides a discount if you are willing to invest some time into creating an account on the page.

joyandwonder-opt

Walmart

Walmart’s main navigation has been hidden behind the “Shop All. The reviews of each item can be rated as being helpful or not quite helpful. As an item is added to the cart, a lightbox appears directing customers to proceed to the checkout. The checkout is well-designed across resolutions, informative architecture, good layout, and good responsive redesign.

walmart-opt

Moomin

Sometimes it’s perfectly enough to provide a consistent visual style that guides the customers through the checkout. Since there aren’t many products in the shop, each item is prominently highlighted.

moomin-opt

EvyiEvyi

Here shopping cart and navigation is on the left which is great. Because the eye follows the top left to right pattern, making it more natural for users to keep track of the items in their cart.

Banana Cafe

The website has crazy 3-D hover effects across the entire shopping experience. The blocks rotate in different directions. The audio and video in the background complement the overall functionality of the site.The hover effects display a number that you would use in the contact form at the bottom of the page,

Conclusion 

You can also explore some other interesting online stores like Sew, Big Cartel, Greats, Le Col De Claudine, Orlando, Indochino and so on. Being a part of web development company, you need to create a store your users feel as comfortable as possible. We know spending hard earned money is difficult.It is important to improve overall shopping experience, latest design/UX techniques, quick checkout process, product description, good typography etc. to convert leads into sales. How can you optimize your checkout process? Let us discuss in the comments!

Dear Web User- Please Upgrade Your Browser

browsers

We all are aware of the most common tasks we perform on the World Wide Web like emailing. Shopping, Social networking. Reading. Finding directions. Banking etc. We do these things every single week or some people perform on a daily basis.

As a web designer, I want my user to have the best experience on the web. We at iMediadesigns, researching the standards and practices that we know will make your experience on the Web outstanding.But may be the browser you are using limiting your potential.so we are here to help you improving your experience on the web.

Your Browser Is Too Old

We use a web browser to access the web pages on a system. Without a web browser, we cannot view or access any website. That is why we might installed some programs that help us to access those web pages.one of them is Internet explorer, a Web browser made by Microsoft.

Over the past 17 years, this has been the most popular Web browser, which is currently at version 9, and version 10 is supposed to be officially released sometime this year. But I am sure many of you are not using IE9—most Web users that use Microsoft’s browser are still using a less stable, insecure, slow version of IE.

So we suggest you upgrade to a different browser. To help you upgrade, we recommend some tips for you to consider.

But before we start to explore other browsers, here we will discuss reasons why older browsers like IE7 and IE8 aren’t as good.

What’s wrong with Old Browsers?

  • Old browsers (especially Internet Explorer versions 6, 7, and 8) are less stable, and much more vulnerable to viruses, spyware, malware, and other security issues.
  • OLD BROWSERS ARE SLOW AND MORE LIKELY TO CRASH

Second, they are very slow. As Web page has to perform a number of different tasks to improve the website functionality. Old browsers do not perform these tasks with the same speed as new browsers. This may disturb your user experience and can sometimes cause your browser to crash or freeze.

  • OLD BROWSERS CAN’T DISPLAY MANY NEW WEBSITES

Third, is their display capabilities are very limited. For example, in an older browser, in order to show a simple animation, the person creating the website  needs a lot of extra programming code (called JavaScript) ultimately the page will take much longer to load, thus harming your experience on that website. New browsers support new Web technologies (like HTML5 and CSS3).

  • Fourth, Websites will neither look nor function in the same way in old browsers like IE8.

New Browser Options

Now that you understand why it’s highly recommended to upgrade an old browser, you can easily switch to one of these browsers.

Google Chrome

In May 2012, it has become the most popular browser in the world (compared to IE, all versions combined). Chrome was first released in 2008.

Mozilla Firefox

Firefox has been the main competitor to Internet Explorer since the mid-2000’s.

Opera

Opera isn’t used as much, but it has been around since the mid-90s. Opera has always been at the forefront of browser innovation and supports many of the latest technologies and features that make websites faster and more feature-rich.

Apple’s Safari
This is the same browser that’s commonly used on iPhones and iPads. Safari’s features are very similar to Google’s Chrome and has been around since 2003.

Why Are New Browsers Better?

The browsers listed above have a number of advantages over older browsers, including:

  • Far fewer instances of crashing or freezing.
  • Much more secure from a virus, malware, and browser-hijacking attacks.
  • Much faster page-loading.
  • Larger page-viewing area.
  • Unlike IE9 and the upcoming IE10, they can be installed on Windows XP.
  • Automatically update to the latest version, or will notify you to download an update.
  • A variety of useful optional plugins and add-ons that add extra features to improve Web browsing.

    Conclusion

    There are many reasons to upgrade your old browser so start upgrading your browser try something new which is easy to install and improve web design functionality on the web.it will definitely make your experience safer, faster, and much more beautiful than on old browsers.

iMediadesigns is a reputed web design and development agency placed at Toronto that helps the brand create unique identity and successful marketing campaigns.