Apr 11

As technology in the web design industry continues to progress at an exponential rate, the relatively slow-paced evolution of HTML throughout the years has always been a frustration point for many designers. It wasn’t long ago that we said goodbye to tables within tables and now that we’re starting to get comfortable with xHTML and CSS, we’re faced with the tough challenge of designing for desktops, laptops, tablets and smartphones. Seriously, how many different screen resolutions can they come up with? Oh, and there’s also Retina Display… ugh *Brain Explodes*

screens1

It has simply become unpractical to design for the 960-grid since users are increasingly using mobile devices in lieu of traditional desktops.

Thankfully though, with innovations in web design finally starting to evolve more rapidly, we can now address UX issues across many devices, input modes, and browsers using a new layout technique called “Responsive Web Design” (RWD). RWD is the method of delivering the same website content across various digital platforms, with different user experiences, based off of their respective screen resolutions. Using a combination of fluid CSS & Media Queries, RWD creates flexible solutions that arise when managing different instances of a website. In essence, a site that is responsive senses the size of the display its being accessed from and adjusts the layout accordingly.

Understanding Fixed vs. Fluid

The basis of all responsive layouts begins with a flexible foundation. Um… ok let me back up for a minute. To wrap your head around that concept lets first look at a fixed layout. Fixed layouts are websites that use explicit pixel widths for measurement. In the example below, you’ll notice that when the browser window is resized past the outermost width of the website, a scroll bar appears as the width of the website stays intact.

Now, in order to make this page layout “flexible,” we use CSS to we will convert all explicit pixel widths into equivalent percentages. Percentages values differ from pixel values since they are reliant upon the width of its outer containing element. With percentage values in place, resizing the browser window now creates a fluid layout that scales to the window.

You’ll notice in the above video that as the browser resized, the layout of the elements not only resized, but shifted position. This was accomplished using a CSS property called Media Query.

What are Media Queries?

Think of a Media Query as a break point where a layout change in the fluid design occurs. These break points occur at spots where our designs would be rendered on different viewports. Ideally, each website would have 4 break points; mobile phone view, tablet view, small screen/laptop view, & wide screen view. Using media queries, you can call upon CSS properties that were created specifically for the users device and screen size. With RWD, you can easily change the location and size of the entire page layout, including image sizes and navigation placement. This is super helpful when I’m trying to navigate through a website on my smartphone using these manly fingers of mine.

The Smashing Magazine website is a good example of using RWD to adjust site layout and navigation, making this website very user friendly.

smashing3(Click the image to view the site. Don’t be afraid to drag your browser different sizes!)

It’s a Win-Win Scenario

Aside from covering all screen sizes on desktops, tablets and mobile devices, RWD both degrades gracefully for older versions of Internet browsers and is future proof for any newer ones. Having all these essential characteristics, RWD is beginning to see wide spread adoption, including major outlets such as
The Boston Globe and Sony.

So is responsive web design right for everyone? Maybe not yet, but as we continue to use more and more devices with the ability to access the web, one can only hope that responsive web design will become a standard for future websites.

Leave a Reply

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

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>

Current day month ye@r *