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

Lessons Learned from a 500,000 Page Responsive ...

Seth Meranda
October 09, 2012
6
2.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.

Seth Meranda

October 09, 2012
Tweet

More Decks by Seth Meranda

See All by Seth Meranda
Getting the Edge: Metric Enhanced Design
smeranda
0
160
Google Analytics and the Chancellor's 4 Rs
smeranda
1
110

Featured

See All Featured
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
Measuring & Analyzing Core Web Vitals
bluesmoon
4
130
Documentation Writing (for coders)
carmenintech
65
4.4k
BBQ
matthewcrist
85
9.3k
Faster Mobile Websites
deanohume
305
30k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
GitHub's CSS Performance
jonrohan
1030
460k
Facilitating Awesome Meetings
lara
50
6.1k
KATA
mclloyd
29
14k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
42
9.2k
Site-Speed That Sticks
csswizardry
0
28
Making the Leap to Tech Lead
cromwellryan
133
8.9k

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