date:17th May, 16 | by: Joe Karanka | views:
blog website ideas

The idea of Responsive Web Design, a term coined by Ethan Marcotte, is that our websites should adapt their layout and design to fit any device that chooses to display it. In his book, the aptly titled "Responsive Web Design", he outlines the three parts to a responsive website:

  1. A fluid grid
  2. Fluid images
  3. Media queries


Fluid Grids

One of the pillars of Responsive Web Design is the Fluid Grid. Essentially, it means that your grid, which was traditionally measured in pixels should now be thought of in terms of percent of the total page width. The actual calculated width of each column in a responsive web site changes every time the browser window changes size, and cannot be guaranteed to be the same across different devices. 

This is why you must use a grid when designing for Responsive Web Design. It is a necessity, not a nicety. You cannot create a responsive web site without a grid-based design; it's simply out of the question, it wouldn't work.

Knowing that your design won't have the exact same pixel measure for each column as in your design comp, there are a few other measures you should take to insure that your grid scales without issue.

  1. Refrain from using textured borders in your columns
  2. Horizontal gradients are another no-go.
  3. If you do have a textured background in a column, make sure it is one that can be tiled easily.Do:use grain, grunge, whatever. Don't: use a photograph, illustration, or otherwise un-tilable image.


Thinking With Proportions

In scaling your design down horizontally to accommodate smaller screens, there will come a point at which some text on the page will simply be too big. Sure, that 100pt headline looks great in your psd, but it simply won't work on an iPhone screen, for example: it'll be too large and the text will have to wrap over several lines, reducing the impact of your original decision. 

Here the developer, using CSS media queries, will adjust the font size to better fit the screen. This is a design decision, so as a designer, you should have a say in it, right? To help the developer as well as to help maintain the integrity of your original design, you should decide what text on the page should remain constant, that is, stay the same size at any screen width, and what text should be adjusted. 

A good example of the constantly-sized text would be body copy, or small headers that act as a larger version of the body copy. You should also decide, concerning the text that will be adjusted, how it should be adjusted.
Here's the wrong way to do it: x should always be 20pt bigger than y. Not only is this thinking a big hassle for the developer, it also doesn't make much sense in the responsive canvas, because you're factoring in a constant, a value that will never change no matter what the screen size. For RWD, this is a huge mistake, as it doesn't properly take into account the inherent fluidity of the web.

Here's the right way to do it: x should always be 1.5 times as big as y. This way accepts that the only true meaning a design gets out of font-size is how big or small the text is compared with the other text on the page. A constant value, like 24pt or 67pt, is meaningless. 

Once you have all this figured out, make sure to convey this information to the developer. That's the only way to make sure that your decisions, as the designer, are displayed in the actual web page that viewers will load into their browser and enjoy. 

Make it Modular

The final piece in the Responsive puzzle is Media Queries. In case you're unfamiliar, Media Queries are a way to apply CSS rules to the page based on (for our purposes) the size of the displaying browser. The incredible power of this is that you can adjust, and indeed re-design, the entire layout of your website to fit a smaller or larger browser than the one for which you originally designed.


In order to best design for this eventuality, you should start thinking about the different parts of your design, such as main content, sidebar, header, and navigation, not as pieces of a puzzle that must stay in the same place relative to one another, but as modules that can be re-organized, re-sized, and shuffled without their original significance getting lost.

Perfection is achieved, not when theres is nothing more to add, but when there is nothing left to take away..