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

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

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. 1 More than desktop: TVs, laptops, tablets, eReader and
smartphones.
AGE OF
HETEROGENEOUS 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. SERVE THE DEVICES
POSSIBILITIES
DESKTOP ONLY APPS MOBILE WEBSITES RESPONSIVE DESIGN
(apple.com)

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. FRAMEWORKS
GETTING STARTED
TWITTER BOOTSTRAP FOUNDATION INUIT CSS
http://twitter.github.com/bootstrap/ http://foundation.zurb.com/ http://csswizardry.com/inuitcss/

8. POW
KAZONG
PAINS.
*OUCH*

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

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. NODEFINES THE DEVICE-SPECIFICS?
WHO
PROCESSES.
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. 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.

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. 1 Remove the mental model of full control!
PREPARE TO
LOSE CONTROL
DON´T OPTIMIZE FOR MOBILE
2 Fluid Layout
OPTIMIZE FOR THE WEB
3 Okay, perhaps optimize for device classes

32. 1 THERE´S NO MOBILE WEB! Today people also use mobile
devices for surfing on the couch.
YOUR USERS
WANT 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.

33. RESPONSIVE DESIGN
IS NO NERD STUFF .
IT´S INTERDISCIPLINARY

34. DECORATE YOUR DESK
WITH DEVICES
TESTING

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

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. 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
3
FINALLY A NEW BUZZWORD 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. 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).

42. QA &
PUT YOUR QUESTIONS

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

44. 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
LINKS
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

45. THANKS.
FOR YOUR ATTENTION
http://twitter.com/matthiaslau
http://laumatthias.de/