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

The Magic and Pain of Responsive Design

Ee7858da539f69023efc718a93679eb4?s=47 Matthias Lau
September 08, 2012

The Magic and Pain of Responsive Design

Über das wertvolle Konzept des Responsive Designs wird viel geredet und es wird zurecht gehyped. In der Praxis sieht man sich allerdings schnell Herausforderungen gegenüber, die oft einen massiven Mehraufwand bedeuten. Wann Responsive Design Sinn macht, warum es so großartig ist, welche Stolpersteine so auf dem Weg liegen und was dies für die Erstellungs-Prozesse einer Webseite bedeutet, dies wird hier betrachtet.

Ee7858da539f69023efc718a93679eb4?s=128

Matthias Lau

September 08, 2012
Tweet

More Decks by Matthias Lau

Other Decks in Programming

Transcript

  1. DEVCON ´12 PRESENTED BY MATTHIAS LAU THE MAGIC RESPONSIVE AND

    PAIN OF DESIGN .
  2. { name: "Matthias Lau", link: "http://laumatthias.de", twitter: "@matthiaslau", hometown: {

    name: "Hamburg, Germany" }, bio: "Web-Allrounder mit Leidenschaft für E-Commerce, Coden, Hacken, Konzipieren, Designen.", work: { employer: { name: "Jimdo" }, position: { name: "Shop-Rakete" }, }, }
  3. More than desktop: TVs, laptops, tablets, eReader and smartphones. AGE

    OF HETEROGENEOUS DEVICES 960 GRID IS SO YESTERDAY 4 1 2Fragmented screen sizes. Different usability concepts, e.g. touch. Websites should always look good and be usable. 3
  4. APPS DESKTOP ONLY (apple.com) MOBILE WEBSITES RESPONSIVE DESIGN SERVE THE

    DEVICES POSSIBILITIES
  5. MAKE IT RESPONSIVE HOW DOES RESPONSIVE DESIGN WORK? /* IPAD

    */ @media screen and (max-device-width: 1024px) { } /* IPHONE */ @media screen and (max-device-width: 480px) { }
  6. None
  7. INUIT CSS http://csswizardry.com/inuitcss/ FOUNDATION http://foundation.zurb.com/ TWITTER BOOTSTRAP http://twitter.github.com/bootstrap/ FRAMEWORKS GETTING

    STARTED
  8. PAINS. *OUCH* POW KAZONG

  9. COMPLEX PAGES. IT´S NOT JUST ABOUT BLOGS

  10. None
  11. None
  12. NON-RESPONSIVE REQUIREMENTS. NO, THE BUTTON CAN´T HAVE A UNICORN ON

    THE EDGE!!!
  13. THIRD PARTY CONTENT HANDLING THINGS YOU DON´T KNOW

  14. NO PROCESSES. WHO DEFINES THE DEVICE-SPECIFICS? HOW TO TEST?

  15. EFFORT. CARING FOR DEVICES MEANS WORK

  16. EFFORT PER DEVICE. EVERY NEW DEVICE MEANS WORK

  17. A COMPLETE RELAUNCH IS EXPENSIVE. AND THERE´S NO WAY TO

    MIGRATE THIS BIG BALL OF MUD
  18. NOT REALLY MOBILE-OPTIMIZED . LOAD TIME?

  19. „I don´t care who you are or where you´re from,

    I still love you“ LOVE YOUR USERS
  20. COMPLEXITY KEEP IT SIMPLE, STUPID 4 1 2 If you

    want to hide it, think about deleting it. Mobile First (Tablet First) The web IS responsive! We just started to use fixed width. 3Embrace CSS3.
  21. „Mobile users want to see our menu, hours, and delivery

    number. Desktop users definitely want this 1mb png of someone smiling at a salad.“ MAT MARQUIS (@wilto)
  22. RESPONSIVE TILES . WHERE TO PUT THEM by http://www.lukew.com

  23. MOSTLY FLUID RESPONSIVE TILES

  24. COLUMN DROP RESPONSIVE TILES

  25. LAYOUT SHIFTER RESPONSIVE TILES

  26. TINY TWEAKS RESPONSIVE TILES

  27. OFF CANVAS RESPONSIVE TILES

  28. MORE TILES . http://tinyurl.com/responsive-tiles

  29. <SOMETHING> FIRST OR OTHER

  30. “There is no Mobile Web. There is only The Web,

    which we view in different ways. There is also no Desktop Web. Or Tablet Web. Thank you.” STEPHEN HAY (@stephenhay)
  31. Remove the mental model of full control! PREPARE TO LOSE

    CONTROL DON´T OPTIMIZE FOR MOBILE OPTIMIZE FOR THE WEB 3 1 2Fluid Layout Okay, perhaps optimize for device classes
  32. THERE´S NO MOBILE WEB! Today people also use mobile devices

    for surfing on the couch. YOUR USERS WANT STUFF DON´T HIDE IT 3 1 2Don´t assume users want other content just because they use a different device! RESPONSIVE CONTENT IS DANGEROUS. Just be careful.
  33. RESPONSIVE DESIGN IS NO NERD STUFF . IT´S INTERDISCIPLINARY

  34. DECORATE YOUR DESK WITH DEVICES TESTING

  35. DEVICE BREAKPOINTS Break at the specific device width. DON´T DO

    THIS! BREAKPOINTS 320px? 480px? WTF! 3 1 2DEVICE CLASS BREAKPOINTS Identify your most important device widths, classify the devices and set the breakpoints BETWEEN them. NATURAL BREAKPOINTS Define breakpoints where your layout breaks. Also define breakpoints where you need a layout change due to space limitations.
  36. FEATURE DETECTION USE JAVASCRIPT TO BE EVEN MORE RESPONSIVE if

    (Modernizr.touch){ // Touch is supported } else { // This is no touch device }
  37. RESS . RESPONSIVE DESIGN + SERVER SIDE COMPONENTS

  38. There are some things RWD can´t offer. Images in the

    right size. Order of Markup. RESS FINALLY A NEW BUZZWORD 3 1 2Check HTTP headers and lookup device features in a database / API. Combine it with client side detection and share information using cookies. $WURFLWidth = $client->getDeviceCapability('max_image_width');
  39. CAREFUL: CACHING HATES RESS ALL THIS MAGIC MEANS DYNAMIC CONTENT!

  40. None
  41. 5 Layout and design for TABLET or MOBILE. THERE IS

    NO ONE-FITS-ALL APPROACH Use RESS to serve optimized images for each device-class. Use it for other stuff if needed (text truncate limit, markup order). BUT HERE IS A STARTER 4 1 3Define your DEVICE-CLASSES and implement media queries for them considering DEVICE CLASS BREAKPOINTS. Only use them for device specific stuff (menu, perhaps buttons). Scale down and up to find your NATURAL BREAKPOINTS where your layout breaks. Implement media queries for them and fix the layout considering RESPONSIVE TILES. Start with a FLUID LAYOUT and RESPONSIVE RESET. 2
  42. &A Q PUT YOUR QUESTIONS

  43. LINKS READ IT! Book: RESPONSIVE WEB DESIGN by ETHAN MARCOTTE

    http://www.abookapart.com/products/responsive-web-design FLUID GRIDS by ETHAN MARCOTTE http://www.alistapart.com/articles/fluidgrids/ RESPONSIVE WEB DESIGN by ETHAN MARCOTTE http://www.alistapart.com/articles/responsive-web-design/ RESPONSIVE LAYOUTS http://www.thismanslife.co.uk/projects/lab/responsivewireframes/ 320 AND UP - tiny screen first HTML5 Boilerplate http://stuffandnonsense.co.uk/projects/320andup/ RESPONSIVE DESIGN TESTING TOOL http://mattkersley.com/responsive/ 5 REASONS WHY RESPONSIVE DESIGN IS NOT WORTH IT http://managewp.com/5-reasons-why-responsive-design-is-not- worth-it
  44. LINKS READ IT! RESPONSIVE DESIGN SKETCHBOOK http://appsketchbook.com/products/responsive-design- sketchbook RESPONSIVE IMAGES

    http://filamentgroup.com/lab/ responsive_images_experimenting_with_context_aware_image_sizing/ MULTI-DEVICE LAYOUT PATTERNS http://www.lukew.com/ff/entry.asp?1514 AN EVENT APART: THE RESPONSIVE DESIGNER´S WORKFLOW http://www.lukew.com/ff/entry.asp?1353
  45. THANKS. FOR YOUR ATTENTION http://twitter.com/matthiaslau http://laumatthias.de/