Most web page layouts today are either fixed width or fluid width. And to be honest, most rich layouts are fixed width. The reason is that fluid widths are more difficult to create and less predictable when it comes to how text and graphics will flow. A good fluid design is not easy and almost always imperfect.
Responsive Web Design is more work but renders more predictably than fluid designs. The truth of the matter is that responsive web design is still a significant amount of work compared to the fixed width layouts.
I recently completed a website design for a not-for-profit. The design called for branding, sponsorship recognition, information updates, photos, and basic legal corporate content.
Here is a quick breakdown of work estimates:
||Fixed Width Layout
|Logo and graphics work
||12 hours (and a few seconds)
|Conversion to CMS theme
Nearly all of the extra time was dealing with spacing and layout within the CSS. Even thought I started with the Skeleton Boilerplate, and I used jQuery Cycle to rotate through the sponsors, there was a tremendous amount of work.
In nearly all of the cases, the work was getting all of the graphics to flow to the right places under all of the cases – large browser windows, tablets, and smartphones with rotation between landscape and portrait.
The photo strip was just as bit an issue. The subtle different to the sponsors strip is the edge-to-edge display of the sponsors. The photo strip falls within the content area and requires the edge gutters.
A designer who has done fixed width layouts and has read about responsive design would think it possible to use any of the various Grid 960 layouts. The problem is many templates are coded to 16 columns (Skeleton included). Given the various layouts used for this project – 2 column, 3 column, 4 column, and 6 columns, a twelve column grid was better. The need to support gutters and no-gutters means most elements were duplicated with different values. Adding edge-to-edge support adds yet more wrinkles and thus more CSS.
The solution to this type of project is using LESS or one of the other CSS pre-processor languages that can be compiled.
Is Responsive Web Design worth it ? That depends. If you don’t have mobile users, then it may not be a worthwhile venture. Just don’t count on not having mobile users:
"access to the Web through mobile devices has nearly doubled every year since 2009" – Dan Graziano, BGR
- and –
"Mobile web browsing will become more popular than web browsing on desktops in 2014" – Mary Meeker, Morgan Stanley
The good news is that after your first Responsive Design, you have a pretty full tool box and experience.