the magic and pain of responsive design
DESCRIPTION
Ü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
![Page 1: The Magic and Pain of Responsive Design](https://reader036.vdocument.in/reader036/viewer/2022070304/54c7bdfb4a795931208b464a/html5/thumbnails/1.jpg)
DEVCON ´12
PRESENTED BY MATTHIAS LAU
THE MAGIC
RESPONSIVEAND PAIN OF
DESIGN .
![Page 2: The Magic and Pain of Responsive Design](https://reader036.vdocument.in/reader036/viewer/2022070304/54c7bdfb4a795931208b464a/html5/thumbnails/2.jpg)
{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"
},},
}
![Page 3: The Magic and Pain of Responsive Design](https://reader036.vdocument.in/reader036/viewer/2022070304/54c7bdfb4a795931208b464a/html5/thumbnails/3.jpg)
More than desktop: TVs, laptops, tablets, eReader and smartphones.
AGE OFHETEROGENEOUS DEVICES
960 GRID IS SO YESTERDAY
4
12 Fragmented screen sizes.
Different usability concepts, e.g. touch.
Websites should always look good and be usable.3
![Page 4: The Magic and Pain of Responsive Design](https://reader036.vdocument.in/reader036/viewer/2022070304/54c7bdfb4a795931208b464a/html5/thumbnails/4.jpg)
APPSDESKTOP ONLY(apple.com)
MOBILE WEBSITES RESPONSIVE DESIGN
SERVE THE DEVICESPOSSIBILITIES
![Page 5: The Magic and Pain of Responsive Design](https://reader036.vdocument.in/reader036/viewer/2022070304/54c7bdfb4a795931208b464a/html5/thumbnails/5.jpg)
MAKE IT RESPONSIVEHOW DOES RESPONSIVE DESIGN WORK?
/* IPAD */@media screen and (max-device-width: 1024px) {
}
/* IPHONE */@media screen and (max-device-width: 480px) {
}
![Page 6: The Magic and Pain of Responsive Design](https://reader036.vdocument.in/reader036/viewer/2022070304/54c7bdfb4a795931208b464a/html5/thumbnails/6.jpg)
![Page 7: The Magic and Pain of Responsive Design](https://reader036.vdocument.in/reader036/viewer/2022070304/54c7bdfb4a795931208b464a/html5/thumbnails/7.jpg)
INUIT CSShttp://csswizardry.com/inuitcss/
FOUNDATIONhttp://foundation.zurb.com/
TWITTER BOOTSTRAPhttp://twitter.github.com/bootstrap/
FRAMEWORKSGETTING STARTED
![Page 8: The Magic and Pain of Responsive Design](https://reader036.vdocument.in/reader036/viewer/2022070304/54c7bdfb4a795931208b464a/html5/thumbnails/8.jpg)
PAINS.*OUCH*
POWKAZONG
![Page 9: The Magic and Pain of Responsive Design](https://reader036.vdocument.in/reader036/viewer/2022070304/54c7bdfb4a795931208b464a/html5/thumbnails/9.jpg)
COMPLEX PAGES.IT´S NOT JUST ABOUT BLOGS
![Page 10: The Magic and Pain of Responsive Design](https://reader036.vdocument.in/reader036/viewer/2022070304/54c7bdfb4a795931208b464a/html5/thumbnails/10.jpg)
![Page 11: The Magic and Pain of Responsive Design](https://reader036.vdocument.in/reader036/viewer/2022070304/54c7bdfb4a795931208b464a/html5/thumbnails/11.jpg)
![Page 12: The Magic and Pain of Responsive Design](https://reader036.vdocument.in/reader036/viewer/2022070304/54c7bdfb4a795931208b464a/html5/thumbnails/12.jpg)
NON-RESPONSIVE REQUIREMENTS.
NO, THE BUTTON CAN´T HAVE A UNICORN ON THE EDGE!!!
![Page 13: The Magic and Pain of Responsive Design](https://reader036.vdocument.in/reader036/viewer/2022070304/54c7bdfb4a795931208b464a/html5/thumbnails/13.jpg)
THIRD PARTY CONTENT
HANDLING THINGS YOU DON´T KNOW
![Page 14: The Magic and Pain of Responsive Design](https://reader036.vdocument.in/reader036/viewer/2022070304/54c7bdfb4a795931208b464a/html5/thumbnails/14.jpg)
NO PROCESSES.WHO DEFINES THE DEVICE-SPECIFICS?
HOW TO TEST?
![Page 15: The Magic and Pain of Responsive Design](https://reader036.vdocument.in/reader036/viewer/2022070304/54c7bdfb4a795931208b464a/html5/thumbnails/15.jpg)
EFFORT.CARING FOR DEVICES MEANS WORK
![Page 16: The Magic and Pain of Responsive Design](https://reader036.vdocument.in/reader036/viewer/2022070304/54c7bdfb4a795931208b464a/html5/thumbnails/16.jpg)
EFFORT PER DEVICE.EVERY NEW DEVICE MEANS WORK
![Page 17: The Magic and Pain of Responsive Design](https://reader036.vdocument.in/reader036/viewer/2022070304/54c7bdfb4a795931208b464a/html5/thumbnails/17.jpg)
A COMPLETE RELAUNCH IS EXPENSIVE.
AND THERE´S NO WAY TO MIGRATE THIS BIG BALL OF MUD
![Page 18: The Magic and Pain of Responsive Design](https://reader036.vdocument.in/reader036/viewer/2022070304/54c7bdfb4a795931208b464a/html5/thumbnails/18.jpg)
NOT REALLYMOBILE-OPTIMIZED .
LOAD TIME?
![Page 19: The Magic and Pain of Responsive Design](https://reader036.vdocument.in/reader036/viewer/2022070304/54c7bdfb4a795931208b464a/html5/thumbnails/19.jpg)
„I don´t care who you are or where you´re from, I still love you“
LOVE YOUR USERS
![Page 20: The Magic and Pain of Responsive Design](https://reader036.vdocument.in/reader036/viewer/2022070304/54c7bdfb4a795931208b464a/html5/thumbnails/20.jpg)
COMPLEXITYKEEP IT SIMPLE, STUPID
4
12
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.
3 Embrace CSS3.
![Page 21: The Magic and Pain of Responsive Design](https://reader036.vdocument.in/reader036/viewer/2022070304/54c7bdfb4a795931208b464a/html5/thumbnails/21.jpg)
„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)
![Page 22: The Magic and Pain of Responsive Design](https://reader036.vdocument.in/reader036/viewer/2022070304/54c7bdfb4a795931208b464a/html5/thumbnails/22.jpg)
RESPONSIVE TILES .
WHERE TO PUT THEM
by http://www.lukew.com
![Page 23: The Magic and Pain of Responsive Design](https://reader036.vdocument.in/reader036/viewer/2022070304/54c7bdfb4a795931208b464a/html5/thumbnails/23.jpg)
MOSTLY FLUIDRESPONSIVE TILES
![Page 24: The Magic and Pain of Responsive Design](https://reader036.vdocument.in/reader036/viewer/2022070304/54c7bdfb4a795931208b464a/html5/thumbnails/24.jpg)
COLUMN DROPRESPONSIVE TILES
![Page 25: The Magic and Pain of Responsive Design](https://reader036.vdocument.in/reader036/viewer/2022070304/54c7bdfb4a795931208b464a/html5/thumbnails/25.jpg)
LAYOUT SHIFTERRESPONSIVE TILES
![Page 26: The Magic and Pain of Responsive Design](https://reader036.vdocument.in/reader036/viewer/2022070304/54c7bdfb4a795931208b464a/html5/thumbnails/26.jpg)
TINY TWEAKSRESPONSIVE TILES
![Page 27: The Magic and Pain of Responsive Design](https://reader036.vdocument.in/reader036/viewer/2022070304/54c7bdfb4a795931208b464a/html5/thumbnails/27.jpg)
OFF CANVASRESPONSIVE TILES
![Page 28: The Magic and Pain of Responsive Design](https://reader036.vdocument.in/reader036/viewer/2022070304/54c7bdfb4a795931208b464a/html5/thumbnails/28.jpg)
MORE TILES .http://tinyurl.com/responsive-tiles
![Page 29: The Magic and Pain of Responsive Design](https://reader036.vdocument.in/reader036/viewer/2022070304/54c7bdfb4a795931208b464a/html5/thumbnails/29.jpg)
<SOMETHING> FIRSTOR OTHER
![Page 30: The Magic and Pain of Responsive Design](https://reader036.vdocument.in/reader036/viewer/2022070304/54c7bdfb4a795931208b464a/html5/thumbnails/30.jpg)
“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)
![Page 31: The Magic and Pain of Responsive Design](https://reader036.vdocument.in/reader036/viewer/2022070304/54c7bdfb4a795931208b464a/html5/thumbnails/31.jpg)
Remove the mental model of full control!
PREPARE TO LOSE CONTROLDON´T OPTIMIZE FOR MOBILE
OPTIMIZE FOR THE WEB
3
1
2 Fluid Layout
Okay, perhaps optimize for device classes
![Page 32: The Magic and Pain of Responsive Design](https://reader036.vdocument.in/reader036/viewer/2022070304/54c7bdfb4a795931208b464a/html5/thumbnails/32.jpg)
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
2 Don´t assume users want other content just because they use a different device!
RESPONSIVE CONTENT IS DANGEROUS. Just be careful.
![Page 33: The Magic and Pain of Responsive Design](https://reader036.vdocument.in/reader036/viewer/2022070304/54c7bdfb4a795931208b464a/html5/thumbnails/33.jpg)
RESPONSIVE DESIGNIS NO NERD STUFF .
IT´S INTERDISCIPLINARY
![Page 34: The Magic and Pain of Responsive Design](https://reader036.vdocument.in/reader036/viewer/2022070304/54c7bdfb4a795931208b464a/html5/thumbnails/34.jpg)
DECORATE YOUR DESK WITH DEVICES
TESTING
![Page 35: The Magic and Pain of Responsive Design](https://reader036.vdocument.in/reader036/viewer/2022070304/54c7bdfb4a795931208b464a/html5/thumbnails/35.jpg)
DEVICE BREAKPOINTSBreak at the specific device width. DON´T DO THIS!
BREAKPOINTS320px? 480px? WTF!
3
1
2 DEVICE CLASS BREAKPOINTSIdentify your most important device widths, classify the devices and set the breakpoints BETWEEN them.
NATURAL BREAKPOINTSDefine breakpoints where your layout breaks. Also define breakpoints where you need a layout change due to space limitations.
![Page 36: The Magic and Pain of Responsive Design](https://reader036.vdocument.in/reader036/viewer/2022070304/54c7bdfb4a795931208b464a/html5/thumbnails/36.jpg)
FEATURE DETECTIONUSE JAVASCRIPT TO BE EVEN
MORE RESPONSIVE
if (Modernizr.touch){ // Touch is supported} else { // This is no touch device}
![Page 37: The Magic and Pain of Responsive Design](https://reader036.vdocument.in/reader036/viewer/2022070304/54c7bdfb4a795931208b464a/html5/thumbnails/37.jpg)
RESS .RESPONSIVE DESIGN +
SERVER SIDE COMPONENTS
![Page 38: The Magic and Pain of Responsive Design](https://reader036.vdocument.in/reader036/viewer/2022070304/54c7bdfb4a795931208b464a/html5/thumbnails/38.jpg)
There are some things RWD can´t offer.Images in the right size. Order of Markup.
RESSFINALLY A NEW BUZZWORD 3
12 Check 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');
![Page 39: The Magic and Pain of Responsive Design](https://reader036.vdocument.in/reader036/viewer/2022070304/54c7bdfb4a795931208b464a/html5/thumbnails/39.jpg)
CAREFUL:CACHING HATES RESS
ALL THIS MAGIC MEANSDYNAMIC CONTENT!
![Page 40: The Magic and Pain of Responsive Design](https://reader036.vdocument.in/reader036/viewer/2022070304/54c7bdfb4a795931208b464a/html5/thumbnails/40.jpg)
![Page 41: The Magic and Pain of Responsive Design](https://reader036.vdocument.in/reader036/viewer/2022070304/54c7bdfb4a795931208b464a/html5/thumbnails/41.jpg)
5
Layout and design for TABLET or MOBILE.
THERE IS NOONE-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).
Sca le 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
![Page 42: The Magic and Pain of Responsive Design](https://reader036.vdocument.in/reader036/viewer/2022070304/54c7bdfb4a795931208b464a/html5/thumbnails/42.jpg)
&AQPUT YOUR QUESTIONS
![Page 43: The Magic and Pain of Responsive Design](https://reader036.vdocument.in/reader036/viewer/2022070304/54c7bdfb4a795931208b464a/html5/thumbnails/43.jpg)
LINKSREAD IT!
Book: RESPONSIVE WEB DESIGN by ETHAN MARCOTTEhttp://www.abookapart.com/products/responsive-web-design
FLUID GRIDS by ETHAN MARCOTTEhttp://www.alistapart.com/articles/fluidgrids/
RESPONSIVE WEB DESIGN by ETHAN MARCOTTEhttp://www.alistapart.com/articles/responsive-web-design/
RESPONSIVE LAYOUTShttp://www.thismanslife.co.uk/projects/lab/responsivewireframes/
320 AND UP - tiny screen first HTML5 Boilerplatehttp://stuffandnonsense.co.uk/projects/320andup/
RESPONSIVE DESIGN TESTING TOOLhttp://mattkersley.com/responsive/
5 REASONS WHY RESPONSIVE DESIGN IS NOT WORTH IThttp://managewp.com/5-reasons-why-responsive-design-is-not-worth-it
![Page 44: The Magic and Pain of Responsive Design](https://reader036.vdocument.in/reader036/viewer/2022070304/54c7bdfb4a795931208b464a/html5/thumbnails/44.jpg)
LINKSREAD IT!
RESPONSIVE DESIGN SKETCHBOOKhttp://appsketchbook.com/products/responsive-design-sketchbook
RESPONSIVE IMAGEShttp://filamentgroup.com/lab/responsive_images_experimenting_with_context_aware_image_sizing/
MULTI-DEVICE LAYOUT PATTERNShttp://www.lukew.com/ff/entry.asp?1514
AN EVENT APART: THE RESPONSIVE DESIGNER´S WORKFLOWhttp://www.lukew.com/ff/entry.asp?1353
![Page 45: The Magic and Pain of Responsive Design](https://reader036.vdocument.in/reader036/viewer/2022070304/54c7bdfb4a795931208b464a/html5/thumbnails/45.jpg)
THANKS.FOR YOUR ATTENTION
http://twitter.com/matthiaslau
http://laumatthias.de/