Approaching Responsive Design Responsibly

Image of a laptop, tablet and smartphone showing the same contentOne thing is certain about the Web – change is imminent and constant. As Web strategists, writers, designers, and developers, we’re used to this reality. That’s why when the Web throws yet another curveball, we’re prepared to react. The latest curveball has come with a shift in how people interact with online content – their migration to mobile devices.

Back in 2009, Morgan Stanley published a 424-page diatribe titled, The Mobile Internet Report, which declared, “More users may connect to the Internet via mobile devices than desktop PCs within five years.” Smart people, those Morgan Stanley folks. Midway through 2012, we’ve already seen an explosion in the adoption of mobile devices.

Studies indicate that some users are leaving their desktop machines for a mobile device and not turning back. For those users, it appears their mobile device may be the only computer they need. Other users strike a balance between their mobile and desktop devices.

As designers, we have been watching this trend for several years, and it’s clear we’re no longer designing for one on-screen experience. Instead we have to be responsive to the needs of all users, across all devices, ranging from extra-large to small – from vertical to horizontal. And websites need to adapt to these varying screen resolutions, aspect ratios and user inputs.

The uncontrollable nature of mobile computing has challenges that go along with it. Imagine you are a painter. You take many things into consideration as you approach your latest work – design principles and elements. Color. Emphasis. Contrast. Line. And perhaps most important, composition.

Now imagine cutting your new work into pieces and issuing those pieces to your fans allowing them to be reassembled in any way they see fit. One of your fans wants a horizontal piece to hang over a mantle. Another wants a vertical piece to place next to a doorway. You get the idea. Designing a site so it can be “cut apart” and reassembled in a number of ways is how we’re reacting to the shift in mobile usage. It’s called responsive design.

With media queries embedded in CSS, we can alter the placement of images. We can introduce new, alternate layouts tuned to each resolution range. And we can fine tune navigation so it’s more prominent in a widescreen view, or reposition it above a logo on smaller displays.

We can also fine-tune elements to create a more optimized user experience regardless of the device type. We can increase the target area on links for smaller screens. We can selectively show or hide elements that might enhance page navigation. We can even practice responsive typesetting – stripping down gorgeous fonts in favor of system defaults to minimize the amount of data needed to display the site properly – saving users valuable kilobytes in a world where wireless data plans are ever-increasing in price.

Geonetric is fully immersed in responsive design solutions. And we discuss this in further detail during our webinar, Everything You Know About Mobile is Wrong.

Plusone Twitter Facebook Email Stumbleupon Pinterest Linkedin Digg Delicious Reddit

Leave a Reply

Your email address will not be published. Required fields are marked *

9 − four =

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>