The Magic and Pain of Responsive Design
Upcoming SlideShare
Loading in...5
×
 

The Magic and Pain of Responsive Design

on

  • 2,946 views

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

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

Statistics

Views

Total Views
2,946
Views on SlideShare
2,300
Embed Views
646

Actions

Likes
10
Downloads
85
Comments
0

6 Embeds 646

http://nhyoma.wordpress.com 398
http://www.hyoma.de 208
http://hyoma.de 21
https://twitter.com 17
http://cloud.feedly.com 1
https://nhyoma.wordpress.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

The Magic and Pain of Responsive Design The Magic and Pain of Responsive Design Presentation Transcript

  • DEVCON ´12THE MAGICAND PAIN OFRESPONSIVEDESIGN .PRESENTED BY MATTHIAS LAU
  • { 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" }, },}
  • 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.
  • SERVE THE DEVICES POSSIBILITIES DESKTOP ONLY APPS MOBILE WEBSITES RESPONSIVE DESIGN (apple.com)
  • MAKE IT RESPONSIVEHOW DOES RESPONSIVE DESIGN WORK? /* IPAD */ @media screen and (max-device-width: 1024px) { } /* IPHONE */ @media screen and (max-device-width: 480px) { }
  • FRAMEWORKS GETTING STARTED TWITTER BOOTSTRAP FOUNDATION INUIT CSS http://twitter.github.com/bootstrap/ http://foundation.zurb.com/ http://csswizardry.com/inuitcss/
  • 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) KEEP IT SIMPLE, STUPID 3 Embrace CSS3. 4 The web IS responsive! We just started to use fixed width.
  • „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)
  • 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. Thank you.” STEPHEN HAY (@stephenhay)
  • 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
  • 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.
  • 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? 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.
  • FEATURE DETECTION USE JAVASCRIPT TO BE EVEN MORE RESPONSIVE if (Modernizr.touch){ // Touch is supported } else { // This is no touch device }
  • RESS . RESPONSIVE DESIGN +SERVER SIDE COMPONENTS
  • 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);
  • 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 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).
  • QA &PUT YOUR QUESTIONS
  • 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
  • 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
  • THANKS. FOR YOUR ATTENTION http://twitter.com/matthiaslau http://laumatthias.de/