kam banwait's talk on his theory behind responsive web design and development

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