8/1/13

Build a basic responsive site with CSS | Tutorial | .net magazine

Build a basic responsive site with CSS

By Jason Michael on January 10, 2013 | 20 comments
Like Share

Knowledge needed: Basic CSS and HTML Requires: Text editor Project time : 1-2 hours
DOWNLOAD SOURCE FILES VIEW DEMO

Responsive design is much misunderstood. Jason Michael lays to rest some myths, and then walks us through building a simple responsive website This article first appeared in issue 231 of .net magazine the world's best-selling magazine for web designers and developers. Everyones talking about responsive web design. But does everyone understand what its for? Im not sure. Many web designers and developers seem to me to have misunderstood the problem its trying to solve. Put simply, its not about making sites for mobile devices, its about adapting layouts to viewport sizes. In this tutorial Ill look at the principles behind responsive web design in detail, so were sure to understand the concepts correctly. Once weve got that out of the way, Ill walk you through building a website that scales perfectly on both large and small screens. Responsive web design has mainly become a hot topic because more and more people are using mobile devices such as iPhones, iPads, and BlackBerrys to access the internet.

www.netmagazine.com/tutorials/build-basic-responsive-site-css

1/11

8/1/13

Build a basic responsive site with CSS | Tutorial | .net magazine

So its becoming increasingly important to understand that a website should not be specifically about either the desktop or the mobile device, but about building in such a way that its layout adapts to varying viewport sizes. If you think about the new inventions we will inevitably see in the future, then an adaptive layout that can automatically respond to the users preference becomes an indispensable and highly valuable commodity. One of the main reasons media queries have become more popular is the fact that websites are unusable on devices they werent considered for during design and build phases. They become fiddly to navigate around or maybe the fixed width is wider than the users viewport, making it difficult to zoom in, pan, zoom out and find what they are looking for. Frustrating? For sure. But more frustrating as a developer is that these websites should have been built in such a fashion that they scale down to fit any viewport size. Many sites using media queries strip out information, hiding certain aspects of the site that they deem less important. So the user with a smaller device gets an easier to use website, but with stripped-down content. But why should I, on a mobile device, not get the same benefits from a website as a desktop user? With the help of media queries we can completely customise the layout of our website dependent on screen size. Which is great, but do we really need to supply several adaptations of our site? And why should we settle for a site thats so badly designed or built that it cant scale gracefully? ADVERTISEMENT

User frustration
www.netmagazine.com/tutorials/build-basic-responsive-site-css 2/11

8/1/13

Build a basic responsive site with CSS | Tutorial | .net magazine

Some people believe that its okay to cut features and eliminate content they believe is non-essential to the user. But how can you be sure that the information you are cutting or pushing to a secondary page is not the content that is most important to me? You cant. As an example, I was on the Nike Football website on my MacBook and reading about the football academy they are running with the Premier League, which I found really interesting its one of the main features as you get to the website.

Nike Footballs full site features main navigation offering all available options including the feature on the companys football academy thats visible in the image above...

However, when I tried to show a friend of mine on my iPhone, I discovered Nike has its own mobile site, and Nike Football consists of just two options: one about the latest Mercurial Vapor boots (not interested), and one about the new technology used on Nikes football shirts (not interested). I tried my iPad and it was completely different again and still no sign of the academy information I was looking for. Its not just Nike thats guilty of this its hundreds of sites. And I find it highly frustrating that I should get penalised for using a different device. I feel that if content isnt worth showing to smaller device user, then it probably isnt worth showing to anybody. The first thing we need to understand is that responsive web design isn't just about mobile it considers all viewport sizes. And secondly, developing a good responsive website requires more time and effort than just using media queries With a vast and growing number of web-enabled devices, its important to give your website the best possible chance to facilitate a solid user experience.
www.netmagazine.com/tutorials/build-basic-responsive-site-css 3/11

8/1/13

Build a basic responsive site with CSS | Tutorial | .net magazine

We know that by having a responsive site we can use a single codebase. This is great in that it means we neednt adjust our content for each device. But many websites hide content deemed unnecessary to mobile users, and there are two issues with this. Firstly, it effectively penalises mobile users browsing the website. And secondly, including a hidden style in our CSS doesnt mean the content doesnt get downloaded. This can massively affect performance, especially for those on poor connections. So perhaps the best way to go about designing a website is to consider mobile, or smaller devices, first. This way you can focus on the most important information your site needs to give. And then, if necessary, you can use conditional
...but view the site on an iPhone and the academy features now here to be seen

loading techniques where your layout grid, large images and media queries are applied on top of the pre-existing small-screen design.

