Designing for a Responsive Web

The web as we know it is changing. In the past, designers and developers only had to concern themselves with one medium: the computer screen. In recent years, however, a plethora of fully internet-enabled devices with scores of different shapes and capabilities have cropped up, meaning that we now have to design our websites to fit comfortably in as many screen sizes, shapes, and resolutions as you can possibly think of.

Our old fixed-width layout approach is out of the question now. So what do we do? The answer, my dear reader, lies with Responsive Web Design.

What is Responsive Web Design?

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

Because this article is intended for designers not developers, and because I don’t want to step on Ethan’s toes content-wise, I will not be discussing these three things.

However, it is important for you, as a designer, to understand the basic concepts of RWD so as to better design websites that will become responsive when coded. I very highly recommend you read these three articles by Ethan: Fluid Grids, Fluid Images, and Responsive Web Design.

Illustration by Kevin Cornell

If you only read one of those, make it the last one, written in May of last year. Reading it changed the way I, and I suspect many others like me, see the internet. Ethan’s work is nothing short of genius, and I believe everyone who makes a living from the web should be required to read this article.

The Designer’s Role

If you’re a designer who only designs, meaning you aren’t responsible for the HTML and CSS of the site on which you are working, a lot of this might just go over your head. You may even be wondering why exactly you need to know about Responsive Web Design.

I’ve always believed that whoever’s designing a website should be the one later breathing life into it, through HTML and CSS. I understand that this is obviously not the case for a lot of projects, and I would respect a person’s abilities should they choose to only put together the design or only write the code.

It’s important to understand that a website is not one or the other, it’s a marriage of both design and code, each depending on one another to create a seamless experience. To truly learn how to design a website, you must understand how the design will later be implemented in code, even if it’s only a rudimentary understanding.

I’ll remind you again: this article is for designers. In the coming paragraphs, I’ll discuss exactly how, as designers, we should change the way we design to better fit the process of responsive web design.

Grid Systems and You

The Grid System, a perfect example of a rigid, grid-based design that you should strive for.

Even if you’re not designing for Responsive Web Design, you should be designing with some sort of grid system. As the modern, educated designer you are, you should already have an understanding of what it means to use a grid, so I’ll skip the frilly bits.

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. Try to refrain from using textured borders in your columns, like this:

   

   These kinds of things would be difficult for your developers to use in a responsive web site, because they wouldn’t scale well horizontally. If you make the column wider or thinner, the textured borders would struggle.

2. Horizontal gradients are another no-go.

   

   For the same reason as the previous point, namely the inability to scale horizontally, do not do this. Yes, it’s possible with new CSS3 properties, but if you’re targeting an audience of less tech-savvy users, many won’t have a compatible browser and the effect will be useless.

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.

Here’s an example: imagine that you’re designing a website that looks like this (I’m sure you’ve worked with similar layouts before):

The crucial part of this example is the identification of groups of elements that must stay together for any layout. For example, all the navigation links must stay together, because otherwise they would make no sense. This is a module, a section of information that can be moved around amongst the other modules without losing its meaning.

Building your site with these modules in mind makes it easy to imagine how your layout will adapt for different viewport sizes. For instance:

See how although the modules are in different places, they still display the same information as the original, just in a form more easily digested by mobile devices or other, differently-sized browsers.

There isn’t anything you will have to change in your layout to make this modularity work, it’s just a different way to look at the same image. Hopefully though, this new perspective will help you make more informed decisions as you work on your future design projects.

Conclusion

Like so much on the internet, Responsive Web Design is evolutionary, not revolutionary. It’s simply the natural next step for the web, not a complete rethinking of everything. As designers, we must continually adapt our workflows, and this time is no different.

Responsive Web Design is the future, or at least, it will be when developers and designers alike embrace it. As web designers and developers, we are the only ones with the power to see this wonderful new standard come to fruition. Make it happen, for you, for me, for the internet at large!