A blast from the past

The other day I came across an old blog post I had written for Functional Web about the trend towards responsive design. What I find amazing is that only 3 days ago I had to have a discussion about the topic of screen resolution and responsive design with a client and her soon to be “previous” web designer. So here it is again, back from the dead with a bit of update:

Screen resolution has gained a range: from 320px (cell phone) to 2400px or even higher. Users no longer just browse the web with desktop computers. Users use mobile phones, smaller note books, and all kinds of tablets to access the web. So the traditional fixed width design is dead in water now. Web design needs to adapt. The layout needs to be adjusted for specific displays resolutions and devices.

Below is the main structure of a layout that can easily do that. You got the “container” that wraps the “header”, “content”, “sidebar”, and “footer” together.

<div id="container">
<header id="header">
<menu>
<ul id="main-nav">
<li><a href="#">Home</a></li>
</ul>
</menu>
</header>
<div id="content">
<article>
blog post
</article>
</div>
<aside id="sidebar">
<section>
widget
</section>
</aside>
<footer id="footer">
footer
</footer>
</div>

We build the css based on a flexible grid and within that grid we’ll define the sizing of things for each device.

At the end of the day, it is still mighty painful but more necessary than ever.

HTML 5 Tips & Tricks

You don’t have to wrap your attributes in quotation marks if you don’t want to.  If you prefer a more structured document, by all means, stick with the quotes, otherwise ditch them.

<p class=someClass id=someId>Paragraph goes here.

or

<P class="someClass" id="someId">Paragraph goes here.

It is all the same.