The realities of responsive design: Does more responsive mean less design?

Responsive WordPress design gets knocked in two ways. People claim WordPress sites all look alike - and that responsive sites look alike. True or false? And if true, how can we make it false?

Transcript

1. The realities of 
 responsive design: Does more responsive 
 mean less design?
5. Responsive Design vs.
 WordPress 
 Responsive Design
6. Marketing-agency veteran. Degree in design: from 1983. Typography nut @marybaum
7. Tennis nut Real mom Cat mom
10. Who’s here?
11. Numbers we all know. More than half of all web traffic comes from mobile devices. For lots of people, a phone is their only connection to the web. They are not going to buy a desktop machine.
13. Google Analytics for FRC.
16. So. DO responsive WP sites look alike?
17. The WP Showcase.
18. boardshorts.com
19. evening- edition.com
20. cec.fiu.edu
21. gv.com
22. skift.com
23. How bout these?
24. FRC: responsive.
25. Casino night 

26. Tennis Booker:
27. Finally, some Genesis child themes:
28. Ambiance
29. News
30. Streamline
31. At the very least, responsive sites don’t have to look alike.
32. What gets in the way?
33. “We’re B2B.”
34. “Our buyers are in their offices.”
35. “We’ll do a mobile site later, when I have more money.”
36. “Our clients are over 55. 
 They’re behind the times.”
37. What else ties us down?
40. Best case. Nav Header
 images Header
 images Header
 images Nav Nav
41. Not quite three designs. All content on all devices. Make the most of each experience. Touch vs hover, other UI issues. Targets for fat fingers: 40px recommended. Rethinking tool tips. Don’t hide critical info in a hover state.
42. Middle ground: Client wants responsive.
43. A little math upfront… Translate widths into percentages at the beginning. Instead of .content { 780px; } .sidebar { 320px; } Convert to .content { 71%; } .sidebar { 27%; }
44. Love these humongous beauty
45. Sick of Frontenac yet?
48. So far: When you’ve got the time and money, and the client’s onboard, go mobile-first. If you’ve got resource limitations, start responsive.
49. What about when there’s no time or money at all?
50. But you at least get a phone view out of it. Not a best practice.
51. Tips and tricks.
52. Use percentages for widths, ems/ rems for type and verticals.
53. Responsive images.
54. Elastic video.
55. So. To recap.
56. Stuff gets in the way.
57. Three tiers of responsive solutions.
58. Let’s keep learning best practices and new tech.
59. Thanks! Slides, links and 
 stuff we didn’t have time for are at marginhancers.com
60. Who wants to talk design process?
61. Question: Were you trained to thumbnail in school?
62. Do thumbnails for home page at 3-4 breakpoints (or four.)
63. • Visual texture: from grace notes to the drivers of the design
64. Typography gets HUGE.
65. Role of starters like Bootstrap, 320&up, Foundation
66. I love Style Tiles.
67. • Build thumbnailing, texture into the process.
68. • Start at the beginning, at the strategy/ concept stage.
69. • Make it part of the system for every project.
70. • When it’s part of your process, you can overcome client resistance.
72. Audience
73. • Existing site?
74. Take a look at your users.
75. • Really need Google Analytics - Jetpack site stats won’t cut it.
77. • New site? Who’s the target audience?
78. • If your client doesn’t know, DO A CREATIVE BRIEF.
79. • If your client does know, DO A CREATIVE BRIEF.
80. • Make the client sign off on ONE primary audience.
83. • Look at their usage patterns.
84. • Pew Internet
85. • Maritz Research
86. • Other
88. • Either way, just realize:
89. • More than half of all web traffic is mobile.
90. • Why would your client be different from all other clients?