DEVCON ´12THE MAGICAND PAIN OFRESPONSIVEDESIGN .PRESENTED BY MATTHIAS LAU
{    name: "Matthias Lau",    link: "http://laumatthias.de",    twitter: "@matthiaslau",    hometown: {      name: "Hambur...
1   More than desktop: TVs, laptops, tablets, eReader and                                     smartphones.              AG...
SERVE THE DEVICES            POSSIBILITIES   DESKTOP ONLY             APPS   MOBILE WEBSITES   RESPONSIVE DESIGN      (app...
MAKE IT RESPONSIVEHOW DOES RESPONSIVE DESIGN WORK?                 /* IPAD */                 @media screen and (max-devic...
FRAMEWORKS GETTING STARTED  TWITTER BOOTSTRAP                       FOUNDATION                         INUIT CSS http://tw...
POWKAZONG     PAINS.         *OUCH*
COMPLEX ABOUT BLOGS  IT´S NOT JUST                PAGES.
NON-RESPONSIVE REQUIREMENTS.  NO, THE BUTTON CAN´T HAVE     A UNICORN ON THE EDGE!!!
THIRD PARTY         CONTENTHANDLING THINGS YOU DON´T KNOW
NODEFINES THE DEVICE-SPECIFICS?WHO      PROCESSES.                  HOW TO TEST?
EFFORT.CARING FOR DEVICES MEANS WORK
EFFORT PER DEVICE. EVERY NEW DEVICE MEANS WORK
A COMPLETE       RELAUNCH IS         EXPENSIVE.     AND THERE´S NO WAY TOMIGRATE THIS BIG BALL OF MUD
NOT REALLYMOBILE-OPTIMIZED .            LOAD TIME?
„I don´t care who you are orwhere you´re from, I still love you“                          LOVE YOUR USERS
1   If you want to hide it, think about deleting it.COMPLEXITY                          2   Mobile First (Tablet First) KE...
„Mobile users want to see our menu,hours, and delivery number. Desktopusers definitely want this 1mb png ofsomeone smiling ...
RESPONSIVE    TILES .   WHERE TO PUT THEM                       by http://www.lukew.com
MOSTLY FLUID  RESPONSIVE TILES
COLUMN DROP   RESPONSIVE TILES
LAYOUT SHIFTER    RESPONSIVE TILES
TINY TWEAKS RESPONSIVE TILES
OFF CANVAS RESPONSIVE TILES
MORE TILES .   http://tinyurl.com/responsive-tiles
<SOMETHING> FIRST         OR OTHER
“There is no Mobile Web. There is onlyThe Web, which we view in differentways. There is also no Desktop Web.Or Tablet Web....
1   Remove the mental model of full control!  PREPARE TOLOSE CONTROLDON´T OPTIMIZE FOR MOBILE                            2...
1   THERE´S NO MOBILE WEB! Today people also use mobile                        devices for surfing on the couch.YOUR USERSW...
RESPONSIVE DESIGNIS NO NERD STUFF .        IT´S INTERDISCIPLINARY
DECORATE YOUR DESK       WITH DEVICES              TESTING
1   DEVICE BREAKPOINTS                            Break at the specific device width. DON´T DO THIS!BREAKPOINTS   320px? 48...
FEATURE DETECTION    USE JAVASCRIPT TO BE EVEN              MORE RESPONSIVE          if (Modernizr.touch){             // ...
RESS .    RESPONSIVE DESIGN +SERVER SIDE COMPONENTS
1            There are some things RWD can´t offer.                          Images in the right size. Order of Markup.   ...
CAREFUL:CACHING HATES RESS     ALL THIS MAGIC MEANS          DYNAMIC CONTENT!
1           Layout and design for TABLET or MOBILE.  THERE IS NO 2                          Start with a FLUID LAYOUT and ...
QA     &PUT YOUR QUESTIONS
Book: RESPONSIVE WEB DESIGN by ETHAN MARCOTTE            http://www.abookapart.com/products/responsive-web-design         ...
RESPONSIVE DESIGN SKETCHBOOK            http://appsketchbook.com/products/responsive-design-            sketchbook        ...
THANKS. FOR YOUR ATTENTION                      http://twitter.com/matthiaslau                          http://laumatthias...
The Magic and Pain of Responsive Design
The Magic and Pain of Responsive Design
The Magic and Pain of Responsive Design
The Magic and Pain of Responsive Design
Upcoming SlideShare
Loading in...5
×

The Magic and Pain of Responsive Design

2,719

Published on

Ü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.

Published in: Technology, Design

The Magic and Pain of Responsive Design

  1. 1. DEVCON ´12THE MAGICAND PAIN OFRESPONSIVEDESIGN .PRESENTED BY MATTHIAS LAU
  2. 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. 3. 1 More than desktop: TVs, laptops, tablets, eReader and smartphones. AGE OFHETEROGENEOUS DEVICES 960 GRID IS SO YESTERDAY 2 Fragmented screen sizes. 3 Websites should always look good and be usable. 4 Different usability concepts, e.g. touch.
  4. 4. SERVE THE DEVICES POSSIBILITIES DESKTOP ONLY APPS MOBILE WEBSITES RESPONSIVE DESIGN (apple.com)
  5. 5. MAKE IT RESPONSIVEHOW DOES RESPONSIVE DESIGN WORK? /* IPAD */ @media screen and (max-device-width: 1024px) { } /* IPHONE */ @media screen and (max-device-width: 480px) { }
  6. 6. FRAMEWORKS GETTING STARTED TWITTER BOOTSTRAP FOUNDATION INUIT CSS http://twitter.github.com/bootstrap/ http://foundation.zurb.com/ http://csswizardry.com/inuitcss/
  7. 7. POWKAZONG PAINS. *OUCH*
  8. 8. COMPLEX ABOUT BLOGS IT´S NOT JUST PAGES.
  9. 9. NON-RESPONSIVE REQUIREMENTS. NO, THE BUTTON CAN´T HAVE A UNICORN ON THE EDGE!!!
  10. 10. THIRD PARTY CONTENTHANDLING THINGS YOU DON´T KNOW
  11. 11. NODEFINES THE DEVICE-SPECIFICS?WHO PROCESSES. HOW TO TEST?
  12. 12. EFFORT.CARING FOR DEVICES MEANS WORK
  13. 13. EFFORT PER DEVICE. EVERY NEW DEVICE MEANS WORK
  14. 14. A COMPLETE RELAUNCH IS EXPENSIVE. AND THERE´S NO WAY TOMIGRATE THIS BIG BALL OF MUD
  15. 15. NOT REALLYMOBILE-OPTIMIZED . LOAD TIME?
  16. 16. „I don´t care who you are orwhere you´re from, I still love you“ LOVE YOUR USERS
  17. 17. 1 If you want to hide it, think about deleting it.COMPLEXITY 2 Mobile First (Tablet First) KEEP IT SIMPLE, STUPID 3 Embrace CSS3. 4 The web IS responsive! We just started to use fixed width.
  18. 18. „Mobile users want to see our menu,hours, and delivery number. Desktopusers definitely want this 1mb png ofsomeone smiling at a salad.“ MAT MARQUIS (@wilto)
  19. 19. RESPONSIVE TILES . WHERE TO PUT THEM by http://www.lukew.com
  20. 20. MOSTLY FLUID RESPONSIVE TILES
  21. 21. COLUMN DROP RESPONSIVE TILES
  22. 22. LAYOUT SHIFTER RESPONSIVE TILES
  23. 23. TINY TWEAKS RESPONSIVE TILES
  24. 24. OFF CANVAS RESPONSIVE TILES
  25. 25. MORE TILES . http://tinyurl.com/responsive-tiles
  26. 26. <SOMETHING> FIRST OR OTHER
  27. 27. “There is no Mobile Web. There is onlyThe Web, which we view in differentways. There is also no Desktop Web.Or Tablet Web. Thank you.” STEPHEN HAY (@stephenhay)
  28. 28. 1 Remove the mental model of full control! PREPARE TOLOSE CONTROLDON´T OPTIMIZE FOR MOBILE 2 Fluid Layout OPTIMIZE FOR THE WEB 3 Okay, perhaps optimize for device classes
  29. 29. 1 THERE´S NO MOBILE WEB! Today people also use mobile devices for surfing on the couch.YOUR USERSWANT STUFF DON´T HIDE IT 2 Don´t assume users want other content just because they use a different device! 3 RESPONSIVE CONTENT IS DANGEROUS. Just be careful.
  30. 30. RESPONSIVE DESIGNIS NO NERD STUFF . IT´S INTERDISCIPLINARY
  31. 31. DECORATE YOUR DESK WITH DEVICES TESTING
  32. 32. 1 DEVICE BREAKPOINTS Break at the specific device width. DON´T DO THIS!BREAKPOINTS 320px? 480px? WTF! 2 DEVICE CLASS BREAKPOINTS Identify your most important device widths, classify the devices and set the breakpoints BETWEEN them. 3 NATURAL BREAKPOINTS Define breakpoints where your layout breaks. Also define breakpoints where you need a layout change due to space limitations.
  33. 33. FEATURE DETECTION USE JAVASCRIPT TO BE EVEN MORE RESPONSIVE if (Modernizr.touch){ // Touch is supported } else { // This is no touch device }
  34. 34. RESS . RESPONSIVE DESIGN +SERVER SIDE COMPONENTS
  35. 35. 1 There are some things RWD can´t offer. Images in the right size. Order of Markup. 2 Check HTTP headers and lookup device features in a database / API. RESS 3FINALLY A NEW BUZZWORD Combine it with client side detection and share information using cookies.$WURFLWidth = $client->getDeviceCapability(max_image_width);
  36. 36. CAREFUL:CACHING HATES RESS ALL THIS MAGIC MEANS DYNAMIC CONTENT!
  37. 37. 1 Layout and design for TABLET or MOBILE. THERE IS NO 2 Start with a FLUID LAYOUT and RESPONSIVE RESET.ONE-FITS-ALL APPROACH 3 Define your DEVICE-CLASSES and implement media queries for them considering DEVICE CLASS BREAKPOINTS. Only use them for device specific stuff (menu, perhaps buttons). BUT HERE IS A STARTER 4 S c a l e d o w n a n d u p t o fi n d yo u r N AT U R A L BREAKPOINTS where your layout breaks. Implement media queries for them and fix the layout considering RESPONSIVE TILES. 5 Use RESS to serve optimized images for each device-class. Use it for other stuff if needed (text truncate limit, markup order).
  38. 38. QA &PUT YOUR QUESTIONS
  39. 39. 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/LINKS READ IT! 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
  40. 40. 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 PATTERNSLINKS READ IT! http://www.lukew.com/ff/entry.asp?1514 AN EVENT APART: THE RESPONSIVE DESIGNER´S WORKFLOW http://www.lukew.com/ff/entry.asp?1353
  41. 41. THANKS. FOR YOUR ATTENTION http://twitter.com/matthiaslau http://laumatthias.de/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×