Your SlideShare is downloading. ×
Kam Banwait's talk on his theory behind responsive web design and development
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

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

515
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

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
515
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. responsive web design and, a bit of, developmentFriday, 24 May 13
  • 2. about meFriday, 24 May 13
  • 3. about mekam banwaitfreelance creative developerFriday, 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:• fluidFriday, 24 May 13
  • 9. what is responsive web design?buzzzzwords:• fluid• adaptive andFriday, 24 May 13
  • 10. what is responsive web design?buzzzzwords:• fluid• adaptive and• reactiveFriday, 24 May 13
  • 11. what is responsive web design?buzzzzwords:• fluid• adaptive and• reactive• all of the above = FLEXIBLEFriday, 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 moreFriday, 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 shiftin how we’ll build websites for the decade to come.”- Jeffrey Veenwhat the heck is rwdFriday, 24 May 13
  • 16. but!“...responsive web design is not onlyabout adjustable screen resolutions andautomatically resizing images/videos...”Friday, 24 May 13
  • 17. why?what does the client want?Friday, 24 May 13
  • 18. designgo back to the basics for:• content hierarchy• wireframes• in browser, illstr, phtoshp or frwrks• images / scripts / fontsFriday, 24 May 13
  • 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. 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. 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. reading material• smashing magazine: mobile books/articles• a list apart / responsive-design• http://www.abookapart.com• reactive web design• saraproftFriday, 24 May 13
  • 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. 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