WHAT’S WRONG WITH MOBILE SITES?
HARD TO MAINTAIN SEARCH PENALTIES
Slide 8
Slide 8 text
MOST MOBILE SITES DON’T REDIRECT
Slide 9
Slide 9 text
RESPONSIVE CODE FIXES ALL THESE ISSUES
ONE CODE
BASE
PHONES TABLETS
SMALL MONITORS BIG MONITORS
Slide 10
Slide 10 text
TWO MINUTE CRASH COURSE
The Basics Are Simple!
h1 { color: blue; }
@media all and (max-width: 766px) {
h1 { color: red; }
}
MOBILE
DESKTOP
Slide 11
Slide 11 text
www.BRADPAISLEY.COM
LIVE DEMO!
Slide 12
Slide 12 text
USE SASS OR LESS
IT STARTS SIMPLE…THEN GETS DAUNTING QUICKLY
MOBILE FIRST DON’T TRY TO RECYCLE
3 Things To Make It Easier
Slide 13
Slide 13 text
RESPONSIVE OR ADAPTIVE?
Most people use these terms incorrectly
Slide 14
Slide 14 text
MAXIMUM WIDTHS
Don’t forget about these!
Slide 15
Slide 15 text
USE SVG INSTEAD OF JPG OR PNG
SVGs look perfect on all screens with no extra work
Slide 16
Slide 16 text
CROSS BROWSER & CROSS DEVICE TESTING
Don’t Skip This Step!
TEST ON REAL DEVICES
AS MUCH AS POSSIBLE.
Slide 17
Slide 17 text
CROSS BROWSER & CROSS DEVICE TESTING
Don’t Skip This Step!
Slide 18
Slide 18 text
THE ELEPHANT IN THE ROOM
Slide 19
Slide 19 text
TAKEAWAYS
1 Mobile-first design. Mobile-first development.
2
3
4
Adaptive is an easier path than responsive.
Use real devices as much as possible.
Pick one: responsive or legacy IE. But never both.