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.

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) { }
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
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!
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/