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 talk

1. responsive web design and, a bit of, development
Friday, 24 May 13

2. about me
Friday, 24 May 13

3. about me
kam banwait
freelance creative developer
Friday, 24 May 13

4. what is responsive web design?
Friday, 24 May 13

5. what is responsive web design?
Friday, 24 May 13

6. what is responsive web design?
Friday, 24 May 13

7. what is responsive web design?
buzzzzwords:
Friday, 24 May 13

8. what is responsive web design?
buzzzzwords:
• fluid
Friday, 24 May 13

9. what is responsive web design?
buzzzzwords:
• fluid
• adaptive and
Friday, 24 May 13

10. what is responsive web design?
buzzzzwords:
• fluid
• adaptive and
• reactive
Friday, 24 May 13

11. what is responsive web design?
buzzzzwords:
• fluid
• adaptive and
• reactive
• all of the above = FLEXIBLE
Friday, 24 May 13

12. what is responsive web design?
more than what it was:
Friday, 24 May 13

13. what is responsive web design?
more than what it was:
it’s not just for mobile .... any more
Friday, 24 May 13

14. why?
Friday, 24 May 13

15. 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

16. but!
“...responsive web design is not only
about adjustable screen resolutions and
automatically resizing images/videos...”
Friday, 24 May 13

17. why?
what does the client want?
Friday, 24 May 13

18. design
go back to the basics for:
• content hierarchy
• wireframes
• in browser, illstr, phtoshp or frwrks
• images / scripts / fonts
Friday, 24 May 13

19. 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

20. 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

21. 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

22. reading material
• smashing magazine: mobile books/articles
• a list apart / responsive-design
• http://www.abookapart.com
• reactive web design
• saraproft
Friday, 24 May 13

23. what we’ve covered
• what is responsive web design
• where it’s used: now and the future
• why?
• design
• development
Friday, 24 May 13

24. 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