Mobile First Responsive Web Design

  • 19,499 views
Uploaded on

 

More in: Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • Creator Shadow is the most professional and affordable web development & design company. World's best Intuitive web site interfaces and user-friendliness are the hallmark of our company.Responsive Web Design
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
19,499
On Slideshare
0
From Embeds
0
Number of Embeds
11

Actions

Shares
Downloads
66
Comments
1
Likes
10

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Mobile First Responsive Design UIE Seminar Preview Jason Grigsby • @grigs http://www.flickr.com/photos/stuart-dootson/4024407198
  • 2. So you already knowResponsiveWeb Design
  • 3. And you’ve probably heard of…MobileFirst
  • 4. So what’s the big deal? Mobile First Responsive Web Design http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/
  • 5. Two great tastes that taste great together.http://www.flickr.com/photos/reway2007/6762976351/
  • 6. But few people are doing it.http://www.flickr.com/photos/kalexanderson/5421517469/
  • 7. Where are the Mobile First RWDs? 106 sites from mediaqueri.es tested 9% 4% 25% 21% 4% 38% Mobile is Larger Same Size Less than 10% Savings 11 to 50% Savings 51% to 100% Savings Greater than 100% Savingshttp://blog.cloudfour.com/where-are-the-mobile-first-responsive-web-designs/
  • 8. Guy Podjarny repeated the experiment a year later. 347 sites from mediaqueri.es tested 3% 11% 86% Same size A bit smaller Much smaller A bit smaller = 50%-90% the size Much smaller = <50% the size http://www.slideshare.net/guypod/performance-implications-of-mobile-design
  • 9. http://www.flickr.com/photos/beautyredefined/2643858323/
  • 10. http://www.flickr.com/photos/puuikibeach/3654517679
  • 11. http://www.flickr.com/photos/drachmann/327122302/
  • 12. http://www.flickr.com/photos/68502717@N08/7155138495/
  • 13. In this seminar you’ll learn5 key techniques for mobile first responsive design
  • 14. http://www.flickr.com/photos/eole/3215868087/
  • 15. Thank You!Special thanks to all of the Flickr users sharing under creative commons. Jason Grigsby • @grigs http://www.flickr.com/photos/sualk61/4083223760/