Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Designing Responsively from Mobile to HD

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.

2e0312c825c0338b1d29b4d3cfb087ae?s=128

Philip Zastrow

March 28, 2013
Tweet

More Decks by Philip Zastrow

Other Decks in 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.
  29. 29

  30. 30

  31. 31

  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
  47. 47

  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.
  64. 64

  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.
  71. 71

  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.
  80. 80

  81. 81

  82. 82

  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