Responsive Web Design on Mobile Devices

/

iPadThe Future of the Mobile Web

More people will be browsing the web on mobile devices than desktops in 2014. We’ve said it before and it’s worth repeating. This is a huge movement. This also poses a tricky challenge for businesses and web developers alike – how to cater for all the different screen sizes?

For several years, the standard screen size was 800 pixels wide, and then it was 1000. Deciding what you saw ‘above the fold’ (or without scrolling), was an easy conversation to have with a client, but that discussion is now obsolete. Now screens vary anywhere from 480 to over 2,000 pixels wide.

Contemporary web design now needs to be adaptable, both visually and technically to the myriad devices we use to view it. It’s no longer acceptable to have text sizes that are better suited to a grain of rice or enormous images that require the users to scroll sideways to find the content.

Responsive Web Design

Whilst not entirely new, the buzz around ‘Responsive Web Design’ was first introduced in 2010 by Ethan Marcotte who describes the approach as

“The creation of a site that is able to adapt to the context in which it is being viewed.”

In simplified terms it means that the width of all the elements within a web layout become a percentage of the overall page and scale accordingly.

Responsive Web Design – Under the Hood

Most modern websites today are based on a grid system that divides the page proportionally – an age-old graphic design technique. 960 pixels wide has become the standard because it’s divisible so many different ways and suits most screens. A single column of 960 pixels can be divided into quarters, thirds, and sixths or right down to 12 columns of 80 pixels if necessary.

Responsive Web Design allows this grid to reduce and adapt in a way that doesn’t break the layout and presents the correct content in the appropriate context on the device. Four columns on a large screen become two on an iPad and one on an iPhone, for example. The text is always readable and the images are proportionally sized.

Another great example is how responsive design deals with menus and navigational elements. Clicking menu items on a small screen can be almost impossible to touch without enlarging the screen. A responsive design turns menus into simple dropdowns that enlarge when selected. They take up very little real estate and are easy to control. And best of all it, happens automagically.

The Impact on Business

For those businesses preparing for a redesign, your timing is either perfect or slightly premature depending on your choice of content management system. For those that use WordPress or Joomla!, the news is good! There are now a number of responsive templates available that can be modified to suit your business.

Responsive design techniques set a few more rules around your creative scope, but you potentially avoid having to design and manage separate versions of your site for mobile, tablet and desktop.

Marketing on the web has always moved at a ferocious pace. All businesses can do is try to keep up. Now that you know about Responsive Web Design, you are ahead of the game, at least for a while. Responsive design is definitely the direction of the industry for the next 3-5 years and a cheap solution to our need to adapt.

References and Further Reading

http://mediaqueri.es/

http://ethanmarcotte.com/

http://designmodo.com/responsive-design-examples/

http://www.netmagazine.com/features/21-top-tools-responsive-web-design

Author:

Related Articles