View
1.399
Download
0
Category
Tags:
Preview:
DESCRIPTION
Slides from my presentation at the 2011 @windycitygo conference
Citation preview
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/
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.
CUSTOMIZED CONTENT +
RESPONSIVE DESIGN =
AWESOME MOBILE EXPERIENCE
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
CONTENT1. Have a Content Strategy
a) Know your voice. Know your audience.
CONTENT1. Have a Content Strategy
a) Know your voice. Know your audience.
b) Know the most important elements.
YOUbrand development / profitability
USERsatisfaction / happiness
CONTENT1. Have a Content Strategy
a) Know your voice. Know your audience.
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.
CONTENT3. Make it Easy on the User
a) Perform user actions for them.
b) Get an ID
1024x768
320x480
CONTENT3. Make it Easy on the User
a) Perform user actions for them.
b) Get an ID
c) Make the content the action point.
CONTENT1. Have a Content Strategy
2. Content is a Dish Best Served Personalized
3. Make it Easy on the User
CUSTOMIZED CONTENT +
RESPONSIVE DESIGN =
AWESOME MOBILE EXPERIENCE
DESIGNProgressive Enhancement
DESIGNProgressive Dehancement
THE MOBILE EXPERIENCESHOULD BE A GREAT EXPERIENCE
DESIGN1. Responsive Web Design
2. Separate Mobile Sites
3. Mobile First
DESIGN1. Responsive Web Design
a) What is it?
DESIGN1. Responsive Web Design
a) What is it?
FLEXIBLE DESIGN
DESIGN1. Responsive Web 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;
DESIGNEthan Marcotte’s 3 Rules
1. The site must be built with a flexible grid foundation.
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%}
DESIGNEthan Marcotte’s 3 Rules
1. The site must be built with a flexible grid foundation.
2. Images that are incorporated into the design must be flexible themselves.
3. Different views must be enabled in different contexts via media queries
<link rel="stylesheet" type="text/css" href="core.css" media="screen" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
CSS MEDIA QUERIES
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="iphone.css" />
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 1024px)" href="ipad.css" />
CSS MEDIA QUERIES
WHAT?
- Clear Floats- Resize Text- Increase / Decrease Width & Height- Change Navigation
<link rel="stylesheet" type="text/css" media="screen and (orientation: portrait)" href="ipad-portrait.css" />
<link rel="stylesheet" type="text/css" media="screen and (orientation: landscape)" href="ipad-landscape.css" />
iPAD?
<link rel="stylesheet" type="text/css" media="only screen and (-webkit-min-device-pixel-ratio:2" href="iphone4.css" />
iPHONE 4?
DESIGN1. Responsive Web Design
2. Separate Mobile Sites
DESIGN2. Separate Mobile Sites
a) Sometimes RWD isn’t enough.
NATIVE APPor
WEB APP?
DESIGN2. Separate Mobile Sites
a) Sometimes RWD isn’t enough.
b) Feature shrink
DESIGN2. Separate Mobile Sites
a) Sometimes RWD isn’t enough.
b) Feature shrink
c) Domain redirect
m.olivegarden.com
- server side- client side
DESIGN1. Responsive Web Design
2. Separate Mobile Sites
3. Mobile First
DESIGN3. Mobile First
a) Luke Wroblewski (www.lukew.com)
b) Simplify
DESIGN3. Mobile First
a) Luke Wroblewski (www.lukew.com)
b) Simplify
c) Focus
DESIGN3. Mobile First
a) Luke Wroblewski (www.lukew.com)
b) Simplify
c) Focus
d) Think like a user
FUTURE OF DESIGN?
???
CUSTOMIZED CONTENT +
RESPONSIVE DESIGN =
AWESOME MOBILE EXPERIENCE
CHEERS!@jasonvanlue
Recommended