From Non-responsive to Responsive
Making your website device-neutral is the only way to get ahead in the multi-screen world
Have you ever struggled to access your website on your smart phone?
Turning the screen this way and that, expanding the fonts and searching for the right buttons to hit?
Was it a frustrating experience?
If the answer is “yes”, this is exactly how your users feel when they land at your web property because the design, in techno-jargon is non-responsive.
Your website is the face of your business. It must appear nice to all your visitors, irrespective of the device they use.
The only way to get around this one is to get responsive.
A responsive design will analyze the screen size, the platform and the orientation of the device used and adapt itself to the environment and the user behavior. Such a website would be intelligent enough to adjust its content to fit any window size perfectly.
A responsive web design is not all about technicalities. It involves a vertical stacked design, concise copywriting and an easy user experience. With so many people using smart phones for a variety of functions and mobile traffic taking over 50% of the internet traffic, making your website design responsive is no more a luxury upgrade. It’s a vital component. A necessity. What’s more, you will get a better Google rank, if you go responsive.
Coming up with a perfect responsive design for your website is never a piece of cake because there just isn’t any perfect responsive web design. There are so many parameters to consider, including screen size, the content that your users want to read and the kind of experience you want to provide to your users. You might wish to go through a few examples of responsive websites:
Microsoft: Use any device to browse through this website and you will find it perfectly designed for that device. The widescreen design is the main plus point of Microsoft’s website.
Disney: Disney is quite a complicated website and it took a lot to make its design responsive. The end result however depicted the Disney Universe in a rich and a vivid way that seemed absolutely fantastic. You will find everything Disney here including movies, TV, radio and games. You can find your favorite Disney places, people and things very easily, all in one spot. There are public forums, message boards and chat options too.
Starbucks: Not only does Starbucks website have a responsive design, it has also launched its very own online style guide. This clearly describes their grid framework, blocks and regions with proper examples under each. This style guide would be quite helpful if you want to come up with a responsive design for your website.
GE: GE has an intellectually-stimulating and aesthetically-pleasing responsive design for its website. There is a feature on this website called “Illustrating Imagination” on which GE has put up quotes from the children of GE employees. Their quotes on what they feel their parents do at work are visualized into a few pictures that seem absolutely stunning.
Google Maps: Almost everybody would have used Google Maps at some time or the other, the unique feature of this website is that it’s absolutely the same as their mobile app in functionality and speed too.
Squarespace blog: Squarespace blog has given a whole new meaning to online publishing. There is no overcrowding here. The posts are presented, one at a time. You will feel as though you are reading a book and it is very easy to navigate between the posts.
Walmart: Going responsive is the best decision Walmart ever made for its website. Also, by improving the speed of its website, Walmart improved its conversions and doubled its mobile orders.
Although there is no text book approach to designing a responsive website here are a few tips to get the act right:
– Plan well and put it on paper
– Use prototyping software such as Adobe Edge Reflow to create your design. This will help you in using media queries, setting breakpoints within your program and come up with layout designs that work well for different devices. You can then copy this CSS into another HTML editor to make the final changes
– Use mobile-first strategy. later, you can work on the design for tablets and desktops. Focus on getting your logo and your text fonts right.
– Pay special attention to navigation. A simple menu should include just two or three navigational menus. But if you have more, try including them in a drop-down menu that is embedded into a single icon. You can even use the icon-menu style that the GoMobi site has used.
– Get the look and feel of your site first and then work on your code.
– Use large buttons while designing the layout for a mobile site.
– Keep the design simple yet functional
– Make use of many software programs if need be
– When using images use optimized ones for your layout. JPEG, PNG-8 and GIF formats should do good; but avoid PNG images as far as possible as this will bloat your file sizes
– Align your image dimensions and use exact measurements for images
– Make it easy to include updates
– Limit your text especially on mobile devices
– Go with the Google Design Standards
– When using APIs always test your templates and code snippets
– Try using existing themes and customizing them
– Keep your design clean with only things that are necessary. This will improve the speed of your website.
Here is more tips on how to create a responsive design for your website.
Every little detail matters. You have to re-imagine the way you want to deliver your content. The biggest challenge is to deliver the perfect content to the right user on the preferred device within the right frame of time. You will need to focus on how and where you want to place your content. Make sure your design is not cluttered; yet the user gets to read all that he would want to without having to zoom-in.
