This post is about responsive design principles, some current frameworks for building responsive websites, and the concept of mobile-first.
With our clients we have learned that responsive design is not a feature, it is a necessity. So what is it anyways?
Let the website RESPOND to varying browser sizing
The goal of responsive web design is to provide a great viewing and interaction experience regardless of the platform the user is viewing your site from. It also means providing the same content and options to users of all platforms. This means that the old-school “mobile version” of web sites doesn’t fit the responsive design guidelines.
The most popular modern frameworks for responsive web design are:
I won’t get into specifics on the differences between the two, instead I will focus on what they both do well.
A grid is a way of dividing up the page into columns. These columns can then float and stack based on the size of the screen. Both Bootstrap and Foundation utilize a grid based on 12 divisions.
With some simple math this means:
columns = 12/width
- 1 column (full width) = 12
- 2 columns = 6
- 3 columns = 4
- 4 columns = 3
- 6 columns = 2
- 12 columns = 1
So let’s say you want a layout where your first column is half the width of the screen, then there are two columns after this which each share 50% of the remaining space.
This would give us a 6 – 3 – 3 layout (as pictured below).
Here is the implementation in Bootstrap and Foundation for reference:
<div class="row"> <div class="large-6 columns">Left Half</div> <div class="large-3 columns">Right Section 1</div> <div class="large-3 columns">Right Section 2</div> </div>
<div class="row"> <div class="col-lg-6">Left Half</div> <div class="col-lg-3 columns">Right Section 1</div> <div class="col-lg-3 columns">Right Section 2</div> </div>
You may have noticed that there is more than just the number of columns to span in the class, there is also a string that represents size (large or lg). This string designates when the column should go full-width and stack. You can use a variety of sizes from extra small thru large to let the browser know when you want the content to sit on top of each other and when to float left to right.
Besides providing a grid, these two frameworks provide a large selection of other components for laying out a nice responsive website. You can check out the doc links above for more information on those. Some components include: buttons, forms, image galleries, sliders, validation, and much more.
More than just a buzzword
As viewer market share is quickly moving to mobile devices, developers realized we are not safe building for a desktop and providing a fall-back experience for mobile users. Mobile first is all about building for mobile devices and then making sure that the same experience is provided to users of a desktop. The beauty is that if you have started with a responsive framework, you are well on your way to a mobile first design.
There is no doubt that making a mobile first and responsive website can be a huge challenge, but with the way the web is moving it is a leap you need to take. If you need help with your project or want to start building something for ALL of your users, let us at Edison Avenue Consulting know!