Earlier this month, the Los Angeles Times redesigned its website. Here are some interesting web design details I noticed:

Navigation down the left hand side

A narrow left sidebar is fixed in place as you scroll down the page, giving it a tablet feel. You have to scroll inside the navigation sidebar in order to see all the options which has its downsides. Submenus appear in a further left sidebar when you hover over main menu items – but these “bump” the content over to the right to make space for them instead of covering it.

Screenshot:

LA Times - navigation

Large horizontal banners

To separate sections of content, the LA Times has used large, wide horizontal banners. Some of these are custom-designed advertisements while others are featured stories. Since the banners aren’t a standard ad banner size, they feel more native in the design. This is a nice way to break up sections and keep things interesting on the eye, without it feeling cluttered and confusing. Some are also interactive: allowing you to browse through similar items.

Screenshot:

Banner in context

Three further banner examples:

Banner Examples

Sharelines

This is a new feature I haven’t seen on websites before, and I suspect we may see more of this in the future. Instead of simply offering “tweet this” or “share this” buttons where you don’t see what the set pre-written text is prior to clicking on the button (with the option of changing it of course), the LA Times makes it clear and offers choices:

Sharelines

When hovering over the Twitter icon, a Facebook icon popups up, if you prefer to share the article on Facebook instead.

Here, on an article entitled “Isla Vista returning to normal as painful questions linger” two written options are given for sharing. On some articles, more options are given. Note the following:

  • Neither shareline is the same as the article title.
  • Both sharelines are carefully written to encourage the shared story to be shared even further (contrast this to the article title).
  • Sharelines cover different angles of the story.
  • Sharelines appear before the article – research shows that many people share articles without reading much of them, so they’re put at the start, rather than at the end of the article.
  • Sharelines are, in a sense, a short summary of the article itself.

Content breaks out of the grid

Like some other recently redesigned news site, the LA Times mixes its content up, instead of keeping things in neatly aligned sections. Images jut out to be full width, while articles keep their line lengths shorter for reading ease. Comments jut into the article, making their presence known (rather than sitting at the bottom of the article, or off in a separate sidebar section. There’s multiple sidebars with lots of spacespace – keeping the reading experience cleaner, and content off to the side is more noticeable when it appears – rather than a solid sidebar of content competing for your attention.

Screenshot:

Deliberately scaled down so you get a quick overview of the layout.

Article layout

I’ll be posting more of these web design inspiration articles in the future with notes on what I find interesting so you can keep an eye on new website features and design trends.

Get actionable tips to grow your website

Thoughtful weekly insights (no hype!) on improving your website