Content focused web design
-
Upload
eddie-monge -
Category
Technology
-
view
111 -
download
0
description
Transcript of Content focused web design
The Content-Focused
Web
Monday, November 7, 11
What does that mean????!1?
Monday, November 7, 11
What are we talking about?
Monday, November 7, 11
What are we talking about?
• Interacting with the web on a smaller computer
Monday, November 7, 11
What are we talking about?
• Interacting with the web on a smaller computer
• Data on the go
Monday, November 7, 11
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
Everyone has one now right?
Monday, November 7, 11
Mobile Site? Bleh!
Monday, November 7, 11
Responsive Web Design
Monday, November 7, 11
Responsive Web Design
• Works across multitude of devices
• Optimized for screen resolutions, not screen sizes
• Unified code base
Monday, November 7, 11
Design
• Focus on the content first
• Make sure its readable on variety of resolutions
• Design around main content
Monday, November 7, 11
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
Development
• Avoid hover effects
• Avoid horizontal scrolling
• Keep the page light
Monday, November 7, 11
Monday, November 7, 11
Adobe’s Site
• Good Start
• Some readability issues
• Navigation is easy to use
Monday, November 7, 11
Monday, November 7, 11
Twitter’s Site
• Very simple to use
• Lots of spacing makes touching elements easy and readable
Monday, November 7, 11
Monday, November 7, 11
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
Examples in Motion
• A few different example sites
Monday, November 7, 11
Monday, November 7, 11
Monday, November 7, 11
Monday, November 7, 11
Monday, November 7, 11
Monday, November 7, 11
Getting Started with Development
• A few frameworks to get going with the actual development
Monday, November 7, 11
jQTouch.com
Monday, November 7, 11
Sencha Touch
http://www.sencha.com/products/touch/
Monday, November 7, 11
Dojo Mobile
dojoToolkit.org/features/mobile
Monday, November 7, 11
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
jQuery Mobile
Monday, November 7, 11
@eddiemonge
github.com/eddiemonge
Coming Soon:eddiemonge.com
Monday, November 7, 11