Successfully reported this slideshow.

USC dot EDU: A Responsive Design Case Study

1

Share

Loading in …3
×
1 of 7
1 of 7

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

Related Audiobooks

Free with a 14 day trial from Scribd

See all

USC dot EDU: A Responsive Design Case Study

  1. 1. Gilbane 2014Tim Wright, @csskarma USC dot EDU Responsive Design Practices & Opinions
  2. 2. Gilbane 2014Tim Wright, @csskarma In the beginning…
  3. 3. Gilbane 2014Tim Wright, @csskarma The responsive solution.
  4. 4. Gilbane 2014Tim Wright, @csskarma Where we stumbled.
  5. 5. Gilbane 2014Tim Wright, @csskarma Where we are still stumbling.
  6. 6. Gilbane 2014Tim Wright, @csskarma Where we are succeeding.
  7. 7. Gilbane 2014Tim Wright, @csskarma Thank you.

Editor's Notes

  • Failed (with confidence) a statistics test in College
    - drank in the closet
    - learned how to fail
  • WE HAD MOBILE SITES!!!

    USC Palm Pre story with UA detection
    What are we doing here????
    Changing HTML for style…
  • Flex layout w/media queries & flexible images
    half the code bases (KEEP IT SIMPLE)
    SEO (if you care) - design for humans
    SCALABILITY: Focusing on features (screen size + touch)
  • Busting myths:
    Quick access
    “On the go”
    Performance is super important?

    Forgot universal access (focused on iPhone)
    Assumed that small screen === phone & large === desktop
    Hiding content
  • OVERTHINKING IT (Programmers!!!!)
    Adaptive vs. Responsive vs. Mobile vs. Adaptive Content
    The build vs. the experience
    STILL too much focus on the device (from dev, not UX)
    Small screen + touch !== mobile
    Images & bandwidth
    <picture>, srcset, Network APIs
  • Learning to keep it simple, but explore
    Universally improve UX (not just iPhone)
    Stepping back to look at the entire experience
    Creating lighter, faster, more targeted designs
    Mobile First >> Responsive like m.ew.com
    Creating RESS models
    As we grow and RWD matures we’ll figure it out. (STILL IN DRAFT)
  • ×