The Third Golden Rule Of Responsive Web Design

Ethan Marcotte started the idea of Responsive Web Design in May 2010 when he wrote a popular article about it for A List Apart. This introduction about fluid grids and flexible images, and media queries, has drastically changed the way we design our websites today. Ever since then, we've been re-sizing our browser windows.Responsive Web Design started off as a trend, but it’s fast become the hot-topic of our industry, and it’s now become the norm.

There are five areas in which

designers are required to step up in order to adapt to the responsive web. In these five articles, we are examining each one of these areas individually.

1. Designing with real content

2. Designing 'in-browser'

3. Developing a pattern library

4. Making it universally usable

5. Keeping performance in mind

Part 3 – Developing a pattern library

One of the key outputs to almost all RWD projects is a style guide. This would include key styles for the project and some interactive states of all modules, and possibly a bit or two about the responsive framework.

But there's a new breed evolving here, the pattern library. This is where you would start by defining each of the common UX patterns that you use throughout your site, and reveal notes and code snippets.

In responsive design, you need to illustrate how each module will adapt between the breakpoints that you’ve defined. Since we’re designing a prototype in HTML and CSS, we’re going to build the pattern library in the same exact way.

These are combined with other organisms in order to form 'templates' (a header). After this, these templates help to form pages. And the result is that you have an Atomic Web Design.

Using this theory, we can form the structure of a pattern library by beginning with the brand styles. Next, apply these to the core HTML elements. Then form some common patterns using these elements, etc.

You then are making your pattern library tell a story about your project; how you’ve taken the client’s brand and then created a new online presence, just for them. You should also include notes and code snippets for developers to access, and for the client to be able to understand your design.

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

Responsive Web Design originally began just a few years ago just as a trend, but today it’s the hot-topic of our industry. We’ve broken down the five areas in which designers are required to step up in order to adapt to the responsive web of today. Next, in Part 4 of this article, we will examine the process of making it universally usable.

And the Part 4 article link is

http://informationbible.com/article-the-fourth-golden-rule-of-responsive-web-design-408059.html