5 Responsive Design and Cross-Screen Optimization Tips
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 Light
Building 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 Speed
Studies 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: