content focused web design
DESCRIPTION
TRANSCRIPT
![Page 1: Content focused web design](https://reader030.vdocument.in/reader030/viewer/2022020306/54c8133b4a795963728b45d2/html5/thumbnails/1.jpg)
The Content-Focused
Web
Monday, November 7, 11
![Page 2: Content focused web design](https://reader030.vdocument.in/reader030/viewer/2022020306/54c8133b4a795963728b45d2/html5/thumbnails/2.jpg)
What does that mean????!1?
Monday, November 7, 11
![Page 3: Content focused web design](https://reader030.vdocument.in/reader030/viewer/2022020306/54c8133b4a795963728b45d2/html5/thumbnails/3.jpg)
What are we talking about?
Monday, November 7, 11
![Page 4: Content focused web design](https://reader030.vdocument.in/reader030/viewer/2022020306/54c8133b4a795963728b45d2/html5/thumbnails/4.jpg)
What are we talking about?
• Interacting with the web on a smaller computer
Monday, November 7, 11
![Page 5: Content focused web design](https://reader030.vdocument.in/reader030/viewer/2022020306/54c8133b4a795963728b45d2/html5/thumbnails/5.jpg)
What are we talking about?
• Interacting with the web on a smaller computer
• Data on the go
Monday, November 7, 11
![Page 6: Content focused web design](https://reader030.vdocument.in/reader030/viewer/2022020306/54c8133b4a795963728b45d2/html5/thumbnails/6.jpg)
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
![Page 7: Content focused web design](https://reader030.vdocument.in/reader030/viewer/2022020306/54c8133b4a795963728b45d2/html5/thumbnails/7.jpg)
Everyone has one now right?
Monday, November 7, 11
![Page 8: Content focused web design](https://reader030.vdocument.in/reader030/viewer/2022020306/54c8133b4a795963728b45d2/html5/thumbnails/8.jpg)
Mobile Site? Bleh!
Monday, November 7, 11
![Page 9: Content focused web design](https://reader030.vdocument.in/reader030/viewer/2022020306/54c8133b4a795963728b45d2/html5/thumbnails/9.jpg)
Responsive Web Design
Monday, November 7, 11
![Page 10: Content focused web design](https://reader030.vdocument.in/reader030/viewer/2022020306/54c8133b4a795963728b45d2/html5/thumbnails/10.jpg)
Responsive Web Design
• Works across multitude of devices
• Optimized for screen resolutions, not screen sizes
• Unified code base
Monday, November 7, 11
![Page 11: Content focused web design](https://reader030.vdocument.in/reader030/viewer/2022020306/54c8133b4a795963728b45d2/html5/thumbnails/11.jpg)
Design
• Focus on the content first
• Make sure its readable on variety of resolutions
• Design around main content
Monday, November 7, 11
![Page 12: Content focused web design](https://reader030.vdocument.in/reader030/viewer/2022020306/54c8133b4a795963728b45d2/html5/thumbnails/12.jpg)
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
![Page 13: Content focused web design](https://reader030.vdocument.in/reader030/viewer/2022020306/54c8133b4a795963728b45d2/html5/thumbnails/13.jpg)
Development
• Avoid hover effects
• Avoid horizontal scrolling
• Keep the page light
Monday, November 7, 11
![Page 14: Content focused web design](https://reader030.vdocument.in/reader030/viewer/2022020306/54c8133b4a795963728b45d2/html5/thumbnails/14.jpg)
Monday, November 7, 11
![Page 15: Content focused web design](https://reader030.vdocument.in/reader030/viewer/2022020306/54c8133b4a795963728b45d2/html5/thumbnails/15.jpg)
Adobe’s Site
• Good Start
• Some readability issues
• Navigation is easy to use
Monday, November 7, 11
![Page 16: Content focused web design](https://reader030.vdocument.in/reader030/viewer/2022020306/54c8133b4a795963728b45d2/html5/thumbnails/16.jpg)
Monday, November 7, 11
![Page 17: Content focused web design](https://reader030.vdocument.in/reader030/viewer/2022020306/54c8133b4a795963728b45d2/html5/thumbnails/17.jpg)
Twitter’s Site
• Very simple to use
• Lots of spacing makes touching elements easy and readable
Monday, November 7, 11
![Page 18: Content focused web design](https://reader030.vdocument.in/reader030/viewer/2022020306/54c8133b4a795963728b45d2/html5/thumbnails/18.jpg)
Monday, November 7, 11
![Page 19: Content focused web design](https://reader030.vdocument.in/reader030/viewer/2022020306/54c8133b4a795963728b45d2/html5/thumbnails/19.jpg)
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
![Page 20: Content focused web design](https://reader030.vdocument.in/reader030/viewer/2022020306/54c8133b4a795963728b45d2/html5/thumbnails/20.jpg)
Examples in Motion
• A few different example sites
Monday, November 7, 11
![Page 21: Content focused web design](https://reader030.vdocument.in/reader030/viewer/2022020306/54c8133b4a795963728b45d2/html5/thumbnails/21.jpg)
Monday, November 7, 11
![Page 22: Content focused web design](https://reader030.vdocument.in/reader030/viewer/2022020306/54c8133b4a795963728b45d2/html5/thumbnails/22.jpg)
Monday, November 7, 11
![Page 23: Content focused web design](https://reader030.vdocument.in/reader030/viewer/2022020306/54c8133b4a795963728b45d2/html5/thumbnails/23.jpg)
Monday, November 7, 11
![Page 24: Content focused web design](https://reader030.vdocument.in/reader030/viewer/2022020306/54c8133b4a795963728b45d2/html5/thumbnails/24.jpg)
Monday, November 7, 11
![Page 25: Content focused web design](https://reader030.vdocument.in/reader030/viewer/2022020306/54c8133b4a795963728b45d2/html5/thumbnails/25.jpg)
Monday, November 7, 11
![Page 26: Content focused web design](https://reader030.vdocument.in/reader030/viewer/2022020306/54c8133b4a795963728b45d2/html5/thumbnails/26.jpg)
Getting Started with Development
• A few frameworks to get going with the actual development
Monday, November 7, 11
![Page 27: Content focused web design](https://reader030.vdocument.in/reader030/viewer/2022020306/54c8133b4a795963728b45d2/html5/thumbnails/27.jpg)
jQTouch.com
Monday, November 7, 11
![Page 28: Content focused web design](https://reader030.vdocument.in/reader030/viewer/2022020306/54c8133b4a795963728b45d2/html5/thumbnails/28.jpg)
Sencha Touch
http://www.sencha.com/products/touch/
Monday, November 7, 11
![Page 29: Content focused web design](https://reader030.vdocument.in/reader030/viewer/2022020306/54c8133b4a795963728b45d2/html5/thumbnails/29.jpg)
Dojo Mobile
dojoToolkit.org/features/mobile
Monday, November 7, 11
![Page 30: Content focused web design](https://reader030.vdocument.in/reader030/viewer/2022020306/54c8133b4a795963728b45d2/html5/thumbnails/30.jpg)
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
![Page 31: Content focused web design](https://reader030.vdocument.in/reader030/viewer/2022020306/54c8133b4a795963728b45d2/html5/thumbnails/31.jpg)
jQuery Mobile
Monday, November 7, 11
![Page 32: Content focused web design](https://reader030.vdocument.in/reader030/viewer/2022020306/54c8133b4a795963728b45d2/html5/thumbnails/32.jpg)
@eddiemonge
github.com/eddiemonge
Coming Soon:eddiemonge.com
Monday, November 7, 11