Archive for the ‘Trilibis News’ Category
This article was originally published in the July 2014 issue of Internet Retailing
With mobile devices becoming popular for online shopping, mobile-friendly responsive design websites can deliver an excellent visual experience for visitors. However, Trilibis finds that operators of image-rich websites need to pay special attention to image weight and its effect on page-load times.
By Ted Verani
Has mobile caught your attention, yet?
In May of this year, e-tailers around the world eagerly anticipated the latest annual update from the oracle of the internet, Mary Meeker. This year’s report[i] by the influential KPCB analyst highlighted some of the major trends in Internet, social, mobile and digital media that e-tailers must factor into their web development strategies.
Mobile featured prominently in this year’s report. KPCB found that global mobile internet usage increased from 14 percent to 25 percent between May 2013 and May 2014. That increase was most pronounced in Europe, where mobile internet usage as percentage of total web pages views jumped from 8 percent to 16 percent (compared with growth of 11 percent to 19 percent in North America).
For online retailers, one very interesting mobile factoid in this year’s report concerns tablets: unit growth was 52 percent over last year, a massive jump that is surely reflected in this year’s server logs of any marketer. This mirrors the findings of comScore Inc., which reported that one-third of online shoppers at the top 10 retailers shop only on mobile devices.[ii] Your own website analytics are likely showing similar or even higher mobile traffic numbers.
What this means is that any company doing business on the internet must have an intense focus on ensuring their website performs well for mobile users, and especially users of smartphones and tablets. This is a big change from just five years ago, when many multichannel marketers were gradually rolling out mobile-specific websites.
Responsive design: an elegant path to “one web” architecture
Until recently, for many companies, a mobile website meant deploying an “m-dot” experience that was distinctly separate from the desktop version of their website. While this approach ensured an optimized experience for mobile users, its disadvantages were significant: a separate code base (development and maintenance costs); two websites to manage (content synchronization issues); and associated SEO issues. Consequently, many companies re-examined the “segmented web” strategy, leading to a major shift toward responsive web design (often called responsive design).
With responsive design, a website can configure its presentation to fit all screen sizes, ranging from a high-res desktop display to the smallest smartphone. Responsive sites are created from a single codebase and use a set of techniques that adapt the content to various screen sizes of tablets and smartphones.
The result is impressive: a website that smoothly adjusts its layout to any device, especially smartphones and tablets. It’s no surprise that marketers and e-business managers have embraced responsive design as a scalable way to deliver an excellent mobile experience from a single website code base.
There is a wealth of excellent guidance on designing websites that deliver a superior user experience on mobile devices. Using responsive techniques[iii] is generally considered a best practice for ensuring a consistent, “one web” experience across all devices. But online retailers should be aware that the ‘one size fits all’ approach—that is so appealing for website designers—also has some significant downsides.
- Development time: Responsive design typically requires a large-scale rebuild of a company’s web presence. From UI/UX design to the final testing phase, there are many things that go into the development of a good responsive site that ensures the experience is optimized for a wide variety of devices.
- Contextual challenge: While it addresses layout problems, and elegantly expands and contracts according to a screen’s width, responsive design is a one-size-fits-all-approach that makes it difficult to optimize for special design considerations or differentiated use-cases, such as offering the customer a mobile-specific shopping experience.
- Performance: Responsive design forces the browser to handle the bulk of the processing work so that content is rendered appropriately on the device. The client is sent all elements of a web page, irrespective of local device capabilities, and the client must determine which layout and assets to present. For mobile devices, the result can be longer load times and Web pages that perform poorly.
Responsive design and mobile retail: do images impact performance?
We decided to take a hard look at how responsive design affects a mobile website’s performance, since load time directly affects user experience and ultimately whether a sale is made or not. Radware recently tested the load times of the top 500 retail web sites[iv] and found that pages are heavier (measured in bytes) and slower than they were just one year ago. This correlates with our own experiences. Moreover, through our work with online brands to eliminate performance issues on their websites, we noticed that the design attributes of responsive techniques were frequently the reason for slow page-load times on mobile devices.
While a number of factors can determine the overall weight of a web page, images are generally the principal contributor. This is particularly true for responsive websites, which generally serve the same content to all devices. This can lead to overly large images being served to mobile devices.
To see whether poor performance is often associated with responsive design, Trilibis conducted a survey to measure the image weight of the top responsive websites. We wanted to know:
- How much do images contribute to page weight on responsive websites?
- How much does this affect load time for different types of users?
- Is it possible to automatically reduce page weight (and, therefore, load time) while maintaining an excellent user experience?
- 69 percent of the responsive sites we sampled were image-heavy, with images contributing to more than 50 percent of overall page weight.
- The responsive sites we looked at generally loaded slowly on mobile phones:
- Only 32 out of the 155 responsive sites (21 percent) responded with acceptable load times of less than 4 seconds.
– Only 32 out of the 155 responsive sites (21 percent) responded with acceptable load times of less than 4 seconds.
– 48 percent performed poorly with load times of between 4 and 8 seconds.
– 32 percent took anywhere from 8 to 48 seconds to load, which is unacceptable for most users
We then evaluated a technique to automatically reduce image size for responsive websites. Our goal: improve the overall user experience for some real-world examples, and achieve the target load time for RWD sites on mobile devices of no more than 3-4 seconds. We selected three RWD websites: boldandnoble.com, engadget.com, and starbucks.com. For each site, we replicated each site’s content on our own webserver. We then optimized all the images used on the home page of each website, calculated the image weight savings for both desktop and mobile devices, and then calculated load times both before and after optimization. The results were noteworthy:
Images accounted for 2.2MB (49 percent) of the total 4.5MB home page weight. Optimization results:
- Reduced mobile page weight from 2.2MB to 212KB (90% savings).
- Shortened load time from 6.63 seconds to 3.912 seconds (41% reduction).
Images accounted for 0.9MB (53 percent) of the total 1.7MB home page weight. Optimization results:
- Reduced mobile page weight from 861KB to 362KB (58% savings).
- Shortened load time from 11.814 seconds to 5.45 seconds (54% reduction).
Images accounted for 0.9MB (53 percent) of the total 1.7MB home page weight. Optimization results:
- Reduced mobile page weight from 892KB to 90KB (91% savings).
- Shortened load time from 4.454 seconds to 3.206 seconds (28% reduction).
Our research shows that delivering a truly exceptional user experience on the Web requires more than simply redefining layout and styling for the screen width of a particular device; it’s crucial to keep the overall page weight low. In the case of images, designers have several options:
- When designing a responsive website, ensure images are of an appropriate size for mobile devices.
- If using a web content management system, design different templates that address the wide range of devices that might access the website.
- Automate the image-sizing process using server-side processing techniques.
Let the server do the heavy lifting
To deliver an excellent website experience for mobile users, server-side technologies can be used in conjunction with responsive design techniques. This approach enables detection of the device characteristics of the smartphone or tablet that the visitor is using, and then fine-tuning of the user experience for that visitor.
Server-side logic enables a complete swap of crucial page elements and enables custom functionality based on local device characteristics. For example, a retailer can ensure fast presentation of a product catalog with images optimized for the accessing device. Or a content-heavy site can deliver entirely different ad placement based on device and user context.
These server-side technologies are simple to implement and use abundant server-side computing resources to optimize the image size for the accessing device before it is sent to the client. As our research shows, this approach can deliver much faster load times — and a far better experience for the user.
Trilibis is focused on creating server-side technologies that simplify multi-device development. By marrying server-side technology with responsive design techniques, your website can offer your mobile visitors the best possible mobile user experience.
Mobile Users Are Calling the Shots
It’s 2014 and I am happy to say that I no longer have to explain why companies need a mobile website. The billions of mobile devices now in the hands of consumers, ranging from top-of-the-line smartphones and tablets to low-end phones, have made a mobile website am essential component of any digital marketing strategy. Consequently, consideration of the user experience on these fast-evolving mobile devices has emerged as a major concern because these easily distracted mobile users are much less tolerant of a poor experience.
The Mobile Web’s Humble Beginnings
Until recently, for many companies, having a mobile website meant developing an “m-dot” experience that was distinctly separate from the desktop version of their website. Though this dedicated site approach can offer flexibility and control over the mobile experience, it also typically means the mobile site evolves at its own pace, often resulting in an inconsistent user experience and feature set across platforms. Additionally, the requirement to fork the code base as well as manage two websites (instead of just one) sends associated development and maintenance costs through the roof.
Digital marketers are often frustrated by multiple dedicated sites, since they now have to implement complex, cross-device URL mapping so that users shifting between different devices can get to the same content. Finally, having multiple sub-domains can also negatively impact search results as indexing becomes fragmented across the various URLs.
During the Mobile Web’s infancy this approach was adequate, but as mobile usage has taken off, many companies have started to re-examine these “segmented web” strategies. This has conveniently coincided with the explosive trend toward responsive Web design (often called responsive design, or RWD).
The Emergence of ‘One Web’
Responsive design is all about creating one website to fit all screen sizes, ranging from a giant desktop display to the smallest smartphone. Responsive sites are created from a single codebase by using proportion-based grids, flexible images, and CSS3 media queries. The device’s web browser, or “client,” uses media queries to determine the screen size and adapt the websites layout and rescale the content accordingly. For many, it is quite exciting to see a website seamlessly adapt its layout to the device at hand. The Web community at large has embraced responsive design as a scalable way to achieve a cross-device Web experience from a single code base. However, responsive design is not without its own challenges.
- Mobile Context: While it addresses layout problems, and elegantly expands and contracts according to a screen’s width, responsive design is a one-size-fits-all-approach that makes it difficult to optimize for design consideration or differentiated use-cases, such as offering the customer a mobile-specific shopping experience. Thus, you end up making trade-offs in your design if going responsive.
- Performance: Responsive design forces the browser to handle the bulk of the processing work. The client is sent the entirety of website data, irrespective of local device capabilities, and must determine which layout and assets to present. The result is longer load times and Web pages that often perform poorly on mobile handsets — a major headache for media or e-commerce companies, who pay close attention to load times to retain the attention of the fickle mobile consumer.
- Development time: Responsive design typically requires a large-scale rebuild of a company’s Web presence. From UI/UX design to the final testing phase, there are many things that go into the development of a good responsive site and making sure the experience is optimized for a wide variety of devices. It usually takes longer to convert an existing website into a responsive site than to build one from the ground up.
Websites Become Device-Aware
Recently, responsive design methods have been augmented with server-side approaches that optimize the code for the accessing device before it is sent to the client browser. This emerging trend, sometimes called RESS (responsive design with server-side controls), can deliver much faster load times and a far better experience for the end user.
Drawing on years of developing mobile websites for our clients, the team here at Trilibis wondered how we might improve on the responsive design approach to deliver the best possible One Web experience. We talked to our clients and learned that they wanted flexibility and control. They also didn’t want to be locked into a proprietary site-building toolset, preferring instead to work directly with code. We explored the idea of enabling server-side controls and device targeting as a natural part of website development — essentially adding more intelligence to the server itself.
The result is SNOW (Software eNabling One Web) — a server-side software technology that enables delivery of optimized web content to targeted devices and browsers. With SNOW, you can create multiple web experiences with one code base under a single domain.
Here’s how it works:
- HTML5-compliant SNOW tags are added directly to the website HTML, CSS or UI template code. These tags specify if and how content or code blocks should be displayed on a given device, OS or browser by choosing from over 40 pre-defined device and browser groups or creating your own custom device grouping.
- SNOW software is installed on the Web server. This software plug-in includes over 4,000 device profiles, device taxonomy for grouping, and a high-speed content parsing engine.
- At runtime, SNOW detects the accessing device, scans the HTML/CSS code for device-awareness tags and post-processes it, generating only the optimized code and content appropriate for the device. This post-processing determines the layout, images, colors, and feature-set as defined by the developer for the target device group.
- The Web server then delivers only device-specific web assets and content for the specific device.
Marrying server-side technology with responsive design techniques allows the server to do the device-specific performance optimization that cannot be done using pure client-side responsive design techniques. The result is that much less data is sent to the device, resulting in fast load times (up to 2x faster), and a far better experience for the visitor. Adding server-side controls to a website’s architecture also provides more technical flexibility and the ability to fine-tune page presentation and features for the best possible cross-device Web experience.
While the Web is still a way from adulthood, companies now have the means to create exceptional Web experiences across the broad range of today’s connected devices. As development strategies continue to progress, my hope is we’ll see many more websites utilize server-side intelligence to backup their responsive design. Not just for the significant performance improvements to be had, but because this will advance our cross-device Web experiences to a more capable (and mature) Web.
Ted Verani heads up sales and marketing here at Trilibis. He recently contributed this piece about why a One-Web approach offers superior benefits for e-tailers. Head over to Mobile Marketer to post your thoughts and see comments from others.
By Ted Verani
The rise of mobile has been breathtaking. With smartphones passing the 50 percent penetration mark and 39 percent of online traffic coming from mobile devices (comScore), it is safe to say that mobile has risen and is here to stay.
We are living in a multi-screen world where consumers devour digital content on multiple devices, at multiple locations, and in different usage modes. Having an engaging, all-around Web experience across mobile, tablet, desktop and beyond is fast becoming a digital imperative for today’s marketers. But how do we as marketers best achieve a true cross-platform Web presence for our customers?
Dedicated mobile sites are done
In the early days of the mobile Web, mobile optimization meant developing a dedicated mobile site with its own URL, such as m.mysite.com. This distinction caused mobile Web sites to diverge from PC sites and evolve at their own pace, typically with a more limited feature set.
Keeping mobile Web sites separate made sense when mobility meant quick, on-the-go access to the most important content and, for most brands, this was the best path forward.
While the dedicated site approach offers flexibility and control over the mobile experience, it has serious drawbacks:
• Inconsistent user experience: Web sites change often, making it challenging for content owners to make updates across all versions when they are maintained separately.
• Escalating development and maintenance costs: As the number and depth of dedicated sites grow, so does the cost of their development and maintenance. API integration with various data sources can also present a considerable challenge.
• Fragmentation of URLs: With multiple dedicated URLs, brands have to implement complex, cross-device URL mapping if they wish to allow users to navigate between different devices. Using multiple sub-domains can have a negative impact on search results, as indexing becomes fragmented across the various URLs.
Rise of one Web with responsive design
Today, many brands are looking to merge their fragmented Web presence to deliver a more holistic, unified experience across all devices and take advantage of economies of scale.
This trend is fueled by the emergence and popularity of responsive design, a client-side technique that seamlessly adapts Web site layout to various devices.
Responsive design enables developers to create screen-optimized experiences from a single code base by using fluid, proportion-based grids, flexible images and CSS3 media queries.
The Web community, at large, has embraced this as a scalable way to achieve today’s gold standard: a cross-device Web experience that stems from a single code base and performs well on any platform. In other words, a one Web experience.
However, responsive design is not without its own limitations:
• Mobile context: While it addresses layout problems, and elegantly expands and contracts according to a screen’s width, responsive design is a one-size-fits-all approach that makes it difficult to take into account the potential for differentiated use-cases, such as a mobile-specific shopping experience.
• Performance: Responsive design forces the device’s browser to handle the bulk of the processing work. The browser is sent the entirety of Web site data, irrespective of device, and must determine which layout and assets to present. The result is longer load times and Web pages that perform poorly on mobile handsets.
Retailers and major brands know that site performance directly affects their overall visitor experience and whether they make a sale, which is why many still have dedicated mobile sites.
In fact, 40 percent of customers have turned to a competitor’s site after a bad mobile experience (Google).
• Cost: Responsive design typically requires a complete overhaul of a company’s Web presence.
From UI/UX to content, there are many things that go into the initial development period of a responsive site.
While retooling their entire Web presence could prove beneficial for many companies, the monetary and labor costs in doing so can be quite high.
Optimizing one Web with server-side controls
Responsive design is a huge step in the right direction to achieve a one Web experience.
However, a truly exceptional user experience on the Web requires more than simply shifting layout and styling to a device’s screen width.
Performance and user context are two critical areas where responsive design alone cannot get the job done.
An improved approach involves the use of responsive design methods in conjunction with server-side technologies that can handle the processing at the server level, optimizing the code for the accessing device before it is sent to the client browser.
This emerging trend, sometimes called RESS (responsive design with server-side controls), can deliver much faster load times and a far better experience for the end user.
The addition of server-side controls allows a developer to serve only the required website assets to the accessing device and cut down on unnecessary browser load — especially important when images and other rich media are being served.
Rather than serve all media assets and force the bandwidth-starved mobile device to choose what to show and hide, one can leave this decision to the server and send only the optimized images and video intended for that device.
In a world where the average page weight has increased 28 percent year over year, now up to over 1MB, it is easy to see how using server-side optimization for Web assets can drastically improve a page’s performance. This is particularly crucial for media and retail businesses where Web site load time is critical and directly affects revenue.
It is important to note that responsive design with server-side optimization is more than just a design technique.
Adding server-side components to a Web site’s architecture provides more technical flexibility and the ability to fine-tune presentation for an optimal cross-device Web experience.
For example, a retailer can tweak design to ensure an ecommerce site functions better with a mobile-specific shopping cart, or a large content-focused site may require entirely different ad placement based on device and user context.
Server-side controls can easily allow for a complete swap of crucial elements based on any number of characteristics.
Right tools can make all the difference
There is no arguing whether a one Web experience is critical for a company’s online success today. But the path to get there can be long and arduous, fraught with difficult decisions and complex development challenges.
Choosing the right tools for the job can make or break a marketer’s budget, yet has the potential to turn a mediocre Web site into an exceptional cross-platform customer experience.
For this reason, Web technology should be focused on creating server-side solutions to simplify multi-device development.
Marrying server-side technology with responsive design techniques allows the server to do all the heavy lifting, while providing the visitor with a clean, high-performing Web experience.