5th finger Responsive Design presentation for eTail Boston 2012

657 views

Published on

Presentation I gave at the eTail Boston conference in 2012.

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
657
On SlideShare
0
From Embeds
0
Number of Embeds
22
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

5th finger Responsive Design presentation for eTail Boston 2012

  1. 1. Responsive Design Steen Anderssonsteen@5thfinger.com 415.294.2049 © 2012 5th Finger
  2. 2. Story of our experience…
  3. 3. The Traditional Approach to Mobile Web… www.peets.com   m.peets.com   5thfinger 2
  4. 4. What is Responsive Design?… Desktop Tablet Tablet Phone (Landscape) (Portrait) (Portrait) 5thfinger 3
  5. 5. Let’s See it in Action.. 5thfinger 4
  6. 6. In the Red Corner: In the Blue Corner:Responsive TraditionalDesign Mobile Web (m.dot.com sites)   5thfinger 5
  7. 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. 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 Web5thfinger 7
  9. 9. Round 2: Email & SocialWith traditional m.dot sites… Mobile Email… FAIL! Social on Mobile… FAIL! 5thfinger 8
  10. 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. 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 Design5thfinger 10
  12. 12. Round 3: SEOWe all spend significant dollars on our SEO… On our desktop sites… … but what about on mobile. 5thfinger 11
  13. 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.dot5thfinger 12
  14. 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.dotWINNER: Responsive Design5thfinger 13
  15. 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 Unsupported5thfinger 14
  16. 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 UnsupportedWINNER: Responsive Design5thfinger 15
  17. 17. WINNER:ResponsiveDesign 5thfinger 16
  18. 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. 19. Let’s Have a Look… 5thfinger 18
  20. 20. 5th Finger Responsive  Step 1 – 5thFinger.js Within Your eCommerce Platformtags are added into Step 2 –your existing We define ‘layoutwebsite’s HTML flows’ for eachcode. 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. 21. </plug> 5thfinger 20
  22. 22. Tips on ‘Responsifying’ your site...… Desktop Tablet Tablet Phone (Landscape) (Portrait) (Portrait) 5thfinger 21
  23. 23. Tip 1 –DesignMobile First 1! 2! 5thfinger 22
  24. 24. Tip 2 –Think AboutYour Site AsContentModules 5thfinger 23
  25. 25. Tip 3 –Collaborate,Collaborate,Collaborate.Sit your DesignersNext To YourDevelopers(it’s a new typeof partnership)… Engineers + Creatives 5thfinger 24
  26. 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. 27. Wrap UpLeverage responsivedesign for your current site(or a new site) and get thebenefits today.Ready, Set, Go!Steen Andersson, VP Marketing415.728.5194steen@5thfinger.com 5thfinger 26
  28. 28. Thank YouSteen AnderssonVP Marketing415.728.5194steen@5thfinger.com 5thfinger 27

×