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

Responsive Design UCSD System Administrator Meeting

bpollak
March 13, 2013

Responsive Design UCSD System Administrator Meeting

bpollak

March 13, 2013
Tweet

More Decks by bpollak

Other Decks in Technology

Transcript

  1. Using Responsive Web Design
    to future proof your Websites & Apps

    View full-size slide

  2. Brett Pollak Cristian Horta
    @brettcpollak @cristian_horta
    @campusweboffice

    View full-size slide

  3. EARLY 1990S WEB DESIGN

    View full-size slide

  4. • Single text
    column using
    HTML
    • Mostly text and
    hyperlinks
    • Embedded images
    around 1994
    EARLY 1990S WEB DESIGN

    View full-size slide

  5. • Table-based
    layouts allowed
    for multiple
    columns
    • Websites were a
    combination of
    sliced images and
    HTML
    MID 1990S
    WEB DESIGN
    ucsd.edu in 1995

    View full-size slide

  6. LATE 1990
    AND 2000S
    WEB DESIGN
    • Animation
    • Flash
    • CSS/JavaScript
    • Web 2.0!

    View full-size slide

  7. June 29th, 2007

    View full-size slide

  8. People love these things

    View full-size slide

  9. Over the past year we’ve
    averaged a .5% increase in
    mobile traffic per month
    to the campus home page.

    View full-size slide

  10. About 16% of the traffic to the
    UCSD home page is from
    mobile devices

    View full-size slide

  11. About 22% of the traffic to
    the UCSD Student Portal is
    from mobile devices.

    View full-size slide

  12. What are our options to
    support mobile devices?

    View full-size slide

  13. m.university.edu
    Responsive website

    View full-size slide

  14. • Built using Objective C
    (Apple) or Java (Android)
    • User downloads app to
    the phone
    • Deploying Apps means
    having staff learn the
    technology that powers
    each platform
    • Can use a code builder
    such as Titanium or
    Phonegap
    APP STORE

    View full-size slide

  15. (m.university.edu)
    • Separate site where layout and
    content are geared specifically to
    mobile devices
    • HTML, CSS, JavaScript usually
    designed for smaller screen sizes
    • Frameworks include Kurogu,
    Mobile Web Framework, JQuery
    Mobile, etc.
    MOBILE SITE

    View full-size slide

  16. • One website who’s layout
    automatically conforms
    to the resolution of the
    device accessing the site
    • One set of code to
    maintain
    • Cross platform: works on
    all modern browsers
    • Frameworks include
    Twitter Bootstrap,
    Foundation3, HTML5
    Boilerplate, etc.
    RESPONSIVE WEBSITE

    View full-size slide

  17. m.ucsd.edu iPhone App
    Android App
    One App to rule them all

    View full-size slide

  18. Student
    Affairs
    IT
    Academic
    Affairs
    IT
    Housing &
    Dining
    IT
    Libraries
    IT
    Admin
    Computing
    Academic
    Computing
    Colleges
    IT

    View full-size slide

  19. What about all the CMS content?

    View full-size slide

  20. Piloted with the Libraries

    View full-size slide

  21. Courtesy: Brad Frost

    View full-size slide

  22. 2009 22 Screens
    Visits to campus home page
    2012 523 Screens

    View full-size slide

  23. Device Fragmentation
    3,997 different
    Android Devices

    View full-size slide

  24. Device Fragmentation
    3,997 different
    Android Devices

    View full-size slide

  25. This article created a buzz…

    View full-size slide

  26. The dude even wrote a book about it!

    View full-size slide

  27. One website that looks great on all devices

    View full-size slide

  28. One website that looks great on all devices

    View full-size slide

  29. RWD
    KEY COMPONETS

    View full-size slide

  30. Viewport

    • Mobile browsers render site at a
    larger width than the actual
    device width
    • By using the viewport scale, we
    can set to default viewport width,
    rather than a simulated width

    View full-size slide

  31. Media Queries
    body {
    background-color: #FFF;
    color: #333;
    }
    @media screen and (max-width: 768px) {
    body {
    background-color: #333;
    color: #FFF;
    }
    }
    CSS3
    @media

    View full-size slide

  32. Fluid Layouts
    Not Tables – Div Layout
    Percentage Widths

    View full-size slide

  33. Fluid Images
    We can accomplish this by setting all images to have a max width of 100%
    Images should flex with your layout

    View full-size slide

  34. @media screen and (max-width: 768px) {
    img{
    max-width: 100% !important;
    }
    }
    Fluid Images

    View full-size slide

  35. .HTML .CSS
    viewport: 1024px

    View full-size slide

  36. .HTML .CSS
    viewport: 768px

    View full-size slide

  37. Do’s
    &
    Dont’s

    View full-size slide

  38. DON’T AVOID: The use of
    tables. Especially for layout!
    DO: Use DIV’s and CSS
    instead.
    IF YOU MUST:
    Make sure they’re capable of
    flexing. Use tables for what they
    were intended to do, tabular data!

    View full-size slide

  39. Table based layout:

    View full-size slide

  40. Fluid Layout (using div’s):

    View full-size slide


  41. Flash
    YouTube
    Iframes
    etc…

    View full-size slide

  42. DO: Analyze and rethink your
    content if necessary.
    “LESS IS MORE”
    DON’T: Create visual clutter

    View full-size slide

  43. From
    the
    Sysadmin List

    View full-size slide

  44. TWO PRIMARY TYPES
    • Grid layout frameworks
    – 1140 CSS Grid
    – HTML5 Boilerplate
    • Grid layout + UI Library
    – Twitter Bootstrap
    – Foundation 3 (By Zurb)
    Responsive Frameworks

    View full-size slide

  45. • Responsive grid
    • Normalizing CSS
    • Polyfills for older browsers
    WHAT IT TYPICALLY INCLUDES
    Grid Layout Frameworks

    View full-size slide

  46. WHAT IT TYPICALLY INCLUDES
    • Responsive grid
    • Normalizing CSS
    • Polyfills for older browsers
    • UI libraries
    – Navigation
    – Form elements
    – Etc.
    Grid Layout Frameworks + UI Library

    View full-size slide

  47. responsive.vermilion.com/compare.php

    View full-size slide

  48. WHAT IT INCLUDES
    • Responsive layout
    • Polyfills for older browsers
    • UI libraries (Kitchen Sink)
    – Navigation
    – Form elements
    – Etc.
    • UC San Diego branding & CWO Support
    CWO Decorator & Templates

    View full-size slide