Responsive Web Design

Dawn Wentzell | @saffyre9

Responsive Web Design

Dawn Wentzell@saffyre9


One URL

•Bing: March 2012•Google: June 2012


WHY ONE URL?


Google: It’s easier for us

• Easier for users• Easier on crawl

efficiency• Easier for link

algorithms


Bing: It’s easier for you!

• Not splitting ranking

• Less crawler bandwidth

• Less maintenance


WHAT IS RESPONSIVE WEB DESIGN?


CSS Media Queries

•Uses the same:–HTML–Content


NOT CSS2 Media Types


CSS3 Media Queries


“Rather than looking for a type of device they look at the capability of the device” – Smashing Magazine

bit.ly/PPYxad


WHY USE RESPONSIVE DESIGN?


Single Content Source


Single Code Base


Any Content, Any Platform


Device Agnostic


WHY NOT USE RESPONSIVE DESIGN?


Unique Device Experiences


Planning Nightmares


Page Load Times


WHICH SHOULD I USE?


CAN I USE BOTH?


Yes!

RESS: Responsive Web Design + Server Side Components

bit.ly/SX7vAF


“…optimizing what we send to any given device is taken care of on the server.”

– Luke W


HOW DO I MAKE MY SITE RESPONSIVE?


Start Fresh


Mobile First


Device Classes


Breakpoints


CSS3 Media Queries


Resources

• One URL: bit.ly/QDOTJL • Responsive Design: bit.ly/VfVQBA • RESS: bit.ly/Rt20wO


Thank You!

Dawn [email protected]

@saffyre9

Documents