Recommandé
Contenu connexe
Tendances
Tendances (17)
En vedette
Similaire à Getting Down & Dirty with Responsive Web Design
Similaire à Getting Down & Dirty with Responsive Web Design (20)
Dernier
Dernier (20)
Getting Down & Dirty with Responsive Web Design
- 1. NT102: Getting Down and Dirty with Responsive Web Design Martin Ridgway, Perficient - Lead User Experience Designer
- 2. About Perficient Perficient (perficient.com) is a leading information technology consulting firm serving clients throughout North America. We help clients implement business- driven technology solutions that integrate business processes, improve worker productivity, increase customer loyalty and create a more agile enterprise to better respond to new business opportunities.
- 3. Perficient Solutions, Expertise and Services Business-Driven Solutions Perficient Services Enterprise Portals End-to-End Solution Delivery SOA and Business Process Management IT Strategic Consulting Business Intelligence IT Architecture Planning User-Centered Custom Applications Business Process & Workflow Consulting CRM Solutions Usability and UI Consulting Enterprise Performance Management Custom Application Development Customer Self-Service Offshore Development eCommerce & Product Information Package Selection, Implementation and Management Integration Enterprise Content Management Architecture & Application Migrations Industry-Specific Solutions Education Mobile Technology Security Assessments Perficient brings deep solutions expertise and offers a complete set of flexible services to help clients implement business-driven IT solutions
- 4. Perficient XD STRATEGY & RESEARCH CREATIVE & INNOVATION & IDEATION & ANALYSIS INTERACTION DESIGN IMPLEMENTATION • Envisioning Workshops • Contextual Inquiry/Interviews • Visual Design • Search Engine Optimization • Industry Trend Forecasting • Brand Identity Assessment & • Information Architecture & • UI Development • Media Research Analysis Competitive Benchmarking Interaction Design • Mobile Development • Strategies for: • User Profiles and Personas • Mobile Design • Emerging Platforms • Digital Campaigns • Card Sorting for Information • Digital Publishing • Brand Loyalty & eCRM Architecture • Marketing Campaigns and • Social Media & • Heuristic Evaluation & Content Governance Usability Testing • Content & Engagements • Iterative Prototype Design • Web & Campaign Analytics • Mobile CAMPAIGNS SOCIAL MOBILE & CONTENT
- 5. TL;DR
- 6. What we’ll be covering today • There’s something big on the horizon • What we can do - just what is Responsive Web Design anyway? • Examples please - show me this new hotness • Drawbacks and criticisms – it’s not all roses, right? • The business case for Responsive Web Design • Down and dirty with the code – implementing a Responsive Web Design
- 8. J E F F R E Y V E E N SAYS : “Day by day, the number of devices, platforms, and browsers that need to work with your site grows.” (He founded Adaptive Path as well as Typekit, and has worked for Google. He’s clever. Take heed.)
- 9. Remember when… …it was just this?
- 10. That time has gone
- 11. The landscape’s getting more diverse With each passing day, the way society uses the Internet changes: As of February 2012, • There are 1.2 billion mobile Web users worldwide • Mobile devices account for 8.49% of global website hits • Many mobile Web users are mobile-only And by 2015, • Paying by mobile will be worth over $1 trillion • Mobile commerce will reach $119 billion • US mobile commerce will be worth $31 billion Source: MobiThinking - http://bit.ly/a2f9uO
- 12. So what can we do?
- 14. Well, no. • That’d be silly • And expensive • …but mostly silly.
- 15. Seriously dude… what can we do?
- 16. LU C K I LY, M Y F R I E N D * J E F F SAYS : “Day by day, the number of devices, platforms, and browsers that need to work with your site grows. Responsive Web Design represents a fundamental shift in how we’ll build websites for the decade to come.” * may not really be my friend (Told you he’s clever)
- 18. A responsive example Responsive websites adapt (and respond) to their environment. Same site, different experiences.
- 19. Or, to put it another way One website, many screens
- 20. Why? • One solution to rule them all • One codebase means one set of metrics for all users • A responsive design allows for greater consistency of brand across all experiences
- 21. How? Be pragmatic! • Review your traffic logs and determine what mobile devices are accessing your site today • Test your site on those devices and determine where the experience breaks down • Develop an action plan to address common issues, such as: • Content that is only accessible when a user hovers over something • Controls that are too small to manipulate on touch screens • Popup (or modal) windows that are unusable on small screens • A lot of heavy graphics and media
- 22. Examples please!
- 23. Boston Globe bostonglobe.com
- 24. St. Paul’s School, London stpaulsschool.org.uk
- 25. Arizona State University asuonline.asu.edu
- 26. Any drawbacks?
- 27. * * may actually be a few drawbacks
- 28. Yelp
- 29. Why not Responsive Web Design? 3 reasons not to: 1. Load time 2. Integration with 3rd party applications 3. The big one… More time, more effort and therefore more money than building a desktop site ONLY
- 30. But…
- 31. The business case Less time, less effort and therefore less money to build responsively, than building separate experiences for desktop iPhone and iPad iPhone site Time to develop iPad site vs A responsive website that works with every device Desktop site (and that’s just for the desktop and two other devices!)
- 33. L I K E JA KO B N I E L S E N * FO R E X A M P L E * photograph may actually be Leslie Nielsen
- 34. JA KO B * , T H I S I S BA D A DV I C E “Good mobile user experience requires a different design than what's needed to satisfy desktop users. Two designs, two sites, and cross-linking to make it all work.” * photograph may still actually be Leslie Nielsen Source: http://www.useit.com/alertbox/mobile-vs-full-sites.html
- 35. Responses to Nielsen Serious Not-so serious “About 25 per cent of the people who use the mobile web only use a mobile browser. They never use a desktop computer. These users are disproportionately low income, black, and Hispanic.” - Karen McGrane, UX professional Source: http://bit.ly/HNvjFB
- 36. Conclusions • Does a responsive approach align to our site’s objectives? • Do our users expect a similar version of the website on their phone as they do on their computer? • Do we have the time and the resources to do it?
- 37. Getting down and dirty
- 38. * * You guys, after this bit
- 39. The Theory Responsive Web Design is 3 things • A flexible grid • Flexible images and media • Media queries - Ethan Marcotte Source: http://www.alistapart.com/articles/responsive-web-design
- 41. Our base grid #wrap 960px #main 900px 900px
- 42. Target ÷ Context = Result
- 43. A flexible grid – Calculating teh awsum #wrap 960px #main 900px Target ÷ Context = Result 900px 900 960 0.9375 0.9375 * 100 = 93.75%
- 44. A flexible grid – the CSS #wrap { width:95%; margin:0 auto; } #main { width:93.75%; /* 900/960=0.9375 */ margin:0 auto; }
- 45. A flexible grid – more detail to our page #wrap #main 900px #pri #sec 660px 220px 900px 660 ÷ 900 = 0.7333333 220 ÷ 900 = 0.2444444 73.3333% 24.4444%
- 46. A flexible grid – CSS for our columns #pri { float:left; width:73.33333%; /* 660/900=0.733333 */ } #sec { float:right; width:24.44444%; /* 220/900=0.244444 */ }
- 47. A flexible grid – OK, you’re kidding, right? #wrap #main #pri #sec 180px 660px { .thumb 900px 1 2 3 4 5 6 { 40px 180 ÷ 660 = 0.27272727272727 27.272727272727%
- 48. A flexible grid – you weren’t kidding .thumb { float:left; width:27.272727272727%; /* 180/660=0.2727272727272727 */ margin-right:6.060606060606%; /* 40/660=0.06060606060606 */ }
- 49. Flexible images This: <img src=“who-win.jpg” width=“300” height=“550” alt=“Doctor Win”> Becomes this: <img src=“who-win.jpg” alt=“Doctor Win”> And add this to your CSS: img { max-width:100%; }
- 50. Flexible images, video and media, oh my! img, embed, object, video { max-width:100%; }
- 51. Media queries – the CSS bad boys of RWD @media screen and (min-width:960px) { body { color:red; } }
- 52. Media queries – multiple condition hotness @media screen and (min-width:768px) and (orientation:landscape) { body { color:red; } }
- 53. Won’t SOMEBODY think of the children browsers?!?
- 54. Media queries – browser support • Works in all major browsers… …with the exception of Internet Explorer 8 and below So what do we do about old IE? • Don’t worry about it! • …seriously you guys. Don’t.
- 55. An example CSS file supporting older browsers /* default styles go here, stuff for older IE, etc */ @media screen and (min-width:480px) { /* mobile device media query */ } @media screen and (min-width:768px) { /* tablet device media query */ } @media screen and (min-width:960px) { /* desktop media query (for new browsers) */ }
- 56. OMG dude, where’s the frameworks?
- 57. Responsive frameworks http://foundation.zurb.com http://semantic.gs
- 58. Responsive frameworks http://www.getskeleton.com http://csswizardry.com/inuitcss
- 59. Any final tips? Hints? Cheats? C’MON MAN!
- 60. View source And try Twitter: • @rwd (Useful links) • @smashingmag (More useful links) • @beep (Ethan Marcotte) • @martinridgway (That’s me!)
- 61. “Stay committed to your decisions, but stay flexible in your approach.” - Tom Robbins, novelist
Notes de l'éditeur
- Day by day, the number of devices, platforms and browsers that need to work with your site grows – Jeffrey VeenVeen is a founding partner of Adaptive Path. He’s worked for Google, and is the founder of Typekit, an easy solution to use real fonts on the Web.Which is a long way of saying, this guy’s been around the block a few times, and he knows whereof he speaks.
- Remember this quote? I was disingenuous before, because I only showed you half of it.“Day by day, the number of devices, platforms and browsers that need to work with your site grows. Responsive Web Design represents a fundamental shift in how we’ll build websites for the decade to come.”Yeah, decade. That’s a loooooong time in Web terms. A decade ago Internet Explorer 6 was the most popular browser in the world, and Facebook hadn’t been invented. So if we’re talking about a technique that can change the way we build websites for a whole decade, that’s gotta be some pretty serious technology, right?
- That was a quick section, right?Well, ok. There are a few issues. Nothing comes for free, and a new technique like this is bound to have its share of potential problems. Many of them can be mitigated with careful planning, but be aware: Not every website is a candidate for responsive web design. The fact is, many times the objectives of the desktop version of a website just aren’t the same as those of the mobile version.
- Think about Yelp.com for example. If I’m on the go, I use Yelp to look for nearby restaurants, bars, etc. I’m not looking to leave a review (in all likelihood), and I’m probably looking in my local area. So the mobile version of the site gives me a stripped down view, it uses location services to know where I am, and it presents that information to me quickly and cleanly. If I want to view the full site from my mobile device I can – the option to do so is as the bottom of the screen – but 9 times out of 10 the mobile version suits me just fine.Contrast that with the desktop version of the site. Much more emphasis on leaving reviews, of browsing, and of choosing the metropolitan area I want to focus on. Two different experiences, and dissimilar enough that responsive design wouldn’t do it justice.Oh, and by the way, if you’re ever in Houston, go to Lankford Grocery. Best hamburgers in town. And the Thursday lunch special is chicken fried steak. To die for.Now, Yelp’s an extreme example. I happen to believe the vast majority of websites would benefit from a responsive design approach. But, let’s look at some problems that approach faces…
- There are 3 popular reasons given not to choose responsive web design. I categorize these as slightly different to the Yelp example, because whereas I believe that is a justifiable reason to develop a different solution based on the needs of the user, the criticisms on this page are – by and large – not a reason NOT to design responsively.Load time – A popular misconception of responsive web design is this: “When I load a responsive site, I’m essentially loading the desktop version of the website, and then hiding or resizing items that I either don’t want to see, or deem to be less important than on the desktop version.” Though technically true, this is one of those “drawbacks” that isn’t a drawback at all, as the industry has already moved on. What we’re doing now is something called “mobile first” – a subset of responsive design that builds up from the mobile version, as opposed to building the desktop version and scaling down. So what does that mean for load times? Well, now a mobile device will only ever download what it needs and will ignore (most) everything else, meaning the website is snappy and loads quickly. A desktop browser accessing the site will download what it needs, so it’s also snappy. Everyone’s happy!Integration with 3rd party apps – This could be a sticking point. Let’s take advertising blocks as an example. There are standard ad sizes, set in pixels, that are universally understood on the Web. But a responsive web design recommends a designer to think outside of the context of pixels. So what to do? The ads can be shrunk, just like any responsive image, but what about when there’s a block of 4 ads in a grid on a desktop site? How does that translate to the mobile view of the site? Do we linearize the ads? If so, are the advertisers who are paying for the spots aware that their ads are now further away from the top of the page (still a concern for advertisers)? Communication is vital in these kinds of scenarios.Then there’s the biggest obstacle of all…I’m not going to lie to you guys. It takes more effort, more time, and more money to design a site responsively than to build just a fixed-width, standard desktop website, because building a responsive website is a slightly more complex endeavor than not.
- But here’s the thing…
- It’s much cheaper to design and build a responsive website than it is to design and build separate websites for desktop, iPad and iPhone. And we’re only talking about targeting 3 devices in total here! What about all those other devices that are out there? Start factoring those in, and suddenly responsive web design becomes a very attractive option.
- Now, just like with every new technique, there are going to be detractors. And responsive web design has gained one very big detractor indeed…
- On April 10, 2012 Jakob Nielsen – one of the pioneers of web usability, and a leading figure in the field of Experience Design – published an article about mobile vs desktop sites. In it, he issued a proclamation that was wrong in almost every way. He said:
- “Good mobile user experience requires a different design than what's needed to satisfy desktop users. Two designs, two sites, and cross-linking to make it all work.”His article goes on to say that what we should be doing is providing not just separate websites, but cut-down content for mobile users, and – worse still! – auto-directs to mobile sites. When I say auto-directs, I mean when you visit a site on your mobile device, you are automatically taken to the mobile version of that site. Whether you want to go there or not. Now, to give Nielsen credit, he does say there should always be a link back to the desktop version, but this all seems a bit clunky to me.However, here’s my overarching problem with Nielsen’s advice: “The notion that you should create a separate, stripped-down version for 'the mobile use case' might be appropriate if a clean mobile use case existed, but it doesn't.”Nielsen’s article assumes the myth of the mobile user: A distracted, on-the-go user who ingests information in seconds-long bite-size chunks. That’s not the whole story, not by a long shot. Nielsen is confusing device context with user intent. All we know about mobile users is they’re on a small screen. We cannot divine their intent from that. I know I sit for hours on my phone or tablet when I’m waiting at the airport. I’m browsing. Leisurely. I’m anything-but “on-the-go”! Stripping a website back simply because I happen to be browsing from a smaller device is akin to a book author stripping out chapters from the paperback version of her latest bestseller because it happens to be a smaller form-factor than the hardback version!
- A couple of responses to Nielsen’s article, one serious, one hilarious.McGrane goes on to say, “Jakob's recommendation that mobile sites should cut content and features relegates these users to second-class citizens. He suggests that the mobile-only user should get sites optimized for 'the mobile use case', which doesn't exist if your mobile browser is your only browser. We should strive to make the web accessible for all users.”If this issue interests you, I encourage you to read both Nielsen’s original article, and some of the response articles, of which the link in this slide is but one.
- With good communication, all the obstacles I talked about can be overcome.But these conclusions should be in the forefront of your minds when talking about responsive web design…1. Does a responsive approach align to our site’s objectives?2. Do our users expect a similar version of the website on their phone as they do on their computer?3. Do we have the time, the resources (and most importantly) the money to do it?I’d assume that point 2 will pretty-much always be true, but it’s worth keeping in the back of your mind if you intend to become the next Yelp. However, if all these points line up, we’re a go for a responsive approach.
- But here’s the thing…
- I have nothing further to add to this slide’s epicness.
- Responsive Web Design is a term coined by Ethan Marcotte in his seminal A List Apart article, the link is on this slide. In it, he laid out the three principles for Responsive Web Design: A flexible (or fluid if you prefer) grid; flexible images, or images that work in a flexible context; and media queries to bring the whole shebang together. Read that article. It’s 2 years old now, but the principles laid out have paved the way for an entirely new way of looking at web design and development.And read this book, also by Marcotte. It’s short, just like all the A Book Apart titles, and a truly great resource for all things responsive.
- The following slides contain math.
- This is a wireframe of a basic web page. Our wrapper is 960px wide, and inside that we have a centered element called main that is 900px wide. For the sake of simplicity in this first example, we’re going to assume that’s it. Nothing else exists on this page.Now, normally in our CSS we would specify the widths of those two elements, wrap and main in pixels. But this is a responsive design, and we want to be flexible. So what we do instead is use the following little equation to determine our widths.
- But here’s the thing…
- For the purposes of this example, we’re going to assume that our target is main. Our context is wrap. So target (900) divided by context (960) equals 0.9375. Multiply that by 100 to give us our percentage width for main, which is 93.75. So, main will always be 93.75% the width of wrap, no matter how much we shrink or expand our screen size.
- Expressing that in our CSS is simple…The important line is in black. The rest of the CSS is to give that line some context. So we’ve set wrap to be 95% of its context’s width (in this case, the context for wrap is the browser window, because nothing else surrounds it). And we’ve centered both wrap and main horizontally with the margin statement.The main block has our width specified as a percentage, so it will always be 93.75% of the width of wrap. If wrap is 960px wide, that means main will be 900px wide. When I’m writing CSS for a responsive design, I like to put the calculation in a comment right next to the relevant line of CSS. It makes coming back to the code later a whole lot easier.Now, that’s kind of a simple example. Not many websites these days are one-column like that. So, let’s make this a bit more real-world in our next example.
- Remember, Target divided by Context equals Result. So in the case of the block called “pri” (short for primary), it’s 660px in our comp, and its context is its immediate surrounding container, ie “main”.Sec (short for secondary) is 220px wide in our comp, and its context is again its immediate surrounding container, which is also main. So we divide target by context to get our results.
- Our CSS for those two blocks is pretty straightforward, as it turns out. Don’t be put off by the large number of decimal places. Division like this tends to lead to a lot of long numbers.In order to get the two blocks to float next to one another I’ve added a float left to the primary column, and a float right to the secondary content.As an aside, naming your content sections becomes even more important when designing responsively. In the previous slide, I could have called the two columns “leftcol” and “rightcol”. But what happens when you shrink the screen down, and leftcol is now stacked above rightcol? Your naming convention makes no sense.So, now we’ve seen what can be done in laying out the largest elements of your page. But the concept of flexible grids doesn’t just apply to those big content areas. We can apply the technique to just about anything that we place on our page. After all, everything on the Web is a block.
- The small squares could be thumbnails in a gallery. So in this case, our calculation would be thumb as the target, pri as the context. So 180 divided by 660, which equals 0.27 etc, multiplied by 100 to give us our percentage width for each thumbnail. But what about the margin between the thumbnails? Well, that can be expressed as a percentage too. And how would all that come together in our CSS?
- Again, we’re floating each of our thumbnails left, and expressing the width of them as a percentage of their context, ie, the element on the page that contains them. And as you can see, we can also express the margin in the same way.
- OK, a previous example used elements called thumb to illustrate our responsive grid. Thing is, those thumb elements probably contain images, and we all know images are a set number of pixels wide and pixels high. There’s not a whole lot we can do to change that, right? So our images will be a fixed width within our flexible thumb container. They’ll overflow the container as the screen size gets smaller, and our beautiful page will break, right?Wrong.This bit’s so easy, I’m going to give you a bit of background first…We were taught for years that in order to give our users the fastest possible experience, we should include widths and heights in our img element declarations. There’s a lot of technical information as to why, but basically it boiled down to making sure the browser only has to do one pass when it renders the page, meaning the page loads as fast as possible, If we didn’t include the widths and heights, the browser had to do a second pass to finalize how the page looks when it loads the images in. That’s much less of a problem now than it was a few years ago as browser technology has improved significantly.So, to go back to what we should do for our images to make them responsive?Step 1: Strip out those width and height attributes. Leave the alt attribute though. It’s important for accessibility reasons, even if it’s empty!Step 2: Add this little snippet of CSS. img max width 100%.Step 3: Profit!And that’s it. You’ve just made all your images responsive! When you resize a page, your images will shrink down and maintain their aspect ratio properly, and when you expand back up, they’ll grow, but only to 100% of their size, so you won’t end up with horribly pixellated images. Told you this bit was easy!
- To apply the same flexibility to other types of media as we have to images, all we do is extend our previous CSS declaration to the other media types. And make sure we don’t specify any of their widths or heights in our HTML either!Now we have a truly flexible page, which is great, and is the foundation of responsive design. But our final piece brings it all together.
- CSS is phenomenally powerful. Using just CSS we can apply unique styles to different screen sizes, all with one statement.The text in black is our media query. We have to begin by saying this media query applies only when we’re talking about styles for the screen (as opposed to print styles, which would be in a separate media query starting with “at media print”). Then we use a CSS declaration, min-width (we could also use max-width…or to set an explicit range we can use both: styles should be applies where min-width is 480px and max-width is 768px, for example. But here, we’re keeping things simple. We’re saying that the styles contained within this media query should only be applied when we’re on a screen, and the minimum-width of that screen is 960px.
- We can chain multiple conditions together in order to more selectively apply styles. Here we’re targeting screens with a minimum width of 768px and are oriented to landscape view. By its very nature, this limits this particular media query to probably only target tablet devices in landscape mode.
- What about browser support for this stuff?
- Browser support for all this stuff is fantastic. All current versions of every major browser support media queries. Yes, even the venerably Internet Explorer, long the butt of web design jokes, has really stepped it up with IE9. And IE10 looks like it’s going to be a phenomenal browser!But what about older versions of browsers? Well, excluding IE for a moment, every other browser has supported media queries for about 5 years now. So it’s safe to use.A lot of people still use older versions of IE, and you may be thinking, “Sure, all this sounds awesome, but we’re still on IE7. What use is all this to us?” To which I answer, yes, but 1. Your customers probably aren’t. And 2. for anyone that is still on an older browser, why not just serve them up a version of the site without all the media queries?Here’s how.
- Just specify all your default styles, and the stuff you’d like to override later, in your CSS file BEFORE any of the media queries. Browsers ignore that which they don’t understand, so older versions of IE will read and understand everything down to the first media query, then ignore the rest. That way, you can safely use all of this new technology in every single browser available today.
- You guys are busy. You just want to get on with things! And anyway, who creates stuff from scratch these days, right?A disclaimer – I haven’t used all of these, and they’re not recommendations. There are plenty more frameworks out there. Just search for “responsive framework”.
- If there’s one thing you take away from this presentation, let it be this quote. Stay committed to your decisions, but stay flexible in your approach. That to me encapsulates the essence of responsive web design, and how we use it in our projects.I hope you guys have gained something from this webinar. Whether that’s a new technique, or gaining an insight into just why responsive web design is such a good business case. Or maybe you’ve learned that any PowerPoint slide, no matter how dull, can be livened up with the addition of a funny image downloaded from the Internet.Whatever the case, it’s been a pleasure to present today. In the time we have left, I’ll be happy to take any questions you may have.