{"id":345,"date":"2012-04-03T13:34:48","date_gmt":"2012-04-03T20:34:48","guid":{"rendered":"http:\/\/courses.haigarmen.com\/isma205\/?p=345"},"modified":"2012-04-04T21:34:41","modified_gmt":"2012-04-05T04:34:41","slug":"responsive-web-design","status":"publish","type":"post","link":"https:\/\/courses.haigarmen.com\/isma205\/responsive-web-design\/","title":{"rendered":"Responsive Web Design"},"content":{"rendered":"

Creating responsive designs can be confusing at first, mostly because of the radical change in thinking that\u2019s required. For some that means letting go of strict control of pixel-fixed dimensions in your layout and approaching interfaces in a more fluid way.<\/p>\n

As time goes on, responsive web design is drifting away from the pool of passing fads and rapidly entering the realm of standard practice. In fact, the magnitude of this paradigm shift feels as fundamental as the transition from table based layouts to CSS. Simply put, this is a very different way of designing websites and it represents the future.<\/p>\n

What is responsive design?<\/h2>\n

Believe it or not, this Course blog that you\u2019re reading this article on is actually a responsive design! To see it in action, open this article on a desktop browser and slowly make the browser thinner and wider. You should see the layout magically adjust itself to more comfortably fit the new width of the browser, even if you make the page as skinny as the resolution of a mobile phone.<\/p>\n

Not only does the layout conform to the window size but interactive elements like navigation present themselves differently and anticipate different types of interaction.
\n\"\"<\/p>\n

It\u2019s impossible to talk about responsive design without mentioning Ethan Marcotte. If you haven\u2019t read Ethan’s seminal article about responsive web design<\/a>, I highly recommend you check it out (seriously, this is required reading). In the article, Ethan discusses all the key ideas that form responsive web design; and that\u2019s really what responsive design is, technically. It\u2019s not a single piece of technology, but rather, a set of techniques and ideas that form a whole<\/strong>. This is one of the main sources of confusion, and in a moment we\u2019ll break things down and take a look at each part.<\/p>\n

A good question to ask might be, what problem does responsive web design solve? As you may have noticed, computers aren\u2019t the only piece of hardware with a web browser anymore. I might get myself in trouble by saying this, but the iPhone was one of the first mobile devices to feature a really great web browser, and it really put the spotlight on upgrading the experience of the mobile web. Many other devices followed suit and, seemingly overnight, the face of the mobile web changed.<\/p>\n

The changing landscape of web browsers meant that users expectations also changed; people expected to be able to browse the web on their phones just as easily as they browse the web on a desktop computer. So, in response to this, the web design community started creating mobile versions of their websites. In hindsight, this wasn\u2019t really the way forward, but at the time it seemed like a reasonable idea. Every website would have their normal \u2018desktop\u2019 version of their site, and as a bonus, a \u2018mobile\u2019 version.<\/p>\n

Technology never stops marching forward, so not long after the phone hardware market had been revolutionized, other form factors surged in popularity. In addition to phones and personal computers, devices like touchscreen tablets and small notebook computers (netbooks, if you prefer the term) started appearing everywhere.<\/p>\n

It\u2019s not just small screens, either. Large, high-resolution displays are starting to become much more common than they used to be, and it would be a waste for web designers to not take advantage of this.<\/p>\n

In summary, the spectrum of screen sizes and resolutions is widening every day, and creating a different version of a website that targets each individual device is not a practical way forward. This is the problem that responsive web design addresses head on.<\/p>\n

Previously, I mentioned that responsive web design is not a single piece of technology, but rather, a collection of techniques and ideas. Now that we have a better idea of the problem space we\u2019re addressing, let\u2019s take a look at each part of the solution.<\/p>\n

<\/p>\n

Fluid Grids<\/h2>\n

The first key idea behind responsive design is the usage of what\u2019s known as a fluid grid. In recent memory, creating a \u2018liquid layout\u2019 that expands with the page hasn\u2019t been quite as popular as creating fixed width layouts; page designs that are a fixed number of pixels across, and then centered on the page. However, when one considers the huge number of screen resolutions present in today\u2019s market, the benefit of liquid layouts is too great to ignore.<\/p>\n

Fluid grids go a few steps beyond the traditional liquid layout. Instead of designing a layout based on rigid pixels or arbitrary percentage values, a fluid grid is more carefully designed in terms of proportions. This way, when a layout is squeezed onto a tiny mobile device or stretched across a huge screen, all of the elements in the layout will resize their widths in relation to one another.<\/p>\n

In order to calculate the proportions for each page element, you must divide the target element by its context. Currently, the best way to do this is to first create a high fidelity mockup in a pixel based imaged editor, like Photoshop. With your high fidelity mockup in hand, you can measure a page element and divide it by the full width of the page. For example, if your layout is a typical size like 960 pixels across, then this would be your \u201ccontainer\u201d value. Then, let\u2019s say that our target element is some arbitrary value, like 300 pixels wide. If we multiply the result by 100, we get the percentage value of 31.25% which we can apply to the target element. Here\u2019s the math:<\/p>\n

If your values don\u2019t work out so neatly, and you get some floating point value with many numbers after the decimal, don\u2019t round the value! We humans may enjoy nice neat numbers and making our code look pretty, but your computer (and the final look of your design) will benefit from the seemingly excessive mathematical precision.<\/p>\n

Fluid grids are a very important part of creating a responsive design, but they can only take us so far. When the width of the browser becomes too narrow, the design can start to severely break down. For example, a complex three-column layout isn\u2019t going to work very well on a small mobile phone. Fortunately, responsive design has taken care of this problem by using media queries.<\/p>\n

Media Queries<\/h2>\n

The second part of responsive design is CSS3 media queries, which currently enjoy decent support across many modern browsers. If you\u2019re not familiar with CSS3 media queries, they basically allow you to gather data about the site visitor and use it to conditionally apply CSS styles. For our purposes, we\u2019re primarily interested in the min-width media feature, which allows us to apply specific CSS styles if the browser window drops below a particular width that we can specify. If we wanted to apply some styling to mobile phones, our media query might look something like the following.<\/p>\n

\r\n@media screen and (min-width: 480px) {\r\n\u00a0\r\n\u00a0 .content {\r\n\u00a0 \u00a0 float: left;\r\n\u00a0 }\r\n\u00a0\r\n\u00a0 .social_icons {\r\n\u00a0 \u00a0 display: none\r\n\u00a0 }\r\n\u00a0\r\n\u00a0 \/\/ and so on...\r\n\u00a0\r\n}<\/pre>\n
Using a series of media queries like this, we can work our way up towards larger resolutions. The set of pixel widths I recommend targeting are as follows:<\/p>\n