Rules For Responsive Website Designs

This introduction of fluid grids, flexible images, and media queries has changed the way we’ve designed our websites quite dramatically. We’ve been resizing our browser windows ever since.

Starting off as a trend, Responsive Web Design has fast become the hot topic of our industry and has now become the norm.

Over the past few years, We have worked on several RWD projects. In almost all of these projects We have used a different design process, produced different deliverables and encountered many different problems.

Based on these experiences, and given that RWD is now becoming the norm, my workflow has had to adapt. Here are five areas in which We believe designers are required to step up in order to adapt to the responsive web.

Rules For Best  Responsive Design

1. Design “Website With Content”

Ever designed a module within a website using the trusty Lorem Ipsum, only for the copywriter/client to write twice as much content, or not enough, and your beautiful design is tarnished? And it’s too late.

Imagine how much easier our lives would be if we had the site’s content up front? It sounds logical, but I bet this rarely happens to most of us.

Before a pencil has been picked up, or Photoshop has been opened, there needs to be a content strategy in place. Whether the output of that is the final content which will be used on the live site or not, you need a good idea of the content which will be used in the final site. What is the point in designing something when you don’t know what content will be used?

Once you have the content, you can start to build content reference wireframes. A term coined by Stephen Hay in his book Responsive Design Workflow, content reference wireframes use basic rectangular blocks to create a layout of content. Thus referencing where each piece of content will sit.

This technique is ideal for showing the basic layout of your main templates. You can show where the navigation, sub-navigation, footer and secondary modules will sit around the main body of the page. Without getting into any level of detail, you are designing the framework into which you will layer detail later down the line.

This is the time in the process that you should start to think about your responsive breakpoints. Taking the content which you have received from the content strategy, you can build a simple one-column layout for mobile devices. This is best done in the browser, using basic HTML, but more on that later.

By restricting your design to one column, you can begin to think about the hierarchy of the content on the page. What is the most important piece of the information on the page? Where should the main CTA sit? Does reading the content from top-to-bottom makes sense?

Once you have the order of information in a place you are happy with, increase the width of your canvas until the content feels stretched and uncomfortable, and jot down the width. This will be your first breakpoint.

Adjust the layout of your page to suit this new width, by adding a column for the sidebar for example, and repeat.

Rules For Best  Responsive Design

2. Design “Your Theme In Code”

Another key consideration for RWD is to ditch the flat visuals and Photoshop comps. They confuse the process too much by creating this idealistic view of how the site would look at multiple specific browser widths.

But they rarely end up that way. The final build nearly always looks different. Whether it’s the padding or spacing around elements, the way in which the type is rendered or the quality of the imagery, the final output rarely looks as good as the visuals the client signed off earlier in the project.

The problem with the visuals is that they look too good. The images are crisp, the typography is aliased and smooth, the use of drop shadows and blend modes make the design look like a work of art. We need to lower the client’s expectations before they sign the designs off.

The trick to doing this is to build a responsive prototype, using HTML & CSS values. Design in the medium in which the final product will be built. And present it in the browser. Show the client how it looks at various widths and on different devices.

Don’t worry if you’re not a whizz at front-end development, there are new tools emerging that help designers create responsive prototypes, such as Macaw, Webflow and Adobe Edge Reflow. Or you can ask a developer to help you out, but I recommend that you learn at least the basics. It will help you understand how your beautiful design will be built.

One of the benefits of designing this way is the reduction in the time it takes to make changes. Suppose you had 20 Photoshop (or Fireworks, as I prefer) camps, each of which had three resolutions (let’s say desktop, tablet, and mobile), and you needed to update the button style or a link in the navigation.

That would mean going through 60 pages just to change one style. I’ve been there. It’s not very nice.

But by defining a CSS class you can make this update once, and it updates across all of your pages. I know this is quite an extreme example, but it will still save you time in the long run.

You will also be able to test your devices at various screen sizes. Most of the tools mentioned above come with preset viewports built in, but if you can export your designs out and get them into an actual browser, then you can really get a better feel of the mobile experience you are designing.

Rules For Best  Responsive Design

3. Develop “A Pattern Library”

One of the key outputs to nearly all of the RWD projects I have worked on is a style guide. These would include key styles for the project and interactive states of all modules. It would even include a bit in there about the responsive framework.

But there’s a new breed of beast evolving here, that of the pattern library. Anna Debenham has written a great article about getting started with pattern libraries for A List Apart. This is where you would define each of the common UX patterns used throughout your site, revealing notes and code snippets along the way.

Now I would normally put these together in Fireworks, using symbols and styles for common components and modules. But for a responsive design, you would need to illustrate how each module would adapt between the breakpoints you have defined. This takes quite some time to do in Fireworks.

And because we are designing a prototype in HTML & CSS, it would be a shame not to build the pattern library in the same way, right?

Brad Frost has a great theory around ‘Atomic Web Design’, whereby he uses some scientific terminology to define aspects of his web designs. Atoms are the basic brand styling which forms the foundations of your design. Things like colors, fonts, and icons. These are then applied to basic HTML elements to form ‘molecules’. Think of a search button. Molecules are then formulated to create ‘organisms’. In this example, we could add a form input and label to our button.

These are then combined with other organisms to form ‘templates’ e.g. a header (we lose the scientific terminology here but you get the point). And then these templates help form pages. And voila! You have an Atomic Web Design.

We can use this theory to form the structure of a pattern library. Begin with the brand styles. Apply these to the core HTML elements. From some common patterns using these elements. And so on.

You’re making your pattern library tell a story of your project – how you’ve taken the client’s brand and created a new online presence for them. You should include notes and code snippets along the way for developers to access and for the client to understand your design.

The pattern library is fast becoming a vital output for responsive web designs, as we make the shift from designing pages to designing a system of components.

Rules For Best  Responsive Design

4. Make “Web Universally Usable”

The thing about designing a responsive website is that you cannot predict each user’s experience, especially when it comes to the mobile experience.

There are literally hundreds of different possible scenarios of how a user could be using your website. This comes down to the number of smartphones and tablets out there with their varying screen sizes, resolutions and input types. They could even be using their televisions.

Your design is going to have to totally universal and adapt to whatever surroundings it is placed.


About us and this blog

We are a digital marketing company with a focus on helping our customers achieve great results across several key areas.

Request a free quote

We offer professional SEO services that help websites increase their organic search score drastically in order to compete for the highest rankings even when it comes to highly competitive keywords.

Subscribe to our newsletter!

Fields marked with an * are required

More from our blog

See all posts