Introduction to Responsive Web Design

Buzz or Something Much More

Responsive design seemed like so many other buzz terms when it came on to the scene. But those who have been indoctrinated into the vastly changing mobile devise design and development world have seen this revolutionary invention as a ticket to freedom.

So with this said I figured I’d put together a little synopsis of what we see after a couple years in the making. A little about the resources available, the major players and how to get started responsively for your business, design firm or development team.

Responsive Web Design

Coined by Ethan Marcotte in a A List Apart in May of 2010 as RWD or Responsive Web Design rapidly became excepted as a new standard of web. Responsive design was recognized by .net magazine as the #2 Top Web Design Trends of 2012 stating “It’ll be like the standards movement all over again.”

responsive layouts

The Major Players

Who do you know that’s actually using responsive web design? Is this just something all those big framed glass wearing start-ups are using? NO would be the strong answer.

Let’s see! Last I knew from an article I read from the man himself, Ethan Marcotte, stating ginormous companies such as Microsoft, General Electric, Disney and Starbucks (who even published there style guide for all to see).

So smart companies with great business minds are seeing the effectiveness and longevity of these new standards why wouldn’t we want a piece of the action. Is it out of our reach? (See strong answer above). As we even saw with Starbucks tools are being freely handed out for us to use it’s only a matter of knowing where to go to get them and what to do with them once we find them.

Open Re-Sources

Now in 2013 we have seen the progression of two major contributors in the field of responsive design resources. These contributors in the responsive world are none other than Twitter with Bootstrap, which is well into it’s second version, and the new kid on the block, but definitely a contender, Foundation by Zurb with it’s fourth edition just released.
twitter

 

zurb

Both Bootstrap and Foundation are built on a 12 column grid system which acts as a wireframe holding all the dividers and elements in place. Changing the position in Foundation per device is as simple as using small and large classes in CSS. Bootstrap has a built in standard of the class span with a number 1-12 following which defines the columns used per element with a default of full width for smaller devises.

There are plenty of similarities and differences in using the two open source structures for your responsive site and both have provided incredibly detailed and easily understood documentation. I will be getting into both in more detail in the following posts.

Other Words to Know

Next I will be getting into the terms Adaptive and Fluid. Understanding these terms will be crucial in understanding why responsive really works. Coming Soon…