Responsive Web DesignA basic guide for designers, by front-end developersBy Jan Hoogeveen
Responsive Web DesignA basic guide for designers, by front-end developersBy Jan Hoogeveen
“The control which designers know in theprint medium, and often desire in the webmedium, is simply a function of thelimita...
Every client has a minimum width of960px. That’s a safe resolution.
We have no clue which devices there are.We don’t know how to design for alldevices. There are no perfect tools. We allhave...
What is RWD?• Coined by Ethan Marcotte in May 2010• Create an interface which works in a variety ofscreen resolutions, ind...
Introducing RWD
We don’t know which devices canaccess the web. 960px is an illusion.
Why RWD?• We’ll never know for sure which device, browser,context or screen resolution your visitor will use tobrowse the ...
How to begin with RWD?• Learn what CSS3 has to offer. You don’t need toscript it, but you need to be aware of thepossibili...
How to begin with RWD?• Don’t make your canvas double sized for Retinascreens. A lot -and preferably all-of your designwil...
RWD Method
Mobile First• Begin by designing your interface for mobile• If a solution works for mobile, there’s a goodchance it works ...
Mobile FirstMobile first allows you to focus on the essentials.What are the core tasks a user must access. Whatcontent do w...
Expanding your interfaceYou made a mobile friendly website. Great! Nowresize your browser and look for content breaking.Wh...
How does it workin the browser?
Media QueriesA media query is a breakpoint of your site where anew layout is triggered. This breakpoint is defined bythe de...
Media QueriesWe add classes and styling every time we create anew breakpoint.
What can we do?• Detect features. I can see if a browser supportsSVG, webvideo, geolocation, text-shadow, CSSanimations, W...
So, what do youneed to knowabout:
Images
Bitmap formats• Unclear what the best option is• We can upscale by a factor two and let the browserresize to 50% for norma...
<picture width="500" height="500"><source media="(min-width: 45em)"src="large.jpg"><source media="(min-width: 18em)" src="...
SVG (Scaleable VectorGraphics)• Anything you make in Illustrator or Inkscape can besaved as SVG.• Mobile browser understan...
Interface design
% based designKeep in mind that when developing with fluidity inmind, we will use percentages a lot.
% based designWe will also use the default font-size as a unit ofmeasurement. The base font size is one em.Considering the...
Touch is everywhereButtons need to have a large clickable area. Thenorm is 44 by 44px, but since the explosion of highreso...
Touch is everywhere• Don’t use hover states. You don’t know how thebrowser will handle this event. You simply can’t relyon...
Do’s and dont’s
Do’s• Begin with your mobile version• Think about how your interface elements willchange on different breakpoints.• Work c...
Do’s• Design in the browser. But this is hard. Really hard.We still like to use tools like Illustrator andPhotoshop. There...
Dont’sDon’t automatically assume a mobile friendlywebsite will suffice. Most of the time it will, but forspecific apps you w...
Dont’sNever, and I mean never ever hide content for mobilebrowser because you ran out of space. If you limitthe users’ cho...
Frameworks
FrameworksUse a responsive grid framework. Look at TwitterBootstrap, Reponsive golden grid system or ZURBFoundation. These...
Examples
System genetics
320px Navigation tab interfaceTitle is simple text
768pxNavigationalways visibleTitle is nowdynamicBigger font-size,bigger spacingMultiplecolumns
1200pxFont-sizeincreases evenmoreLabels move toside of icons
ResponsiveData visualization
Too smallwhenzoomed outTable is madefor desktopresolution
Table isrearranged withCSS for smallerfits.Good font size,simple key-valuesystem.odd:evencoloring forpatternrecognition
Table works on desktop, but maybe apie-chart can be shown on compactviews?
Hide table by default on compactviews. Show on tap.Still panningneeded. Notreallyuseable.
Hicks Design
http://www.hicksdesign.co.uk/
To sum it all up
The Heisenberg Principle(but not really)• There is no certainty. Sorry.• Don’t strive for pixel perfect designs. Strive fo...
• Never believe you have the answers. You don’tknow how your visitor is browsing your site. Youdon’t know their resolution...
Remember• Nobody knows the perfect workflow yet.• You can’t make good decisions in your designprogram.• You will need to th...
TAKE THE REDPILL
tldr; work closelytogether, test onyour devices andbe flexible.
Sources:• http://bradfrostweb.com/blog/web/responsive-web-design-missing-the-point/• http://mobile.smashingmagazine.com/20...
• http://www.w3.org/html/wg/drafts/srcset/w3c-srcset/• http://www.w3.org/TR/html-picture-element/• http://css-tricks.com/r...
DisclaimerThis presentation is designed for internal use atCLEVER°FRANKE. The presentation containscontent made by CLEVER°...
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Upcoming SlideShare
Loading in …5
×

