Engaging the Mobile Visitor
Combining responsive design with performance optimization to deliver exceptional user experiences
By: Lorenz Jakober
Sep. 8, 2013 02:45 PM
In today's hyper-connected world, Web and mobile application performance is playing a more critical role than ever in driving user adoption and engagement. End-users have high expectations - they expect pages to load faster than ever before and they expect richer and more engaging Web experiences and applications.
At the same time, mobile is a fast-growing, global phenomenon that is changing the way we all interact with content, whether for business, information or entertainment. As such, the ability to engage mobile users with fast, quality Web experiences has become a business requirement and a prerequisite for success. Ignore the needs of mobile users, and risk losing a large and growing portion of the business.
Responsive Web Design Adoption Is Growing Fast
The trend of using RWD is growing and growing fast. One of the reasons is that RWD effectively eliminates the need to re-enter the design and development phase each time a new mobile device category comes to market.
As stated, undertaking a RWD strategy sounds like the ideal solution. However, it shouldn't be thought of as a silver bullet for improving the mobile user experience. The reality of successfully engaging mobile users with RWD sites is not always easy. As mobile devices have grown more powerful and networks have become faster and more consistent, the expectations of mobile end-users have also grown.
Delivering Fast and Quality Web Experiences Is Not Easy
As important, not only do most pages deliver the same payload across different devices, but also that same payload aligns to the general trend of pages becoming heavier with the average page size close to 1.2 megabytes.
One of the challenges associated with larger, more complex RWD-developed pages is that they need to be delivered to end-users' browsers, which then need to process and render them. On underpowered mobile devices with limited computing power and on constrained wireless and cellular networks this can adversely affect the user experience.
What does delivering large, complex pages on mobile devices mean from an end-user's perspective? Here's a snapshot of the experience of an end-user visiting a US retailer's RWD site's home page on a variety of different best of breed devices/networks. Performance metrics were captured with an empty browser cache using Safari's remote debugging capability. Ten tests for each device/network were run with the median page load time (onLoad event) displayed below. The conclusion is obvious. The delivery of a relatively small 700KB site to a mobile device, over wireless networks, has resulted in serious performance shortcomings.
Figure 1: Example RWD site does not meet end-users' performance expectations
Fundamentally, end users don't care about the underlying technological challenges required to deliver fast, quality experiences to constrained devices over wireless and cellular networks. They just want sites to load fast and work as expected. And end-user expectations just keep getting higher and higher, corresponding to a desire for Web applications that keep getting faster, richer and more engaging.
Steps for Delivering Fast, Quality Responsive Web Design Sites
The first step is to focus on the actual page and the associated objects delivered to the end user. There are also a variety of options available to developers looking to overcome the challenges associated with delivering heavy RWD sites. To start with, move content as close to the end user as possible (i.e., use a Content Delivery Network [CDN]) and leverage optimal delivery mechanisms such as SPDY, an open networking protocol for transporting Web content, that are particularly relevant for wireless networks.
Let's explore these factors in more details.
Reducing the Number of Requests
Reducing the Number of Bytes
Figure 3: The optimized RWD site is significantly faster due to a reduction in bytes, requests and faster rendering
Reader Feedback: Page 1 of 1
Latest Cloud Developer Stories
Subscribe to the World's Most Powerful Newsletters
Subscribe to Our Rss Feeds & Get Your SYS-CON News Live!
SYS-CON Featured Whitepapers
Most Read This Week