For most retailers, it's no longer if they should do responsive design, it's how. Learn the many different approaches that are now available, and how to determine which is best for you. A critical yet simple analysis of priorities for strategy and execution will be shared, helping you assure responsive success.
5 Simple Actions to Make a Measurable Impact on Your Responsive Site5th Finger
Our President, Patrick Collins, presented at eTail East 2013 in Philadelphia, PA, on 5 Simple Actions to Make a Measurable Impact on Your Responsive Site. Listen to what he had to say, and contact him with any questions or comments at patrick.collins@5thfinger.com.
This document summarizes a service that allows freelancers to run Adobe applications on their laptops with significantly boosted performance, allowing them to work remotely without being tied to their desktop. The service can render images and videos up to 5 times faster on a laptop compared to using the laptop alone. This improved mobility and productivity allows freelancers to take on more clients or charge more for quicker project turnarounds.
Responsive Web Design, our 2 year journey of discoveryDarren Cousins
A digital agency gives a candid history of its development experience with responsive web design, outlining the problems and solutions it's developers faced and how it changed it's approach
Today there are more ways than ever to access the internet. Anywhere from smartphones to tablets to even gaming consoles, the devices that can access the web has exploded and continues to explode every day. While this additional variety of devices drastically enhances our accessibility, it poses an enormous headache for website designers and programmers.
5 Things You Need to Know About Responsive Design in eCommerceDemac Media
You did your job. You intrigued your prospect. You captured their attention. Your call to action worked and they want to buy. Now. So they do it from their phone. Oops. Too bad you spent all of your time and effort designing that slick user interface that doesn’t work in mobile environments. Simply put, responsive design is critical to eCommerce success. Don’t believe us? Check out this presentation. You’ll be convinced and informed to respond yourself.
Learn what impacts the cost of a website redesign so you can budget accordingly. Pros and cons of different development options are compared and tips to reduce costs are provided.
Sketching New Plans For Mobile Website DevelopmentJohn Murphy
There is a huge demand for mobile website development professionals. However, most professionals are still not sure why and how to create mobile websites. Why there is a need for responsive website design? You will get to know all details about mobile website development in this post where professionals speaks for themselves.
5 Simple Actions to Make a Measurable Impact on Your Responsive Site5th Finger
Our President, Patrick Collins, presented at eTail East 2013 in Philadelphia, PA, on 5 Simple Actions to Make a Measurable Impact on Your Responsive Site. Listen to what he had to say, and contact him with any questions or comments at patrick.collins@5thfinger.com.
This document summarizes a service that allows freelancers to run Adobe applications on their laptops with significantly boosted performance, allowing them to work remotely without being tied to their desktop. The service can render images and videos up to 5 times faster on a laptop compared to using the laptop alone. This improved mobility and productivity allows freelancers to take on more clients or charge more for quicker project turnarounds.
Responsive Web Design, our 2 year journey of discoveryDarren Cousins
A digital agency gives a candid history of its development experience with responsive web design, outlining the problems and solutions it's developers faced and how it changed it's approach
Today there are more ways than ever to access the internet. Anywhere from smartphones to tablets to even gaming consoles, the devices that can access the web has exploded and continues to explode every day. While this additional variety of devices drastically enhances our accessibility, it poses an enormous headache for website designers and programmers.
5 Things You Need to Know About Responsive Design in eCommerceDemac Media
You did your job. You intrigued your prospect. You captured their attention. Your call to action worked and they want to buy. Now. So they do it from their phone. Oops. Too bad you spent all of your time and effort designing that slick user interface that doesn’t work in mobile environments. Simply put, responsive design is critical to eCommerce success. Don’t believe us? Check out this presentation. You’ll be convinced and informed to respond yourself.
Learn what impacts the cost of a website redesign so you can budget accordingly. Pros and cons of different development options are compared and tips to reduce costs are provided.
Sketching New Plans For Mobile Website DevelopmentJohn Murphy
There is a huge demand for mobile website development professionals. However, most professionals are still not sure why and how to create mobile websites. Why there is a need for responsive website design? You will get to know all details about mobile website development in this post where professionals speaks for themselves.
Responsive vs. adaptive vs. device-specific: which one is best?Catalyst
This document discusses responsive, adaptive, and device-specific design strategies for mobile websites. Responsive design uses CSS to resize layout and content based on screen size, requiring only one code base. Adaptive design detects the device and loads optimized content, requiring more technical skills. Device-specific sites redirect to separate mobile pages, best as launching points not full sites. The best solution uses all three together based on content needs. Designing for small screens first optimizes the mobile experience.
This document summarizes analytics data from a Japanese sake website with over 100,000 monthly visitors. It finds that the majority of users are on mobile devices, so mobile optimization should be a priority. Gift pages see more traffic from mobile users and need improved mobile UX. While the site meets Google's mobile-friendly standards, page speeds could still be improved for mobile. Few visitors use outdated browsers so compatibility isn't a focus. Conversions are mostly from search and Twitter, so optimizing landing pages and Twitter distribution could increase conversions. Pages with many visits but few conversions may need conversion links added.
View this presentation and get yourself updated with some important and trendy web designing tips provided by MAP Systems, one of the renowned companies offering high quality graphic designing and web development solutions.
http://mapsystemsindia.com/digital-graphics-services/web-designing.html
VoC Naspers product conference oct 2018Joost Wolzak
This document discusses using Customer Effort Score (CES) as a key performance indicator for companies. It states that CES is stable when no changes are made but immediately reactive to changes, either positive or negative. Examples of CES reacting to issues like site speed improvements or new features being released are given. The document also mentions storing all customer feedback in a tool called NOMNOM and having teams incentivized to reduce UX debt and improve CES through a 15% rule.
This document provides guidance on determining if an agency is needed to build a tech product, how to search for an agency, and how to evaluate different agency options. It recommends starting by asking friends for agency referrals, searching websites like CSS Mania and Dribbble for portfolio work, and considering factors like location, capabilities, and client reviews. The document outlines steps for getting bids from 2-3 agencies and setting a timeline for selecting one to work with.
Don't break the bank - improve your mobile experience with light responsive t...Mallory O'Connor
On Thursday, February 6, Habanero is hosting a webinar about Habanero’s light-responsive design approach. Light-responsive design techniques help organizations realize the benefits of better mobile support, without the high cost of completely rebuilding their website. They’re also great if you have a dedicated mobile site and want to make the shift to a responsive portal.
The webinar will include a Habanero client case study to showcase our light-responsive approach and illustrate how you can benefit from this simplified way of doing responsive web design. John Allan, a Senior User Experience Developer, and Mallory O’Connor, Practice Lead, Customer and Member Portals, will present the webinar.
This 30-minute ‘coffee break’ presentation is geared for designers, developers, marketing professionals, or website managers.
Seventy percent of readers immediately delete emails that render poorly or require a lot of pinching and scrolling. On the other hand, responsive emails, designed to automatically adjust to any screen size, receive a 21% higher click-to-open rate than conventional emails. Here's how to design them and pitfalls to avoid.
[ http://tier10lab.com/2012/11/15/5-reasons-responsive-design/ ] Responsive web design is a methodology that incorporates flexible layouts, images and CSS media query components. Through the use of media query "breakpoints," the CSS can detect the current screen size of the browser. This guarantees the design functions correctly at any screen size ...
Responsive web design allows a single website to be accessed from any device like desktops, laptops or mobile phones. It automatically adapts the layout so that the user has the best experience no matter what device they are using. Responsive design saves money by avoiding the need to create separate mobile sites and reduces development costs. It also improves search engine optimization by eliminating duplicate content across different versions of the site.
Achieve a truly individual customer experience: Hear how American Express are...marketingfinder.co.uk
Establishing a global content strategy that relates to the needs of your regional internal teams and delivers a great experience to your customers presents a real challenge to the modern marketer.
Join Aaron Suppel, Global Marketing Manager at American Express, to learn the core business principles that are essential for a successful content experience management strategy. In this webinar, Aaron will discuss how empowering editors, driving scalability and responsive web principles have all enabled American Express to deliver unique, personalised experiences to their customers around the globe.
In a past Business901 Podcast, One Page Project Manager Podcast, with Mick Campbell co-founder and Managing Partner of OPPM International, we discussed the most recent book in the series, The New One-Page Project Manager: Communicate and Manage Any Project With A Single Sheet of Paper.
The One-Page Project Manager sets a new standard as an understandable and easy-to-apply organizational tool, allowing managers to summarize complex projects on a single information-rich page. The third book in the OPPM series, The One-Page Project Manager for Execution: Drive Strategy and Solve Problems with a Single Sheet of Paper describes how to combine the OPPM with the Toyota A3 report to create an enhanced, integrated management tool.
There has been a project management theme this week on the blog so the transcription is a perfect wind-up for the week.
Validately.com is a usability testing platform that needs redesigning to improve user experience. The current home page does not clearly explain what the product does, resulting in a high bounce rate. Usability testing found violations of key principles like learnability, efficiency, and satisfaction. The proposal is to redesign the home page and demo flow to better communicate Validately's value and make the product easier to learn and use.
Responsive Web Design ~ Best Practices for Maximizing ROIJuan Carlos Duron
Implementing a Responsive design for SharePoint? Consider these best practices to ensure you’re delivering an optimized experience for your users. This session discusses RWD principles and industry leading best practice guidelines, followed by a review of public facing SharePoint sites and design elements that can impact project costs and timelines.
Two approaches to RWD: Pure & Hybrid. Brendan Falkowski MeetMagentoNY2014
This document discusses two approaches to responsive web design: pure RWD and hybrid approaches using techniques like responsive proxies, adaptive layouts, and responsive design with server-side components (RESS). It provides an overview and comparison of these techniques, including insights from a survey of RESS users. Key advantages of pure RWD include a single URL, no redirects, and better crawler efficiency, though other hybrid approaches can also be viable depending on a site's needs and resources.
20 Tips for High Performance Responsive Design that the Pros Won’t Tell YouPatrick Collins
This document provides 20 tips for achieving high performance responsive design. Some of the key tips include preferring CSS and fonts over images to reduce file sizes, optimizing images, enhancing touch operations, using lazy loading, employing a content delivery network, validating code, and setting page load speed goals. It also recommends being selective with content, planning the technology approach, getting expert training, designing mobile first or simultaneously across devices, and setting up analytics by breakpoint. The tips are aimed at improving page loading speeds, reducing file sizes, and creating an optimized experience across devices.
Since the highly-publicized 2011 Boston Globe redesign, Responsive Design (RD) has exploded in adoption and has become Google’s recommended architecture for SEO. However, there are cases where alternatives should be considered.
In nine quick slides, we’ll introduce you to RD and help you decide whether or not you should use it on your next website redesign.
Proven ways to improve your website performance optimizing front end and back...Katy Slemon
Looking for proven ways to improve your website performance? Check out performance optimisation tips to enhance the front-end and back-end of your application.
Responsive Web Design in Cascade Server, by Chris Cox of BarkleyREIhannonhill
This session will discuss the topic of Responsive Web Design (RWD) and go through a case study showing Chapman University's process in choosing and implementing RWD in their most recent redesign.
A review of the many opportunities available to search marketers in the native application ecosystem, presented by Rachel Pasqua, Co-Founder of Token, October 2013
Does your website have these elements of responsive web design? Experience Dynamics
Experience Dynamics web seminar.
With 50% of Americans now owning smartphones, and much of our Web browsing occurring on mobile devices, websites are running into a common issues affecting the underlying user experience: how does our design look across devices? How compatible or pleasant is it to view, read and browse? To solve this problem, many organizations including the largest companies in the world, are turning to Responsive Web Design.
Responsive vs. adaptive vs. device-specific: which one is best?Catalyst
This document discusses responsive, adaptive, and device-specific design strategies for mobile websites. Responsive design uses CSS to resize layout and content based on screen size, requiring only one code base. Adaptive design detects the device and loads optimized content, requiring more technical skills. Device-specific sites redirect to separate mobile pages, best as launching points not full sites. The best solution uses all three together based on content needs. Designing for small screens first optimizes the mobile experience.
This document summarizes analytics data from a Japanese sake website with over 100,000 monthly visitors. It finds that the majority of users are on mobile devices, so mobile optimization should be a priority. Gift pages see more traffic from mobile users and need improved mobile UX. While the site meets Google's mobile-friendly standards, page speeds could still be improved for mobile. Few visitors use outdated browsers so compatibility isn't a focus. Conversions are mostly from search and Twitter, so optimizing landing pages and Twitter distribution could increase conversions. Pages with many visits but few conversions may need conversion links added.
View this presentation and get yourself updated with some important and trendy web designing tips provided by MAP Systems, one of the renowned companies offering high quality graphic designing and web development solutions.
http://mapsystemsindia.com/digital-graphics-services/web-designing.html
VoC Naspers product conference oct 2018Joost Wolzak
This document discusses using Customer Effort Score (CES) as a key performance indicator for companies. It states that CES is stable when no changes are made but immediately reactive to changes, either positive or negative. Examples of CES reacting to issues like site speed improvements or new features being released are given. The document also mentions storing all customer feedback in a tool called NOMNOM and having teams incentivized to reduce UX debt and improve CES through a 15% rule.
This document provides guidance on determining if an agency is needed to build a tech product, how to search for an agency, and how to evaluate different agency options. It recommends starting by asking friends for agency referrals, searching websites like CSS Mania and Dribbble for portfolio work, and considering factors like location, capabilities, and client reviews. The document outlines steps for getting bids from 2-3 agencies and setting a timeline for selecting one to work with.
Don't break the bank - improve your mobile experience with light responsive t...Mallory O'Connor
On Thursday, February 6, Habanero is hosting a webinar about Habanero’s light-responsive design approach. Light-responsive design techniques help organizations realize the benefits of better mobile support, without the high cost of completely rebuilding their website. They’re also great if you have a dedicated mobile site and want to make the shift to a responsive portal.
The webinar will include a Habanero client case study to showcase our light-responsive approach and illustrate how you can benefit from this simplified way of doing responsive web design. John Allan, a Senior User Experience Developer, and Mallory O’Connor, Practice Lead, Customer and Member Portals, will present the webinar.
This 30-minute ‘coffee break’ presentation is geared for designers, developers, marketing professionals, or website managers.
Seventy percent of readers immediately delete emails that render poorly or require a lot of pinching and scrolling. On the other hand, responsive emails, designed to automatically adjust to any screen size, receive a 21% higher click-to-open rate than conventional emails. Here's how to design them and pitfalls to avoid.
[ http://tier10lab.com/2012/11/15/5-reasons-responsive-design/ ] Responsive web design is a methodology that incorporates flexible layouts, images and CSS media query components. Through the use of media query "breakpoints," the CSS can detect the current screen size of the browser. This guarantees the design functions correctly at any screen size ...
Responsive web design allows a single website to be accessed from any device like desktops, laptops or mobile phones. It automatically adapts the layout so that the user has the best experience no matter what device they are using. Responsive design saves money by avoiding the need to create separate mobile sites and reduces development costs. It also improves search engine optimization by eliminating duplicate content across different versions of the site.
Achieve a truly individual customer experience: Hear how American Express are...marketingfinder.co.uk
Establishing a global content strategy that relates to the needs of your regional internal teams and delivers a great experience to your customers presents a real challenge to the modern marketer.
Join Aaron Suppel, Global Marketing Manager at American Express, to learn the core business principles that are essential for a successful content experience management strategy. In this webinar, Aaron will discuss how empowering editors, driving scalability and responsive web principles have all enabled American Express to deliver unique, personalised experiences to their customers around the globe.
In a past Business901 Podcast, One Page Project Manager Podcast, with Mick Campbell co-founder and Managing Partner of OPPM International, we discussed the most recent book in the series, The New One-Page Project Manager: Communicate and Manage Any Project With A Single Sheet of Paper.
The One-Page Project Manager sets a new standard as an understandable and easy-to-apply organizational tool, allowing managers to summarize complex projects on a single information-rich page. The third book in the OPPM series, The One-Page Project Manager for Execution: Drive Strategy and Solve Problems with a Single Sheet of Paper describes how to combine the OPPM with the Toyota A3 report to create an enhanced, integrated management tool.
There has been a project management theme this week on the blog so the transcription is a perfect wind-up for the week.
Validately.com is a usability testing platform that needs redesigning to improve user experience. The current home page does not clearly explain what the product does, resulting in a high bounce rate. Usability testing found violations of key principles like learnability, efficiency, and satisfaction. The proposal is to redesign the home page and demo flow to better communicate Validately's value and make the product easier to learn and use.
Responsive Web Design ~ Best Practices for Maximizing ROIJuan Carlos Duron
Implementing a Responsive design for SharePoint? Consider these best practices to ensure you’re delivering an optimized experience for your users. This session discusses RWD principles and industry leading best practice guidelines, followed by a review of public facing SharePoint sites and design elements that can impact project costs and timelines.
Two approaches to RWD: Pure & Hybrid. Brendan Falkowski MeetMagentoNY2014
This document discusses two approaches to responsive web design: pure RWD and hybrid approaches using techniques like responsive proxies, adaptive layouts, and responsive design with server-side components (RESS). It provides an overview and comparison of these techniques, including insights from a survey of RESS users. Key advantages of pure RWD include a single URL, no redirects, and better crawler efficiency, though other hybrid approaches can also be viable depending on a site's needs and resources.
20 Tips for High Performance Responsive Design that the Pros Won’t Tell YouPatrick Collins
This document provides 20 tips for achieving high performance responsive design. Some of the key tips include preferring CSS and fonts over images to reduce file sizes, optimizing images, enhancing touch operations, using lazy loading, employing a content delivery network, validating code, and setting page load speed goals. It also recommends being selective with content, planning the technology approach, getting expert training, designing mobile first or simultaneously across devices, and setting up analytics by breakpoint. The tips are aimed at improving page loading speeds, reducing file sizes, and creating an optimized experience across devices.
Since the highly-publicized 2011 Boston Globe redesign, Responsive Design (RD) has exploded in adoption and has become Google’s recommended architecture for SEO. However, there are cases where alternatives should be considered.
In nine quick slides, we’ll introduce you to RD and help you decide whether or not you should use it on your next website redesign.
Proven ways to improve your website performance optimizing front end and back...Katy Slemon
Looking for proven ways to improve your website performance? Check out performance optimisation tips to enhance the front-end and back-end of your application.
Responsive Web Design in Cascade Server, by Chris Cox of BarkleyREIhannonhill
This session will discuss the topic of Responsive Web Design (RWD) and go through a case study showing Chapman University's process in choosing and implementing RWD in their most recent redesign.
A review of the many opportunities available to search marketers in the native application ecosystem, presented by Rachel Pasqua, Co-Founder of Token, October 2013
Does your website have these elements of responsive web design? Experience Dynamics
Experience Dynamics web seminar.
With 50% of Americans now owning smartphones, and much of our Web browsing occurring on mobile devices, websites are running into a common issues affecting the underlying user experience: how does our design look across devices? How compatible or pleasant is it to view, read and browse? To solve this problem, many organizations including the largest companies in the world, are turning to Responsive Web Design.
Building Drupal sites mobile first with lazy loading, responsive media and Varnish - without driving anyone insane.
A combined session, technical overview, and outlined solution.
Includes the notes from the workshop at the end.
BarkleyREI & Hannon Hill Webinar - Responsive Web Designhannonhill
This document summarizes a webinar about responsive web design and how Cascade Server can help with the process. It discusses what responsive design is, why organizations implement it, and the general process involved. This includes agreeing on breakpoints, standards, and whether to take a desktop-first or mobile-first approach. It provides examples of coding techniques like media queries and touch detection. Finally, it outlines ways Cascade Server can simplify content editing and management for responsive sites through features like custom data definitions.
Responsive web design allows a single website to automatically adapt to different screen sizes and devices. It works by adjusting content, layout, and interactions using fluid grids, flexible images, and media queries. The main benefits are lower costs through a single site, easier updates and SEO, and compatibility with new devices. While initial development costs may be higher, responsive design is recommended for better usability, user experience, and mobile search engine optimization.
Responsive web design (RWD) allows websites to automatically adapt their layout to different screen sizes and devices. It provides an optimal viewing and interaction experience across a wide range of devices without the need for separate mobile websites. The document discusses the benefits of RWD, including allowing websites to adapt to different devices, saving time and money by eliminating separate mobile sites, improving usability across all devices, and boosting search engine optimization. It also provides an overview of the key technologies used in RWD like HTML5, CSS3, and media queries.
Responsive Web Design helps SEO Boost up by XHTMLChampsXHTML Champs
We are living in a world where internet is being used to do almost everything in life and we are living at a time when most of the browsers are using mobile devices for browsing. This made it necessary that the websites should be mobile compatible.
Responsive web design, otherwise known as the web design of new generation is fitting into this situation and every other website owners are going for it. Responsive web design makes your website compatible with any size of screen and you need have to keep separate designs for desktops and mobile devices. It will also make the website user-friendly and makes the navigation easier in mobile devices.
Read : - http://www.xhtmlchamps.com/psd-to-responsive.html
The trend of Web Development is evolving every year with an immense amount of speed. New technologies are being discovered on a daily basis as developers exploring new technologies with a new way of innovation.
if you are a businessman who uses digital marketing ( web development), it’s important for you to see these changes and apply them- so that you can be in the competition and attract more of the customer’s to your business.
The responsive website design is quickly established as a fundamental element in the design of next generation websites. This is largely due to the evolution of the Web and the rapid growth of mobile devices. If you want to setup your website in gulf shores Alabama both for desktop and mobile platforms then go for responsive website design gulf shores al.
How not having a Responsive Website can be Detrimental to your business?Helios Solutions
Is your website responsive? Know about the benefits that you are losing out; collaborate with an outsourcing responsive website development agency now!
This document discusses responsive web design using CSS3 and HTML5. It defines responsive web design as a process that creates a single website that adapts to different screen sizes, devices, and orientations. The key benefits of responsive design are that it saves money and time, improves performance and SEO, and provides wider browser support. Responsive design works by using a flexible grid, scaling images and media, and CSS3 media queries to apply different styles based on screen capabilities. Popular frameworks that support responsive design are also mentioned.
This document discusses responsive web design using CSS3 and HTML5. It defines responsive web design as a process that creates a single website that adapts to different screen sizes, devices, and orientations. The key benefits of responsive design are that it saves money and time, improves performance and SEO, and provides wider browser support. Responsive design works by using a flexible grid, scaling images and media, and CSS3 media queries to apply different styles based on screen capabilities. Popular frameworks that support responsive design are also mentioned.
This document discusses responsive web design using CSS3 and HTML5. It defines responsive web design as designing a single website that adapts to different screen sizes and devices through flexible grids and CSS media queries. The key benefits of responsive design are saving money and time through a single code base, improved performance across devices, better SEO through one unified URL, and wider browser support. It provides guidelines for responsive design like using a mobile-first approach, resizing images, hiding non-essential elements on small screens, and optimizing for fast loading and vertical scrolling on mobile. Popular frameworks that help with responsive design are also mentioned.
2. 1
1. Demystifying the Types of Responsive
Design
2. Matching the Approach to the
Scenario
3. Delivering ROI
Agenda
3. 2
About 5th Finger
We are a team of 50 5th Finger
employees based in San
Francisco and backed by over
1,400 Merkle employees.
About 5th Finger
We are a team of 50
5th Finger employees backed by
over 1,600 big data professionals at
Merkle.
Our acquisition by Merkle adds
multi-channel capabilities that allow
us to optimize and expand our
client services.
2013 DMA Mobile Innovation
Award Finalist
2012 Smarties Winner
Best Mobile Campaign
5. 4
Responsive Web Design is a Game Changer
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 completely unifies silo’ed
teams (mobile vs desktop), silo’ed
code, silo’ed content, and silo’ed
analytics.
REASON 3
One Web with a single URL.
Greatly improved SEO benefits,
much easier URL sharing in email
and social.
7. 6
Demystifying the types of Responsive Design
Technologies and
approaches are being
combined into a single
equation. It can be
confusing. ComplexityofExecution
Site Loading Time
Ground-up RWD
Transformative
+ RESS
Ground-up RWD
+ RESS
Transformative
Larger is More Expensive
*All single site approaches provide SEO
and omni-channel benefits
8. 7
Ground-up Responsive Design
A single website that displays an optimized layout based on
screen width.
It will fluidly change and respond to fit any screen or device
size.
11. 10
Transformative Responsive
Considerations
How soon do you plan
on rebuilding your site?
Is it difficult to get large
site upgrades
approved?
Benefits
Responsive in 7-
14 weeks
Downsides
Dependent upon
stability of existing
site
13. 12
No RESS vs RESS
NO RESS RESS
All HTML, CSS & JS
loaded by phone
Only Select HTML, CSS & JS
loaded by phone
On Device On Device
On Server On Server
4x source files4x source files
4x source files
2x source files
14. 13
Why RESS
Speed
Specific experiences are
possible based on device
Requires more maintenance
Requires a device DB on server. If
device database falls out of date, you
may end up serving the Desktop
page to a brand new phone.
May be dependence upon vendor for
site functionality
Positives Negatives
15. 14
What is Adaptive Web Design?
• Delivers the same outcomes as responsive
(mobile,tablet & Desktop from one URL), however,
the technology approach is different.
• Similar to RESS, the server is determining the
device type and selecting the right page layout.
Downside of this approach is that if your device
database falls out of date, you may end up serving
the Desktop page to a brand new phone.
Heard of Progressive enhancement?
A term for an approach, or process that
means you design with the least common
denominator and add more content as you
expand. Much like – Mobile First Design
17. 16
Considerations
The state of your current site
Lifespan of current site
Do you have an mDot site
Budget
How important is internal ownership
Site Speed
18. 17
Scenario 1: Old Website, With Budget And Support
Typical Solution:
Ground-up Responsive
(or Transformative followed by Ground-up
Responsive)
23. 22
Common E-Commerce Conversion Rates
mDot
Mobile Site
Conversion
Rate: .93%
Accessed on…
Desktop
Tablet
Mobile
Responsive DesignDesktop Site
2.51%
2.6%
.79%
2.51%
3.9%
1.02%
24. 23
I have an mDot, but I want Responsive Design
Assumptions
Current conversion rates: Desktop 2.51%,
Tablet 2.61%, Mobile .93%
New conversion rates: Desktop: 2.51%,
Tablet: 3.92%, Mobile: 1.02%
Average order value: $100
Total Monthly Visitors: 500,000
Costs: Full responsive site rebuild $600,000,
and $2,000 hosting, Transformative
Responsive $130,000
2 Year ROI with
Transformative$1,643,429
2 Year ROI with Ground-
up$1,173,429
mDotDesktop Responsive
25. 24
I’m keeping my mDot, just need a tablet breakpoint
Assumptions
Current conversion rates: Desktop 2.51%,
Tablet 2.61%, Mobile 0.93%
New conversion rates: Desktop: 2.51%,
Tablet: 3.92%, Mobile: 0.93%
Average order value: $100
Total Monthly Visitors: 500,000
Costs: tDot site $100,000 and $2,000 hosting,
Transformative Responsive $100,000
2 Year ROI with
Transformative$1,558,710
2 Year ROI with a tDot
site$939,957
mDotDesktop Responsive mDot
27. 26
1Your users want the full site
mDot site
Load Time : 6.8s
Content : Limited
Conversion Rate : 10.6%
Responsive
Load Time: 7.2s
(5.5% slower)
Content : Complete
Conversion Rate : 11.5%
(10% higher conversion rate)
20% of people use their mobile device as their primary internet device.
- 2013 Pew Research
28. 27
Speed matters
• Have page load speed goals, e.g. < X seconds
over LTE on iphone 4.
• Address experience speed. ie – use the
appropriate keyboard for the input type.
• Expert developers know:
1. Image Selection and Optimization (50-
75% speed improvement).
2. Careful use of Javascript and lazy
loading to make it “feel faster”.
3. Minify and compress all CSS
2
29. 28
Internal Processes
Designers need to understand
HTML and CSS.
• Use design tools like Axure to
create rapid prototypes and try to
avoid tools that are too pixel
perfect like Photoshop.
• Never look at just the desktop
layout, you should be reviewing
all layouts simultaneously.
3
30. 29
4 Consider your Analytics and AB testing strategies.
Requires a complete rethink
of A/B testing and analytics
strategy. Adds a per
breakpoint flavor.
Plan early
31. 30
Is my site old?
Yes
NoYes
NoDo I have a budget?
Do I have time?
Is internal ownership important?
Yes No
NoYes
Consider
RESS
If you answered “No” to any of them, then transformative could be the best approach.
If you answered “Yes” to any of the above factors, ground-up could be the best approach.
Ask Yourself These Questions
32. 31
For more information on responsive,
download our free whitepaper online at:
5thfinger.com/whitepaper/featured
Contact us:
415-294-2058
newbiz@5thfinger.com
THE TRUTHS OF
RESPONSIVE
WEB DESIGN
Editor's Notes
We are a mobile and tablet commerce solutions provider. <pause>We have a product designed to bring responsive design to legacy platforms which cannot be rebuilt.
Add M&MsWe build digital executions and responsive sites for a range of retailers. Wehave 8 responsive design implementations in market which we believe is the highest number of responsive design implementations in the US.
Chart needs work. Info is there.
Speak to staging site considerations and complications if internal team is not prepared for extensive testing.
Positive: With RESS, you can deliver very special experiences on specific devices. iPhone5 can have a different experience. Biggest reason people use it, is images. Downside:you can make that call on the server side. If a new device comes on the market, someone will have to add the device to the master list of devices, figure out what the rules are and adjust. You can have a fallback option, a basic experience but it may not be rendered optimally for device. Data for RESS, sometimes data may not be correct. You are dependent upon the data provided to you. We used to see this with mDot sites.
Why are these so much higher than the prior page of assumptions? Tablet is typically less than PC conversion rates – can we change this? To be 4% compared to Desktop 5%?I may get asked what is annual ecom rev for this company – I calc it as around 60M – is that right? If I get asked, what’s the visitor split between different devices ?