Responsive Web Design | 352 Inc

645 views

Published on

Responsive web design is much more than just a design fad - it's quickly becoming a requirement for meeting your users where they are. As desktop web traffic is overtaken by mobile and tablet traffic, your content needs to fit the screen it's seen on. Responsive web design lets you match content to any screen.

Published in: Marketing
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
645
On SlideShare
0
From Embeds
0
Number of Embeds
154
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Responsive Web Design | 352 Inc

  1. 1. APRIL 2, 2014 @PETEBERNARDO & @352INC RESPONSIVE WEB DESIGN BRIEF OVERVIEW
  2. 2. A website that adapts to screen size, platform and orientation. WHAT IS RESPONSIVE DESIGN?
  3. 3. Device fragmentation that is only accelerating WHY SHOULD YOU USE IT?
  4. 4. “Other” is about to dominate SCREEN TRENDS
  5. 5. All three platforms are established now DEVICE TRENDS
  6. 6. MEDIA CONSUMPTION Source: Google/Ipsos/Sterling, 2012
  7. 7. MULTI-SCREEN WORLD Source: Google/Ipsos/Sterling, 2012
  8. 8. MOBILE ADOPTION Source: LukeW, 2012
  9. 9. MOBILE ADOPTION Source: LukeW, 2012
  10. 10. WHAT ARE THE STATS? • By 2015 more U.S. Internet users will access the Internet through mobile devices than through PCs or other wireline devices. • 34% of U.S. smartphone owners, about 48 million Americans, say that they mostly go online using their phone, rather than with a computer. • By next year, tablet sales in the United States will outpace those of netbooks, which were once considered a salvation for the PC industry. Note Pew Research: Mobile Fact Sheet
  11. 11. Future focus, One Site/URL, Focused development BENEFITS
  12. 12. Flexible Grid, Flexible Media, Media Queries WHAT MAKES UP A RESPONSIVE DESIGN?
  13. 13. Let your layout and fonts scale based on percentages target / context = result FLEXIBLE GRID
  14. 14. Scale up to container Use largest size you'll need FLUID MEDIA
  15. 15. Processed when certain conditions are met Produce "breakpoints" Screen size, resolution, orientation, and more No added specificity These let your design "snap." MEDIA QUERIES Device Width Small Screens Landscape 480px 7” tablets Portrait 600px 10” tablets Portrait 768px 10” tablets Landspace 1024px Desktop Widescreen 1200px
  16. 16. Research, Sketch, Iterate SUGGESTED WORKFLOW
  17. 17. Research Continuously Surveys – What do your customers want? Analytics – What is actually happening on the site? Stakeholders – How is sports different than local? Brand – How do you want to be perceived? SUGGESTED WORKFLOW
  18. 18. Design Spikes Sketch, Sketch, Sketch Establish style guide Focus on design patterns over pages SUGGESTED WORKFLOW
  19. 19. DESIGN PATTERNS
  20. 20. Iterative Development • Agile, Lean & Scrum • Iterative approach • Mobile up • Keep code light weight • Test, test, & test • Launch often SUGGESTED WORKFLOW
  21. 21. ADDITIONAL EDUCATION
  22. 22. EXAMPLES http://www.bostonglobe.com/ http://www.tampabay.com/ http://time.com/ http://law.com http://mediaqueri.es/
  23. 23. APRIL 2, 2014 @PETEBERNARDO & @352INC THANK YOU! @352INC & @PETEBERNARDO

×