5th finger Responsive Design presentation for eTail Boston 2012

Responsive Design

Steen Andersson [email protected]

415.294.2049

© 2012 5th Finger

Story of our experience…

5thfinger 2

The Traditional Approach to Mobile Web…

www.peets.com m.peets.com

5thfinger 3

What is Responsive Design?

…

Desktop Tablet (Landscape)

Tablet (Portrait)

Phone (Portrait)

5thfinger 4

Let’s See it in Action..

5thfinger 5

In the Red Corner:

Responsive Design

In the Blue Corner:

Traditional Mobile Web

(m.dot.com sites)

5thfinger 6

Round 1: Set Up Effort

Responsive Design

Traditional Mobile Web (m.brand.com)

VS!- You need to re-develop your desktop to make it responsive. This is expensive and can interrupt roadmap of current site

- a traditional m.dot mobile site (especially if you use proxy techniques) can be stood up in just 6-9 weeks with little to no interaction with your IT team.

5thfinger 7

Round 1: Set Up Effort

Responsive Design


VS!

WINNER: Traditional Mobile Web

- You need to re-develop your desktop to make it responsive. This is expensive and can interrupt roadmap of current site

- a traditional m.dot mobile site (especially if you use proxy techniques) can be stood up in just 6-9 weeks with little to no interaction with your IT team.

5thfinger 8

Round 2: Email & Social

Mobile Email… FAIL! Social on Mobile… FAIL!

With traditional m.dot sites…

5thfinger 9


Responsive Design


VS!+ Email & Social links to main site will render as a mobile optimized experience

- Email & Social links will take user to PC site (you could create a second version of that landing page for mobile and configure a redirect)

5thfinger 10


Responsive Design


VS!+ Email & Social links to main site will render as a mobile optimized experience

- Email & Social links will take user to PC site (you could create a second version of that landing page for mobile and configure a redirect)

WINNER: Responsive Design

5thfinger 11

Round 3: SEO

On our desktop sites…

We all spend significant dollars on our SEO…

… but what about on mobile.

5thfinger 12

Round 3: SEO & SEM

Responsive Design


VS!+ your desktop SEO investment is immediately leveraged for mobile & tablet

- You will need to set up a second SEO process for mobile - Site/page level rankings you have built on desktop often don’t flow to m.dot

5thfinger 13

Round 3: SEO & SEM

Responsive Design


VS!+ your PC SEO investment is immediately leveraged for mobile & tablet

- You will need to set up a second SEO process for mobile - Site/page level rankings you have built on desktop often don’t flow to m.dot


5thfinger 14

Round 4: Site Maintenance

Responsive Design


VS!+ One site to Maintain + 3rd Party Embed

- Two Sites to Maintain - 3rd Party Components Often Unsupported

5thfinger 15

Round 4: Site Maintenance

Responsive Design


VS!


+ One site to Maintain + 3rd Party Embed

- Two Sites to Maintain - 3rd Party Components Often Unsupported

5thfinger 16


5thfinger 17

If only I could have responsive design… without having to re-build my site…

…


Tablet (Portrait)

Phone (Portrait)

5thfinger 18

Let’s Have a Look…

5thfinger 19

5thFinger.js!

Step 1 – 5thFinger.js tags are added into your existing website’s HTML code.

Step 2 – We define ‘layout flows’ for each device width (tablet & mobile).

Step 3 – When your site is loaded, CSS3 Media Queries in the .js detect the device and re-flow pages dynamically, hiding or expanding any content.

Within Your eCommerce Platform

5th Finger Responsive

5thfinger 20

</plug>

5thfinger 21

Tips on ‘Responsifying’ your site...

…


Tablet (Portrait)

Phone (Portrait)

5thfinger 22

Tip 1 – Design Mobile First

1! 2!

5thfinger 23

Tip 2 – Think About Your Site As Content Modules

5thfinger 24

Tip 3 – Collaborate, Collaborate, Collaborate.

Sit your Designers Next To Your Developers (it’s a new type of partnership)…

Engineers + Creatives

5thfinger 25

Summary

Responsive Design solves many problems inherent in traditional mobile site approaches

You don’t have to re-build your desktop site. Folks like 5th Finger

can help.

Be smart with your planning for Responsive – it is a different type of

development. (Think mobile first and have

teams collaborate)

5thfinger 26

Wrap Up

Leverage responsive design for your current site (or a new site) and get the benefits today.

Ready, Set, Go!

Steen Andersson, VP Marketing

415.728.5194

[email protected]

5thfinger 27

Thank You

Steen Andersson

VP Marketing

415.728.5194

[email protected]

5th finger Responsive Design presentation for eTail Boston 2012

Documents

Transcript of 5th finger Responsive Design presentation for eTail Boston 2012