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

Lessons Learned from a 500,000 Page Responsive Design

Seth Meranda
October 09, 2012
6
2.2k

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
150
Google Analytics and the Chancellor's 4 Rs
smeranda
1
110

Featured

See All Featured
It's Worth the Effort
3n
180
27k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
WebSockets: Embracing the real-time Web
robhawkes
59
7k
Building Adaptive Systems
keathley
29
1.8k
Docker and Python
trallard
33
2.7k
Adopting Sorbet at Scale
ufuk
67
8.6k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
Teambox: Starting and Learning
jrom
127
8.4k
Typedesign – Prime Four
hannesfritz
36
2k
Learning to Love Humans: Emotional Interface Design
aarron
266
39k
The Art of Programming - Codeland 2020
erikaheidi
41
12k
Making Projects Easy
brettharned
106
5.5k

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