Responsive Web Design
Like with any new buzz word, your boss comes to you and says, "Our site needs to be responsive… We are losing business — make it happen!" And like every buzz word your boss has jumped all over in the past, he doesn't really know what it means, nor how it would affect the business.
What is Responsive Design?
In a 2010 article, Ethan Marcotte coined the term "Responsive Web Design" as a way of describing his approach to creating sites for the ever changing landscape of web browsers. Essentially, this means making one design that would adapt to work on all devices. Ten years ago, this wasn't an issue that needed to be addressed. But now, everything has a web browser and users are savvy — and impatient — for all the glitz and glamour. It has to work whether they load it up on their phones, or want to see a full screen video on the refrigerator (It's hard to pinch-zoom when your hands are covered in dough).
The web design communities started integrating techniques and ideas like fluid grid, flexible images, and CSS3 to accomplish this.
Responsive website technology is still a maturing as a design approach, but it is not anything new technologically. Responsive design uses the technologies that have already been developed. It implements them in much more integrated way.
Due to way most websites are currently designed, implementing Responsive web design will require you to totally redo the structure, layout, and likely back end coding. Why you ask? Simplicity. Responsive design makes use of CSS3 classes, DIVs, and CSS Media Queries quite heavily in to create the fluid grid design.
The Power of Media Queries
When it was first introduced, developer jumped all over it because it helped simplify the process of creating pretty layouts. Because the web existed before CSS, many enterprise websites mix CSS stylesheets with inline styles. While this works, it is harder to manage, maintain, and improve.
When CSS2.1 came out, they introduced media queries so that you could create separate stylesheets based on the media: for printing or for screen display. This helped because it caused designers to pull as much inline styles out of the web pages in to the sytlesheets. However, all the layout and positioning of the HTML pages was still done by hard coding positions, or using HTML tables.
While this worked great for full size desktops, it doesn't work for mobile devices. This caused web designers to duplicate their website to make a mobile version. Two code sets to maintain means extra work.
Although CSS3 expanded upon media queries in 2012, developers didn't really stand up and take notice until recently. With these expanded media queries, designers could now define different styles based on the size of the screen:
#nav
{
float: right;
}
#nav ul
{
list-style:none;
}
@media screen and (min-width: 400px)
and (orientation: portrait)
{
#nav li
{
float: right;
margin: 0 0 0 .6em;
border: 1px solid #000000;
}
}
@media screen and (min-width: 800px)
{
#nav
{
width:200px;
}
#nav li
{
float: left;
margin: 0 0 0 .6em;
border: none;
}
}
You now have more control over what, where, and how HTML tags are displayed on which device.
Almost Fixed!
This almost fixed the problem of two code sets. Almost, because many enterprise web sites were still used a fixed size layout. The next problem to solve is how to make the layout flexible to present a nice view on a web browser and a nice view on a mobile device.
Enter the Fluid Grid Design. Fluid Grids are a concept designers derived from print designers' Grids. "A two-dimensional structure made up of a series of intersecting vertical and horizontal axes used to structure content" — Wikipedia. The axes create a units of predictable fixed sized reference points that are used to design your layout in a consistent manner. The "Fluid" variant still keeps your layout structured, but their size/positions will change depending on the canvas size (or browser window size). Now that is a mouth full.
What is it really? Predefined locations, boxes, and elements which are formatted exactly the way you want them within a predefined space. The difference is that these predefined zones move around on the page instead of staying in a fixed location. The implementation is much like the development of fixed size layouts, just on a ore granular scale.
While text and other elements resize well, images often don't. With CSS3 and media queries, designers can easily alter the size or the actual image itself to create a "Flexible Image"
Making all this work together
Now that you have an overview of what "Responsive Web Design" is, let's apply it to your existing website. A traditional design uses HTML tables or fixed size DIV elements:
<table><tr> <td colspan="2" style="width:600px"> title </td></tr> <tr><td style="width:300px"> Block1 </td><td sytle="width:300px"> Block2 </td> </tr> </table>
Responsive web design separates zones/boxes (layout elements) that have the information the designer and developer want to display from the actual the layout and positioning:
<div class="grid"> <div class="title"> title </div> <div class="block1"> Block 1 </div> <div class="block2"> Block 2 </div> </div>
All a web designer and developer has left in their HTML pages is what is important, not all the extra fluff and chaff needed to position everything.
We use CSS to help position these layout elements based on the layout design and screen size we want. For a small screen such as a smartphone, you would have the layout below:
@media only screen and (max-width: 480px)
{
.grid
{
display: -ms-grid;
margin: 3px;
-ms-grid-columns: 100%
-ms-grid-rows: 70px auto auto auto
}
.title
{
-ms-grid-row: 1;
-ms-grid-column: 1;
}
.block1
{
-ms-grid-row: 2;
-ms-grid-column: 1;
}
.block2
{
-ms-grid-row: 3;
-ms-grid-column: 1;
}
}
For a full size screen like a desktop web browser, you would have the layout below:
@media only screen and (max-width: 800px)
{
.grid
{
display: -ms-grid;
margin: 5px;
-ms-grid-columns: 10px lfr 10px lfr;
-ms-grid-rows: 100px auto;
}
.title
{
-ms-grid-row: 1;
-ms-grid-column: 1;
-ms-grid-column-span; 2;
}
.block1
{
-ms-grid-row: 2;
-ms-grid-column: 1;
background-color: #B2B0B0
}
.block2
{
-ms-grid-row: 3;
-ms-grid-column: 1;
background-color: #EEB0B0
}
}
As you can see, responsive design actually makes web designers and developers job easier. Everything has become simpler.
Gotchas!
Many enterprises still have older browsers in-house. Since Responsive Web design requires CSS3, you have to have a web browser that supports CSS3. So what about all those Internet Explorer browsers that are still below IE version 8?
Some very smart people have already addressed this for you. With a few javascript files, you can implement responsive design on these legacy browsers just like you find on all your newer browsers.
Css3-mediaquieres.js by Wouter van der Gaaf: code.google.com/ Css3-mediaquieres.js/
Response.js: github.com/scottjeh/respond
Fluid Images: unstoppablerobotninja.com/fluid-images/
Conclusion
Unless you really did it right with your enterprise webpages from the beginning, a good 60% of the HTML in those pages is worthless. The key to moving from your fixed size HTML pages to a responsive web design is: figure out what HTML content is important, what should layout elements should be grouped together, and how best to strip the code that used to generate those elements out of your overall web page design.
Once you have the core layout elements isolated, then you have to decide what is going to go where on what screen size. With those answers, you can then build your CSS and media queries to address that set of layout decisions. While this is not hard, once you embrace it, it will be very time consuming.
Using these ideas, you can start building a responsive site from scratch. Or you can capitalize on the generosity of the internet communities and start with one of many frameworks out there. Extra plug for Bootstrap, I find it useful for everything!
getbootstrap.com, getskeleton.com, gumbyframework.com, purecss.io
