Welcome!


RESPONSIVE
WEB DESIGN

#McrFRED 
30th April 2013


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.



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...


Device and Viewport Size

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...

It's an App you install from the Web.


THE M.SITE.COM



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



BULLETPROOF DEMO




MOBILE FIRST



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

Send in as little as possible to start with,


AUTO REFRESH




EMULATORS



SAFARI / iOS




SAFARI / iOS




CHROME / ANDROID



SPEND £10k+




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



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


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

mcrfred-2

By Simon Owen

mcrfred-2

Responsive Web Design

  • 1,617
Loading comments...

More from Simon Owen