respon some stuff about responsive web design sive
Responsive web design
Jan 27, 2015
A presentation on some things to think about when working on responsive web design projects. Presentation given at the Brisbane Web Design meetup - 22 May2012
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
responsome stuff about responsive web design
sive
intro: aboutphase 1: planningphase 2: contentphase 3: designphase 4: buildphase 5: after
aboutabout
the rise of mobilehalf of all searches are mobile
some websites near 50% mobileexplosion of devices
we need to address mobile
what is responsive?creating flexible layouts
that can adapt to suit the size or orientation of
any device.
three things1. flexible, grid-based layout
2. flexible images/media3. media queries
Ethan Marcotte
strengths?device agnostic
easy 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 techniques
65% planning & testing35% design & content
5% build
planning
plan
mobile firstplan for small
expand for largehttp://www.lukew.com/ff/entry.asp?933
prototypingloose wireframestest the flow early
breakpointsbased on content
not devices
ux consistencyprocedural memory and
confusing users
test frequentlydon’t make assumptions
content
conte
simple contentsmall screen does not always
mean “simple content”
write wiselypyramid writing?
hide/reveal?content folding?
design
desig
design smalldesign for small screen first
visual hierarchymaintain hierarchy at all screen sizes
content imagessimply shrinking your images
may not be ideal
build
build
frameworksyou may need to roll your own
(but learn from others)test frequently
http://twitter.github.com/bootstrap/
overlap?should your CSS be
overlapping or contained?
javascript?will you use javascript or conditional comments?
responsive tablessome techniques look cool, but be aware of the usershttp://dbushell.com/2012/01/04/responsive-calendar-demo/
responsive mediathere are so many solutions
so do your researchhttp://css-tricks.com/which-responsive-images-solution-should-you-use/
http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php
after
after
style guidesdocument your design
and code for others that come after
reviewthe job is never done!
wrap
wrap
1. responsive should be the base2. you may still need RESS or mobile3. the build is only part of the process 4. mobile first at every stage5. test at every stage
Related Documents
