a marketer’s guide to responsive web design - merkle · • responsive web design is the clear...
TRANSCRIPT
Agenda
• Who is Merkle Mobile and 5th Finger?
• Some trends we’re seeing with the mobile web
• A primer on Responsive Web Design. Pros and Cons
• A new approach: Transformative Responsive Web Design (don’t rebuild your site!)
• Some Results
2
Merkle Mobile Group
Mobile User Experience Development Team (50 staff)
• iPhone / Android App Platform • Responsive Web Design • Mobile SEO services • Mobile Analytics
Mobile Contact Strategy Team (8 staff)
• Contact Strategy Development • SMS database development • SMS campaign effectiveness and
MMA compliance • Mobile Email Optimization • Push Notification Contact Strategy
and Execution
Digital Media Team (16 staff)
• Mobile Advertising • Mobile Paid Search • Mobile Display Optimization • Mobile Search Geolocation
3
Services Strategic engagement
Some of our most innovative work…
• Convenient customer access to coupons and deals across app and mobile • App Development, Mobile Site, AB testing and
analytics
• Review Wells Fargo’s Mobile Analytics capabilities for best practice
• After 14 stakeholder interviews a “mobile best practices gap assessment” led to recommendations of a new analytics platform.
• Comprehensive Mobile Marketing Contact Strategy.
• For Disney we provided a comprehensive marketing plan for their mobile marketing strategy including audience segmentation and SMS database marketing strategies.
• Acquisition based alert program mobile site, mobile app with over a 1,000,000 opt-ins
• Platform Services Retainer - Text Messaging,
Mobile Internet, App, mCoupons, Scannable Codes
4
• Build a tablet site for llbean.com • 5th Finger Responsive deployed to adapt their existing website.
iPods changed the media industry… iPhones ramped even faster… iPad growth (3x iPhone) Leaves “Siblings” in Dust
9
But now, is the best time to act! Responsive Design is here.
According to Ethan Marcotte,
Responsive Web Design is:
“A flexible grid (with flexible images) that incorporates media queries to create a responsive, adaptive layout.”
REASON 1 For the first time, Responsive is enabling the practical realization of omni-channel marketing and e-commerce. Prior solutions were not maintainable.
REASON 2 Responsive unifies silo’ed teams (mobile vs desktop) and helps foster a more customer centric view of your web channels.
REASON 3 Resources and budget are constant hurdles faced by marketers and responsive is in a position to ease the pain.
Why It’s A Game Changer
Video of Responsive Design Examples
14
Let's take a little closer look as to what makes these sites successful responsive design executions. HM Insurance You'll notice as the screen gets smaller a few things change. For a start, the menu collapses under a recognizable little affordance button which expands down. A common tool being used by everyone from Facebook to Disney. Additionally, The image choices on the homepage carousel get neatly cropped in on for mobile without looking odd. Nice choice of images, and no need to use separate images. First Merit Bank Again as we cross the breakpoint here between PC and tablet you see the whole navigation structure change <resize quickly back and forward between the PC/tablet breakpoint a few times> As the move down to mobile you'll notice that the navigation focusses on content useful for customers on the go. Locations, Customer Service and Login. (again toggle quickly between tablet and PC) You'll also notice that the quotes and columns from their desktop site become one rotating image on mobile. They are using all their assets, but in a smart mobile friendly approach. Capital One (Show skimming through tablet site in background) Other major Financial companies like Capital One are investing in responsive to address their tablet customers. While they currently retain their m.capitalone.com for mobile customers, you can bet they will be working on transitioning them to their responsive site in the near future. Disney Disney's responsive site launched recently and was lauded as an example of Web simplicity and perfection with it's clever use of Responsive Desgin. Disney is a brand with an immense amount of brands under its umbrella, so responsive is a natural draw to try and combat deep-linking issues when linking from emails, Facebook and other sources. While the company is still undergoing what is surely a multi-year project to make its entire site responsive, it has already done a great job of addressing a number of disney.com pages. The site’s UI elements are stripped free of ornament and embellishments, putting the focus squarely on the content. Videos and games are the star of the Disney show. You can easily swipe through the content <show the neat carousel through the characters> For the Disney team, maintenance costs and time spent managing different sites have significantly improved. Microsoft The responsive microsoft site has a mobile first design approach. Simple text and imagery has carries across mobile, tablet and desktop. You will notice that the desktop version has a mobile feel with their style of drop-downs and clear columns. An approach that saved them iterations. A hero imagery easily crops and scales was chosen to minimize time investment All of these examples are traditional responsive web design, now lets look at something a little more transformative for sites who were not ready to rebuild from scratch..
Device Optimized Device specific touch events and features
Ease of Maintenance Easy to update and maintain means lower costs
Single URL allows Deep Linking Links from Email & Social work on all devices
No website rebuild Quick to launch – No Site rebuild required
Maximized SEO 20% Increased organic traffic
Separate Mobile Site
Traditional Responsive Design
Mobile Web Design – Options Comparison
Transformative Responsive Web Design - allows the code of an existing site to be morphed into a flexible multi-device Responsive solution.
Transformative Responsive Web Design – what is it?
Transformative Responsive Web Design - allows the code of an existing site to be morphed into a flexible multi-device Responsive solution.
Transformative Responsive Web Design – what is it?
Transformative Web Design takes the best features of
• Responsive Web Design
• Adaptive Web Design (also known as Progressive Enhancement) and
• Modern HTML to manipulate pages
It allows the code of an existing site to be morphed into a flexible multi-device Responsive solution.
+ + RWD Modern HTML
Transformative Responsive Web Design
5thFinger.js
Step 2 – 5thFinger.js tags are added into the existing website’s HTML code.
Step 1 – Define ‘layout flows’ for device breakpoint (typically 3 or 4).
Step 3 – When the site is loaded, 5thFinger.js re-flows pages dynamically, hiding or expanding any content.
On Any Existing eCommerce Platform
5th Finger Responsive Technology
Device Optimized Device specific touch events and features
Ease of Maintenance Easy to update and maintain means lower costs
Single URL allows Deep Linking Links from Email & Social work on all devices
No website rebuild Quick to launch – No Site rebuild required
Maximized SEO 20% Increased organic traffic
Separate Mobile Site
Traditional Responsive Design
5th Finger Responsive
Mobile Web Design – Benefits 5th Finger Responsive Web Platform
Quick to market A blank canvas to start from The cost to develop is reasonable
Consistent branding and messaging across all channels Supports all devices, from the smallest mobile to a large plasma TV It's ready to support any newly released devices in the future
All pros under traditional responsive +plus…
No rebuild necessary A completely separate style sheet ensures the retrofit won’t interfere with existing desktop styles Less costly responsive solution
Two/Three websites to maintain Dilution of SEO / SEM investments and rankings Deep Linking Fail
A rebuild from scratch is costly and time consuming Hard to tailor to individual device situations.
An existing site with muddled code and patchwork can extend implementation time The content of some existing sites do not format well for smaller screens
Traditional Responsive Transformative Solution m.site
Which one is right for me?
We initially engaged with NARS because they were concerned that they were behind their competitors as they had no mobile site or presence. Where NARS saw a challenge, 5th Finger saw an opportunity for NARS to leapfrog their competitors with a next-generation mobile solution – Responsive Design.
NARS Cosmetics
Through extensive collaboration with NARS and the powerful 5th Finger Responsive framework, we were able to launch NARS’ mobile and tablet site experiences within just 14 weeks.
NARS Cosmetics
Responsive WINS: mdot: 10.6% conversion rate
Responsive: 11.5%
1-800 CONTACTS now has full control of the Responsive codebase and technology – no more black box provider.
1-800 CONTACTS
Take Aways
• Mobile Web Traffic will hit 30% of all traffic by 2013. • Many brands experience 30% tablet traffic already. • Responsive Web Design is the clear winner for mobile and web tablet sites development. • If you are unable to rebuild your site, Transformative Responsive Web Design is the best
option over a traditional m. site. It has higher conversion rates, lower costs of maintenance, better SEO benefits and a much richer experience.
38