Content focused web design

807 views

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
807
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Content focused web design

  1. 1. The Content-Focused WebMonday, November 7, 11
  2. 2. What does that mean????!1?Monday, November 7, 11
  3. 3. What are we talking about?Monday, November 7, 11
  4. 4. What are we talking about? • Interacting with the web on a smaller computerMonday, November 7, 11
  5. 5. What are we talking about? • Interacting with the web on a smaller computer • Data on the goMonday, November 7, 11
  6. 6. What are we talking about? • Interacting with the web on a smaller computer • Data on the go • Not a “limited” webMonday, November 7, 11
  7. 7. Everyone has one now right?Monday, November 7, 11
  8. 8. Mobile Site? Bleh!Monday, November 7, 11
  9. 9. Responsive Web DesignMonday, November 7, 11
  10. 10. Responsive Web Design • Works across multitude of devices • Optimized for screen resolutions, not screen sizes • Unified code baseMonday, November 7, 11
  11. 11. Design • Focus on the content first • Make sure its readable on variety of resolutions • Design around main contentMonday, November 7, 11
  12. 12. Design • Optimal images - Do you really need that image? • Easy to touch controls - Not necessarily larger. Can use spacing • Clear and concise navigationMonday, November 7, 11
  13. 13. Development • Avoid hover effects • Avoid horizontal scrolling • Keep the page lightMonday, November 7, 11
  14. 14. Monday, November 7, 11
  15. 15. Adobe’s Site • Good Start • Some readability issues • Navigation is easy to useMonday, November 7, 11
  16. 16. Monday, November 7, 11
  17. 17. Twitter’s Site • Very simple to use • Lots of spacing makes touching elements easy and readableMonday, November 7, 11
  18. 18. Monday, November 7, 11
  19. 19. Yahoo’s Site • Focused on the content • Browsing to more content is prominent • Everything on the initial page is all about the contentMonday, November 7, 11
  20. 20. Examples in Motion • A few different example sitesMonday, November 7, 11
  21. 21. Monday, November 7, 11
  22. 22. Monday, November 7, 11
  23. 23. Monday, November 7, 11
  24. 24. Monday, November 7, 11
  25. 25. Monday, November 7, 11
  26. 26. Getting Started with Development • A few frameworks to get going with the actual developmentMonday, November 7, 11
  27. 27. jQTouch.comMonday, November 7, 11
  28. 28. Sencha Touch http://www.sencha.com/products/touch/Monday, November 7, 11
  29. 29. Dojo Mobile dojoToolkit.org/features/mobileMonday, November 7, 11
  30. 30. The M-Project • Think of it as jQuery Mobile with the added bonus of a NodeJS based build tool - Christina Warren • the-m-project.netMonday, November 7, 11
  31. 31. jQuery MobileMonday, November 7, 11
  32. 32. @eddiemonge github.com/eddiemonge Coming Soon: eddiemonge.comMonday, November 7, 11

×