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.

Philip Zastrow

March 28, 2013
Tweet

More Decks by Philip Zastrow

Other Decks in Design

Transcript

  1. 3 • Responsive Web Design • Our History with #RWD

    • Our #RWD Process • Some Final Thoughts
  2. 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
  3. 7 #RWD means creating web design layouts that fit to

    any screen size, regardless of the displaying device.
  4. 10 Media Queries @media screen and (min-width:40em){ /* Width-specific CSS

    */ } @media screen and (min-width:56em){ /* Width-specific CSS */ }
  5. 17 #RWD wakes us up to the reality of the

    web…there are no physical dimensions.
  6. 22 • Planning - Site map • Design - Photoshop

    comp • Development - Final Website Client Deliverables before #RWD
  7. 29

  8. 30

  9. 31

  10. 39 Contextual Issues We needed a way to show clients

    the visual design in the context of their browser.
  11. 47

  12. 50 Our #RWD Inspired Process This is done by separating

    our content and design deliverables.
  13. 51 • Content Priority • Skeleton Site • Wireframes •

    Style Prototype • Development • #RWD Layout Our #RWD Inspired Process
  14. 52 • Content Priority • Skeleton Site • Wireframes •

    Style Prototype • Development • #RWD Layout Our #RWD Inspired Process { { Content Design
  15. 55 Our #RWD Inspired Process Content priority is simply a

    hierarchal ordering of a page’s content.
  16. 56 Our #RWD Inspired Process We use this as an

    exercise and tool to help clients think mobile and content first.
  17. 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
  18. 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
  19. 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
  20. 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
  21. 61 Our #RWD Inspired Process Basic design principles are used

    to maintain this hierarchy throughout the design process.
  22. 63 Our #RWD Inspired Process A standard site setup in

    our CMS for clients to begin content entry.
  23. 64

  24. 65 Our #RWD Inspired Process In our old process, clients

    were trained after the site was built. Now it happens early on.
  25. 66 Our #RWD Inspired Process There were times where a

    site would be fully designed and developed with zero real content.
  26. 70 Our #RWD Inspired Process We try to not use

    real content beyond the top level titles from the Content Priority.
  27. 71

  28. 75 Our #RWD Inspired Process The Style Prototype is a

    single HTML page that is styled with CSS as a look and feel concept.
  29. 76 Our #RWD Inspired Process We want our clients to

    see the site’s styles in their browser and on their devices.
  30. 79 Our #RWD Inspired Process Style Prototypes are not meant

    for layout, so the page’s content is displayed in one column.
  31. 80

  32. 81

  33. 82

  34. 85 Our #RWD Inspired Process The medium is the browser

    and the designer should work within the medium.
  35. 90 Our #RWD Inspired Process The final markup is created

    for the template on the Skeleton Site.
  36. 91 Our #RWD Inspired Process Any special programming functions are

    done at this point, whether in javascript or in the CMS.
  37. 92 Our #RWD Inspired Process Once the development is done,

    the developer adds the Style Prototype CSS to the site.
  38. 93 Our #RWD Inspired Process Theoretically we should have a

    fully functioning small-screen view site.
  39. 96 Our #RWD Inspired Process Starting at a small width

    the designer adds media queries while expanding the browser’s window.
  40. 97 Our #RWD Inspired Process The media queries are added

    whenever the designer feels the layout is breaking or looks odd.
  41. 98 Our #RWD Inspired Process The designer may need to

    make adjustments to other elements as well.
  42. 100 Our #RWD Inspired Process Layout is a designer’s job

    and #RWD presents us with an infinite number of layouts.
  43. 104 Our #RWD Inspired Process Review We need a process

    that educated our clients by focusing our deliverables.
  44. 105 Our #RWD Inspired Process Review Content Priority and Skeleton

    Site are used to educate clients and focus attention on content.
  45. 106 Our #RWD Inspired Process Review Wireframes are created to

    conceptualize the site’s layout for the client and guide the developers.
  46. 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.
  47. 108 Our #RWD Inspired Process Review Developer creates the template

    with any needed functions and adds the prototype CSS.
  48. 109 Our #RWD Inspired Process Review The designer finishes up

    the website by laying out the site with #RWD media query principles.
  49. 112 Final Thoughts There is a shift in time for

    the roles that we have to account for in quoting jobs.
  50. 113 Final Thoughts We have found that this process is

    actually faster than our old process.
  51. 115 Final Thoughts A #RWD process plays on your or

    your team’s strengths and weaknesses.
  52. 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.