Responsive Web Design Lessons from ESPN
Last week, ESPN, The Worldwide Leader in Sports, debuted a redesigned and re-engineered website. The new web application is the first major update for ESPN.com since 2009 and constitutes a fully-responsive site design.
The decision by ESPN to implement responsive web design (RWD) is yet another signal of the model’s growing popularity among leading enterprises. The British Broadcasting Company and luxury retailer Barneys New York have also launched newly re-constructed RWD applications in recent weeks.
What makes responsive web design an attractive digital experience delivery model?
The answer lies with user behavior. Since 2009, mobile usage has skyrocketed. ESPN’s users now represent a clear mobile majority at 61%. The company’s previous site design reflected a desktop-first world that no longer exists.
Research from Google shows that over 90% of consumers use multiple devices to accomplish a task. Consequently, a business must utilize an omni-channel approach to find success in today’s customer-centric digital economy.
Responsive web design empowers a single online application to reorder and reposition page content to format properly on any device. This responsive capability delivers a consistent user experience and helps avoid engagement killing experience gaps.
In excellent article in Medium, SVP Digital Product & Design at ESPN, Ryan Spoon, explains his team’s approach to RWD. Here are the highlights:
By the Numbers: January Stats from ESPN.com
- 94 million unique visitors
- 61% of visitors were mobile-only (that?s ~57 million)
- Users spent 7 billion minutes on ESPN.com
3 Responsive Web Design Lessons from ESPN
1. Clean & Modern UI: Compared to the 2009 site, the new ESPN.com features a clean, simple and modern user interface. The site’s feel and function is consistent across different devices and offers users a logical and engaging experience.
2. Mobile-First & Fully Responsive: “From concept to design to implementation, we began with the mobile handset and worked outwards.” By building mobile-first, Ryan Spoon and the ESPN team planned content and layout to easily scale up to larger viewports, like desktops. This is much easier than the reverse option – a desktop design being reworked to fit smaller devices.
3. Dynamic & Rich UX: As a sports media outlet, ESPN.com features rich content, including: large images, video, personalization and 3rd party social media integrations. These elements contribute to a rich user experience, one fully expected by ESPN.com users. Users easily access live updates and the latest news on their favorite teams from any device. Even on less powerful mobile devices, rich content on ESPN.com does not bog down performance.
This last point is a big one. Modern web applications are feature-loaded and very heavy. Without proper optimization, the very elements designed to engage and delight users can become the culprits behind excruciatingly slow pages, especially on mobile.
While not every company has the resources of an ESPN, it is still possible to implement a top-tier responsive design application that delights users on any device. Leading retailer Fathead is another great example of a company that conquered responsive design.