responsive design

Download Responsive design

Post on 01-Nov-2014




1 download

Embed Size (px)


Using elements of work by LukeW, Brad Frost and Ethan Marcotte, this is the default presentation I give to those unfamiliar with RWD


  • 1. RESPONSIVEDESIGNBrandon SullivanWeber Shandwick | Minneapolis

2. WHAT IS RESPONSIVEDESIGN?GEEK SPEAK WARNING: A design intended to adapt to multiplelayout formats with the intention to empower the user at theirselected device Allows you to reach all devices through a single URL Removes the need for separate mobile sites(ex., Updates to a site can be made in one place Provides a more consistent user experience across all devices 3. MAKING A CASE FOR MOBILEWEB ON ALL DEVICES 4. MAKING A CASE FOR MOBILEWEB ON ALL DEVICES 5. MAKING A CASE FOR MOBILEWEB ON ALL DEVICES The projected demand for tablets by the end of 2012~100 million devices Tablets are accelerating the adoption of the mobile internet Tablet users are spending less time on existing PCs down20% since 2008 Heavy mobile data users are projected to triple to 1 billion by2013 6. MAKING A CASE FOR MOBILEWEB ON ALL DEVICES Smartphone web users have increased 45% since 2010 The number of 3G subscriber base grew 35% year-on-year By the end of 2011, smartphone sales have surpassedworldwide PC sales 7. MAKING A CASE FOR MOBILEWEB ON ALL DEVICES We are no longer talking about growth in years but in quarters Hard to keep up Smartphones better, faster, and smarter and more users Still an exercise of patience Browsing full web sites on mobile is a pain Sites are generally too heavy to download to mobile 8. BIG DEAL.IS IT REALLY THAT IMPORTANT? 9. NO, REALLY. IT IS.371K babies are born each day378K iPhones are sold across the world each day 10. LOTS OF DEVICES. ~562k iOS devices sold per day (iPhone, iPad and iPod touch) iOS, Android, Nokia, Blackberry total: 1.45 million new devicesevery day 11. WHO ARE THESE USERS?WHAT ARE THEY DOING ONTHE MOBILE WEB? 12. KEYWORD: CONTEXTAssumptions Users are distracted Users are hurried 13. KEYWORD: CONTEXTKnow your audience Significant amount of casual mobile users Staples: 35% of tablet users use in the bathroom 78% of tablet users use in bed 14. SO WHY RESPONSIVE DESIGN?Cost Mobile app development is expensive Managing multiple versions of sites is expensive. (ex., Responsive web development is far less expensive. Most cost goes into planning instead of development Sites built to web standards already support a responsiveworkflow Content only needs to be updated on one spot instead ofacross platforms (apps and mobile sites) 15. SO WHY RESPONSIVE DESIGN?The experience Full sites on mobile are clunky Optimizing the content for the deviceVS 16. GET STARTED1. Mobile First How does this content or feature benefit the mobile user? Focus on core features and content Enrich desktop experience by providing focus Progressive enhancement, not punishing the lowest common denominator (think base model car vs. full outfit)2. The responsive waterfall approach planning, design, development, delivery Desktop design mockups, wireframes, and style guides can inform beautifully3. The process should be iterative & collaborative. Designers and developers come together! Display can be refined for mobile during development to enhance the user experience 17. DESIGN1. Start with your desktop design 18. DESIGN1. Start with your desktop design2. Work in some mobile wireframes 19. DESIGN1. Start with your desktop design2. Work in some mobile wireframes3. Collaborate on final solutions 20. NOW LETSTALK CODE 21. 5 ELEMENTS TO MAKINGRWD WORK1. Clean, semantic code structure2. Pixels % and ems3. The magic equation: Target context = result4. Setting the right tags5. Media queries 22. SEMANTIC CODE STRUCTUREWhat the layout looks likeHow the code lays outUse CSS to position elements visually. Use HTML to position them semantically 23. % VS EMS:WHEN TO USE WHICHUse % for: Use ems for:- Layouts- Text and flowing content- Boxes- Font-size- Box padding- Line-height (leading)- Box margin - Content padding - Content margin-Horizontally oriented - Vertically oriented 24. THE EQUATIONTarget context = result- Weans you off that pixel habit- May result in long ugly numbers (ex. 0.4583333333333em)- Browsers convert to local pixel value- For total accuracy, round numbers with caution- More information = better result- That precision > dramatically less layout-based bugs in browsertestingExample: 25. FONTS:SETTING A BASELINEBrowsers have defaults, and it sucks.When resetting your browser defaults using a CSS Reset, include: body { font-size:100%; } Sets the browser default font size at 16px 1em = 16px All em calculations are relative 26. FONTS:CONVERTING FROM DESIGN FILES 24px font size in your PSD?Target context = result24 16 = 1.5 Font-size: 1.5em 27. FONTS:CONVERTING FROM DESIGN FILES 11px font size in your PSD?Target context = result 11 16 = 0.4583333333333Font-size: 0.45833em 28. LAYOUT Target context = resultwidth of element width of container = percentage value- Include margins and paddings in your calculations!- Be wary of the context 29. FLEXIBLE IMAGESimg, embed, object, video { max-width: 100%; }Item can only be as wide as its container.Good for all browsers back to IE7.(For IE6 support, read Ch. 3 of RWD by Ethan Marcotte)How do you mean? 30. FLEXIBLE IMAGES

article { width:100%; } img {figure { max-width: 100%; float: left; } margin-right: 2%;.content { padding: 2.5%; width: 77%; width: 20%;}} 31. MEDIA QUERIES: SET UPMobile browsers- Fit the whole page onscreen (960px scaled to 320px)- Use this in the to set it to a 1:1 scaleThis activates what well use for our media queries. 32. THE QUERY@media screen and (max-width: 768px) {/* your styles here */}- Styles everything from iPad width and smaller.- Include queries at the end of your main stylesheet.- Longer, but with less calls to the server (money saver!)- Style only what changes in the query (put the cascade back in CSS) 33. POPULAR RESPONSIVEDESIGN LAYOUTSMostly Fluid Column Drop 34. POPULAR RESPONSIVEDESIGN LAYOUTSLayout Shifter Off Canvas 35. RESOURCESSketching/wireframesFluid Grid Calculator testing Media Queries Debugger Books Responsive Web Design, by Ethan Marcotte First, by Luke W size conversion