Presentation I gave at the eTail Boston conference in 2012.

1. Responsive
Design
Steen Andersson
steen@5thfinger.com
415.294.2049
© 2012 5th Finger

2. Story of our experience…

3. The Traditional Approach to Mobile Web…
www.peets.com
m.peets.com
5thfinger
2

4. What is Responsive Design?
…
Desktop Tablet Tablet Phone
(Landscape) (Portrait) (Portrait)
5thfinger
3

5. Let’s See it in Action..
5thfinger
4

6. In the Red Corner: In the Blue Corner:
Responsive Traditional
Design Mobile Web
(m.dot.com sites)
5thfinger
5

7. Round 1: Set Up Effort
Responsive Traditional
Design Mobile Web
(m.brand.com)
- You need to re-develop VS! - a traditional m.dot mobile
your desktop to make it site (especially if you use
responsive. This is proxy techniques) can be
expensive and can stood up in just 6-9 weeks
interrupt roadmap of with little to no interaction
current site with your IT team.
5thfinger
6

8. Round 1: Set Up Effort
Responsive Traditional
Design Mobile Web
(m.brand.com)
- You need to re-develop VS! - a traditional m.dot mobile
your desktop to make it site (especially if you use
responsive. This is proxy techniques) can be
expensive and can stood up in just 6-9 weeks
interrupt roadmap of with little to no interaction
current site with your IT team.
WINNER: Traditional Mobile Web
5thfinger
7

9. Round 2: Email & Social
With traditional m.dot sites…
Mobile Email… FAIL! Social on Mobile… FAIL!
5thfinger
8

10. Round 2: Email & Social
Responsive Traditional
Design Mobile Web
(m.brand.com)
+ Email & Social links to VS! - Email & Social links will
main site will render as a take user to PC site
mobile optimized (you could create a
experience second version of that
landing page for mobile
and configure a redirect)
5thfinger
9

11. Round 2: Email & Social
Responsive Traditional
Design Mobile Web
(m.brand.com)
+ Email & Social links to VS! - Email & Social links will
main site will render as a take user to PC site
mobile optimized (you could create a
experience second version of that
landing page for mobile
and configure a redirect)
WINNER: Responsive Design
5thfinger
10

12. Round 3: SEO
We all spend significant dollars on our SEO…
On our desktop sites… … but what about on mobile.
5thfinger
11

13. Round 3: SEO & SEM
Responsive Traditional
Design Mobile Web
(m.brand.com)
+ your desktop SEO VS! - You will need to set up a
investment is second SEO process for
immediately leveraged mobile
for mobile & tablet - Site/page level rankings
you have built on desktop
often don’t flow to m.dot
5thfinger
12

14. Round 3: SEO & SEM
Responsive Traditional
Design Mobile Web
(m.brand.com)
+ your PC SEO VS! - You will need to set up a
investment is second SEO process for
immediately leveraged mobile
for mobile & tablet - Site/page level rankings
you have built on desktop
often don’t flow to m.dot
WINNER: Responsive Design
5thfinger
13

15. Round 4: Site Maintenance
Responsive Traditional
Design Mobile Web
(m.brand.com)
VS!
+ One site to Maintain - Two Sites to Maintain
+ 3rd Party Embed - 3rd Party Components
Often Unsupported
5thfinger
14

16. Round 4: Site Maintenance
Responsive Traditional
Design Mobile Web
(m.brand.com)
VS!
+ One site to Maintain - Two Sites to Maintain
+ 3rd Party Embed - 3rd Party Components
Often Unsupported
WINNER: Responsive Design
5thfinger
15

17. WINNER:
Responsive
Design
5thfinger
16

18. If only I could have responsive design…
without having to re-build my site…
…
Desktop Tablet Tablet Phone
(Landscape) (Portrait) (Portrait)
5thfinger
17

19. Let’s Have a Look…
5thfinger
18

20. 5th Finger Responsive
Step 1 – 5thFinger.js Within Your eCommerce Platform
tags are added into
Step 2 –
your existing
We define ‘layout
website’s HTML
flows’ for each
code.
device width (tablet
& mobile).
5thFinger.js!
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.
5thfinger
19

21. </plug>
5thfinger
20

22. Tips on ‘Responsifying’ your site...
…
Desktop
Tablet
Tablet
Phone
(Landscape)
(Portrait)
(Portrait)
5thfinger
21

23. Tip 1 –
Design
Mobile First 1! 2!
5thfinger
22

24. Tip 2 –
Think About
Your Site As
Content
Modules
5thfinger
23

25. Tip 3 –
Collaborate,
Collaborate,
Collaborate.
Sit your Designers
Next To Your
Developers
(it’s a new type
of partnership)…
Engineers + Creatives
5thfinger
24

26. Summary
Responsive Design You don’t have to Be smart with your
solves many re-build your desktop planning for Responsive –
problems inherent site. Folks like 5th Finger it is a different type of
in traditional can help. development. (Think
mobile site mobile first and have
approaches teams collaborate)
5thfinger
25

27. 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
steen@5thfinger.com
5thfinger
26

28. Thank You
Steen Andersson
VP Marketing
415.728.5194
steen@5thfinger.com
5thfinger
27