(responsive) webdesign

Transcript

1. Hello, I’m Simon
2. I ❤ Making websites
3. I like to do the front-end of my own designs. Especially when it comes to responsive websites. Because so many design decisions have to be made in the browser.
4. Webdesigner Netlash-bSeen @simoncoudeville s.imon.be
9. (responsive) webdesign
10. Andy Clarke http://stuffandnonsense.co.uk/ Web design is responsive design. Responsive Web Design is web design, done right.
11. In case you haven’t noticed, mobile is growing! ‐
12. Sollutions • native app • web app • mobile version • responsive webdesign
13. It depends.
14. I ❤ apps
15. I ☠ mobile sites
16. I ☠ being redirected.
17. Via, tweets, Facebook, bookmark, RSS readers, ...
18. http://cnet.co/A3PWiW The problem is that this redirect is so stupid that rather than figure out what you wanted to see, it just puts you at the mobile site's home page and thinks it's doing you a favor. At that point, whether you coded your site in native or HTML5 has no bearing. I can't see what I wanted to see.
19. And what if a user actually sees your regular site on a mobile device?
20. Please don’t click here to go to the full site.
21. ↺ The other way around.
24. 99 viewports, iphone’s just 1
25. Mobile is not iphone! • Smartphones • feature phones • tablets • nokia, Blackberry, Android, Symbian, ...
26. Ethan Marcotte Our sites are accessed by an increasing array of devices and browsers, and our users deserve a quality experience no matter how large (or small) their display.
27. It doesn't matter whether you have an app or a mobile version. If you have a website, users should be abble to access it through any device. So optimize it.
28. Think responsively.
29. 3. Same URL 2. Same content 1. Same website
30. 3. Same URL 2. Same content 1. Same website
31. 3. Same URL’s 2. Same content 1. Same website
32. 2. different functionalities 1. different layouts
33. 2. different functionalities 1. different layouts
34. What is it not? • Hiding content • display: none
35. David (TheLeggett) Leggett http://www.uxbooth.com/blog/considerations-for-mobile-design-part-2-dimensions/ The most reasonable case for omitting objects from a mobile site is when the object wasn’t essential to the desktop site in the first place.
36. The new road To enlightment.
37. how to start? (working draft)
38. 1. Online strategy 2. Information architecture 3. Design 4. Front-end design 5. Development Our proces
39. ♛ Content is king
40. IA • Gather content • organization of content
41. Rethink • Header • Navigation • Search bar • Call to actions • Interactions
42. Some tips from our IA’s • Avoid subnavigation • Overview pages • Eliminate all unnecassary stuff • Counts as much for desktop
43. ✒ Design
44. Designing in the browser
45. 3. Content organisation before design 2. A static image doesn’t feel like a real page 1. The browser is our canvas
46. 3. Content organisation before design 2. A static image doesn’t feel like a real page 1. The browser is our canvas
47. 3. Content organisation before design 2. A static image doesn’t feel like a real page 1. The browser is our canvas
48. Designing in photoshop
49. 3. Try things not possible with only 2. No limitations 1. Photoshop as creative outlet
50. 3. Try things not possible with only 2. No limitations 1. Photoshop as creative outlet
51. 3. Try things not possible with only css3 2. No limitations 1. Photoshop as creative outlet
52. Establish the global visual design direction
53. 3. The designer ≠ front-end dev 2. Something to fall back on 1. Starting point
54. 3. The designer ≠ front-end dev 2. Something to fall back on 1. Starting point
55. 3. The designer ≠ front-end dev 2. Something to fall back on 1. Starting point
56. Designing proportions.
57. 3. Modular! 2. Think proportions, ratios, percentages 1. Forget pixels!
58. 3. Modular! 2. Think proportions, ratios, percentages 1. Forget pixels!
59. 3. Modular! 2. Think proportions, ratios, percentages 1. Forget pixels!
60. Width?
61. 4. old principles of webdesign still stand 3. Dependent of number of modules 2. Dependent of the amount of content 1. Decide on a maximum width
62. 4. old principles of webdesign still stand 3. Dependent of number of modules 2. Dependent of the amount of content 1. Decide on a maximum width
63. 4. old principles of webdesign still stand 3. Dependent of number of modules 2. Dependent of the amount of content 1. Decide on a maximum width
64. 4. old principles of webdesign still stand 3. Dependent of number of modules 2. Dependent of the amount of content 1. Decide on a maximum width
65. Grid!
66. 3. Make your own grid 2. Forget 960 grid system 1. Solid grid helps establish proportions
67. 3. Make your own grid 2. Forget 960 grid system 1. Solid grid helps establish proportion
68. 3. Make your own grid 2. Forget 960 grid system 1. Solid grid helps establish
69. Modular grid extension modulargrid.org
74. New possiblities • Go beyond 1024 • Use a 75px margin • New layout possibilities for wider screens.
77. Best practice
78. 3. Design flexible modules 2. Start with a solid grid 1. Define a maximum width
79. 3. Design flexible modules 2. Start with a solid grid 1. Define a maximum width
80. 3. Design flexible modules 2. Start with a solid grid 1. Define a maximum width
81. To the browser!
82. Ethan Marcotte alistapart.com Responsive webdesign consists of three components: a fluid grid, fluid media and media queries
83. Fluid vs fixed Responsive vs adaptive
84. fluid, responsive http://dropmark.com/
85. 4. Harder to achieve (fluid media) 3. Takes up all the available space 2. Maximum width defined once 1. Page adapts to every possible resolution
86. 4. Harder to achieve (fluid media) 3. Takes up all the available space 2. Maximum width defined once 1. Page adapts to every possible resolution
87. 4. Harder to achieve (fluid media) 3. Takes up all the available space 2. Maximum width defined once 1. Page adapts to every possible
88. 4. Harder to achieve (fluid media) 3. Takes up all the available space 2. Maximum width defined once 1. Page adapts to every possible
89. fixed, adaptive http://mikedidthis-focus.tumblr.com/
90. 3. Not optimizied for future screen sizes? 2. Easier to achieve. 1. Different layouts defined in fixed widths
91. 3. Not optimizied for future screen sizes? 2. Easier to achieve. 1. Different layouts defined in fixed widths
92. 3. Not optimizied for future screen sizes 2. Easier to achieve. 1. Different layouts defined in fixed widths
93. CSS3 media queries
94. Media queries • Check for certain conditions • Apply different styles • Usually width • Height, orientation, pixel-ratio, ... • Breakpoints
95. A breakpoint is the size (usually the width) at which the layout starts to look broken, at which point a new layout is applied.
96. Common breakpoints • 320px (first generation smartphones portrait) • 480px (first generation smartphones landsape) • 600px (iphone 4 portrait, kindle fire) • 768px (tablet portrait) • 960px (tablet landscape, old computers) • 1200px and up (modern computers, TV's, projectors)
97. Long live natural responsive web design breakpoints.
98. Mark Drummond http://marcdrummond.com/responsive-web-design/2011/12/29/default- breakpoints-are-dead Use awkwardness as your guideline, not ephemeral default device widths.
99. http://responsivepx.com/ http://www.youtube.com/watch? v=kYpENMubJKQ
100. Mobile first Basic CSS is defined before the first breakpoint.
101. Mobile first • Typography • link colors • background colors • margins • ...
102. This way the simplest version is served first so less capable devices still serve a usable readable website.
103. Progressive enhancement Enhancement to the presentation and behavior of the page.
104. This is my grid. There are many like it, but this one is mine. My grid is my best friend. It is my life. I must master it as I must master my life.
105. Fluid design formula: (target ÷ context) x 100 = result
107. 1 kolom (55 ÷ 1260) x 100 = 4.3650794
108. margin (25 ÷ 1260) x 100 = 1.984127
109. 3. left to right = top to bottom (in most cases) 2. hierarchy = HTML 1. flexible modules
110. 3. left to right = top to bottom (in most cases) 2. hierarchy = HTML structure 1. flexible modules
111. 3. left to right = top to bottom (in most cases) 2. hierarchy = HTML structure 1. flexible modules
112. The future is awesome! ✌
113. • CSS-grid • Flex Box • ...
114. Content should be available to as many people as possible.
115. The device should never be an obstacle between the user and their goal.
116. What we do: webdesign.