Designing Responsively from Mobile to HD

Presentation given at Environment for Human's .Edu Guru Summit 2013.

http://environmentsforhumans.com/2013/doteduguru-summit/

---

Responsive web design has revolutionized how we design sites at Notre Dame. Very early in our adoption of responsive web design, frustrations cropped up as we struggled with our typical design and development process.

For years our team has had a silo approach to design and development: a designer entrenched in Photoshop created a design, then the Photoshop file was given to a developer to build the website. Taking a step back and looking at this process, it didn’t work.

Responsive design requires an expanded understanding of our medium. The design process has to change, in a big way, to take advantage of the opportunities provided by responsive web design.

Transcript

1. 1 DESIGNING RESPONSIVELY From Mobile to HD
2. 2 Philip Zastrow Web Designer University of Notre Dame @zastrow
3. 3 • Responsive Web Design • Our History with #RWD • Our #RWD Process • Some Final Thoughts
4. #RWD What is Responsive Web Design? 4
5. 5 “Fluid grids, flexible images, and media queries are the three technical ingredients for responsive web design…” Ethan Marcotte Responsive Web Design, A List Apart—May 25, 2010 http://paz.cc/rwd-article
6. 6 Right…so… What does that mean?
7. 7 #RWD means creating web design layouts that fit to any screen size, regardless of the displaying device.
8. 8 Fluid Grids % article { width:80%; }
9. 9 Flexible Images img { max-width:100%; }
10. 10 Media Queries @media screen and (min-width:40em){ /* Width-specific CSS */ } @media screen and (min-width:56em){ /* Width-specific CSS */ }
11. 11 I’m NOT here to SELL #RWD
12. 12 Aftereffects of #RWD
13. 13 #RWD is a way to make websites.
14. 14 #RWD changes stuff
15. 15 #RWD changes planning and problem solving.
16. 16 #RWD changes how we approach designing websites.
17. 17 #RWD wakes us up to the reality of the web…there are no physical dimensions.
18. 18 screen sizes on ND.edu in one month February 1 – March 1, 2013 1‚700
19. 19 #RWD @ Notre Dame A history of
20. 20 before #RWD
21. 21 •Planning •Design •Development before #RWD 1. Our design and development process
22. 22 • Planning - Site map • Design - Photoshop comp • Development - Final Website Client Deliverables before #RWD
23. 23 2.We needed a good mobile solution •Mobile Friendly Stylesheet before #RWD
24. 24 before #RWD •Mobile Friendly Stylesheet •Adaptive 2.We needed a good mobile solution
25. 25 #RWD@ND The beginning of
26. 26 #RWD@ND http://paz.cc/rwd-book
27. 27 #RWD@ND Our #RWD approach was tacking it on as a development task.
28. 28 #RWD@ND Our developers made the #RWD layout decisions from desktop down.
32. 32 #RWD revealed flaws in our process #RWD@ND
33. 33 issues with our design+dev process #RWD@ND • Collaboration • Contextual • Educational 3
34. 34 #RWD@ND Collaboration Issues
35. 35 .box { box-shadow:0 1px 3px rgba(0,0,0,0.5); } Collaboration Issues
36. 36 .box { box-shadow:0 2px 4px 4px #000; } Collaboration Issues
37. 37 “It doesn’t look like the design.” —Our Clients
38. 38 #RWD@ND Contextual Issues
39. 39 Contextual Issues We needed a way to show clients the visual design in the context of their browser.
40. 40 Contextual Issues We found PSD comps as deliverables was a disservice to our clients.
41. 41 #RWD@ND Educational Issues
42. 42 Educational Issues We needed to guide our clients through the process in a focused manner.
43. 43 #RWD@ND We didn’t see all these issues at once.
44. 44 nd.edu Redesign
45. 45 #RWD showed me that the 960 grid was limiting. nd.edu Redesign
46. 46 I wanted ND.edu to fill the full frame of an HDTV. nd.edu Redesign
48. 48 Our #RWd Inspired Process
49. 49 Our #RWD Inspired Process We need our clients to focus on content first.
50. 50 Our #RWD Inspired Process This is done by separating our content and design deliverables.
51. 51 • Content Priority • Skeleton Site • Wireframes • Style Prototype • Development • #RWD Layout Our #RWD Inspired Process
52. 52 • Content Priority • Skeleton Site • Wireframes • Style Prototype • Development • #RWD Layout Our #RWD Inspired Process { { Content Design
53. 53 Content Priority Our #RWD Inspired Process Account Manager, Information Architect
54. 54 Build Responsively http://paz.cc/workshop @brworkshop inspired by:
55. 55 Our #RWD Inspired Process Content priority is simply a hierarchal ordering of a page’s content.
56. 56 Our #RWD Inspired Process We use this as an exercise and tool to help clients think mobile and content first.
57. 57 Our #RWD Inspired Process Content Priority 1. Login 2. Appointment Info 3. Navigation 4. Quick Links 5. News 6. Events 7. Social Media Icons
58. 58 Our #RWD Inspired Process Content Priority 1. Login 2. Appointment Info 3. Navigation 4. Quick Links 5. Undergrad 6. Events 7. Social Media Icons
59. 59 Our #RWD Inspired Process Content Priority 1. Login 2. Appointment Info 3. Navigation 4. Quick Links 5. Undergrad 6. Events 7. Alumni 8. Social Media Icons
60. 60 Our #RWD Inspired Process Content Priority 1. Login 2. Appointment Info 3. Navigation 4. Quick Links 5. Undergrad 6. Events 7. Alumni 8. Twitter Feed
61. 61 Our #RWD Inspired Process Basic design principles are used to maintain this hierarchy throughout the design process.
62. 62 Skeleton Site Our #RWD Inspired Process Developer or Information Architect
63. 63 Our #RWD Inspired Process A standard site setup in our CMS for clients to begin content entry.
65. 65 Our #RWD Inspired Process In our old process, clients were trained after the site was built. Now it happens early on.
66. 66 Our #RWD Inspired Process There were times where a site would be fully designed and developed with zero real content.
67. 67 Wireframes Our #RWD Inspired Process Designer
68. 68 Our #RWD Inspired Process Wireframes are based on the Content Priority.
69. 69 Our #RWD Inspired Process Wireframes are detailed for layout, not look and feel.
70. 70 Our #RWD Inspired Process We try to not use real content beyond the top level titles from the Content Priority.
72. 72 Internal Review Our #RWD Inspired Process Information Architect, Developer, Project Manager, Account Manager
73. 73 Style Prototype Our #RWD Inspired Process Designer
74. 74 Jeremy loyd http://paz.cc/jeremy @jeremyloyd inspired by:
75. 75 Our #RWD Inspired Process The Style Prototype is a single HTML page that is styled with CSS as a look and feel concept.
76. 76 Our #RWD Inspired Process We want our clients to see the site’s styles in their browser and on their devices.
77. 77 Our #RWD Inspired Process In their context.
78. 78 Our #RWD Inspired Process Style Prototypes are browser tested.
79. 79 Our #RWD Inspired Process Style Prototypes are not meant for layout, so the page’s content is displayed in one column.
83. 83 Our #RWD Inspired Process Why have designers work in CSS?
84. 84 Our #RWD Inspired Process Our designers know CSS.
85. 85 Our #RWD Inspired Process The medium is the browser and the designer should work within the medium.
86. 86 Internal Review Our #RWD Inspired Process Lead Developer, Project Manager, Account Manager
87. 87 Our #RWD Inspired Process Client Design Deliverables Wireframe and Style Prototype
88. 88 Our #RWD Inspired Process Wireframes and Style Prototypes have replaced the PSD as a deliverable.
89. 89 Template Development Our #RWD Inspired Process Developer
90. 90 Our #RWD Inspired Process The final markup is created for the template on the Skeleton Site.
91. 91 Our #RWD Inspired Process Any special programming functions are done at this point, whether in javascript or in the CMS.
92. 92 Our #RWD Inspired Process Once the development is done, the developer adds the Style Prototype CSS to the site.
93. 93 Our #RWD Inspired Process Theoretically we should have a fully functioning small-screen view site.
94. 94 Our #RWD Inspired Process And we usually do.
95. 95 #RWd Layout Our #RWD Inspired Process Designer
96. 96 Our #RWD Inspired Process Starting at a small width the designer adds media queries while expanding the browser’s window.
97. 97 Our #RWD Inspired Process The media queries are added whenever the designer feels the layout is breaking or looks odd.
98. 98 Our #RWD Inspired Process The designer may need to make adjustments to other elements as well.
99. 99 Our #RWD Inspired Process Why a designer again?
100. 100 Our #RWD Inspired Process Layout is a designer’s job and #RWD presents us with an infinite number of layouts.
101. 101 Internal Review Our #RWD Inspired Process The whole team (and sometimes the client)
102. 102 Site Launch Party Our #RWD Inspired Process Erik (Our Lead Developer)
103. 103 Review Our #RWD Inspired Process
104. 104 Our #RWD Inspired Process Review We need a process that educated our clients by focusing our deliverables.
105. 105 Our #RWD Inspired Process Review Content Priority and Skeleton Site are used to educate clients and focus attention on content.
106. 106 Our #RWD Inspired Process Review Wireframes are created to conceptualize the site’s layout for the client and guide the developers.
107. 107 Our #RWD Inspired Process Review A Style Prototype is used to conceptualize the look and feel of the site, but also starts the final CSS.
108. 108 Our #RWD Inspired Process Review Developer creates the template with any needed functions and adds the prototype CSS.
109. 109 Our #RWD Inspired Process Review The designer finishes up the website by laying out the site with #RWD media query principles.
110. 110 Final Thoughts
111. 111 Final Thoughts You need client buy-in.
112. 112 Final Thoughts There is a shift in time for the roles that we have to account for in quoting jobs.
113. 113 Final Thoughts We have found that this process is actually faster than our old process.
114. 114 Final Thoughts Keep in mind that a process like this is not plug-n-play.
115. 115 Final Thoughts A #RWD process plays on your or your team’s strengths and weaknesses.
116. 116 Final Thoughts A designer that doesn’t know CSS can still design #RWD websites.
117. 117 Final Thoughts Your #RWD process will look different than ours.
118. 118 Last Thought (I promise)
119. 119 Last Thought (I promise) Philip’s Web Design 101 Web design is about designing content, not pretty places for content to live. #RWD encourages this kind of thinking and approach.
120. 120 DESIGNING RESPONSIVELY That is
121. 121 THANK YOU! Philip Zastrow @zastrow phanza.com