kam banwait's talk on his theory behind responsive web design and development
DESCRIPTION
Slides from my talk about my theory behind responsive design and development. I've not included notes and the slides are shared purely for the links as mentioned in the talkTRANSCRIPT
responsive web design and, a bit of, development
Friday, 24 May 13
about me
Friday, 24 May 13
about me
kam banwait
freelance creative developer
Friday, 24 May 13
what is responsive web design?
Friday, 24 May 13
what is responsive web design?
Friday, 24 May 13
what is responsive web design?
Friday, 24 May 13
what is responsive web design?buzzzzwords:
Friday, 24 May 13
what is responsive web design?buzzzzwords:
• fluid
Friday, 24 May 13
what is responsive web design?buzzzzwords:
• fluid
• adaptive and
Friday, 24 May 13
what is responsive web design?buzzzzwords:
• fluid
• adaptive and
• reactive
Friday, 24 May 13
what is responsive web design?buzzzzwords:
• fluid
• adaptive and
• reactive
• all of the above = FLEXIBLE
Friday, 24 May 13
what is responsive web design?more than what it was:
Friday, 24 May 13
what is responsive web design?more than what it was:
it’s not just for mobile .... any more
Friday, 24 May 13
why?
Friday, 24 May 13
why?
“day by day, the number of devices, platforms, and browsers that need to work with your site grows. responsive web design represents a fundamental shift in how we’ll build websites for the decade to come.”
- Jeffrey Veen
what the heck is rwd
Friday, 24 May 13
but!
“...responsive web design is not only about adjustable screen resolutions and automatically resizing images/videos...”
Friday, 24 May 13
why?
what does the client want?
Friday, 24 May 13
design
go back to the basics for:
• content hierarchy
• wireframes
• in browser, illstr, phtoshp or frwrks
• images / scripts / fonts
Friday, 24 May 13
design
content is king
relative typography
consider all screen sizes
button sizes / sausage fingers
strip out extra content and ‘designy’ crap
don’t make the site look like a native, iPhone/Android, application...please :)
Friday, 24 May 13
a bit of development
• frame works
• html5/css3
• font scaling - rem, em, pixel, scaling-pixel,
<meta name="viewport" content="width=device-width, initial-scale=1">
• video’s/images
• SASS / LESS
• media queries - css/js
• vertical media queries
• preview on mobile devices not just in browser
Friday, 24 May 13
some links
• basic responsive grid - my custom rwd grid
• skeleton - wordpress and basic html
• bootstrap - i hate it (waaay too much bloat)
• the bricks - flat design psd/ai elements
• isotope - slightly cheating but works :)
• style guide(s)
• navigation show down
Friday, 24 May 13
reading material
• smashing magazine: mobile books/articles
• a list apart / responsive-design
• http://www.abookapart.com
• reactive web design
• saraproft
Friday, 24 May 13
what we’ve covered
• what is responsive web design
• where it’s used: now and the future
• why?
• design
• development
Friday, 24 May 13
please ... feel free to find me:
• twitter : #scriptedpixels
• facebook: www.facebook.com/scriptedpixels
• portfolio: www.scriptedpixels.co.uk
• linkedIn : uk.linkedin.com/in/kambanwait
any of these: ?
Friday, 24 May 13