5 Responsive Design and Cross-Screen Optimization Tips

Chances are, you're reading this article from your mobile device or tablet—and pretty easily at that. So what's keeping your customers from browsing through your site or making purchases from their small screens? 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 FluidlyYour 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: Pinch to zoom Swipe to change a page Tap and hold to copy, define text etc. Although some of these gestures are not supported by traditional pointing devices such as mice, your responsive website should be built to support multiple input methods. 2. Build LightBuilding a responsive version of your site gives you a chance to remove unnecessary distraction and content that might increase load time on a mobile device or confound the user. That huge Flash banner you proudly placed at the top of your site to showcase your latest deals might be a great idea for desktop users, but on a mobile device the story is a bit different. Big Flash assets will weigh heavily on a mobile device regardless of a 3G/4G connection, so be sure to take into consideration data charges when building your site. Optimizing images and content for mobile devices will lower the asset's weight, shorten the load time and provide the user a better and smoother user experience. 3. Build for SpeedStudies show how your website can affect your users' bounce rate—the percentage of visits that last for just one page. Here are some insights on user bounce behavior on mobile environments: 47 percent of users expect a web page to load in two seconds or less 40 percent will abandon a website that takes more than two seconds to load This means every second added to your site load will cause more users to drop off who will likely not return to your site, which can directly translate into revenue loss: A one-second delay in page response can result in a 7 percent reduction in conversions 79 percent of shoppers who are dissatisfied with website performance are less likely to buy from the site again Bottom line: fast loading site = higher user retention and loyalty = higher conversion rates. 4. Build for the FutureAs of the end of 2013, 55 percent of Android devices do not support Flash (by having Jelly Bean and KitKat installed). And, like in all the iOS devices out there, the majority of devices on the market currently do not support the Flash plugin. Relying on desktop-only environments to utilize the Flash plugin and ignoring mobile users will dramatically affect the user experience of the latter. Utilizing technologies such as HTML5 and JavaScript with animation platforms such as TweenLite (by Greensock) you can create seamless, identical cross-device functionality that will perform faster and more intuitively (and with lower production costs). 5. Monetize Your WebsiteNo longer are display ads limited to Flash or images. With HTML5, you can create true cross-channel ads that will display on every device and adjust in size and content to the user's screen. Responsive ads built in HTML5 can utilize features such as GPS, accelerometers, cameras and more—features that are unique to mobile devices. This opens up a new range of interactions and calls to action that can increase interaction, brand awareness and conversions. Dynamic optimization and advanced targeting are two additional technologies that can be used in conjunction with an HTML5 campaign to leverage cross screen technology. Now you can target a user who uses a specific device with a specific operating system and even a certain app—providing pinpoint targeting accuracy and relevancy. Responsive design for your website and your online campaigns allows you to rapidly adapt to and profit from the ever-growing mobile market. Leveraging versatile technologies and tactics, you can quickly adjust your content to please a lucrative mobile audience. Roey Franco is product marketing manager of media solutions at New York-based ad management and distribution platform provider Sizmek. Reach him at RFranco@dgit.com.

General

5 Responsive Design and Cross-Screen Optimization Tips

Roey Franco

About

Subscriptions

Events

Publications

WORK SMARTER - LEARN, GROW AND BE INSPIRED.

Subscribe today!

Roey Franco