The real reason many full websites are unusable on mobile devices is because they are unusable on any device. If its designed well enough in the first place and built correctly, then it should scale up or down gracefully and effectively. A responsive site doesnt necessarily have to be targeted at mobile devices; if its built correctly it doesnt have to be targeted to any particular device. It will just work. And Ethan Marcotte sums it up well in his article Responsive Web Design from A List Apart: Rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the same experience, he writes. We can design for an optimal viewing experience, but embed standards-based technologies into our designs to make them not only more flexible, but more adaptive to the media that renders them. In short, we need to practice responsive web design.

www.netmagazine.com/tutorials/build-basic-responsive-site-css

4/11

8/1/13

Build a basic responsive site with CSS | Tutorial | .net magazine

The iPad version of Nikes site says train like a pro, but the desktop versions football academy article cant be found here at all

With the vast evolution of devices, responsive web design wont fully prevent us from making changes for new devices, but it should eliminate the need to make viewport related changes. Weve all been through it building websites that dont quite work in IE6. Its an issue that drove us all crazy and we spent hours applying hacks to fix it. However, there has never really been that much of an issue with IE6, its just we were building our sites wrong. With a vastly growing number of web-enabled devices it is important that we build our sites in a way that allows it to adapt to change

The walkthrough
For the purpose of this tutorial I have put together a website that scales beautifully between large and small screens. You keep all the content on all sizes. And with the use of media queries I have switched the navigation from a horizontal display to vertical display for smaller devices, and given the user enough padding on the realigned adaptation to work well on touch screens. One thing that I especially like, when you view smaller-screen versions of sites where the main navigation fills the screen area, is the ability to skip to the content you really want using page anchors. Having this appear at the top of the page helps prevent mobile users from having to scroll down to get to the main body of content.

www.netmagazine.com/tutorials/build-basic-responsive-site-css

5/11

8/1/13

Build a basic responsive site with CSS | Tutorial | .net magazine

Mediaqueri.es is a nice site that is perfect for inspiration as it show s you versions of many sites degrading into smaller screensizes

The key element of flexibility in responsive design is a fluid layout width. All you need to do is create a wrapper, content, and column widths that will adapt to different device widths. Its nothing new, but is now more important than ever. To keep things simple, Im going to show you how to create a fluid page consisting of navigation, feature image and two-column, which takes into consideration the layout on various sized devices. Youll notice Ive includedrespond.min.js, which is a lightweight polyfill that enables media queries to work in IE6-8. Here is the basic HTML structure:
VIEW SO UR C E

Couldn't load plug-in.

1. <!DOC TYPE html> 2. <html lang="en"> 3. <head> 4. <meta charset="utf-8"/> 5. <title > Demo | Responsive Web</title > 6. <meta name="viewport" content="width=device-width, minimumscale= 7. 1.0, maximum-scale=1.0" /> 8. <link href="styles/main.css" type="text/css" rel="stylesheet"> 9. <!--[if lt IE 9]> 10. <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script> 11. <![endif]--> 12. <script type='text/javascript' src='scripts/respond.min.js'></script>
www.netmagazine.com/tutorials/build-basic-responsive-site-css

C O PY C O DE

6/11

8/1/13

Build a basic responsive site with CSS | Tutorial | .net magazine

13. </head> 14. <body > 15. <div id="wrapper"> 16. <header> 17. <nav id="skipTo"> 18. <ul> 19. <li> 20. <a href="#main" title="Skip to Main C ontent">Skip to Main C ontent</a > 21. </li> 22. </ul> 23. </nav> 24. <h1>Demo</h1> 25. <nav> 26. <ul> 27. <li><a href="#" title="Home">Home</a ></li> 28. <li><a href="#" title="About">About</a ></li> 29. <li><a href="#" title="Work">Work</a ></li> 30. <li><a href="#" title="C ontact">C ontact</a ></li> 31. </ul> 32. </nav> 33. <div id="banner"> 34. <img src="images/kaws.jpg" alt="banner" /> 35. </div > 36. </header> 37. <section id="main"> 38. <h1>Main section</h1> 39. <p>Lorem&hellip;p> 40. </section> 41. <aside> 42. <h1>Sub-section</h1> 43. <p>Lorem &hellip;p> 44. </aside> 45. </div > 46. </body > 47. </html>

When it comes to the CSS, setting a max-width is a good idea in order to stop the site scaling across enormous screens and this wont withhold the page from shrinking. One main issue when switching from fixed widths to fluid is images. And there is a simple fix for this in your CSS. Just set your images width to 100%:
VIEW SO UR C E

Couldn't load plug-in.

1. /* Structure */ 2. #wrapper {
www.netmagazine.com/tutorials/build-basic-responsive-site-css

C O PY C O DE

7/11

8/1/13

