Responsive
Web Design
Why your site looks terrible on Grandma's Computer
Kyle Breckenridge
Wait for applause...
Mobile Market Share
- 56% of American adults have a smartphone
- 34% of American adults own a tablet computer
- 77% of mobile searches are in a location where a computer is available such as home or work
- 29% of all traffic is from a phone or tablet
- 15% phones
- 14% tablet
WhY Not Mobile?
Mobile websites target specific mobile devices. (phones and tablets). This method is called User Agent(UA) sniffing.
This doesn't take into account future devices that might have different UA's than current generation devices.
Even if it does properly account for a future device, device dimensions change, the Galaxy Note 2 is 5.5 inches tall!
And Don't forget desktop displays
- 768x1024 – 11%
- 1280x800 – 9%
- 1366x768 – 8%
- 1280x1024 – 8%
- 1920x1080 – 7%
- 1440x900 – 6%
- 1680x1050 – 5%
- 320x480 – 5%
In Other words...
WHAT DO i DO ABOUT ALL THE DIFFERENT DEVICES AND PIXELS RATIOS AND MONITOR SIZES AND LEPRECHAUNS!!?!?!?
What's this adaptive thing?
Enter
Responsive Web Design
What Is
Responsive Web Design?
Responsive web design (RWD) is a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones)
A responsive website uses a fluid (changing) layout to adapt to any screen size.
What does it Mean?
- Future Proof
- Content Parity (only one set of content)
- Better for SEO (no seperate m.domain.com)
- Graceful Degradation
- Makes you look cool
Lets Play!!!!
One more Thing to consider
RESPONSIVE Design
AND Mobile
-
Banks
-
Sites with event registration
-
Really large eCommerce sites
with static content
References
- http://pewinternet.org/Commentary/2012/February/Pew-Internet-Mobile.aspx
- http://www.google.com/think/statistics/mobile-searching-at-home-or-work.html
- http://www.techrepublic.com/blog/webmaster/what-is-the-difference-between-responsive-vs-adaptive-web-design/2540
- http://en.wikipedia.org/wiki/Responsive_web_design
-
http://bradfrostweb.com/blog/web/responsive-web-design-missing-the-point/
Responsive Web Design Presentation for the PD Media Lab Sales team
By Kyle Breckenridge
Responsive Web Design Presentation for the PD Media Lab Sales team
Presentation on Responsive Web Design for the PD Media Lab sales team.
- 2,115