Upload
steen-andersson
View
444
Download
1
Tags:
Embed Size (px)
DESCRIPTION
Presentation I gave at the eTail Boston conference in 2012.
Citation preview
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
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.
5thfinger 8
Round 2: Email & Social
Mobile Email… FAIL! Social on Mobile… FAIL!
With traditional m.dot sites…
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)
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
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
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
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
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
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
5thfinger 16
WINNER: Responsive Design
5thfinger 17
If only I could have responsive design… without having to re-build my site…
…
Desktop Tablet (Landscape)
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...
…
Desktop Tablet (Landscape)
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