Build a basic responsive site with CSS | Tutorial | .net magazine

3. width: 96%; 4. max-width: 920px; 5. margin: auto; 6. padding: 2%; 7. } 8. #main { 9. width: 60%; 10. margin-right: 5%; 11. float: left; 12. } 13. aside { 14. width: 35%; 15. float: right; 16. } 17. /* Logo H1 */ 18. header h1 { 19. height: 70px; 20. width: 160px; 21. float: left; 22. display : block; 23. background: url(../images/demo.gif) 0 0 no-repeat; 24. text-indent: -9999px; 25. } 26. /* Nav */ 27. header nav { 28. float: right; 29. margin-top: 40px; 30. } 31. header nav li { 32. display : inline; 33. margin-left: 15px; 34. } 35. #skipTo { 36. display : none; 37. } 38. #skipTo li { 39. background: #b1fffc; 40. } 41. /* Banner */ 42. #banner { 43. float: left; 44. margin-bottom : 15px; 45. width: 100%; 46. } 47. #banner img { 48. width: 100%;
www.netmagazine.com/tutorials/build-basic-responsive-site-css 8/11

8/1/13

Build a basic responsive site with CSS | Tutorial | .net magazine

49. }

Your image will now display at its parent elements full width and will contract along with it. Just be sure your images max-width doesnt exceed the max-width of its container otherwise it may pop outside. Remember to use this method effectively the image must be large enough to scale up to whatever size of your largest set viewport.

View ing the tutorial layout on a large screen, max-w idth restrains it from expanding too far

Using large images can effect load time, so on smaller viewports where they are unnecessary there is a responsive image method where you would detect the users screen size and pull in smaller/larger image depending on what was necessary. There are still a few major challenges with this method but is still worth looking into. Mat Marquis, a member of the jQuery Mobile team, has written a great article on this method and he explains the pros and cons.

Main navigation switch

The main reason that you may want to switch the navigation is because the scaling down could become unreadable and hard to click. By using this method, you are enabling the user to access it more easily. You will also notice in the code that we have made some changes to the #main and aside sections to
www.netmagazine.com/tutorials/build-basic-responsive-site-css 9/11

8/1/13

Build a basic responsive site with CSS | Tutorial | .net magazine

switch them to one column.

VIEW SO UR C E

Couldn't load plug-in.

1. /* Media Queries */ 2. @media screen and (max-width: 480px) { 3. #skipTo { 4. display : block; 5. } 6. header nav, #main, aside { 7. float: left; 8. clear : left; 9. margin: 0 0 10px; 10. width: 100%; 11. } 12. header nav li { 13. margin: 0; 14. background: #efefef; 15. display : block; 16. margin-bottom : 3px; 17. } 18. header nav a { 19. display : block; 20. padding: 10px; 21. text-align: center; 22. } 23. }

C O PY C O DE

You will notice on some mobile devices that your website automatically shrinks itself to fit the screen, which is where we get the issues of having to zoom in to navigate through fiddly content. To allow your media queries to take full effect a typical mobile-optimized site contains something like the following:
VIEW SO UR C E

Couldn't load plug-in.

C O PY C O DE

1. <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0"/>

The width property controls the size of the viewport. It can be set to a specific number of pixels like width=960 or to the device-width value which is the width of the screen in pixels at a scale of 100%. The initial-scale property controls the zoom level when the page is first loaded. The maximum-scale, minimum-scale, and user-scalable properties control how users are allowed to zoom the page in or out.

www.netmagazine.com/tutorials/build-basic-responsive-site-css

10/11

8/1/13

Build a basic responsive site with CSS | Tutorial | .net magazine

Combining a series of grabs enables the impact of transitions betw een screen sizes to be appreciated fully

As I said before, responsive web design has never been about making sites for mobile devices. Its about adapting layouts to viewport sizes. Having a responsive site that adjusts to varying viewports should be the default option. If you wish to create a mobile version that looks completely different and shows only important content then go ahead, but at least allow the user that choice to see the full website too. We should concentrate on using the technologies sitting under the responsive design umbrella to create a better web. Something that will help us tremendously with fluid layout, and which Im very excited about, is Flexible Box Layout Module. FlexBox, as its also known, provides a method of automatically resizing elements within their parent without having to calculate height and width values. As well as dynamically changing an elements size, FlexBox can also apply properties to a parent that control where any empty space is distributed. If youre not aware of FlexBox then checkPeter Gasstons articles. Developers must consider having the same content organised in a manner that is the same for everyone. The minimum standard we should set ourselves as developers is to create websites that work for everyone, everywhere. This tutorial has received a technical review from Stephanie Rieger

www.netmagazine.com/tutorials/build-basic-responsive-site-css

11/11