Customized Content for the Mobile Web

CUSTOMIZED CONTENTfor the

ORDER UP

MOBILE WEB

CUSTOMIZED CONTENT +

RESPONSIVE DESIGN =

AWESOME MOBILE EXPERIENCE

Don’t just build good sites.

BUILD AWESOMEEXPERIENCES.

DESIGN BETTER

How can my mobile site / appbe better?Q.

‣ The mobile web is growing 8 times faster than the desktop web grew in the AOL heydays

‣ Smart phone sales will pass PC sales in 2012

‣ AT&T data traffic has increased by almost 5,000% in 3 years, mostly due to the iPhone

‣ Mobile phones will overtake PCs as the most common web access devices worldwide by 2013.

‣ 600% growth in traffic to mobile websites in 2010.

‣ Facebook and Twitter access via mobile browser grows by triple digits in 2010.

‣ Average smartphone user visits up to 24 websites per day.

Source: http://www.lukew.com/resources/articles/MobileFirst_LukeW.pdf / http://www.zeldman.com/2011/03/30/a-day-apart-mobile-web-design-with-luke-wroblewski/

http://www.lukew.com/resources/articles/MobileFirst_LukeW.pdf

http://www.lukew.com/resources/articles/MobileFirst_LukeW.pdf

http://www.zeldman.com/2011/03/30/a-day-apart-mobile-web-design-with-luke-wroblewski/




SHOULD WE CARE?

What is my content?

Who am I trying to reach?

Q.

Q.

Your Content Defines the DesignYOUR AUDIENCE DEFINES THE MEDIUM

Does my content work in a mobile environment?

Does my audience use mobile?

Q.

Q.


RESPONSIVE DESIGN =


WHAT’S ON THE MENU?1. Content Matters

2. Design for Mobile

3. Examples & Practical Application

CONTENT1. Have a Content Strategy

2. Content is a Dish Best Served Personalized

3. Make it Easy on the User


a) Know your voice. Know your audience.



b) Know the most important elements.

YOUbrand development / profitability

USERsatisfaction / happiness



b) Know the most important elements.

c) Craft user stories.

CONTENT2. Content is a Dish Best Served Personalized

a) We don’t need more information. We need better filters.

CONTENT2. Content is a Dish Best Served Personalized

a) We don’t need more information. We need better filters.

b) How can you personalize your content?- location- social demographics- registration information

CONTENT3. Make it Easy on the User

a) Perform user actions for them.



b) Get an ID

1024x768

320x480



b) Get an ID

c) Make the content the action point.


2. Content is a Dish Best Served Personalized

3. Make it Easy on the User


RESPONSIVE DESIGN =


DESIGNProgressive Enhancement

DESIGNProgressive Dehancement

THE MOBILE EXPERIENCESHOULD BE A GREAT EXPERIENCE

DESIGN1. Responsive Web Design

2. Separate Mobile Sites

3. Mobile First


a) What is it?


a) What is it?

FLEXIBLE DESIGN


a) What is it?

b) 3 Rules

DESIGNEthan Marcotte’s 3 Rules

1. The site must be built with a flexible grid foundation.

http://www.alistapart.com/articles/responsive-web-design/



FLEXIBLEnot

FIXED

DESIGNFlexible Layouts

em

percentages

floats

font-size: 1.5em; /* 24px / 16px = 1.5em */

width: 65%;

float: left;



2. Images that are incorporated into the design must be flexible themselves.

img {max-width: 100%;

}

SOLUTION?

img, object {max-width: 100%;

}

VIDEO

img {max-width: 100%;}

#do-theevent {width:65%}



2. Images that are incorporated into the design must be flexible themselves.

3. Different views must be enabled in different contexts via media queries

WHAT?

- Clear Floats- Resize Text- Increase / Decrease Width & Height- Change Navigation

DESIGN2. Separate Mobile Sites

a) Sometimes RWD isn’t enough.

NATIVE APPor

WEB APP?



b) Feature shrink



b) Feature shrink

c) Domain redirect

m.olivegarden.com

- server side- client side



3. Mobile First

DESIGN3. Mobile First

a) Luke Wroblewski (www.lukew.com)

http://www.lukew.com




b) Simplify





b) Simplify

c) Focus





b) Simplify

c) Focus

d) Think like a user



FUTURE OF DESIGN?


RESPONSIVE DESIGN =


CHEERS!@jasonvanlue

Customized Content for the Mobile Web

Documents

Transcript of Customized Content for the Mobile Web