Your SlideShare is downloading. ×
0
Responsivdesignwebsites
Responsivdesignwebsites
Responsivdesignwebsites
Responsivdesignwebsites
Responsivdesignwebsites
Responsivdesignwebsites
Responsivdesignwebsites
Responsivdesignwebsites
Responsivdesignwebsites
Responsivdesignwebsites
Responsivdesignwebsites
Responsivdesignwebsites
Responsivdesignwebsites
Responsivdesignwebsites
Responsivdesignwebsites
Responsivdesignwebsites
Responsivdesignwebsites
Responsivdesignwebsites
Responsivdesignwebsites
Responsivdesignwebsites
Responsivdesignwebsites
Responsivdesignwebsites
Responsivdesignwebsites
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Responsivdesignwebsites

265

Published on

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
265
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
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 Web An Approach to Rethinking Mobile Web
  2. 5 billion+ People who own a mobile phone in the world.
  3. 2015 Mobile Web usage will surpass Desktop Web usage.
  4. What’s wrong with the web?
  5. The Web of Today • • • • • Mobile treated as an afterthought Reactive thinking Business-centric Specialized & Optimized Tends to get bloated
  6. Think of it as a bandaid
  7. Ok, so how can we fix it?
  8. The Web of Tomorrow • • • • • Mobile drives everything Proactive thinking User-centric Multi-device support Cleaner and faster
  9. Think of it as a cure
  10. The Key is to Be Responsive
  11. Responsive Web Design • • • • • Coined by Ethan Marcotte Similar to “Adaptive” layouts Fluid Grids structured around devices’ screen size Flexible Images & Media Media Queries
  12. Adaptive vs Responsive • • • • Difference is in the measurements Adaptive is fixed-width, Responsive is fluid Adaptive - (IAWriter) www.iawriter.com Responsive - (DConstruct 2011) 2011.dconstruct.org
  13. Sweet, so scale stuff down?
  14. You thought WRONG!
  15. Focus on Mobile First
  16. Mobile First Web Design • • • • • Coined by Luke Wroblewski Focus on core content and functionality Encourages “Progressive Enhancement” Opportunity for new technologies Supplements “Responsive Web Design”
  17. Southwest.com
  18. Too cluttered. Highly focused.
  19. Rule of Thumb: Identify your focus, then scale.
  20. What’s our approach?
  21. Formula for Success • • • • • Structure Content First Begin with Mobile Support vs. Optimize Use CSS3 Media Queries Use HTML5 Semantic Markup
  22. Everyone Benefits • • • • • Proactive for future devices Caters to a broader audience More meaningful content Centralized management Reduced long-term costs
  23. Mobile First Responsive Web An Approach to Rethinking Mobile Web

×