Content focused web design

The Content-Focused

Web

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




• Data on the go

• Not a “limited” web


Everyone has one now right?


Mobile Site? Bleh!


Responsive Web Design


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


http://mashable.com/2010/08/18/mobile-web-app-frameworks/

http://mashable.com/2010/08/18/mobile-web-app-frameworks/

http://mashable.com/2011/01/05/web-technologies-2011/

http://mashable.com/2011/01/05/web-technologies-2011/

jQuery Mobile


@eddiemonge

github.com/eddiemonge

Coming Soon:eddiemonge.com


Technology

Content focused web design