The document discusses the content-focused web and responsive web design. It emphasizes designing for a variety of screen resolutions rather than sizes and building a unified code base. Key aspects of content-focused and responsive design include optimizing images, using easy to touch controls, and clear navigation. The document provides examples of responsive design in Adobe's, Twitter's, and Yahoo's mobile sites and introduces several frameworks for responsive web development, including jQTouch, Sencha Touch, Dojo Mobile, and jQuery Mobile.

1. The
Content-Focused
Web
Monday, November 7, 11

2. What does
that mean????!1?
Monday, November 7, 11

3. What are
we talking about?
Monday, November 7, 11

4. What are
we talking about?
• Interacting with the web on a smaller
computer
Monday, November 7, 11

5. What are
we talking about?
• Interacting with the web on a smaller
computer
• Data on the go
Monday, November 7, 11

6. What are
we talking about?
• Interacting with the web on a smaller
computer
• Data on the go
• Not a “limited” web
Monday, November 7, 11

7. Everyone has one now right?
Monday, November 7, 11

8. Mobile Site? Bleh!
Monday, November 7, 11

9. Responsive Web Design
Monday, November 7, 11

10. Responsive Web Design
• Works across multitude of devices
• Optimized for screen resolutions, not
screen sizes
• Unified code base
Monday, November 7, 11

11. Design
• Focus on the content first
• Make sure its readable on variety of
resolutions
• Design around main content
Monday, November 7, 11

12. Design
• Optimal images - Do you really need that
image?
• Easy to touch controls - Not necessarily
larger. Can use spacing
• Clear and concise navigation
Monday, November 7, 11

13. Development
• Avoid hover effects
• Avoid horizontal scrolling
• Keep the page light
Monday, November 7, 11

14. Monday, November 7, 11

15. Adobe’s Site
• Good Start
• Some readability issues
• Navigation is easy to use
Monday, November 7, 11

16. Monday, November 7, 11

17. Twitter’s Site
• Very simple to use
• Lots of spacing makes touching elements
easy and readable
Monday, November 7, 11

18. Monday, November 7, 11

19. Yahoo’s Site
• Focused on the content
• Browsing to more content is prominent
• Everything on the initial page is all about
the content
Monday, November 7, 11

20. Examples in Motion
• A few different example sites
Monday, November 7, 11

21. Monday, November 7, 11

22. Monday, November 7, 11

23. Monday, November 7, 11

24. Monday, November 7, 11

25. Monday, November 7, 11

26. Getting Started with
Development
• A few frameworks to get going with the
actual development
Monday, November 7, 11

27. jQTouch.com
Monday, November 7, 11

28. Sencha Touch
http://www.sencha.com/products/touch/
Monday, November 7, 11

29. Dojo Mobile
dojoToolkit.org/features/mobile
Monday, November 7, 11

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.net
Monday, November 7, 11

31. jQuery Mobile
Monday, November 7, 11

32. @eddiemonge
github.com/eddiemonge
Coming Soon:
eddiemonge.com
Monday, November 7, 11