responsive web design and, a bit of, developmentFriday, 24 May 13
about meFriday, 24 May 13
about mekam banwaitfreelance creative developerFriday, 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:• fluidFriday, 24 May 13
what is responsive web design?buzzzzwords:• fluid• adaptive andFriday, 24 May 13
what is responsive web design?buzzzzwords:• fluid• adaptive and• reactiveFriday, 24 May 13
what is responsive web design?buzzzzwords:• fluid• adaptive and• reactive• all of the above = FLEXIBLEFriday, 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 moreFriday, 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 desig...
but!“...responsive web design is not onlyabout adjustable screen resolutions andautomatically resizing images/videos...”Fr...
why?what does the client want?Friday, 24 May 13
designgo back to the basics for:• content hierarchy• wireframes• in browser, illstr, phtoshp or frwrks• images / scripts /...
designcontent is kingrelative typographyconsider all screen sizesbutton sizes / sausage fingersstrip out extra content and ...
a bit of development• frame works• html5/css3• font scaling - rem, em, pixel, scaling-pixel,<meta name="viewport" content=...
some links• basic responsive grid - my custom rwd grid• skeleton - wordpress and basic html• bootstrap - i hate it (waaay ...
reading material• smashing magazine: mobile books/articles• a list apart / responsive-design• http://www.abookapart.com• r...
what we’ve covered• what is responsive web design• where it’s used: now and the future• why?• design• developmentFriday, 2...
please ... feel free to find me:• twitter : #scriptedpixels• facebook: www.facebook.com/scriptedpixels• portfolio: www.scri...
Upcoming SlideShare
Loading in …5
×

Kam Banwait's talk on his theory behind responsive web design and development

729 views
626 views

Published on

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

Published in: Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
729
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Kam Banwait's talk on his theory behind responsive web design and development

  1. 1. responsive web design and, a bit of, developmentFriday, 24 May 13
  2. 2. about meFriday, 24 May 13
  3. 3. about mekam banwaitfreelance creative developerFriday, 24 May 13
  4. 4. what is responsive web design?Friday, 24 May 13
  5. 5. what is responsive web design?Friday, 24 May 13
  6. 6. what is responsive web design?Friday, 24 May 13
  7. 7. what is responsive web design?buzzzzwords:Friday, 24 May 13
  8. 8. what is responsive web design?buzzzzwords:• fluidFriday, 24 May 13
  9. 9. what is responsive web design?buzzzzwords:• fluid• adaptive andFriday, 24 May 13
  10. 10. what is responsive web design?buzzzzwords:• fluid• adaptive and• reactiveFriday, 24 May 13
  11. 11. what is responsive web design?buzzzzwords:• fluid• adaptive and• reactive• all of the above = FLEXIBLEFriday, 24 May 13
  12. 12. what is responsive web design?more than what it was:Friday, 24 May 13
  13. 13. what is responsive web design?more than what it was:it’s not just for mobile .... any moreFriday, 24 May 13
  14. 14. why?Friday, 24 May 13
  15. 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 shiftin how we’ll build websites for the decade to come.”- Jeffrey Veenwhat the heck is rwdFriday, 24 May 13
  16. 16. but!“...responsive web design is not onlyabout adjustable screen resolutions andautomatically resizing images/videos...”Friday, 24 May 13
  17. 17. why?what does the client want?Friday, 24 May 13
  18. 18. designgo back to the basics for:• content hierarchy• wireframes• in browser, illstr, phtoshp or frwrks• images / scripts / fontsFriday, 24 May 13
  19. 19. designcontent is kingrelative typographyconsider all screen sizesbutton sizes / sausage fingersstrip out extra content and ‘designy’ crapdon’t make the site look like a native, iPhone/Android,application...please :)Friday, 24 May 13
  20. 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 browserFriday, 24 May 13
  21. 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 downFriday, 24 May 13
  22. 22. reading material• smashing magazine: mobile books/articles• a list apart / responsive-design• http://www.abookapart.com• reactive web design• saraproftFriday, 24 May 13
  23. 23. what we’ve covered• what is responsive web design• where it’s used: now and the future• why?• design• developmentFriday, 24 May 13
  24. 24. please ... feel free to find me:• twitter : #scriptedpixels• facebook: www.facebook.com/scriptedpixels• portfolio: www.scriptedpixels.co.uk• linkedIn : uk.linkedin.com/in/kambanwaitany of these: ?Friday, 24 May 13

×