A presentation for WordCampNL on the importance of accessible, useable websites and how to achieve that with responsive webdesign.

2. Responsive Webdesign
or: "webdesign, done right"
by Tom Hermans - tomhermans.com
@tomhermans

3. about me
designer / developer / wp guy
free-lancing
Sony Europe - UX - e-Platform
reach me via:
tomhermans.com
@tomhermans

4. design
A plan or drawing produced
to show the look and function or workings
of a building, garment, or other object
(before it is built or made.)

5. print

6. card

7. packaging

8. nicer packaging

9. car wrap

10. fashion

11. body paint

12. what do these designs
all have in common ?
great slide pic to pose a question
to the audience i guess

13. all applied on a
canvas

14. canvas
physical size
constraints
power to the designer

15. how does the web canvas look like?

17. web pages are elastic
in both horizontal and vertical dimensions
in a way that
paper pages are not.

18. terminology
“masthead”
“whitespace”
“leading”
“fold”
all derived from print design

21. “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. But first, we must
“accept the ebb and flow of things.“
- John Allsopp

22. “Webdesign is responsive design.
Responsive Webdesign
is web design,
done right.”
- Andy Clarke

23. WTF should you care ?
mobile is growing..
FAST

24. Solutions
native app
web app
mobile website
responsive webdesign

25. what to choose ?
mmm.. depends..

26. native ?
Yes, if:
specific device functionality
camera
gyrometer
gps
etc..

27. native app : issues
- extra build
- extra cost
- many platforms
- even more extra cost
- sharing content
- findability
- walled garden
- duplicate content management
- there are pro's too..

28. mobile website?
optimized, but not really

29. mobile website : issues
- redirects
- urls (m. vs www)
- sharing (desktop to mobile and viceversa)
- duplicate content
- often catering for certain brands / types / OS
- duplicate content - duplicate mgmt
- different devices
- expensive and unsatisfying

30. responsive
a site that is able to adapt to the context
in which it is being viewed.

32. 99 viewports - iPhone's just 1

33. viewports ?
smartphones
feature phones
tablets
desktops
future ?

34. benefits responsive webdesign
1 website
1 content
1 url

35. what's so responsive about that?
1 codebase
diff. functionality
diff. layout

36. examples

46. cool
how do you do that ?

47. rwd consists of
flexible grid
flexible images and media
media queries

48. stop thinking in pixels
think proportional
think percentages
think modular

49. stop thinking fixed width
960 is dead - 100%

50. flexible design
make no assumptions
about a browser window's width

51. media queries
check for - condition
usually width (also pixel-ratio,orientation)
apply different styles
breakpoints

52. media queries
around since css 2.1 - media type
<link rel="stylesheet" type="text/css" href="core.css"
media="screen" />
<link rel="stylesheet" type="text/css" href="print.css"
media="print" />

53. media queries since CSS3
<link rel="stylesheet" type="text/css"
media="screen and (max-device-width: 480px)"
href="phone.css" />
if screen width < 480px, load phone.css
more media features: http://www.w3.org/TR/css3-mediaqueries/#media1

54. <link rel="stylesheet" type="text/css"
media="screen and (min-device-width: 480px)"
href="desktop.css" />
if screen width > 600px, load desktop.css

55. media queries in css file
@media screen and (max-device-width: 480px){
.column {
float: none;
}
.logo {
margin: 0 auto;
}
}

56. media queries summary
if media query test is met
>
css will be applied

57. media queries itself
breakpoints ?

58. common breakpoints
320
480
600
768
960
1200

59. or when the design starts to look bad
responsivepx.com

60. mobile first
apply basic formatting to page
type
colors
margins

61. mobile first pt.2
media queries for bigger screens
progressive enhancement
> less capable browsers will always be served
a readable site

62. total width ?
width:100%
max-width 1120, 1600, 1920 ..
dependent on:
- content
- modules
- design proportions

63. grid
helps to build modular
forget 960
look at responsive grids
build your own!

64. tools
modular grid extension
modulargrid.org/#app
responsinator
responsinator.com

68. 'my' best practice
use a max-width
use a flexible width
design fluid modules

69. mobile first
serve basic stylesheet first
type
colors
margins

70. progressive enhancement
add css through mediaqueries
> less capable browsers will always be served
a readable site

71. build your own grid
(target % context) * 100 = result
720 in 940
76,595744680851063829787234042553 %
1 col (55 in 1200) :
4,5833333333333333333333333333333 %

72. flexible modules
easy to "place" in the layout
order in DOM becomes even more important
left to right = top to bottom (mostly)

73. fluid media
.entry-content img, .widget img
{ max-width: 100%; }
embed, object, video {
max-width: 100%;
height: auto;
}

74. more (good) practices
try using CSS3 and svg
polyfills
css3-mediaqueries-js
respond.js
modernizr
new developments (cssgrid, flexbox,..)

75. some resources
responsive webdesign - ethan marcotte
(abookapart)
alistapart.com/articles/responsive-web-design
mediaqueri.es

76. wordpress
twentyeleven (and successors)
many others, but be aware..
premium is often not. (in general imho)

77. bottomline
content should be accessible
put user first - think about User eXperience

78. mobile users will do
anything and everything
desktop users will do,
provided it's presented in a usable way.
- brad frost

79. the device can't be an obstacle

80. think future friendly

81. thanks.
questions:
@tomhermans
tomhermans.com

82. more resources
the whole argument on media
https://github.com/filamentgroup/Responsive-Images
http://adaptive-images.com/
http://unstoppablerobotninja.com/entry/fluid-images

83. snippet - media reporter
.site-title:before {
position: absolute;
top:0;
content: "768 and up";
background-color: hsla(150,60%,
40%,.7);
color: white; font-size: 16px;
padding: 5px 10px;
}
> handy to see which mq is active