Responsive Web Design
1 like707 views
- Responsive web design involves creating interfaces that work across a variety of screen resolutions using CSS3 media queries and fluid design. - Designers should start with a mobile-first approach, designing the interface for mobile and expanding it for larger screens. - Key techniques include using flexible units like percentages and ems, responsive images, and media queries to trigger layout changes at breakpoint widths. Frameworks can help implement responsive grids.
Responsive Web Design
- 1. Responsive Web Design A basic guide for designers, by front-end developers By Jan Hoogeveen
- 2. Responsive Web Design A basic guide for designers, by front-end developers By Jan Hoogeveen
- 3. “The control which designers know in the print medium, and often desire in the web medium, is simply a function of the limitation of the printed page. We should embrace the fact that the web doesn’t have the same constraints, and design for this flexibility.”
- 5. Every client has a minimum width of 960px. That’s a safe resolution.
- 6. We have no clue which devices there are. We don’t know how to design for all devices. There are no perfect tools. We all have to learn, adapt and improve our workflow.
- 7. What is RWD? • Coined by Ethan Marcotte in May 2010 • Create an interface which works in a variety of screen resolutions, independent of dots per inch (retina friendly) • Based on CSS3 Media queries & fluid design.
- 9. We don’t know which devices can access the web. 960px is an illusion.
- 10. Why RWD? • We’ll never know for sure which device, browser, context or screen resolution your visitor will use to browse the web. • Do you think your site doesn’t have mobile visitors? You’re so wrong. • Mobile users expect the same content as the desktop version has to offer. Don’t cripple their User Experience.
- 11. How to begin with RWD? • Learn what CSS3 has to offer. You don’t need to script it, but you need to be aware of the possibilities while designing. • Learn the new elements HTML5 has to offer. This prevents unneeded styling and developing of widgets. Remember, custom is hard. Use standards first. Upgrade later.
- 12. How to begin with RWD? • Don’t make your canvas double sized for Retina screens. A lot -and preferably all-of your design will be recreated in CSS code. • Always align your shapes to pixels. Snap everything. There are no half-pixels.
- 13. RWD Method
- 14. Mobile First • Begin by designing your interface for mobile • If a solution works for mobile, there’s a good chance it works on tablet and desktop as well. • It’s easier to expand your interface than to shrink it. More whitespace, more columns, bigger fonts.
- 15. Mobile First Mobile first allows you to focus on the essentials. What are the core tasks a user must access. What content do we need? Anything else is probably visual decoration. We are designers, not decorators.
- 16. Expanding your interface You made a mobile friendly website. Great! Now resize your browser and look for content breaking. When does text become illegible, when do things look funny/weird/broken? You will need to introduce a new media query around this point.
- 17. How does it work in the browser?
- 18. Media Queries A media query is a breakpoint of your site where a new layout is triggered. This breakpoint is defined by the designer/programmer and can affect some or all CSS classes. You can increase padding, increase font-size, create text columns with automatic overflow.
- 19. Media Queries We add classes and styling every time we create a new breakpoint.
- 20. What can we do? • Detect features. I can see if a browser supports SVG, webvideo, geolocation, text-shadow, CSS animations, WebGL, etc. For a complete list see http://modernizr.com/docs/#s2 • We can change the behavior or styling depending on these features, but it probably takes a LOT of work.
- 21. So, what do you need to know about:
- 22. Images
- 23. Bitmap formats • Unclear what the best option is • We can upscale by a factor two and let the browser resize to 50% for normal DPI screens. (More bandwidth, sucks on mobile) • We wait for the W3C to figure out how to implement responsive images. More work needed from everyone.
- 24. <picture width="500" height="500"> <source media="(min-width: 45em)" src="large.jpg"> <source media="(min-width: 18em)" src="med.jpg"> <source src="small.jpg"> <img src="small.jpg" alt=""> <p>Accessible text</p> </picture> <img alt="The Breakfast Combo" src="banner.jpeg" srcset="banner-HD.jpeg 2x, banner-phone.jpeg 100w, banner-phone-HD.jpeg 100w 2x">
- 25. SVG (Scaleable Vector Graphics) • Anything you make in Illustrator or Inkscape can be saved as SVG. • Mobile browser understand these natively, and will render them clean and perfect on every device, high resolution or not. • Be warned though, scaling an image can (and will) produce artifacts/aliasing.
- 26. Interface design
- 27. % based design Keep in mind that when developing with fluidity in mind, we will use percentages a lot.
- 28. % based design We will also use the default font-size as a unit of measurement. The base font size is one em. Considering the default font-size is 16px, 1em = 16px. Yes. I will use em’s to assign paddings and margins. Why? Because when I scale the font-size (larger typo) the whole interface scales with it. Imagine using fixed pixels for the paddings. YUCK.
- 29. Touch is everywhere Buttons need to have a large clickable area. The norm is 44 by 44px, but since the explosion of high resolution displays we don’t even know for sure if that’s a correct width. We could use something like mm’s as measurement in code. But alas.
- 30. Touch is everywhere • Don’t use hover states. You don’t know how the browser will handle this event. You simply can’t rely on this. • iOS, Android, Desktop apps, everything behaves differently. • But think about it, how many times is the hover event useful? Remember the doorknob joke?
- 31. Do’s and dont’s
- 32. Do’s • Begin with your mobile version • Think about how your interface elements will change on different breakpoints. • Work closely with your friendly neighborhood front-end developer • Take a look at examples. Learn from them.
- 33. Do’s • Design in the browser. But this is hard. Really hard. We still like to use tools like Illustrator and Photoshop. There is another solution though. • Decide in the browser. You don’t know how your design will feel or respond unless you’ve experienced it yourself. A quick coding session can help a lot.
- 34. Dont’s Don’t automatically assume a mobile friendly website will suffice. Most of the time it will, but for specific apps you will need a mobile app too. I’m quite sure the Facebook app works a lot better than the mobile website.
- 35. Dont’s Never, and I mean never ever hide content for mobile browser because you ran out of space. If you limit the users’ choice, they will dislike your brand/website immediately.
- 36. Frameworks
- 37. Frameworks Use a responsive grid framework. Look at Twitter Bootstrap, Reponsive golden grid system or ZURB Foundation. These help to structure your design flexible.
- 38. Examples
- 39. System genetics
- 40. 320px Navigation tab interface Title is simple text
- 41. 768px Navigation always visible Title is now dynamic Bigger font-size, bigger spacing Multiple columns
- 42. 1200px Font-size increases even more Labels move to side of icons
- 45. Too small when zoomed out Table is made for desktop resolution
- 46. Table is rearranged with CSS for smaller fits. Good font size, simple key-value system. odd:even coloring for pattern recognition
- 47. Table works on desktop, but maybe a pie-chart can be shown on compact views?
- 48. Hide table by default on compact views. Show on tap. Still panning needed. Not really useable.
- 49. Hicks Design
- 55. To sum it all up
- 57. The Heisenberg Principle (but not really) • There is no certainty. Sorry. • Don’t strive for pixel perfect designs. Strive for interfaces that provide easy solutions for problems embracing fluidity. • Usability, speed and legibility are key. You simply can not create the perfect design for every resolution.
- 58. • Never believe you have the answers. You don’t know how your visitor is browsing your site. You don’t know their resolution. You don’t know their intention. • You sure as hell don’t know a set of fixed resolutions which are safe to design for. The Heisenberg Principle (but not really)
- 59. Remember • Nobody knows the perfect workflow yet. • You can’t make good decisions in your design program. • You will need to think about the best experience for the interface width. You will never know the device width.
- 61. tldr; work closely together, test on your devices and be flexible.
- 62. Sources: • http://bradfrostweb.com/blog/web/responsive- web-design-missing-the-point/ • http://mobile.smashingmagazine.com/2013/05/29/ the-state-of-responsive-web-design/ • http://alistapart.com/article/dao • http://alistapart.com/article/responsive-web- design
- 63. • http://www.w3.org/html/wg/drafts/srcset/w3c- srcset/ • http://www.w3.org/TR/html-picture-element/ • http://css-tricks.com/responsive-data-tables/ Sources:
- 64. Disclaimer This presentation is designed for internal use at CLEVER°FRANKE. The presentation contains content made by CLEVER°FRANKE as well as other designers and developers and is used solely as a quick way to discuss responsive web design. The copyright still lies with the original authors.