Responsive web design

responsome stuff about responsive web design sive

intro: aboutphase 1: planningphase 2: contentphase 3: designphase 4: buildphase 5: after

the rise of mobile half of all searches are mobilesome websites near 50% mobile explosion of devices we need to address mobile

what is responsive? creating ﬂexible layoutsthat can adapt to suit the size or orientation of any device.

three things1. ﬂexible, grid-based layout 2. ﬂexible images/media 3. media queries Ethan Marcotte

strengths? device agnosticeasy to build (not plan)

weakness? bandwidth user experienceoverall management

responsive/ mobile/apps each has their place,responsive is not the only solution responsive is a perfect base

the future is ress“Such a tempting solution... you never have to touch the server” Luke Wroblewski

more than techniques65% planning & testing35% design & content 5% build

planning

mobile ﬁrst plan for small expand for large http://www.lukew.com/ff/entry.asp?933

prototyping loose wireframes test the ﬂow early

breakpoints based on content not devices

ux consistency procedural memory and confusing users

test frequentlydon’t make assumptions

content

simple contentsmall screen does not always mean “simple content”

write wisely pyramid writing? hide/reveal? content folding?

desigdesign

design smalldesign for small screen ﬁrst

visual hierarchy maintain hierarchy at all screen sizes

content imagessimply shrinking your images may not be ideal

frameworksyou may need to roll your own (but learn from others) test frequently http://twitter.github.com/bootstrap/

overlap? should your CSS beoverlapping or contained?

javascript?will you use javascript orconditional comments?

responsive tables some techniques look cool, but be aware of the users http://dbushell.com/2012/01/04/responsive-calendar-demo/

responsive media there are so many solutions so do your research http://css-tricks.com/which-responsive-images-solution-should-you-use/http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php

style guidesdocument your design and code for others that come after

reviewthe job is never done!

1. responsive should be the base2. you may still need RESS or mobile3. the build is only part of the process4. mobile ﬁrst at every stage5. test at every stage

http://www.maxdesign.com.au	2159
http://moodle2dev.newengland.tafensw.edu.au	323
http://slavkakami.blogspot.com	18
http://us-w1.rockmelt.com	6
http://bottlenose.com	3
http://www.onlydoo.com	2
http://translate.googleusercontent.com	2
http://localhost	1
http://slavkakami.blogspot.ru	1
http://www.linkedin.com	1
http://bitpena.com	1

Responsive web design

by Russ Weakley

Accessibility

Categories

Upload Details

Usage Rights

11 Embeds 2,517

Statistics

Responsive web design Presentation Transcript