Customized Content for the Mobile Web

Slide 1

Slide 1 text

CUSTOMIZED CONTENT for the ORDER UP MOBILE WEB

Slide 2

Slide 2 text

CUSTOMIZED CONTENT + RESPONSIVE DESIGN = AWESOME MOBILE EXPERIENCE

Slide 3

Slide 3 text

Don’t just build good sites. BUILD AWESOME EXPERIENCES.

Slide 4

Slide 4 text

DESIGN BETTER

Slide 5

Slide 5 text

How can my mobile site / app be better? Q.

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

‣ 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 traﬃc 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 traﬃc 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/

Slide 8

Slide 8 text

SHOULD WE CARE?

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

What is my content? Who am I trying to reach? Q. Q.

Slide 11

Slide 11 text

Your Content Deﬁnes the Design YOUR AUDIENCE DEFINES THE MEDIUM

Slide 12

Slide 12 text

Does my content work in a mobile environment? Does my audience use mobile? Q. Q.

Slide 13

Slide 13 text

CUSTOMIZED CONTENT + RESPONSIVE DESIGN = AWESOME MOBILE EXPERIENCE

Slide 14

Slide 14 text

WHAT’S ON THE MENU? 1. Content Matters 2. Design for Mobile 3. Examples & Practical Application

Slide 15

Slide 15 text

CONTENT 1. Have a Content Strategy 2. Content is a Dish Best Served Personalized 3. Make it Easy on the User

Slide 16

Slide 16 text

CONTENT 1. Have a Content Strategy a) Know your voice. Know your audience.

Slide 17

Slide 17 text

CONTENT 1. Have a Content Strategy a) Know your voice. Know your audience. b) Know the most important elements. YOU brand development / proﬁtability USER satisfaction / happiness

Slide 18

Slide 18 text

CONTENT 1. Have a Content Strategy a) Know your voice. Know your audience. b) Know the most important elements. c) Craft user stories.

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

CONTENT 2. Content is a Dish Best Served Personalized a) We don’t need more information. We need better ﬁlters.

Slide 21

Slide 21 text

CONTENT 2. Content is a Dish Best Served Personalized a) We don’t need more information. We need better ﬁlters. b) How can you personalize your content? - location - social demographics - registration information

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

CONTENT 3. Make it Easy on the User a) Perform user actions for them.

Slide 26

Slide 26 text

CONTENT 3. Make it Easy on the User a) Perform user actions for them. b) Get an ID 1024x768 320x480

Slide 27

Slide 27 text

CONTENT 3. Make it Easy on the User a) Perform user actions for them. b) Get an ID c) Make the content the action point.

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

CONTENT 1. Have a Content Strategy 2. Content is a Dish Best Served Personalized 3. Make it Easy on the User

Slide 31

Slide 31 text

CUSTOMIZED CONTENT + RESPONSIVE DESIGN = AWESOME MOBILE EXPERIENCE

Slide 32

Slide 32 text

DESIGN Progressive Enhancement

Slide 33

Slide 33 text

DESIGN Progressive Dehancement

Slide 34

Slide 34 text

THE MOBILE EXPERIENCE SHOULD BE A GREAT EXPERIENCE

Slide 35

Slide 35 text

DESIGN 1. Responsive Web Design 2. Separate Mobile Sites 3. Mobile First

Slide 36

Slide 36 text

DESIGN 1. Responsive Web Design a) What is it?

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

DESIGN 1. Responsive Web Design a) What is it? FLEXIBLE DESIGN

Slide 39

Slide 39 text

DESIGN 1. Responsive Web Design a) What is it? b) 3 Rules

Slide 40

Slide 40 text

DESIGN Ethan Marcotte’s 3 Rules 1. The site must be built with a ﬂexible grid foundation. http://www.alistapart.com/articles/responsive-web-design/

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

FLEXIBLE not FIXED

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

No content

Slide 46

Slide 46 text

DESIGN Flexible Layouts em percentages ﬂoats font-size: 1.5em; /* 24px / 16px = 1.5em */ width: 65%; float: left;

Slide 47

Slide 47 text

DESIGN Ethan Marcotte’s 3 Rules 1. The site must be built with a ﬂexible grid foundation. 2. Images that are incorporated into the design must be ﬂexible themselves.

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

img { max-width: 100%; } SOLUTION?

Slide 50

Slide 50 text

img, object { max-width: 100%; } VIDEO

Slide 51

Slide 51 text

img {max-width: 100%;} #do-theevent {width:65%}

Slide 52

Slide 52 text

No content

Slide 53

Slide 53 text

DESIGN Ethan 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

Slide 54

Slide 54 text

CSS MEDIA QUERIES

Slide 55

Slide 55 text

CSS MEDIA QUERIES

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

No content

Slide 58

Slide 58 text

No content

Slide 59

Slide 59 text

iPAD?

Slide 60

Slide 60 text

iPHONE 4?

Slide 61

Slide 61 text

No content

Slide 62

Slide 62 text

No content

Slide 63

Slide 63 text

DESIGN 1. Responsive Web Design 2. Separate Mobile Sites

Slide 64

Slide 64 text

DESIGN 2. Separate Mobile Sites a) Sometimes RWD isn’t enough.

Slide 65

Slide 65 text

NATIVE APP or WEB APP?

Slide 66

Slide 66 text

DESIGN 2. Separate Mobile Sites a) Sometimes RWD isn’t enough. b) Feature shrink

Slide 67

Slide 67 text

No content

Slide 68

Slide 68 text

No content

Slide 69

Slide 69 text

DESIGN 2. Separate Mobile Sites a) Sometimes RWD isn’t enough. b) Feature shrink c) Domain redirect m.olivegarden.com - server side - client side

Slide 70

Slide 70 text

No content

Slide 71

Slide 71 text

DESIGN 1. Responsive Web Design 2. Separate Mobile Sites 3. Mobile First

Slide 72

Slide 72 text

DESIGN 3. Mobile First a) Luke Wroblewski (www.lukew.com)

Slide 73

Slide 73 text

DESIGN 3. Mobile First a) Luke Wroblewski (www.lukew.com) b) Simplify

Slide 74

Slide 74 text

No content

Slide 75

Slide 75 text

No content

Slide 76

Slide 76 text

DESIGN 3. Mobile First a) Luke Wroblewski (www.lukew.com) b) Simplify c) Focus

Slide 77

Slide 77 text

No content

Slide 78

Slide 78 text

DESIGN 3. Mobile First a) Luke Wroblewski (www.lukew.com) b) Simplify c) Focus d) Think like a user