Content focused web design

transcript

The Content-Focused

Monday, November 7, 11

What does that mean????!1?

What are we talking about?

• Interacting with the web on a smaller computer

• Data on the go

• Not a “limited” web

Everyone has one now right?

Mobile Site? Bleh!

Responsive Web Design

• Works across multitude of devices

• Optimized for screen resolutions, not screen sizes

• Unified code base

Design

• Focus on the content first

• Make sure its readable on variety of resolutions

• Design around main content

Design

• Optimal images - Do you really need that image?

• Easy to touch controls - Not necessarily larger. Can use spacing

• Clear and concise navigation

Development

• Avoid hover effects

• Avoid horizontal scrolling

• Keep the page light

Adobe’s Site

• Good Start

• Some readability issues

• Navigation is easy to use

Twitter’s Site

• Very simple to use

• Lots of spacing makes touching elements easy and readable

Yahoo’s Site

• Focused on the content

• Browsing to more content is prominent

• Everything on the initial page is all about the content

Examples in Motion

• A few different example sites

Getting Started with Development

• A few frameworks to get going with the actual development

jQTouch.com

Sencha Touch

http://www.sencha.com/products/touch/

Dojo Mobile

dojoToolkit.org/features/mobile

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

jQuery Mobile

@eddiemonge

github.com/eddiemonge

Coming Soon:eddiemonge.com

Content focused web design

Technology