In an increasingly mobile world, the modern website is akin to an actor trying to play many parts, for many audiences. Website are no longer just a fixed or full-width box on one device, but now need to accomodate several different screen and device sizes, in addition to at least 4 different traditional web browsers. To address this, CSS2 and CSS3 have “Style rules” which allow developers to accomodate and change the website’s look and feel according to which size the monitor is (or what type of device screen it is).
The first and foremost consideration for responsive design is width. The two main options for website widths apply to responsive design – you can either use a fixed width (usually the 960px standard) or a full-width design intended to accomodate orientation and device differences. Note – if you choose to go with the fixed width route, you may have to work with the “viewport” meta tag to get it to behave appropriately across some mobile devices.
In terms of your overall layout on a mobile device, there may not be a whole lot of changes unless you want different UI techniques to be targeted towards mobile users. However, you may want to consider each area of your layout in terms of mobile use. For instance – that awesome banner header may read more like ‘fine print’ when it’s scaled down to fit the horizontal width of an iPhone. Consider using your “@media” style rules to substitute a taller, skinnier top header.
For sidebars, try making their containers full width, then work in a “clear:both;” to make the sidebar wrap above or below the adjoining content area.
In the glitz and glamor of a great design, one thing that occasionally gets left out of the thought processes is file size. This is especially true with responsive or mobile designs, where your mobile users are going to be much more sensitive about the full size of each rendered web page. To address this, one idea might be to remove unnecessary background images using “background-image:none” (or “background:none” to remove the background color as well) or switch to smaller-filesize background images.
Probably the trickiest part of responsive design is dealing with the menu. Most drop-down menus won’t be friendly to touch-screen users, even if they do work as expected. Taking a look at existing responsive and mobile-friendly designs, you’ll see a common trend – throwing out the existing menu type, and replacing it with either a “picker” or a simplified “tabbed” menu. While this can be somewhat of a patent mindfield, try looking at sliders and “picker” UI examples – as a quick check shows dozens if not hundreds of differnet slider and UI control projects. On a final note, however – make sure to pick a relatively small snippet for the menu on mobile devices. Some animation and effects libraries normally used can be over 100k alone, so it can certainly add up and pile on extra seconds for 3G users.
On a non-development note: be careful which mobile technologies you use in your development – especially if it’s going to be part of a commercial development or product. Ongoing patent battles between some of the larger mobile device makers have called into question common navigation techniques such as the menu replacement as possibly falling under some of their patents. When in doubt, consult a legal professional.
In conclusion, make sure to consider even the finer points when building your website to support traditional web browsers and mobile devices. A little forethought can go a long way towards giving your users the best possible browsing experience, even with relatively simple changes.
By Ryan Bishop, Front-end web developer at Austin Themes