For eBusiness & Strategy

Professionals

Responsive Design for Foodies

@DavidShuIp #RWDForFoodies

http://davidshuip.com

About me1. I prefer to talk more about food than eBusiness.2. A self-described “Food Hipster” aka “Foodster”.3. A “Foodster” is not the same as a “Foodie”.

• Foodsters don’t care if the food is cooked by a celebrity chef.• Foodsters don’t pay for ambiance.

Lamb Skewers – at Firehouse, China

Beef tartare with quail egg - At Gyoza King, Vancouver

Combo halal platter — at Halal Truck NYC

2

Key Goals & Takeaways

1. A New Approach to Web Dev Emerges

2. Responsive Web Design Philosophy

3. Is it right for you?

3

Audience Quick Poll

1. How many people know what Responsive Design is?

2. How many people have working knowledge of Responsive Web Design?

3. How many people are foodies?

4

• Artisan, Local, Organic or Exotic ingredients• Tasting Menus & Top service “Where everybody knows your name”• Demo: Affluent, eats out all the time, demands quality• Alinea , The Coach House, the French Laundry

High-End Restaurant

• Quality ingredients (may be organic or local)• Consistent Food quality• Good service due to extensive corporate training• Demo: May eat out often, prefers quality food• Frontera Grill, Ranch Steakhouse, Madera

Mid-Tier Restaurant

• Standard ingredients• “Waiting” quality service• Appeals to the masses, places more

emphasis on experience than food.• Applebee’s, Buffalo Wild WIngs, Cracker

Barrel

Low-End Restaurant

• Low quality ingredients (GMOs, rBGH steaks and dairy)

• Time sensitive, younger aged, hungry now or inebriated

Fast Food

Restaurant TypesI’m generalizing here, don’t blame me…

Food

Qua

lity

*Subjective Personal view of presenter only. Does not represent viewpoint of HCSC

Gourmet Food Truck

5

Mobile Web Site Types

•May take into user context into consideration•Provide a focused solution to a task and conform to certain display guidelines.•Behave similarly to native apps. •Hides the UI of the browser so that it looks more like a native app. •Can supply an icon for people to put on the Home screen allowing people to open web apps in the same way that they open native apps.

Mobile Web Apps

•Correctly scales existing content for the device screen•Designed to detect when it is being viewed on mobile browser-based devices.

•Adjusts the content it provides according to device.Mobile Optimized

Webpages

•A compatible webpage is a desktop site that displays the page successfully.

•Does NOT use flash or unsupported frameworks.Mobile Compatible

Webpages•Desktop sites with features not supported by mobile browsers.Non-Compatible Webpages

At a general level, Responsive Web Design (RWD) is a gap tool.

Bett

er e

xper

ienc

e RWD

6

NET NET:“RESPONSIVE DESIGN IS LIKE FOOD TRUCKS OF

THE CULINARY WORLD.”-ME

7

New Approach to Web EmergesResponsive Web Design (RWD)

We’re in the in the age of the “Splinternet”.

Source: http://sony.com

8

“RESPONSIVE DESIGN IS A PHILOSOPHY, NOT A

TECHNOLOGY”-PETER SHELDON, FORRESTER

9

The Business Case For Responsive Design Has eBusiness Leaders Intrigued:

• A single code base for all web experiences.• A single site for all web experiences.• A reduction in maintenance risks and release cycle times.• A single “device-agnostic” URL structure.• A noncompeting SEO format.• A way to size up as well as down.• A consistent and optimized experience across all web-

enabled touch points.• Responsive Means Back To One Web Team Again.

RWD according to eSolutionsWhy Responsive Web Design?

10

“It ain’t easy being Cheesy”.• Developing responsive pages is time-consuming.• Older desktop browsers will throw a wrench in the works.• Performance is a not a given.• Your existing eCommerce or CMS platform may not play nice.• It requires a front-end rewrite.• Redesigning big sites will require cross-functional

collaboration.• Developing unique experiences for a given touchpoint

requires extra effort.

RWD according to eSolutionsWhy RWD is NOT Good?

11

RWD according to eSolutionsCore Concept #1UX: Context - At a basic level, RWD assumes same context across all devices.

Source: https://itservices.stanford.edu/service/web/mobile/about/terminology

12

RWD according to eSolutionsCore Concept #2

Source: https://itservices.stanford.edu/service/web/mobile/about/terminology

Design: Flexible Grids – One of the cornerstones of responsive design. Use CSS for positioning and for laying out margins and spacing, and for implementing various web layouts.

Flexible Images & Text – Allows you to adapt your images or other media to load differently depending on the device, either by scaling or by using the CSS overflow property. 13

RWD according to eSolutionsCore Concept #3

Source: https://itservices.stanford.edu/service/web/mobile/about/terminology

Developers: Media Queries - Adapt content to devices that have portrait and landscape modes.

14

IS THE PATH TO RWD SUITABLE FOR YOU?

15

Forrester Recommendations:• Responsive design and HTML5 are mutually exclusive.

• As an early adopter, there will be many challenges ahead.

• If you proceed, you will probably need agency help.

• The timing might not be right.

• Is RWD a fit for the web globally or for each business unit?

• It doesn’t replace the need for apps.

• Is it suitable for “application heavy sites”?

Is RWD right for you?

16

“IF YOU DON’T HAVE A MOBILE STRATEGY, YOU DON’T HAVE A

FUTURE STRATEGY.”- ERIC SCHMIDT, EXECUTIVE CHAIRMAN OF GOOGLE

17

QUESTIONS?

18