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/