The Magic and Pain of Responsive Design
Post on 27-Jan-2015
112 Views
Preview:
DESCRIPTION
Transcript
DEVCON ´12
PRESENTED BY MATTHIAS LAU
THE MAGIC
RESPONSIVEAND PAIN OF
DESIGN .
{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"
},},
}
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
APPSDESKTOP ONLY(apple.com)
MOBILE WEBSITES RESPONSIVE DESIGN
SERVE THE DEVICESPOSSIBILITIES
MAKE IT RESPONSIVEHOW DOES RESPONSIVE DESIGN WORK?
/* IPAD */@media screen and (max-device-width: 1024px) {
}
/* IPHONE */@media screen and (max-device-width: 480px) {
}
INUIT CSShttp://csswizardry.com/inuitcss/
FOUNDATIONhttp://foundation.zurb.com/
TWITTER BOOTSTRAPhttp://twitter.github.com/bootstrap/
FRAMEWORKSGETTING STARTED
PAINS.*OUCH*
POWKAZONG
COMPLEX PAGES.IT´S NOT JUST ABOUT BLOGS
NON-RESPONSIVE REQUIREMENTS.
NO, THE BUTTON CAN´T HAVE A UNICORN ON THE EDGE!!!
THIRD PARTY CONTENT
HANDLING THINGS YOU DON´T KNOW
NO PROCESSES.WHO DEFINES THE DEVICE-SPECIFICS?
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 TO MIGRATE THIS BIG BALL OF MUD
NOT REALLYMOBILE-OPTIMIZED .
LOAD TIME?
„I don´t care who you are or where you´re from, I still love you“
LOVE YOUR USERS
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.
„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)
RESPONSIVE TILES .
WHERE TO PUT THEM
by http://www.lukew.com
MOSTLY FLUIDRESPONSIVE TILES
COLUMN DROPRESPONSIVE TILES
LAYOUT SHIFTERRESPONSIVE TILES
TINY TWEAKSRESPONSIVE TILES
OFF CANVASRESPONSIVE TILES
MORE TILES .http://tinyurl.com/responsive-tiles
<SOMETHING> FIRSTOR OTHER
“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)
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
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.
RESPONSIVE DESIGNIS NO NERD STUFF .
IT´S INTERDISCIPLINARY
DECORATE YOUR DESK WITH DEVICES
TESTING
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.
FEATURE DETECTIONUSE JAVASCRIPT TO BE EVEN
MORE RESPONSIVE
if (Modernizr.touch){ // Touch is supported} else { // This is no touch device}
RESS .RESPONSIVE DESIGN +
SERVER SIDE COMPONENTS
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');
CAREFUL:CACHING HATES RESS
ALL THIS MAGIC MEANSDYNAMIC CONTENT!
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
&AQPUT YOUR QUESTIONS
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
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
THANKS.FOR YOUR ATTENTION
http://twitter.com/matthiaslau
http://laumatthias.de/
top related