Responsive webdesign WordCampNL 2012

Download Responsive webdesign WordCampNL 2012

Post on 17-Oct-2014

3.093 views

Category:

Technology

5 download

DESCRIPTION

A presentation for WordCampNL on the importance of accessible, useable websites and how to achieve that with responsive webdesign.

TRANSCRIPT

Responsive Webdesignor: "webdesign, done right"

by Tom Hermans - tomhermans.com@tomhermans

about me

designer / developer / wp guyfree-lancingSony Europe - UX - e-Platform reach me via:tomhermans.com@tomhermans

design

A plan or drawing produced to show the look and function or workings of a building, garment, or other object (before it is built or made.)

print

card

packaging

nicer packaging

car wrap

fashion

body paint

what do these designsall have in common ? great slide pic to pose a questionto the audience i guess

all applied on a

canvas

canvasphysical sizeconstraints

power to the designer

how does the web canvas look like?

web pages are elastic in both horizontal and vertical dimensions

in a way that paper pages are not.

terminology

mastheadwhitespaceleadingfold all derived from print design

The control which designers know in the print medium, and often desire in the web medium, is simply a function of the limitation of the printed page. We should embrace the fact that the web doesnt have the same constraints, and design for this flexibility. But first, we must accept the ebb and flow of things. - John Allsopp

Webdesign is responsive design. Responsive Webdesign is web design, done right. - Andy Clarke

WTF should you care ?

mobile is growing..FAST

Solutions

native appweb appmobile websiteresponsive webdesign

what to choose ?

mmm.. depends..

native ?

Yes, if:specific device functionality cameragyrometergpsetc..

native app : issues

- extra build- extra cost- many platforms- even more extra cost- sharing content- findability- walled garden- duplicate content management- there are pro's too..

mobile website?

optimized, but not really

mobile website : issues

- redirects- urls (m. vs www)- sharing (desktop to mobile and viceversa)- duplicate content- often catering for certain brands / types / OS- duplicate content - duplicate mgmt- different devices- expensive and unsatisfying

responsive

a site that is able to adapt to the context in which it is being viewed.

99 viewports - iPhone's just 1

viewports ?

smartphonesfeature phonestabletsdesktops future ?

benefits responsive webdesign

1 website1 content1 url

what's so responsive about that?

1 codebase diff. functionality diff. layout

examples

cool

how do you do that ?

rwd consists of

flexible gridflexible images and mediamedia queries

stop thinking in pixels

think proportional think percentagesthink modular

stop thinking fixed width

960 is dead - 100%

flexible design

make no assumptions about a browser window's width

media queries

check for - conditionusually width (also pixel-ratio,orientation)

apply different styles breakpoints

media queries

around since css 2.1 - media type

media queries since CSS3

if screen width < 480px, load phone.css more media features: http://www.w3.org/TR/css3-mediaqueries/#media1

if screen width > 600px, load desktop.css

media queries in css file@media screen and (max-device-width: 480px){ .column { float: none; }

.logo { margin: 0 auto;

}}

media queries summary

if media query test is met>

css will be applied

media queries itself

breakpoints ?

common breakpoints

3204806007689601200

or when the design starts to look badresponsivepx.com

mobile first

apply basic formatting to page typecolorsmargins

mobile first pt.2

media queries for bigger screensprogressive enhancement > less capable browsers will always be served a readable site

total width ?

width:100% max-width 1120, 1600, 1920 .. dependent on:- content- modules- design proportions

grid

helps to build modularforget 960look at responsive gridsbuild your own!

tools

modular grid extensionmodulargrid.org/#app

responsinatorresponsinator.com

'my' best practice

use a max-widthuse a flexible widthdesign fluid modules

mobile first

serve basic stylesheet first typecolorsmargins

progressive enhancement

add css through mediaqueries > less capable browsers will always be served a readable site

build your own grid

(target % context) * 100 = result

720 in 94076,595744680851063829787234042553 % 1 col (55 in 1200) :4,5833333333333333333333333333333 %

flexible modules

easy to "place" in the layout order in DOM becomes even more important left to right = top to bottom (mostly)

fluid media.entry-content img, .widget img { max-width: 100%; } embed, object, video {max-width: 100%;height: auto;}

more (good) practices

try using CSS3 and svgpolyfills

css3-mediaqueries-jsrespond.jsmodernizr

new developments (cssgrid, flexbox,..)

some resources

responsive webdesign - ethan marcotte (abookapart) alistapart.com/articles/responsive-web-design mediaqueri.es

wordpress

twentyeleven (and successors)many others, but be aware..premium is often not. (in general imho)

bottomline

content should be accessible put user first - think about User eXperience

mobile users will do anything and everything

desktop users will do, provided it's presented in a usable way.

- brad frost

the device can't be an obstacle

think future friendly

thanks.

questions:

@tomhermanstomhermans.com

more resources

the whole argument on mediahttps://github.com/filamentgroup/Responsive-Imageshttp://adaptive-images.com/http://unstoppablerobotninja.com/entry/fluid-images

snippet - media reporter

.site-title:before { position: absolute; top:0; content: "768 and up"; background-color: hsla(150,60%,40%,.7); color: white; font-size: 16px; padding: 5px 10px;

}> handy to see which mq is active