View
3.106
Download
6
Category
Tags:
Preview:
DESCRIPTION
A presentation for WordCampNL on the importance of accessible, useable websites and how to achieve that with responsive webdesign.
Citation preview
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.)
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
“masthead”“whitespace”“leading”“fold” 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 doesn’t 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 <link rel="stylesheet" type="text/css" href="core.css" media="screen" /><link rel="stylesheet" type="text/css" href="print.css" media="print" />
media queries since CSS3<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="phone.css" />
if screen width < 480px, load phone.css more media features: http://www.w3.org/TR/css3-mediaqueries/#media1
<link rel="stylesheet" type="text/css" media="screen and (min-device-width: 480px)" href="desktop.css" />
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
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
Recommended