Developers>
Most RWD critics come from the developers' community. This is surprising, but not very. Multiresolution design complexity adds to an everlasting tension between designers and developers. Implementing what the designer created in Photoshop is often a challenge for programmers, even without the necessity to make it fluidic and responsive. Besides that, RWD is a concept with no API or technical documentation to study. It introduces many problems, enough to mention responsive (adapting to resolution) images. The good news is that after two years of evolution we have some well-tested CSS frameworks, a growing number of JS libraries, and last but not least, responsive design principles, which are implemented in new versions of popular open-source content management platforms such as Drupal. In Drupal 8 there are several responsive elements. One of them is the Picture display formatter for image fields, being a Drupal way to implement the picture element proposal for HTML5, available at http://picture.responsiveimages.org/.
On the list of tools a responsive design developer may need, respond.js (available at https://github.com/scottjehl/Respond) takes first place, a lightweight script that enables responsive design in browsers that don't support CSS3 media queries.
If you need a conditional resource, loading another JavaScript Modernizr (available at http://modernizr.com/) can help you.
There are many responsive Boilerplates to help you get started quickly. HTML5 Boilerplate (available at www.html5boilerplate.com) is most often used and can be used as a starting point for almost every web project. It contains an HTML template with normalize.css that normalizes default stylesheets of various browsers, Modernizr script, and examples of best-practice server configuration files.
The base version is not a responsive CSS framework, as it doesn't impose on the developer any particular way to handle responsiveness, but you can also get it in two other flavors, Responsive or Bootstrap. Each of them proposes its own perspective on building the page structure. Responsive is a concept of three views and layout versions, mobile, intermediate, and large.
HTML5 Boilerplate Responsive features two columns and typographic settings optimized for readability
It is perfect for fast, simple projects that don't require a complex layout.
The Bootstrap version is a responsive framework based on a 12-column responsive grid. The 12-column internal structure of this version (and its possible applications) is explained in detail at http://getbootstrap.com/css/.
12 columns of default grid in HTML5 Boilerplate give some flexibility in planning the page
Twelve columns allow us to create more complex layouts, but still it is a rather rigid system. Most designers would not be happy to have a fixed column number, with widths and margins defined for them. During the last five years, many tools and frameworks aimed at creating all kinds of grids on the Web appeared; ZURB CSS Grid Builder available at http://www.zurb.com/playground/css-grid-builder and Gridulator available at http://gridulator.com/ to name just two. A more extensive list can be found at http://www.thegridsystem.org/categories/tools/.
As flexibility and speed in creating responsive grids becomes one of the key issues in the web design / web development workflow, Adobe is trying its best to keep this market segment under its wings. It is hard not to admit that their tools lead the race. Inside Dreamweaver CS6 one can use a two-step process to streamline, creating responsive layouts.
At the first step it is possible to set up grids for three resolutions, with any number of columns on each screen width.
On the created framework, one can place content blocks and adjust their placement for each of three screen resolutions by dragging their edges.
Generated code is based on HTML5 Boilerplate and can be manually tweaked. The Dreamweaver interface allows us to also build content blocks on a grid framework.
On 14 February 2013 Adobe released the public preview of a completely new tool: Edge Reflow (free at the time of writing this). Its sole purpose is to allow fast and easy creation of CSS and HTML for responsive layouts.
RWD evolution and experiments
Originally RWD consisted of three basic technologies used in a somewhat defined way, shown as follows:
- Fluid grids: Based on
%measurements - Flexible images: Scaled down with the CSS max-width trick
- Media queries made with philosophy Mobile First or Progressive Enhancement: That means code for the smallest screen was written first and then features for larger screens were added
The most important additions are the Modernizr and Respond.js libraries used in conjunction with a number of techniques to improve cross-browser compatibility.
Fluid grids should rather be named fluid and responsive in the original version. What is the difference? A fluid grid works like an old-fashioned fluid layout, that is, the columns' widths change when the browser window's width changes. A responsive grid responds to this change by changing the number of columns. In the original orthodox RWD concept, grids did both and the change was driven together by media queries and by the use of percentage values to set up layout.
For some people and projects this approach worked well but:
- Some were not happy with fluid columns and made "frameless grids" (available at http://framelessgrid.com/), a CSS grid system with columns of fixed width
- Some decided that it's better to use
emorrembased scaling to take the resolution out of the equation and made The Goldilocks Approach an HTML and CSS Boilerplate (available at http://goldilocksapproach.com/) - Some thought that breaking a grid into bricks instead of columns may be more funny and made Masonry (available at http://masonry.desandro.com/)
- Some (authors of this book among them) are happy to write their media queries by hand and adjust layout when it is necessary in a way required by the design
Last but not least RESS techniques emerged. Nobody really defined how RESS is supposed to work, besides that it couples RWD with Server Side components. A neat example of this kind of thinking is Adaptive Images (available at http://adaptive-images.com/), the PHP library that takes care of resizing images on the server. A similar solution was employed at Boston Globe, the huge news website being the flagship example of a complex RWD implementation.