Responsive Web Design

506 views

Published on

Internal presentation for team CLEVER°FRANKE on responsive web design

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
506
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Responsive Web Design

  1. 1. Responsive Web DesignA basic guide for designers, by front-end developersBy Jan Hoogeveen
  2. 2. Responsive Web DesignA basic guide for designers, by front-end developersBy Jan Hoogeveen
  3. 3. “The control which designers know in theprint medium, and often desire in the webmedium, is simply a function of thelimitation of the printed page. We shouldembrace the fact that the web doesn’t havethe same constraints, and design for thisflexibility.”
  4. 4. Every client has a minimum width of960px. That’s a safe resolution.
  5. 5. We have no clue which devices there are.We don’t know how to design for alldevices. There are no perfect tools. We allhave to learn, adapt and improve ourworkflow.
  6. 6. What is RWD?• Coined by Ethan Marcotte in May 2010• Create an interface which works in a variety ofscreen resolutions, independent of dots per inch(retina friendly)• Based on CSS3 Media queries & fluid design.
  7. 7. Introducing RWD
  8. 8. We don’t know which devices canaccess the web. 960px is an illusion.
  9. 9. Why RWD?• We’ll never know for sure which device, browser,context or screen resolution your visitor will use tobrowse the web.• Do you think your site doesn’t have mobile visitors?You’re so wrong.• Mobile users expect the same content as thedesktop version has to offer. Don’t cripple theirUser Experience.
  10. 10. How to begin with RWD?• Learn what CSS3 has to offer. You don’t need toscript it, but you need to be aware of thepossibilities while designing.• Learn the new elements HTML5 has to offer. Thisprevents unneeded styling and developing ofwidgets. Remember, custom is hard. Use standardsfirst. Upgrade later.
  11. 11. How to begin with RWD?• Don’t make your canvas double sized for Retinascreens. A lot -and preferably all-of your designwill be recreated in CSS code.• Always align your shapes to pixels. Snapeverything. There are no half-pixels.
  12. 12. RWD Method
  13. 13. Mobile First• Begin by designing your interface for mobile• If a solution works for mobile, there’s a goodchance 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.
  14. 14. Mobile FirstMobile first allows you to focus on the essentials.What are the core tasks a user must access. Whatcontent do we need? Anything else is probably visualdecoration. We are designers, not decorators.
  15. 15. Expanding your interfaceYou made a mobile friendly website. Great! Nowresize your browser and look for content breaking.When does text become illegible, when do thingslook funny/weird/broken? You will need to introducea new media query around this point.
  16. 16. How does it workin the browser?
  17. 17. Media QueriesA media query is a breakpoint of your site where anew layout is triggered. This breakpoint is defined bythe designer/programmer and can affect some or allCSS classes. You can increase padding, increasefont-size, create text columns with automaticoverflow.
  18. 18. Media QueriesWe add classes and styling every time we create anew breakpoint.
  19. 19. What can we do?• Detect features. I can see if a browser supportsSVG, webvideo, geolocation, text-shadow, CSSanimations, WebGL, etc. For a complete list seehttp://modernizr.com/docs/#s2• We can change the behavior or styling dependingon these features, but it probably takes a LOT ofwork.
  20. 20. So, what do youneed to knowabout:
  21. 21. Images
  22. 22. Bitmap formats• Unclear what the best option is• We can upscale by a factor two and let the browserresize to 50% for normal DPI screens. (Morebandwidth, sucks on mobile)• We wait for the W3C to figure out how toimplement responsive images. More work neededfrom everyone.
  23. 23. <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.jpeg100w, banner-phone-HD.jpeg 100w 2x">
  24. 24. SVG (Scaleable VectorGraphics)• Anything you make in Illustrator or Inkscape can besaved as SVG.• Mobile browser understand these natively, and willrender them clean and perfect on every device,high resolution or not.• Be warned though, scaling an image can (and will)produce artifacts/aliasing.
  25. 25. Interface design
  26. 26. % based designKeep in mind that when developing with fluidity inmind, we will use percentages a lot.
  27. 27. % based designWe will also use the default font-size as a unit ofmeasurement. 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 (largertypo) the whole interface scales with it. Imagineusing fixed pixels for the paddings. YUCK.
  28. 28. Touch is everywhereButtons need to have a large clickable area. Thenorm is 44 by 44px, but since the explosion of highresolution displays we don’t even know for sure ifthat’s a correct width. We could use something likemm’s as measurement in code. But alas.
  29. 29. Touch is everywhere• Don’t use hover states. You don’t know how thebrowser will handle this event. You simply can’t relyon this.• iOS, Android, Desktop apps, everything behavesdifferently.• But think about it, how many times is the hoverevent useful? Remember the doorknob joke?
  30. 30. Do’s and dont’s
  31. 31. Do’s• Begin with your mobile version• Think about how your interface elements willchange on different breakpoints.• Work closely with your friendly neighborhoodfront-end developer• Take a look at examples. Learn from them.
  32. 32. Do’s• Design in the browser. But this is hard. Really hard.We still like to use tools like Illustrator andPhotoshop. There is another solution though.• Decide in the browser. You don’t know how yourdesign will feel or respond unless you’veexperienced it yourself. A quick coding session canhelp a lot.
  33. 33. Dont’sDon’t automatically assume a mobile friendlywebsite will suffice. Most of the time it will, but forspecific apps you will need a mobile app too. I’mquite sure the Facebook app works a lot better thanthe mobile website.
  34. 34. Dont’sNever, and I mean never ever hide content for mobilebrowser because you ran out of space. If you limitthe users’ choice, they will dislike your brand/websiteimmediately.
  35. 35. Frameworks
  36. 36. FrameworksUse a responsive grid framework. Look at TwitterBootstrap, Reponsive golden grid system or ZURBFoundation. These help to structure your designflexible.
  37. 37. Examples
  38. 38. System genetics
  39. 39. 320px Navigation tab interfaceTitle is simple text
  40. 40. 768pxNavigationalways visibleTitle is nowdynamicBigger font-size,bigger spacingMultiplecolumns
  41. 41. 1200pxFont-sizeincreases evenmoreLabels move toside of icons
  42. 42. ResponsiveData visualization
  43. 43. Too smallwhenzoomed outTable is madefor desktopresolution
  44. 44. Table isrearranged withCSS for smallerfits.Good font size,simple key-valuesystem.odd:evencoloring forpatternrecognition
  45. 45. Table works on desktop, but maybe apie-chart can be shown on compactviews?
  46. 46. Hide table by default on compactviews. Show on tap.Still panningneeded. Notreallyuseable.
  47. 47. Hicks Design
  48. 48. http://www.hicksdesign.co.uk/
  49. 49. To sum it all up
  50. 50. The Heisenberg Principle(but not really)• There is no certainty. Sorry.• Don’t strive for pixel perfect designs. Strive forinterfaces that provide easy solutions for problemsembracing fluidity.• Usability, speed and legibility are key. You simplycan not create the perfect design for everyresolution.
  51. 51. • Never believe you have the answers. You don’tknow how your visitor is browsing your site. Youdon’t know their resolution. You don’t know theirintention.• You sure as hell don’t know a set of fixedresolutions which are safe to design for.The Heisenberg Principle(but not really)
  52. 52. Remember• Nobody knows the perfect workflow yet.• You can’t make good decisions in your designprogram.• You will need to think about the best experience forthe interface width. You will never know the devicewidth.
  53. 53. TAKE THE REDPILL
  54. 54. tldr; work closelytogether, test onyour devices andbe flexible.
  55. 55. 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
  56. 56. • 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:
  57. 57. DisclaimerThis presentation is designed for internal use atCLEVER°FRANKE. The presentation containscontent made by CLEVER°FRANKE as well as otherdesigners and developers and is used solely as aquick way to discuss responsive web design.The copyright still lies with the original authors.

×