Welcome!


RESPONSIVE
WEB DESIGN

#McrFRED 
30th April 2013

@sammotea
@itsravenous
@simonowendesign


SPONSORS






WE'RE ALL

STILL LEARNING



MOBILE INTERNET


TAKING OVER DESKTOP INTERNET


SO, WHAT DO WE DO?


First, let's take a look

at some of the issues.


http://wtfmobileweb.com/


VARIOUS SIZES
OF DEVICES


320  Low Res
480  First Gen
720  Smartphones
768  iPad
900  Portrait Tablet
1024  Landscape Tablet
1200 +  Desktop


VARIOUS INPUTS


Mouse, trackpad, keyboard... Finger... Body!


VARIOUS USAGE
SCENARIOS


Walking whilst holding device.
Internet connectivity dropping in and out.



THINGS AREN'T
ALWAYS WHAT
THEY SEEM...

Introduction into Meta Viewport

Device and Viewport Size
http://responsejs.com/labs/dimensions/

Viewport width not always what you might expect.

Scroll bar width to be or not to be?


WEIRD NEW STUFF...


That's not an App...
It's a link to a Website.

And...

That's not a Web App...
It's an App you install from the Web.


THE M.SITE.COM

http://m.youtube.com/watch?hl=en&gl=GB&client=mv-google&v=7p7rocHEecE


But I'm on a desktop!


CHILL...


THERE'S SOME AWESOME
STUFF TO HELP US OUT 


MEDIA QUERIES


TRY AND AVOID BEING SPECIFIC

/* iPads (landscape) ----------- */
@import url(ipad-landscape.css)
       (min-device-width : 768px) and
       (max-device-width : 1024px) and
       (orientation : landscape);

INSTEAD USE RANGES

@import url(tiny.css) (min-width:300px);
@import url(small.css) (min-width:600px);
@import url(big.css) (min-width:900px);


BE BULLETPROOF


http://simplebits.com/publications/bulletproof/


BULLETPROOF DEMO

http://codepen.io/simonowendesign/pen/Fbivz

"Be water my friend" - Bruce Lee



MOBILE FIRST


NO "display: none;" naughties!

Don't add everything in then hide it,
rather...

Send in as little as possible to start with,
then add extra for bigger, better, faster, stronger.


AUTO REFRESH

LiveReload


localhost/html5-boilerplate/


EMULATORS



SAFARI / iOS



https://developer.apple.com/devcenter/ios/index.action


SAFARI / iOS



https://developer.apple.com/devcenter/ios/index.action


CHROME / ANDROID


https://www.youtube.com/watch?v=jXqrgtm-yF8

SPEND £10k+



BROWSERSTACK




3 months free (yay!)


MOBILE DEVICE
TESTING SUITE?




Getting there :)


DOCUMENTATION
AND WORKFLOW


Add comments to your CSS / Sass / LESS.

Split up code into _partials.

Use a version control system to backup your
code and write commit notes.

Use a build script: H5BP / Grunt / Yeoman.


SOURCE MAPS


There was this:

            /* @media -sass-debug-info{filename{font-family:file\:\/\/\/Users\/Richard\/Prototypes\/sourcemap\/sass\/test\.scss}line{font-family:\000034}} */
        

But now, there's this on the horizon:

Separate Source Map File!

w00t! 


"TEST THE WATER"


TEST, TEST, TEST,
MONITOR TESTING,
AUTOMATE TESTING,
THEN TEST IT AGAIN.


If you don't test, bad things can happen...

(see next slide)






THANKS
FOR WATCHING!


Any feedback would be great!

McrFRED@gmail.com

#McrFRED

@sammotea 
@itsravenous 
@simonowendesign
Made with Slides.com