Responsive Web Design – Does Your Site Still Look Good?

Responsive web design is quite simply the coding of a website in order that it presents itself in a different format, layout or scale depending on the available browser window on the device it is being viewed on. For example having sidebars vanish and reappear below the content, menus become easier to ‘click’ with a big finger on a small mobile screen and even images and fonts might adjust to fit the new screen size.

(Image credit: This book)

This provides a more polished user experience ensuring the site looks spacious on a large modern desktop screen but also scrolls nicely in one column on a narrow mobile phone, iPod or Tablet screen. Responsive design adapts to the space available not one technology or type of device; creating a ‘mobile’ site when 3G first launched allowed companies to adapt to the tiny devices available at the time but those sites are grossly inappropriate for a user with the latest devices with much higher resolutions and more screen space. As a consequence responsive design provides a site that users can enjoy now on most devices but will continue to adapt as devices improve and change so won’t need updating as often purely to make it ‘work on the new iPhone’.

Overall Strategies In Responsive Web Design

One of the first mobile browsers to try to tackle the screen size and bandwidth issues of smaller screened mobile devices was Opera Mini. If you have a suitable device I suggest downloading this application now so you can try it out on a few sites. You’ll quickly notice it attempts to optimize the site by stripping out much of the layout and presenting the content in one scrollable column of information. It’s not easy for this sort of automated browser to correctly understand the objectives of the designer of the full screen site and often too many sidebar items end up ahead of the content and the loss of design elements makes the site practical but very visually unappealing. This kind of problem solving is a symptom of a failure of design to keep up with technology rather than a view of the future of mobile web browsers.

Sites designed with various devices in mind using responsive design techniques will often take a similar approach presenting the site in one scrollable column. The difference is that the site will display beautifully and with links/content and sidebars rearranged in the optimal way rather than forcing users to struggle with a full size site (or worse strip out all your layout using a mini-browser!). This will be especially important if you are working on a viral seeding project and expect thousands of hits from dozens of different sizes and types of devices as your content spreads – conversion rates on sites that open beautifully on most devices and that are laid out exactly as you had optimised will be much, much higher.

The beauty of these techniques (some useful links exploring actual code and discussion are at the end of this article) is that they accommodate all the intermediate screen sizes as well. A good responsive content designer understands that a Netbook or Tablet user will want most of the features of a full sized PC user (such as a sidebar alongside content) but perhaps the two sidebar layout of the main full sized site needs to be adjusted into a one sidebar format.

The Little Details – Thinking About Menus, Photos and Video

The beauty of working with a responsive site is that content creators don’t need to worry about the size of a picture they insert failing to fit the site. Maximum widths for certain elements can be created allowing the picture to scale nicely to fit the smaller column available on a Tablet but display in it’s full beauty on a large desktop monitor.

One of the areas the best responsive sites excel in is the way their top menu works. You’ll see it size elegantly as the screen area is reduced from a full width one line top menu with lots of styles and drop downs to an elegant large, clear (and easy to select using a touch interface) menu on a couple of lines. This combination of sidebars moving to below the content, the menu and top area appearing formatted and styled appropriately for the screen size (and most likely interaction device – finger instead of a mouse!) and the ability of pictures to appear within the content and at the correct size gives users the feeling the site has been created with their device in mind. In fact a responsive site has been created with almost every device in mind and is very capable of adapting to them.

Some Further Viewing And Reading

http://css-tricks.com/video-screencasts/102-braindump-on-responsive-web-design/
http://www.w3schools.com/css/css_mediatypes.asp

Basic Example:

@media screen and (max-width: 600px) {
.
.
your css here will only apply to screens up to 600px
.
.
}