Responsive Web Design & Mobile Devices
Tuesday, 09 October 2012
 – Matt Krabbenhoft

We need a mobile website! Now what? Do we build a purpose-built mobile site? There has to be a better way.

Smart phones and mobile devices like the Apple iPad are changing the way designers think about web site design. We now have more form factors and methods of input to contend with than ever before. Websites need to be aware of their environment to make the most of the display space and still provide a valuable user experience. This, in a nutshell, is the definition of responsive web design.

I like to think of it as "one website to rule them all." Now that desktop and laptop computers aren't the only devices with Web browsers, site owners have an important decision to make – create separate websites for desktop computers and mobile devices OR create a single site that uses all the same content but offers it in different formats. Both have their advantages, but maintaining two separate sites can quickly become a nightmare. The lazy website manager in me immediately wants to deploy once to many devices. Let the website do all the work. And that's the way it should be.

There are several techniques that are combined to develop a responsive website design. First, designers must consider the underpinnings of the site. In the past, graphic designers making the transition from print media to onscreen media immediately seized on HTML tables as a way to lock a design into a rigid grid with exact proportions. The problem is that this approach to design quickly breaks down when faced with vastly different display sizes. Modern HTML best practices avoid tables for anything but data - the way tables were meant to be used. Instead, a based design offers a more fluid and malleable layout, one that can easily be modified on the fly by applying a different set of formatting rules. Web designers can easily apply CSS3 rules based on media queries to completely rearrange screen elements and load completely different graphics for small screens. And, voila! A responsive design is born.

Secondly, there is the matter of content. Not everything that fits on a larger display will fit on a smaller, handheld screen. Now, the site owner must make some decisions about what is most important to their business and still convey the same information and usability to the end-user. Well, it can't. There just isn't room. The only choice for the site owner is to simplify. Large picture book slide shows won't fly. Large amounts of text won't cut it. No, simple lists with short titles and short descriptions are the rule of the day. How you resolve this will depend on your content and what's important to your business, but it can be done and done well. Just look at large news and community sites like CNN, Slashdot or BuzzFeed.

But Boldface, you say, your website isn't responsive! Well, the cobbler's children have no shoes and the tailor's children are dressed in rags. But, check back soon, we are working on putting our money where our mouth is. Boldfaceinc.com will soon feature responsive design.

Deploying once is the best approach to designing and maintaining any web site. Responsive web site design is the future of things to come.

 

 

Tags


Powered by Easytagcloud v2.1

Web Hosting Available

Get a domain name for only $3.99 with the purchase of one year of web hosting or any other non-domain purchase.

Get Started »