Responsive Web Design For
Ecommerce
What is Responsive Web Design?
Responsive
Fluid column based layout where elements fill into spaces
"Reactive"
Adaptive Web Design
Adaptive
Utilizes JavaScript and Server Side Scripting to tailor the Markup to each device
"Pro Active"
Benefits of Responsive Design
-
Single Code Base / Page Templates
-
Easier Maintenance
-
Tracking Scripts in single location
- Better Usability for Customers
Why Have a Responsive site over a just a regular site and a separate mobile site?
Downsides to RESPONSIVE
-
Heavier Code Base / CSS
-
Possible increase in page load times
-
Designing for all screens sometimes comes with sacrifice
-
Responsive typically requires ground up rebuild
- Limited Design? (Boxes and Grids)
-
$$$ / More Experienced Developer Needed
- Longer Development Time
HOw is it DOne?
-
Media Queries
-
Introduced in CSS3 Specification
-
Not Supported In IE8 or Less (JS solutions can help this)
-
Single HTML Code base / Multiple Style sheets
-
Re size different elements based on screen size (Break Points)
@media (max-width: 480px) {
.col-left,
.promo .pcol-left {
float: none;
margin-right: 0;
width: 100%;
}Designing a Responsive Website
You are designing 3 different websites
(Desktop, tablet, mobile)
Conventional Design Process
Mobile First approach
Graceful Degradation vs. Progressive Enhancement
Mobile First Design
Additive vs Subtractive
Forces you to structure content first i.e What is important. The content dictates the layout.
Prevents Desktop sites being squeezed into a mobile layout at the sacrifice of usability and navigation
WHICH IS MOBILE FIRST?
Building a Responsive Website
Popular Frameworks - Twitter Bootstrap, Foundation
http://getbootstrap.com
http://foundation.zurb.com/
Start From Scratch and Build Your Own
Responsive For Ecommerce
-
Usability - Deliver the best experience to your customers
-
Not all responsive websites are created equal
- Navigation - Complete Control
- Optimized checkout process on each device
- Email Marketing
Some Great Examples
Today's Responsive Landscape
Introduction of RWD in 2011
2012 to 2013 Growing in adoption
Top 20 eCommerce Websites
65% Use Stand Alone Mobile
15% no mobile at all
20% Responsive
Thank You
Brennan Heyde
VP Developer Relations, Miva Merchant
bheyde@mivamerchant.com
@brennanheyde
https://slid.es/bheyde/responsive-web-design-for-ecommerce
Responsive Web Design For Ecommerce
By bheyde
