Homepage Design Tips & Examples For The Multi-Device Web

The homepage was once the hub of your entire online presence, landing page to your website and the starting point of the sales funnel. Things have changed a lot in the last few years though with the rise of mobile internet, evolution of SEO and the changing expectations of web users. The days of text-heavy homepages with content crammed above the fold are behind us and we’re moving into a more visual, targeted age of the homepage.

You can typically expect large hero images, parallax scrolling and responsive layouts on the modern homepage – with minimal text and visual content to communicate your brand message. This all sounds great, but I see far too many homepage designs that simply follow the latest trends, without really thinking what is best for the client – and more importantly the user. This often leads to sites that look the part, but fail to back it up with the performance needed to keep visitors on the page – quite an important factor for your clients. So let’s take a look at some of these design trends and remind ourselves to ask the right questions when it comes to making design choices.

Rethink The Fold

Thanks to the rise of mobile web, more users expect to scroll when they land on a web page – and they expect to scroll quite a bit. This has helped us move out of the days where we crammed as much content as possible above the fold, into designs that use vertical space to draw visitors down the page.

This doesn’t mean you should forget about the fold altogether though, but use it to encourage visitors down the page. This is a tough task with so many screen sizes knocking about, but leave some visible content above the fold or something that communicates the need to scroll. There is scrolling to be done on this Studio Bema design, but there is nothing to indicate this and a grey frame around the browser creates the false impression that all content is above the fold.

studiobema

Question The Giant Hero Image

Large hero images look great on big displays and if you can get your hands on some professional photography, you have a simple, yet highly effective design option to create a sleek impression above the fold. But don’t settle for the giant hero image just because it’s in fashion – challenge yourself to come up with a better alternative and flex your creative muscles. You need to think about multiple devices and slower connection speeds when you are designing your homepage – especially if this is the first view a user gets of your website.

Many websites are starting to use HTML5 videos as a background for larger resolutions and dropping to images for smaller screens. The results look great, if not a little predictable, but the performance questions for mobile devices make it worth searching for an alternative answer.

The One Design Company website uses a plain background with a centred animation for larger screen sizes, while cutting out the hero section altogether for mobile. It’s a great example of mobile-centric responsive design.
one-design-company

Communicate Quickly

Visual homepages are able to communicate a large amount of information much faster than the old text-heavy versions we used to see. Web users are more impatient than ever so it’s essential you can get your brand message across quickly which is possible thanks to transition effects and parallax scrolling which make website viewing a more engaging experience.

However, parallax designs and transitions should only be used if it improves the user experience – and that doesn’t include simply looking cool. Overdo it on the flashy stuff and you can distract user attention or even confuse visitors as they scroll down the page – not to mention that parallax and intensive transitions don’t get on with mobile. Digital Agency Unfold certainly know how to put together a pretty website, but the infinite scroll, patchy content and disappearing navigation hurt the user experience.

unfold

Every Page Is A Landing Page

Modern SEO means there are no guarantees that your target audience will land on the homepage first. Search engines are smart enough now to direct traffic to specific pieces of content and ignore pages stuffed with keywords – meaning visitors can land on a blog post or product description first. So in a sense, every page is a potential landing page and you need to create a path to get visitors onto the next stage of the conversion process. This means you can afford to be more focused with your content and drive traffic to the most important next step.

Instead of covering the homepage with links to every possible page on your website, create content that draws visitors to where you want them and get the conversion process started. Chimney Group couldn’t make it much clearer what their services include with a clean grid layout and direct calls to action:

chimneygroup

Make UX Your Main Objective

If you’re designing for multiple devices, it’s your responsibility to create the best user experience possible for each device. Which means you may have to make some design compromises to maintain a strong UX for all types of user – especially when it comes to responsive design.

Whichever approach you take to designing for multiple devices, the only compromise you should never make is sacrificing UX for any of your design choices. You can’t create the perfect user experience – especially when it comes to designing for multiple devices – but get into the habit of asking yourself if there is a better way. You will soon find that design trends like off-canvas navigation and parallax design aren’t the great solutions you thought they were. The Fast Company makes a UX faux-pas by covering it content with leaves in this parallax scrolling effect:

fast-company

Think Responsive Content

It’s great that your website adapts to different screen resolutions, but quality UX across multiple devices requires more than a simple layout change. A 500 word blog post may not look like much on a desktop screen, but try reading it on a smartphone and you get a very different impression. The same thing goes for about pages, product descriptions and other chunks of content.

It’s your job as a web designer to come up with new ways to deliver content in an engaging way across all devices and this presents a challenge when it comes to written content. Whether it’s font-sizes and some intuitive layout changes; using JavaScript to dynamically load content or something creative you can come up with, content needs to be the focal element of your page designs – and that includes responsive design too.

If a visitor makes it to your blog there is a chance they might accept heavy text – like this ‘tablet’ view of Gather Content (it’s a blog post after all). Not so much on your home or about page though.

gathercontentblog