• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
5th finger Responsive Design presentation for eTail Boston 2012
 

5th finger Responsive Design presentation for eTail Boston 2012

on

  • 519 views

Presentation I gave at the eTail Boston conference in 2012.

Presentation I gave at the eTail Boston conference in 2012.

Statistics

Views

Total Views
519
Views on SlideShare
514
Embed Views
5

Actions

Likes
0
Downloads
7
Comments
0

1 Embed 5

http://www.linkedin.com 5

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

    • Responsive Design Steen Anderssonsteen@5thfinger.com 415.294.2049 © 2012 5th Finger
    • Story of our experience…
    • The Traditional Approach to Mobile Web… www.peets.com   m.peets.com   5thfinger 2
    • What is Responsive Design?… Desktop Tablet Tablet Phone (Landscape) (Portrait) (Portrait) 5thfinger 3
    • Let’s See it in Action.. 5thfinger 4
    • In the Red Corner: In the Blue Corner:Responsive TraditionalDesign Mobile Web (m.dot.com sites)   5thfinger 5
    • 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
    • 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
    • Round 2: Email & SocialWith traditional m.dot sites… Mobile Email… FAIL! Social on Mobile… FAIL! 5thfinger 8
    • 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
    • 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
    • Round 3: SEOWe all spend significant dollars on our SEO… On our desktop sites… … but what about on mobile. 5thfinger 11
    • 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
    • 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
    • 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
    • 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
    • WINNER:ResponsiveDesign 5thfinger 16
    • If only I could have responsive design…without having to re-build my site…… Desktop Tablet Tablet Phone (Landscape) (Portrait) (Portrait) 5thfinger 17
    • Let’s Have a Look… 5thfinger 18
    • 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
    • </plug> 5thfinger 20
    • Tips on ‘Responsifying’ your site...… Desktop Tablet Tablet Phone (Landscape) (Portrait) (Portrait) 5thfinger 21
    • Tip 1 –DesignMobile First 1! 2! 5thfinger 22
    • Tip 2 –Think AboutYour Site AsContentModules 5thfinger 23
    • Tip 3 –Collaborate,Collaborate,Collaborate.Sit your DesignersNext To YourDevelopers(it’s a new typeof partnership)… Engineers + Creatives 5thfinger 24
    • 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
    • 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
    • Thank YouSteen AnderssonVP Marketing415.728.5194steen@5thfinger.com 5thfinger 27