5 Responsive Design and Cross-Screen Optimization TipsFebruary 26, 2014 By Roey Franco
During holiday seasons, online traffic plays a big role in revenue and conversions for e-commerce sites. According to Branding Brand, mobile-optimized websites are gaining an edge. Their data below represent traffic to mobile Web only, not apps for handsets/tablets.
Mobile Web traffic vs. Thanksgiving/Black Friday 2012
- Visits increased more than 75.65 percent
- Page views increased more than 88.32 percent
- Average order value increased more than 22.08 percent
- Mobile sales increased more than 186.54 percent
This makes sense because there are more mobile devices on the market now, but it also reflects how consumers have changed the way they shop online. That's a fact e-tailers can't ignore.
So how do you get on this trend? How can you make your online buying environment hospitable on any screen?
The answer is responsive design—the key to attracting potential mobile users in this rapidly changing environment. Here are some tips to get you started:
1. Build Fluidly
Your site looks great on a desktop, but what happens when your user switches to a tablet?
Will your site still be readable and easy to navigate? Although tablet devices have the same—if not more than—the screen resolution of desktop monitors, they still limit images to a 9-inch screen vs. a standard 22-inch monitor. That means users will have a hard time navigating your site when all the buttons and menus shrink to fit the screen size.
As there are numerous devices out there with dozens of screen resolutions, creating a layout for each one can be time-consuming and inefficient.
This is where responsive design comes into play. It lets you design just three layouts for desktop, tablet and handset, each of which will dynamically change to suit all the screen sizes in between.
From a production point of view, the task is to build one responsive layout and adjust it to three scenarios, taking the user experience into account to consider touch gestures such as: