Responsive Design Demonstration

What is responsive design?

Responsive design is an approach to building web sites and web applications that aims to provide the best possible user experience across any number of devices. (including desktop computers, widescreen televisions, tablets, mobile phones, refrigerators and toasters)

The term responsive design was coined by Ethan Marcotte in a May 2010 article that he wrote for A List Apart. Since this article was published, developers of all kinds have been trying their hand at creating responsive design.

The idea behind most responsive design frameworks is that the site is designed first for the lowest common denominator or "Mobile First" using css and javascript to determine what the device viewing the site is capable of.

Why is responsive design a good idea?

People are accessing the web in all kinds of different ways using all kinds of different devices and this trend is only going to continue. By utilizing responsive design, you can ensure that your site is accessible on a variety of different devices.

There is constantly talk of either building mobile websites or building iPhone/Android Apps for sites and applications. While people are often clammoring for these options to become availble, they often don't realize what it is that they are asking for. A developer cannot just take their code and upload it to iTunes or the Google store and have an app. By asking for an app to be made, people are in effect asking a developer to rebuild the same application in a different language. To do this for iPhone, Android, and web, the developer is now maintaining 3 different code bases that all do the same thing.

While there may be instances where an app is necessary, more often building a responsive site will work just as well and will allow developers to maintain less (redundant) code allowing them to work on more projects or improve the projects that they are working on. If an app is necessary, porting a web based app to a responsive layout is a good stepping stone to allow an app to be used on a mobile platform while an app is developed.

Where can I get started with responsive design?

There are countless articles, tutorials and frameworks available on the web for you to read, download and start getting your hands dirty. I have compiled a small list of links for you to get started with.

Let's take a quick look at the 2 responsive frameworks that are the most widely used.

Both Bootstrap and Foundation come with a great deal of options for stylizing HTML elements of all kinds but the real power of these frameworks comes from the grid. Both frameworks utilize a 12 column grid and have classes that determine the span of these columns based upon device. Both frameworks style up from the smallest device to the largest. That being the case, you can place a style for small viewing and only add a large view style change if necessary.

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>
                        

<!-- Columns are 25% left-75% right, on mobile and desktop -->
<div class="row">
    <div class="small-3 columns">...</div>
    <div class="small-9 columns">...</div>
</div>

<!-- Columns are 33% left-66% right on desktop and stacked on mobile -->
<div class="row">
    <div class="large-4 columns">...</div>
    <div class="large-8 columns">...</div>
</div>

<!-- Columns are 33% left-66% right on desktop and 50% each on mobile -->
<div class="row">
    <div class="small-6 large-4 columns">...</div>
    <div class="small-6 large-8 columns">...</div>
</div>
                        

Both frameworks have a very straightforward syntax and make it very easy to get up and running writing code. The Foundation syntax is a little more readable but Bootstrap provides a little more variation on device size as well as shorter class names (for those of you counting characters).

A brief overview of some of the other features of these 2 frameworks are listed below.

Don't take my word for it!

Do a little googling around and see what other responsive design inforamtion you come up with. I have compiled a list of articles and frameworks to check out but there is so much more information out there on this topic if it interests you, keep hunting until you find a framework, library or techniques that work for you!

Thanks for your time and happy coding!

Brent