Kam Banwait's talk on his theory behind responsive web design and development
-
Upload
kam-banwait -
Category
Design
-
view
492 -
download
0
description
Transcript of Kam Banwait's talk on his theory behind responsive web design and development
![Page 1: Kam Banwait's talk on his theory behind responsive web design and development](https://reader034.fdocuments.us/reader034/viewer/2022051818/54941e88b47959564d8b4a31/html5/thumbnails/1.jpg)
responsive web design and, a bit of, development
Friday, 24 May 13
![Page 2: Kam Banwait's talk on his theory behind responsive web design and development](https://reader034.fdocuments.us/reader034/viewer/2022051818/54941e88b47959564d8b4a31/html5/thumbnails/2.jpg)
about me
Friday, 24 May 13
![Page 3: Kam Banwait's talk on his theory behind responsive web design and development](https://reader034.fdocuments.us/reader034/viewer/2022051818/54941e88b47959564d8b4a31/html5/thumbnails/3.jpg)
about me
kam banwait
freelance creative developer
Friday, 24 May 13
![Page 4: Kam Banwait's talk on his theory behind responsive web design and development](https://reader034.fdocuments.us/reader034/viewer/2022051818/54941e88b47959564d8b4a31/html5/thumbnails/4.jpg)
what is responsive web design?
Friday, 24 May 13
![Page 5: Kam Banwait's talk on his theory behind responsive web design and development](https://reader034.fdocuments.us/reader034/viewer/2022051818/54941e88b47959564d8b4a31/html5/thumbnails/5.jpg)
what is responsive web design?
Friday, 24 May 13
![Page 6: Kam Banwait's talk on his theory behind responsive web design and development](https://reader034.fdocuments.us/reader034/viewer/2022051818/54941e88b47959564d8b4a31/html5/thumbnails/6.jpg)
what is responsive web design?
Friday, 24 May 13
![Page 7: Kam Banwait's talk on his theory behind responsive web design and development](https://reader034.fdocuments.us/reader034/viewer/2022051818/54941e88b47959564d8b4a31/html5/thumbnails/7.jpg)
what is responsive web design?buzzzzwords:
Friday, 24 May 13
![Page 8: Kam Banwait's talk on his theory behind responsive web design and development](https://reader034.fdocuments.us/reader034/viewer/2022051818/54941e88b47959564d8b4a31/html5/thumbnails/8.jpg)
what is responsive web design?buzzzzwords:
• fluid
Friday, 24 May 13
![Page 9: Kam Banwait's talk on his theory behind responsive web design and development](https://reader034.fdocuments.us/reader034/viewer/2022051818/54941e88b47959564d8b4a31/html5/thumbnails/9.jpg)
what is responsive web design?buzzzzwords:
• fluid
• adaptive and
Friday, 24 May 13
![Page 10: Kam Banwait's talk on his theory behind responsive web design and development](https://reader034.fdocuments.us/reader034/viewer/2022051818/54941e88b47959564d8b4a31/html5/thumbnails/10.jpg)
what is responsive web design?buzzzzwords:
• fluid
• adaptive and
• reactive
Friday, 24 May 13
![Page 11: Kam Banwait's talk on his theory behind responsive web design and development](https://reader034.fdocuments.us/reader034/viewer/2022051818/54941e88b47959564d8b4a31/html5/thumbnails/11.jpg)
what is responsive web design?buzzzzwords:
• fluid
• adaptive and
• reactive
• all of the above = FLEXIBLE
Friday, 24 May 13
![Page 12: Kam Banwait's talk on his theory behind responsive web design and development](https://reader034.fdocuments.us/reader034/viewer/2022051818/54941e88b47959564d8b4a31/html5/thumbnails/12.jpg)
what is responsive web design?more than what it was:
Friday, 24 May 13
![Page 13: Kam Banwait's talk on his theory behind responsive web design and development](https://reader034.fdocuments.us/reader034/viewer/2022051818/54941e88b47959564d8b4a31/html5/thumbnails/13.jpg)
what is responsive web design?more than what it was:
it’s not just for mobile .... any more
Friday, 24 May 13
![Page 14: Kam Banwait's talk on his theory behind responsive web design and development](https://reader034.fdocuments.us/reader034/viewer/2022051818/54941e88b47959564d8b4a31/html5/thumbnails/14.jpg)
why?
Friday, 24 May 13
![Page 15: Kam Banwait's talk on his theory behind responsive web design and development](https://reader034.fdocuments.us/reader034/viewer/2022051818/54941e88b47959564d8b4a31/html5/thumbnails/15.jpg)
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
![Page 16: Kam Banwait's talk on his theory behind responsive web design and development](https://reader034.fdocuments.us/reader034/viewer/2022051818/54941e88b47959564d8b4a31/html5/thumbnails/16.jpg)
but!
“...responsive web design is not only about adjustable screen resolutions and automatically resizing images/videos...”
Friday, 24 May 13
![Page 17: Kam Banwait's talk on his theory behind responsive web design and development](https://reader034.fdocuments.us/reader034/viewer/2022051818/54941e88b47959564d8b4a31/html5/thumbnails/17.jpg)
why?
what does the client want?
Friday, 24 May 13
![Page 18: Kam Banwait's talk on his theory behind responsive web design and development](https://reader034.fdocuments.us/reader034/viewer/2022051818/54941e88b47959564d8b4a31/html5/thumbnails/18.jpg)
design
go back to the basics for:
• content hierarchy
• wireframes
• in browser, illstr, phtoshp or frwrks
• images / scripts / fonts
Friday, 24 May 13
![Page 19: Kam Banwait's talk on his theory behind responsive web design and development](https://reader034.fdocuments.us/reader034/viewer/2022051818/54941e88b47959564d8b4a31/html5/thumbnails/19.jpg)
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
![Page 20: Kam Banwait's talk on his theory behind responsive web design and development](https://reader034.fdocuments.us/reader034/viewer/2022051818/54941e88b47959564d8b4a31/html5/thumbnails/20.jpg)
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
![Page 21: Kam Banwait's talk on his theory behind responsive web design and development](https://reader034.fdocuments.us/reader034/viewer/2022051818/54941e88b47959564d8b4a31/html5/thumbnails/21.jpg)
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
![Page 22: Kam Banwait's talk on his theory behind responsive web design and development](https://reader034.fdocuments.us/reader034/viewer/2022051818/54941e88b47959564d8b4a31/html5/thumbnails/22.jpg)
reading material
• smashing magazine: mobile books/articles
• a list apart / responsive-design
• http://www.abookapart.com
• reactive web design
• saraproft
Friday, 24 May 13
![Page 23: Kam Banwait's talk on his theory behind responsive web design and development](https://reader034.fdocuments.us/reader034/viewer/2022051818/54941e88b47959564d8b4a31/html5/thumbnails/23.jpg)
what we’ve covered
• what is responsive web design
• where it’s used: now and the future
• why?
• design
• development
Friday, 24 May 13
![Page 24: Kam Banwait's talk on his theory behind responsive web design and development](https://reader034.fdocuments.us/reader034/viewer/2022051818/54941e88b47959564d8b4a31/html5/thumbnails/24.jpg)
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