Aol.com redesigns mobile-first

Ben Moss.
June 02, 2015
Aol.com redesigns mobile-first.
Very few of the major players from the Web’s early days are still with us. Business models that thrived in the days of dial-up connections and web-safe color palettes tend not to suit the modern mobile web. One of the big names, still clinging on to its early success, is Aol. Founded in 1983, Aol. rebranded as America Online in 1991 just in time to ride the first wave of Web adoption. By 2009, when the company rebranded again, this time as Aol. it was struggling to compete with young upstarts like Google. However — despite common perceptions that it has failed to keep pace — compared to early front-runners like Alta Vista, Aol. is thriving; it’s a billion dollar corporation and its website boasts more than 375,000,000 unique views per year. Aol.’s homepage redesign, unveiled today, is aimed squarely at the mobile market. VentureBeat reports that nearly a third of Aol.’s traffic comes from mobile devices. (A figure that seems surprisingly low considering Aol.’s content — mostly news and entertainment — and their primary target demographic — families with disposable income.) The new design is based on a modular grid constructed with JavaScript, which generally speaking should be reserved for progressive enhancements. However, as far as the open beta version is concerned it does seem to work, the only bugs occur when a browser window is resized but who (apart from web designers) ever resizes their browser window? comparisonThe aol.com redesign old (left) and new (right). Clearly no one has told Aol. that carousels are bad because the new site retains the hero slider of the original design, complete with 40 slides. Each slide lasts around 8 seconds, so if you’d like to review all of the content that they want to ‘prioritize’ you’ll be staring at the homepage for over five minutes. Any site, designed for mobile, needs to balance screen real estate with usability. The tablet size of the design adopts a dashboard style approach, replacing the vertical menu bar with a strip of icons. Dropping down to mobile size, the strip of icons is replaced with a hamburger menu, a common tactic that is probably the least worst solution in the majority of cases. However given that the navigation is already using icons it seems preferable in this case to keep the strip of icons right down to mobile. In all mobile cases, the navigation itself opens as a sliding drawer. An interesting issue is that the in-house team that designed the site have chosen not to make the header sticky, so when you’ve scrolled through a lot of content, you have to scroll back to the top to change sections. mobileThe aol.com redesign for tablet (left) and phones (right). A significant problem is not the navigation’s dependency on icons — the addition of text in the sliding drawer minimises that issue — but the icons that have been selected. The mail and search icons are clear, as are the sign in, entertainment, finances, and news icons. The football used to represent sports is clear, but very US-centric (a corporation with global ambitions might have used a more global sport, such as tennis or golf). The lifestyle link is represented by a heart, which given Aol.’s demographic could be mistaken for dating or romance. Tech, seems more like a social media icon. The typeface being used is Larsseit, of which I’m not a fan for body text on screens. Its counters are generous and there isn’t too much contrast, but its apertures are small and there’s too little variety in its letterforms for my taste. Aol.’s biggest challenge has been the integration of video. Video has been key to Aol.’s continued prosperity; according to The Next Web they’ve experienced a 93.8% growth in video views over the last year. It feels like a missed opportunity therefore that videos can’t be played right on the homepage. The logo block, that features the logo, the date, and the temperature at your location, uses as its background an image of the current weather conditions. It’s an intellectually clever idea, but results in a very pale blue block. I’d like to have seen this block colored neon pink to match the search button. A shock of color would have gone some way to livening up a page that is presently quite dull. The biggest issue with Aol.’s redesign is that it lacks personality. It’s rare that I would ever level this accusation at anyone, but: it’s too minimal. Aol. is undoubtedly a success story on the Web, owed in large part to their role as early adopters. Their new redesign is clearly an attempt to adopt the ever-growing mobile web. In many ways they’ve sacrificed desktop experience for a more satisfying mobile experience. Browsing the new aol.com on mobile feels more elegant than browsing it on desktop, and the whole site feels as if it was designed mobile-first. Aol. should be applauded for embracing change and fully committing to the mobile web even if, as is probably the case, the resulting site is too utilitarian to ever fall in love with. It’s a great starting point for the company’s future, but I doubt it will last as long as those free installation disks currently residing in the world’s landfill. Featured image uses smart phone image via Shutterstock.

Ben Moss

Ben Moss has designed and coded work for award-winning startups, and global names including IBM, UBS, and the FBI. When he’s not in front of a screen he’s probably out trail-running.

Read Next

20 Best New Websites, April 2024

Welcome to our sites of the month for April. With some websites, the details make all the difference, while in others,…

Exciting New Tools for Designers, April 2024

Welcome to our April tools collection. There are no practical jokes here, just practical gadgets, services, and apps to…

14 Top UX Tools for Designers in 2024

User Experience (UX) is one of the most important fields of design, so it should come as no surprise that there are a…

What Negative Effects Does a Bad Website Design Have On My Business?

Consumer expectations for a responsive, immersive, and visually appealing website experience have never been higher. In…

10+ Best Resources & Tools for Web Designers (2024 update)

Is searching for the best web design tools to suit your needs akin to having a recurring bad dream? Does each…

3 Essential Design Trends, April 2024

Ready to jump into some amazing new design ideas for Spring? Our roundup has everything from UX to color trends…

How to Plan Your First Successful Website

Planning a new website can be exciting and — if you’re anything like me — a little daunting. Whether you’re an…

15 Best New Fonts, March 2024

Welcome to March’s edition of our roundup of the best new fonts for designers. This month’s compilation includes…

LimeWire Developer APIs Herald a New Era of AI Integration

Generative AI is a fascinating technology. Far from the design killer some people feared, it is an empowering and…

20 Best New Websites, March 2024

Welcome to our pick of sites for March. This month’s collection tends towards the simple and clean, which goes to show…

Exciting New Tools for Designers, March 2024

The fast-paced world of design never stops turning, and staying ahead of the curve is essential for creatives. As…

Web Tech Trends to Watch in 2024 and Beyond

It hardly seems possible given the radical transformations we’ve seen over the last few decades, but the web design…