.net technique frontend CSS build a basic responsive site Download the files! >u All the files yo torial need for this tu can be found at 1 netm.ag/resp-23 Responsive design is much misunderstood. Jason Michael lays to rest some myths, and then walks us through building a simple responsive website Knowledge needed Basic CSS and HTML Requires Text editor Project time 1-2 hours Everyone’s talking about responsive web design. But does everyone understand what it’s for? I’m not sure. Many web designers and developers seem to me to have misunderstood the problem it’s trying to solve. Put simply, it’s not about making sites for mobile devices, it’s about adapting layouts to viewport sizes. Over the next few pages, I’ll look at the principles behind responsive web design in detail, so we’re sure understand the concepts correctly. Once we’ve got that out of the way, I’ll walk you through building a website that scales perfectly on both large and small screens. The mobile world 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. So it’s 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 weren’t considered for during design and build phases. They become fiddly to navigate around – or maybe the fixed width is wider than the user’s 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 that’s so badly designed or built that it can’t scale gracefully? User frustration Some people believe that it’s 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 can’t. 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 Desktop delights Nike Football’s full site features main navigation offering all available options – including the feature on the company’s football academy that’s visible in the image above 88 .net summer 2012 Scaled back But view the site on an iPhone and the academy feature’s nowhere to be seen .net technique frontend Further reading (1) There’s a wealth of great articles and tutorials out there for anyone wishing to learn more about responsive design. Here are just a few … Responsive Web Design The article by Ethan Marcotte for A List Apart that started it all. “Fluid grids, flexible images, and media queries are the three technical ingredients for responsive web design,” he writes. “But it also requires a different way of thinking. Rather than quarantining our content into disparate, device-specific experiences, we can use media queries to progressively enhance our work within different viewing contexts.” Owww.alistapart.com/articles/responsive-web-design 5 really useful responsive web design patterns Just padding The iPad version of Nike’s site says ‘train like a pro’, but the desktop version’s football academy article can’t be found here at all League, which I found really interesting – it’s one of the main features as you get to the website. 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 Nike’s 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. It’s not just Nike that’s guilty of this – it’s hundreds of sites. And I find it highly frustrating that I should get penalised for using a different device. I feel that if content isn’t worth showing to smaller device user, then it probably isn’t worth showing to anybody. Some interesting responsive design patterns that are being implemented by talented designers all over the web. O www.designshack.net/articles/css/5-really-useful-responsive-webdesign-patterns CSS Regions Adobe’s proposal seeks to enable magazine-style layouts to be created on the web. Find out more at: Ohttp://dev.w3.org/csswg/css3-regions Owww.css-tricks.com/content-folding Owww.broken-links.com/2011/11/07/introducing-css-regions Why should I, on a mobile device, not get the same benefits as a desktop user? 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, it’s important to give your website the best possible chance to facilitate a solid user experience. We know that by having a responsive site we can use a single codebase. This is great in that it means we needn’t 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 doesn’t mean the content doesn’t 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 loading techniques where your layout grid, large images and media queries are applied on top of the pre-existing small-screen design. Build for adaptability If a site is designed well enough in the first place and built correctly, then it should scale down gracefully and effectively. As mentioned earlier, a responsive site doesn’t necessarily have to be targeted at mobile devices; if it’s built correctly it needn’t be targeted to any particular device. It will just work. Ethan Marcotte sums this up well in his influential article Responsive Web Design (alistapart.com/articles/responsive-web-design): “Rather than New tricks Chris Coyier’s article (www.css-tricks.com/content-folding) explores CSS Regions, which enables content to flow through multiple elements 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.” The speedy evolution of devices means that if we don’t build our website correctly in the first place we’ll need to continue to make changes for new devices. With an ever-expanding number of web-enabled devices it is important we build our future sites in a way that enables them to adapt to change. The walkthrough For the purpose of this tutorial I have put together a website that scales down beautifully from large to 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 .net summer 2012 89 next> .net technique frontend Further reading (2) Responsive questions A great post on Jeremy Keith’s Adactio blog. “We’ve always had the ability to create fluid layouts,” writes Keith. “And yet web designers and developers have wilfully ignored that fact, choosing instead to create un-webby fixed-width layouts … It was never specifically about mobile devices or users in a mobile context; it was always about adapting layout to varying viewport sizes.” Ohttp://adactio.com/journal/5351 The future of CSS layouts Peter Gaston’s article for the .net website takes a detailed look at the different options for creating rich, dynamic pages. Owww.netmagazine.com/features/future-css-layouts. Why we shouldn’t make separate mobile websites “The reasons many full websites are unusable on mobile devices are because many full websites are unusable on any device,” says Bruce Lawson in this article for Smashing Magazine. In other words, if it’s designed well enough in the first place and built correctly then it should scale down gracefully and effectively. Ohttp://mobile.smashingmagazine.com/2012/04/19/why-we-shouldntmake-separate-mobile-websites/ Responsive layouts using CSS Media Queries A great blog post from Kyle Schaeffer explaining the basics of responsive web design layouts. Ohttp://kyleschaeffer.com/best-practices/responsive-layouts-using-cssmedia-queries Ethan Marcotte answers your responsive web design questions The guru of responsive web design asks questions posed by readers of .net magazine. Owww.netmagazine.com/interviews/ethan-marcotte-answers-yourresponsive-web-design-questions CSS3 Flexible Box Layout Module FlexBox offers exciting possibilities for responsive web design. Find out more details in this excellent article by Peter Gasston. Owww.netmagazine.com/tutorials/css3-flexible-box-model-explained 15 Detailed Responsive Web Design Tutorials Ohttp://designwoop.com/2012/03/15-detailed-responsive-web-designtutorials/ From the top Designwoop’s ‘15 detailed responsive web design tutorials’ offers plenty for newcomers to the subject to chew on <prev 90 .net summer 2012 Xxxxxx xxxxxx TXxxxxxxxxxx Si. Agnisl ullaoreet ing eros acidui blandreetuer secte magna consenim quatin ute cor iril dolore miniat. and down to get to the main body of content, rather than being greeted by the main nav at the outset. The key element of flexibility in responsive design is a fluid layout width. All you need do is create a wrapper, content, and column widths that will adapt to different device widths. It’s nothing new, but is now more important than ever. To keep things simple, I’m 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. You’ll notice I’ve included Many sites are unusable on mobile devices because they are unusable on any device respond.min.js, which is a lightweight polyfill that enables media queries to work in IE6-8. Here is the basic HTML structure: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"/> <title> Demo | Responsive Web</title> <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" /> <link href="styles/main.css" type="text/css" rel="stylesheet">  <script type='text/javascript' src='scripts/respond.min.js'></script> </head> <body> <div id="wrapper"> <header> <nav id="skipTo"> <ul> <li> <a href="#main" title="Skip to Main Content">Skip to Main Content</a> </li> </ul> </nav> <h1>Demo</h1> .net technique frontend Big guns Viewing the tutorial layout on a large screen (left), max-width restrains it from expanding too far Perfectly formed Reducing screen size (below), the site remains in view and elements contract accordingly <nav> <ul> <li><a href="#" title="Home">Home</a></li> <li><a href="#" title="About">About</a></li> <li><a href="#" title="Work">Work</a></li> <li><a href="#" title="Contact">Contact</a></li> margin-right: 5%; float: left; } aside { </ul> </nav> <div id="banner"> <img src="images/kaws.jpg" alt="banner" /> </div> </header> <section id="main"> <h1>Main section</h1> <p>Lorem…p> </section> <aside> <h1>Sub-section</h1> <p>Lorem …p> </aside> </div> </body> </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 won’t 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 image’s width to 100%: /* Structure */ #wrapper { width: 96%; max-width: 920px; margin: auto; padding: 2%; } #main { width: 60%; width: 35%; float: right; } /* Logo H1 */ header h1 { height: 70px; width: 160px; float: left; display: block; background: url(../images/demo.gif) 0 0 no-repeat; text-indent: -9999px; } /* Nav */ header nav { float: right; margin-top: 40px; } header nav li { display: inline; margin-left: 15px; } #skipTo { display: none; } #skipTo li { background: #b1fffc; } /* Banner */ #banner { float: left; margin-bottom: 15px; width: 100%; } #banner img { width: 100%; } .net summer 2012 91 .net technique frontend Small victory As screen size reduces our media queries code shows the ‘skip to content’ link Fluid movements Combining a series of grabs (above) enables the impact of transitions between screen sizes to be appreciated fully Your image will now display at its parent elements full width and will contract along with it. Just be sure your image’s max-width doesn’t exceed the max-width of its container – otherwise it may pop outside. 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 and giving them enough padding to click for those touchscreen devices. You will also notice in the code that we have made some changes to the #main and aside sections to switch them to one column. /* Media Queries */ @media screen and (max-width: 480px) { #skipTo { display: block; } header nav, #main, aside { float: left; clear: left; margin: 0 0 10px; width: 100%; } header nav li { margin: 0; background: #efefef; display: block; margin-bottom: 3px; } header nav a { display: block; padding: 10px; text-align: center; } } Many mobile devices and tablets utilise a zoom feature to display content that is too large to fit on smaller display screens. Important as it is for mobile and tablet users, it can create a frustrating experience having to constantly zoom in, pan, and zoom out in order to browse your websites content. You can disable this zooming behaviour by placing this meta tag in the head of your document (as I have included in the HTML code): <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" /> <prev 92 .net july 2012 Defaut option As I said before, responsive web design has never been about making sites for mobile devices. It’s 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. The challenge is about what technologies and methods we use to develop websites Game changer Something that will help us tremendously with fluid layout, and which I’m very excited about, is Flexible Box Layout Module. FlexBox, as it’s 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 element’s size, FlexBox can also apply properties to a parent that control where any empty space is distributed. If you’re not aware of FlexBox then check Peter Gasston’s articles at www. netmagazine.com/tutorials/css3-flexible-box-model-explained – they’re well worth a read. This is something I hope will be a game-changer in terms of how we develop websites in the future. 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. O Responsive web design is about printing, too – turn to page 80 to find out how to make your web pages printable About the author Name Jason Thomas Michael URL jasonthomasmichael.com Areas of expertise CSS, HTML Twitter @jasonmichael How do you like your eggs? Poached with rock salt and stacks of pepper!