5th finger responsive design presentation for etail boston 2012
DESCRIPTION
Presentation I gave at the eTail Boston conference in 2012.TRANSCRIPT
![Page 2: 5th finger Responsive Design presentation for eTail Boston 2012](https://reader033.vdocuments.us/reader033/viewer/2022060108/554f39a1b4c90572088b4e72/html5/thumbnails/2.jpg)
Story of our experience…
![Page 3: 5th finger Responsive Design presentation for eTail Boston 2012](https://reader033.vdocuments.us/reader033/viewer/2022060108/554f39a1b4c90572088b4e72/html5/thumbnails/3.jpg)
5thfinger 2
The Traditional Approach to Mobile Web…
www.peets.com m.peets.com
![Page 4: 5th finger Responsive Design presentation for eTail Boston 2012](https://reader033.vdocuments.us/reader033/viewer/2022060108/554f39a1b4c90572088b4e72/html5/thumbnails/4.jpg)
5thfinger 3
What is Responsive Design?
…
Desktop Tablet (Landscape)
Tablet (Portrait)
Phone (Portrait)
![Page 5: 5th finger Responsive Design presentation for eTail Boston 2012](https://reader033.vdocuments.us/reader033/viewer/2022060108/554f39a1b4c90572088b4e72/html5/thumbnails/5.jpg)
5thfinger 4
Let’s See it in Action..
![Page 6: 5th finger Responsive Design presentation for eTail Boston 2012](https://reader033.vdocuments.us/reader033/viewer/2022060108/554f39a1b4c90572088b4e72/html5/thumbnails/6.jpg)
5thfinger 5
In the Red Corner:
Responsive Design
In the Blue Corner:
Traditional Mobile Web
(m.dot.com sites)
![Page 7: 5th finger Responsive Design presentation for eTail Boston 2012](https://reader033.vdocuments.us/reader033/viewer/2022060108/554f39a1b4c90572088b4e72/html5/thumbnails/7.jpg)
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.
![Page 8: 5th finger Responsive Design presentation for eTail Boston 2012](https://reader033.vdocuments.us/reader033/viewer/2022060108/554f39a1b4c90572088b4e72/html5/thumbnails/8.jpg)
5thfinger 7
Round 1: Set Up Effort
Responsive Design
Traditional Mobile Web (m.brand.com)
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.
![Page 9: 5th finger Responsive Design presentation for eTail Boston 2012](https://reader033.vdocuments.us/reader033/viewer/2022060108/554f39a1b4c90572088b4e72/html5/thumbnails/9.jpg)
5thfinger 8
Round 2: Email & Social
Mobile Email… FAIL! Social on Mobile… FAIL!
With traditional m.dot sites…
![Page 10: 5th finger Responsive Design presentation for eTail Boston 2012](https://reader033.vdocuments.us/reader033/viewer/2022060108/554f39a1b4c90572088b4e72/html5/thumbnails/10.jpg)
5thfinger 9
Round 2: Email & Social
Responsive Design
Traditional Mobile Web (m.brand.com)
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)
![Page 11: 5th finger Responsive Design presentation for eTail Boston 2012](https://reader033.vdocuments.us/reader033/viewer/2022060108/554f39a1b4c90572088b4e72/html5/thumbnails/11.jpg)
5thfinger 10
Round 2: Email & Social
Responsive Design
Traditional Mobile Web (m.brand.com)
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
![Page 12: 5th finger Responsive Design presentation for eTail Boston 2012](https://reader033.vdocuments.us/reader033/viewer/2022060108/554f39a1b4c90572088b4e72/html5/thumbnails/12.jpg)
5thfinger 11
Round 3: SEO
On our desktop sites…
We all spend significant dollars on our SEO…
… but what about on mobile.
![Page 13: 5th finger Responsive Design presentation for eTail Boston 2012](https://reader033.vdocuments.us/reader033/viewer/2022060108/554f39a1b4c90572088b4e72/html5/thumbnails/13.jpg)
5thfinger 12
Round 3: SEO & SEM
Responsive Design
Traditional Mobile Web (m.brand.com)
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
![Page 14: 5th finger Responsive Design presentation for eTail Boston 2012](https://reader033.vdocuments.us/reader033/viewer/2022060108/554f39a1b4c90572088b4e72/html5/thumbnails/14.jpg)
5thfinger 13
Round 3: SEO & SEM
Responsive Design
Traditional Mobile Web (m.brand.com)
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
WINNER: Responsive Design
![Page 15: 5th finger Responsive Design presentation for eTail Boston 2012](https://reader033.vdocuments.us/reader033/viewer/2022060108/554f39a1b4c90572088b4e72/html5/thumbnails/15.jpg)
5thfinger 14
Round 4: Site Maintenance
Responsive Design
Traditional Mobile Web (m.brand.com)
VS!+ One site to Maintain + 3rd Party Embed
- Two Sites to Maintain - 3rd Party Components Often Unsupported
![Page 16: 5th finger Responsive Design presentation for eTail Boston 2012](https://reader033.vdocuments.us/reader033/viewer/2022060108/554f39a1b4c90572088b4e72/html5/thumbnails/16.jpg)
5thfinger 15
Round 4: Site Maintenance
Responsive Design
Traditional Mobile Web (m.brand.com)
VS!
WINNER: Responsive Design
+ One site to Maintain + 3rd Party Embed
- Two Sites to Maintain - 3rd Party Components Often Unsupported
![Page 17: 5th finger Responsive Design presentation for eTail Boston 2012](https://reader033.vdocuments.us/reader033/viewer/2022060108/554f39a1b4c90572088b4e72/html5/thumbnails/17.jpg)
5thfinger 16
WINNER: Responsive Design
![Page 18: 5th finger Responsive Design presentation for eTail Boston 2012](https://reader033.vdocuments.us/reader033/viewer/2022060108/554f39a1b4c90572088b4e72/html5/thumbnails/18.jpg)
5thfinger 17
If only I could have responsive design… without having to re-build my site…
…
Desktop Tablet (Landscape)
Tablet (Portrait)
Phone (Portrait)
![Page 19: 5th finger Responsive Design presentation for eTail Boston 2012](https://reader033.vdocuments.us/reader033/viewer/2022060108/554f39a1b4c90572088b4e72/html5/thumbnails/19.jpg)
5thfinger 18
Let’s Have a Look…
![Page 20: 5th finger Responsive Design presentation for eTail Boston 2012](https://reader033.vdocuments.us/reader033/viewer/2022060108/554f39a1b4c90572088b4e72/html5/thumbnails/20.jpg)
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
![Page 21: 5th finger Responsive Design presentation for eTail Boston 2012](https://reader033.vdocuments.us/reader033/viewer/2022060108/554f39a1b4c90572088b4e72/html5/thumbnails/21.jpg)
5thfinger 20
</plug>
![Page 22: 5th finger Responsive Design presentation for eTail Boston 2012](https://reader033.vdocuments.us/reader033/viewer/2022060108/554f39a1b4c90572088b4e72/html5/thumbnails/22.jpg)
5thfinger 21
Tips on ‘Responsifying’ your site...
…
Desktop Tablet (Landscape)
Tablet (Portrait)
Phone (Portrait)
![Page 23: 5th finger Responsive Design presentation for eTail Boston 2012](https://reader033.vdocuments.us/reader033/viewer/2022060108/554f39a1b4c90572088b4e72/html5/thumbnails/23.jpg)
5thfinger 22
Tip 1 – Design Mobile First
1! 2!
![Page 24: 5th finger Responsive Design presentation for eTail Boston 2012](https://reader033.vdocuments.us/reader033/viewer/2022060108/554f39a1b4c90572088b4e72/html5/thumbnails/24.jpg)
5thfinger 23
Tip 2 – Think About Your Site As Content Modules
![Page 25: 5th finger Responsive Design presentation for eTail Boston 2012](https://reader033.vdocuments.us/reader033/viewer/2022060108/554f39a1b4c90572088b4e72/html5/thumbnails/25.jpg)
5thfinger 24
Tip 3 – Collaborate, Collaborate, Collaborate.
Sit your Designers Next To Your Developers (it’s a new type of partnership)…
Engineers + Creatives
![Page 26: 5th finger Responsive Design presentation for eTail Boston 2012](https://reader033.vdocuments.us/reader033/viewer/2022060108/554f39a1b4c90572088b4e72/html5/thumbnails/26.jpg)
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)
![Page 27: 5th finger Responsive Design presentation for eTail Boston 2012](https://reader033.vdocuments.us/reader033/viewer/2022060108/554f39a1b4c90572088b4e72/html5/thumbnails/27.jpg)
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