Lessons Learned from a 500,000 Page Responsive Design

729cce6f99ce03f47faaead43ccf1ead?s=47 Seth Meranda
October 09, 2012
1.4k

Lessons Learned from a 500,000 Page Responsive Design

In the spring of 2012, the University of Nebraska-Lincoln converted the template powering unl.edu to a responsive design. In this presentation, Seth Meranda -- the User Experience Architect -- explores the steps taken and a few of trials and successes from the process.

729cce6f99ce03f47faaead43ccf1ead?s=128

Seth Meranda

October 09, 2012
Tweet

Transcript

  1. from a 1 DESIGN LESSONS LEARNED page 500,000 Tuesday, October

    9, 12
  2. 2 @smeranda User Experience Architect UNIVERSITY OF NEBRASKA-LINCOLN Associate Consultant

    NOEL-LEVITZ Prospect looking for an invite! Tuesday, October 9, 12
  3. Tuesday, October 9, 12

  4. Tuesday, October 9, 12

  5. Tuesday, October 9, 12

  6. Tuesday, October 9, 12

  7. Tuesday, October 9, 12

  8. Tuesday, October 9, 12

  9. Tuesday, October 9, 12

  10. 11 Those working on web pages outside of the guidance

    do no favors to themselves or this university in our efforts to build a cohesive image. “ Chancellor Perlman, 2005 Tuesday, October 9, 12
  11. 11 “ Chancellor Perlman, 2005 I will deal directly with

    units who are responsible for non-complying publications. Tuesday, October 9, 12
  12. 12 Tuesday, October 9, 12

  13. 12 Tuesday, October 9, 12

  14. 13 Mobile Wrapper Leverage Standard DOM Quick & Dirty Tuesday,

    October 9, 12
  15. 14 beautiful tangled mess Tuesday, October 9, 12

  16. 15 13.06% Conversion Rate 24.13% Conversion Rate Tuesday, October 9,

    12
  17. 16 I skate to where the puck is going to

    be... W ayne Gretzky Tuesday, October 9, 12
  18. 17 Tuesday, October 9, 12

  19. 18 Our user is mobile Tuesday, October 9, 12

  20. 18 Our user isN’t mobile Tuesday, October 9, 12

  21. 19 Tuesday, October 9, 12

  22. 19 Tuesday, October 9, 12

  23. 20 mobile first Tuesday, October 9, 12

  24. 21 320 and Up stuffandnonsense.co.uk/projects/320andup/ Tuesday, October 9, 12

  25. 22 Tuesday, October 9, 12

  26. 23 Tuesday, October 9, 12

  27. 23 Tuesday, October 9, 12

  28. 23 Tuesday, October 9, 12

  29. 23 Tuesday, October 9, 12

  30. 24 Header Navigation Footer Content Fonts Tuesday, October 9, 12

  31. 25 @media (min-width: 320px) { rules {properties: values;} } @media

    (min-width: 600px) { rules {properties: values;} } @media (min-width: 960px) { rules {properties: values;} } gist.github.com/2026690 Tuesday, October 9, 12
  32. 26 @media (min-width: 320px) { } @media (min-width: 600px) {

    } @media (min-width: 960px) { } rules {properties: values;} rules {properties: values;} rules {properties: values;} @media (min-width: 320px) { } @media (min-width: 600px) { } @media (min-width: 960px) { } rules {properties: values;} rules {properties: values;} rules {properties: values;} @media (min-width: 320px) { } @media (min-width: 600px) { } @media (min-width: 960px) { } rules {properties: values;} rules {properties: values;} rules {properties: values;} Header Footer Navigation rules {properties: values;} rules {properties: values;} rules {properties: values;} Tuesday, October 9, 12
  33. 28 @media (min-width: 320px) { } @media (min-width: 600px) {

    } @media (min-width: 960px) { } rules {properties: values;} rules {properties: values;} rules {properties: values;} @media (min-width: 320px) { } @media (min-width: 600px) { } @media (min-width: 960px) { } rules {properties: values;} rules {properties: values;} rules {properties: values;} @media (min-width: 320px) { } @media (min-width: 600px) { } @media (min-width: 960px) { } rules {properties: values;} rules {properties: values;} rules {properties: values;} Header Footer Navigation rules {properties: values;} rules {properties: values;} rules {properties: values;} 960.css MINIFIED 600.css MINIFIED 320.css MINIFIED base.css MINIFIED Tuesday, October 9, 12
  34. 29 @import url('320.css') (min-width: 320px); @import url('480.css') (min-width: 480px); @import

    url('600.css') (min-width: 600px); @import url('768.css') (min-width: 768px); @import url('960.css') (min-width: 960px); @import url('1040.css') (min-width: 1040px); mq.css Tuesday, October 9, 12
  35. 30 <link rel="stylesheet" type="text/css" media="all" href="base.css"> <link rel="stylesheet" type="text/css" media="all

    and (min-width: 320px)" href="mq.css"> <html> Tuesday, October 9, 12
  36. 31 130kb {CSS} Mobile Proxy 104kb {CSS} Responsive Design Tuesday,

    October 9, 12
  37. 31 130kb {CSS} Mobile Proxy 104kb {CSS} Responsive Design 25%

    Savings Tuesday, October 9, 12
  38. 32 What about IE? Tuesday, October 9, 12

  39. 33 Do websites need to look exactly the same in

    every browser? dowebsitesneedtolookexactlythesameineverybrowser.com Tuesday, October 9, 12
  40. 34 Tuesday, October 9, 12

  41. 34 Tuesday, October 9, 12

  42. 35 <link rel="stylesheet" type="text/css" media="all" href="base.css"> <link rel="stylesheet" type="text/css" media="all

    and (min-width: 320px)" href="mq.css"> <html> Tuesday, October 9, 12
  43. 35 <link rel="stylesheet" type="text/css" media="all" href="base.css"> <link rel="stylesheet" type="text/css" media="all

    and (min-width: 320px)" href="mq.css"> <html> IE chokes on this Tuesday, October 9, 12
  44. 35 <link rel="stylesheet" type="text/css" media="all" href="base.css"> <link rel="stylesheet" type="text/css" media="all

    and (min-width: 320px)" href="mq.css"> <html> <!--[if lt IE 9]> <link rel="stylesheet" type="text/css" media="all" href="combined_widths.css" /> <![endif]--> IE chokes on this Tuesday, October 9, 12
  45. 36 Tuesday, October 9, 12

  46. Vani a 37 Javascript Tuesday, October 9, 12

  47. 38 WITHOUT JQUERY IS JAVASCRIPT POSSIBLE Tuesday, October 9, 12

  48. 39 Large devices 150kb <JS> Tuesday, October 9, 12

  49. 39 43kb <JS> Small Devices Large devices 150kb <JS> Tuesday,

    October 9, 12
  50. 40 User Interface Tabs Tuesday, October 9, 12

  51. 41 User Interface IMAGE SWAP Tuesday, October 9, 12

  52. 42 User Interface COntent First Tuesday, October 9, 12

  53. 42 User Interface COntent First Tuesday, October 9, 12

  54. 43 Can I use.. canisue.com Tuesday, October 9, 12

  55. 44 CSS3 Files css3files.com Tuesday, October 9, 12

  56. 45 Tuesday, October 9, 12

  57. 46 CSS :BEfore & After Tuesday, October 9, 12

  58. 46 CSS :BEfore & After Tuesday, October 9, 12

  59. 47 User Interface Tables Tuesday, October 9, 12

  60. 47 User Interface Tables Tuesday, October 9, 12

  61. 48 TinyPNG - Compress PNG images tinypng.org Tuesday, October 9,

    12
  62. 49 @smeranda Prospect looking for an invite! speakerdeck.com/u/smeranda Tuesday, October

    9, 12