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
480
First Gen
720
Smartphones
768
iPad
900
Portrait Tablet
1024
Landscape Tablet
1200 +
Desktop
VARIOUS INPUTS
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,
then add extra for bigger, better, faster, stronger.
AUTO REFRESH
EMULATORS
SAFARI / iOS
SAFARI / iOS
CHROME / ANDROID
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.
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
