So Responsive, So Refreshing

169 views
115 views

Published on

William & Mary's first foray into responsive design resulted in an award-winning design "refresh" project. Take a tour of the challenges faced by the university's Office of Creative Services as they explored the web's most recent frontier on the W&M homepage. Hear about the choice to employ evolutionary design over a complete redesign, and learn about the considerations that must be addressed to pull off a successful responsive site.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
169
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
1
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

So Responsive, So Refreshing

  1. 1. SO RESPONSIVE, SO REFRESHING Justin Schoonmaker Associate Director of Design Office of Creative Services William & Mary
  2. 2. ME AT WORKArt Director University Branding Designer Stuff (Interior Decorating, Instagram, etc.) 20% 30% 20% 30%
  3. 3. ME NOT AT WORKChanging Diapers Drinking StarbucksDrums / Philosophy / Boston Sports Building FortsTrying Not to Step On Toys Lego Star Wars on the Wii 7% 8% 25% 42% 8% 8%
  4. 4. ASHER
  5. 5. EDEN
  6. 6. LEVI
  7. 7. THAT’S COOL AND ALL, JUSTIN, BUT WHAT’S SO RESPONSIVE AND REFRESHING?
  8. 8. RESPONSIVE DESIGN What is it?“A web design approach aimed at crafting sites to provide an optimalviewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices.” Wikipedia
  9. 9. RESPONSIVE DESIGN What is it? Ethan Marcotte (2010) designer, usability expert, author Mashable (2013) “The Year of Responsive Design”
  10. 10. RESPONSIVE DESIGN Why should I care? Because this is no longer acceptable.
  11. 11. RESPONSIVE DESIGN Why should I care? And because this is better.
  12. 12. RESPONSIVE DESIGN Why should I care?Display size data doesn’t necessarily indicate browser window size Ever growing diversity in device size Control over every possible view Growing mobile usage
  13. 13. RESPONSIVE DESIGN Why should I care? Accessibility for impaired eyesight Potentially eliminates need for separate mobile siteIf you communicate digitally, you need to be able to talk intelligently about it
  14. 14. “WEB REFRESH”(A.K.A. “EVOLUTIONARY DESIGN”) What is it? NOT a redesign Analogy: redecorating a house vs. redesigning a house
  15. 15. “WEB REFRESH”(A.K.A. “EVOLUTIONARY DESIGN”) Why should I care? Saves you tens of thousands of dollars Gives you a chance to develop in-house talent Provides consistency for repeat visitors Gives you an out in an emergency (U Cal)
  16. 16. SO IF YOU EVER DO THIS...
  17. 17. YOU CAN EASILY REVERT TO THIS.
  18. 18. CAL IS GREAT AND ALL, JUSTIN, BUT WHAT DID WILLIAM & MARY DO?
  19. 19. WILLIAM & MARY’S JOURNEY July 2008 - Today Launched a redesign in July 2008 Won a slew of subsequent awards Hardly touched the design for four years
  20. 20. WILLIAM & MARY’S JOURNEY July 2008 - Today
  21. 21. WILLIAM & MARY’S JOURNEY July 2008 - Today Mid 2011, we needed to “rearrange our closet” Homepage refresh happened between 8/11 and 3/12 (leadership turnover)Cross-campus collaboration with Alumni, Development, and the Business School
  22. 22. WILLIAM & MARY’S JOURNEY July 2008 - Today Launched in 2012 to a lot of great feedback W&M News was happy to have more spaceUniversity and College Designer’s Association was happy to give us a design award
  23. 23. WILLIAM & MARY’S JOURNEY July 2008 - Today
  24. 24. TELL US MORE, JUSTIN!!!!
  25. 25. DESIGN CONSIDERATIONS Need to breathe, but also need more content “People don’t scroll” Actually, they do
  26. 26. DESIGN CONSIDERATIONS Need to breathe, but also need more content http://bit.ly/ZHqZTBDevice diversity makes it almost impossible to define “above the fold” Everyone scrolls now: mobile is nothing without it
  27. 27. DESIGN CONSIDERATIONSThe newest generation is born with devices at their fingertips
  28. 28. DESIGN CONSIDERATIONS Larger, more informative photosStephen Salpukas, our award-winning photographer Social media feedback Nested photo slideshow with caption space
  29. 29. DESIGN CONSIDERATIONS More contrastMonochromatic color schemes hit a peak in 2009-ish More contrast and color is more popular now
  30. 30. DESIGN CONSIDERATIONS Less boxyYou can now serve rounded corners to people without images
  31. 31. DESIGN CONSIDERATIONS Providing “buttons” for tactile navigation Provided circles for accessing nested content Cut down on links that required text-clicking
  32. 32. DESIGN CONSIDERATIONS Social Media Surveyed about two dozen schoolsAbout 80% had social media in footer, not header
  33. 33. RESPONSIVE CONSIDERATIONS Do you serve same photos to all devices? Spend time getting it to look good in every format
  34. 34. PLANS FOR THE FUTURE Make all sites responsive This is a mammoth taskW&M has over 50,000 webpages with many unique page templates 6-month timeline for main undergrad site
  35. 35. PLANS FOR THE FUTURE Optimizing for Retina Displays Retina is not new technology; it’s better technology Everyone else will follow suit What Apple DOESN’T tell you
  36. 36. PLANS FOR THE FUTURE Optimizing for Retina Displays Must use graphics/images that are 2x size, NOT 2x resolution Use code to force scale downThe downside: heavier pages OR more code work to detect devices
  37. 37. STOP TALKING TO US, JUSTIN, AND LET US TALK A LITTLE.
  38. 38. JUSTIN SCHOONMAKER jlscho@wm.edu 757.221.7984 @justschoon

×