Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

From "mobile last" to "mobile first” -- a Pragmatic Approach to Responsive Design


Published on

Responsive web design is taking higher ed web development by storm. This session will cover how the University of Vermont recently converted their existing fixed-width web design into a responsive one using a mobile-first strategy. We'll discuss both the advantages (and disadvantages) of the mobile first approach as well as tips and techniques used to create a nimble foundation for rapidly converting fixed width sites to responsive ones throughout the institution. In addition, we'll reveal a post launch assessment of the effectiveness and performance of the responsive design.

Published in: Technology, Business
  • Be the first to comment

From "mobile last" to "mobile first” -- a Pragmatic Approach to Responsive Design

  1. 1. From "mobile last" to "mobile first” a Pragmatic Approach to Responsive Design Tatjana Salcedo Megan Hack University of Vermont @uvmwebteam #mobilefirstrwd
  2. 2. [source:] Who already has a responsive site? And who is planning on launching one this year?
  3. 3. 2013 the year of Responsive Web Design - Pete Cashmore, Mashable
  4. 4. And… The University of Vermont
  5. 5. But are we doing enough to optimize the mobile experience?
  6. 6. About three in four (74%) teens ages 12-17 say they access the internet on cell phones, tablets, and other mobile devices at least occasionally. [source: 2013 Pew Teens and Technology Report]
  7. 7. One in four teens are “cell-mostly” internet users — far more than the 15% of adults who are cell-mostly. Among teen smartphone owners, half are cell-mostly. [source: 2013 Pew Teens and Technology Report]
  8. 8. pragmatic /pragˈmatik/ adjective dealing with things sensibly and realistically in a way that is based on practical rather than theoretical considerations [Source: Oxford Dictionary of American English]
  9. 9. 2014 the year of Mobile First RWD
  10. 10. [Source: Kris Krug on Flickr]
  11. 11. Designing for mobile first not only prepares you for the explosive growth and new opportunities on the mobile internet, it forces you to focus and enables you to innovate in ways you previously couldn’t. - Luke Wroblewski, 2011
  12. 12. Mobile first means that you start your entire design process off by designing for the smallest screen.
  13. 13. Mobile First Awesomeness A mobile first approach promotes better content and navigation design.
  14. 14. [Source:]
  15. 15. [Source: Webdagene on Flickr]
  16. 16. Mobile First Awesomeness A mobile first approach promotes high performance websites.
  17. 17. RWD Page Sizes are Increasing [Source: Guy Podjarny, Real World RWD Performance Take 2]
  18. 18. Mobile RWD in Comparison [Source: Guy Podjarny, Real World RWD Performance Take 2]
  19. 19. Putting Mobile First RWD into Practice
  20. 20. UVM’s mobile first rwd objectives Make it direct Make it easy to use Make it beautiful Make it quick Make it flexible Make it happen!
  21. 21. our revised objectives Make it direct Make it easy to use Make it beautiful Make it quick Make it flexible Make it happen! Preserve existing layouts for desktop size screens
  22. 22. So, how is that mobile first?
  23. 23. Mobile first design doesn’t mean starting from scratch. It’s a useful process even if you have an existing desktop site. Start by asking what would the mobile version of this site or app look like? You’ll determine what priorities matter on key screens and flows. By the time you’re done, you’ll be likely to able to make the desktop version better based on what you learned designing for mobile. ~ Luke Wroblewski
  25. 25. it a struggle to angle content?
  26. 26. s it more dance?
  27. 27. navigation
  28. 28. Mind Your Buttons
  29. 29. images and top banners Determine Content Hierarchy Employ sliders and accordion text Utilize background images whenever possible Use html for text and css for buttons whenever possible
  30. 30. 700px wide 1200px wide
  31. 31. sidebars and micro-layouts
  32. 32. complex layouts
  33. 33.
  34. 34. FACT AND FIGURES Mobile First Results:
  35. 35. UVM Homepage Load Times [Source: pingdom]
  36. 36. Home Page Average Weight: Mobile vs. Widescreen 0 100 200 300 400 500 600 700 iPhone Widescreen Kb
  37. 37. Homepage Performance Stats Desktop Mobile (iPhone) [Source: WebPagetest]
  38. 38. Template File Sizes: Non-Responsive vs. Mobile 1st RWD 0 5 10 15 20 25 30 HTML Template CSS JavaScript Kb Non-RWD MF RWD
  39. 39. Mobile Visits Increasing 0 1000 2000 3000 4000 5000 6000 7000 8000 1-Jan 1-Feb 1-Mar 1-Apr 1-May 1-Jun 1-Jul 2013 2012
  40. 40. Mobile Visitor Data [Source: Google Analytics]
  41. 41. Mobile Visitor Data [Source: Google Analytics]
  42. 42. The Road Ahead
  43. 43. CONTENT REFINEMENT Road Ahead:
  44. 44. [Source: Flickr]
  45. 45. NAVIGATION DESIGN Road Ahead:
  46. 46. Slide and Push Menus
  49. 49. Performance: Limiting HTTP Requests
  50. 50. Performance: Compression and caching
  51. 51. Performance: Minify CSS JavaScript HTML
  52. 52. Performance: Responsive Image Solutions
  53. 53. Lessons Learned from MF RWD • Plan for content optimization on steroids • Don’t let navigation and UI controls take over your screen • Turning the visual design process on its head is not always easy • The development process goes more smoothly … usually • Performance optimization easier to achieve than with non-MF aproaches