6 tips to create better one-page websites

Default avatar.
July 25, 2011

One-page websites are hot and popular — no doubt about that. But they aren’t for everyone or every business. It’s easy to want one because they’re popular; and if done correctly, yours could be a hit. But make sure you’re project qualifies first.

A good candidate for a one-page website is not super-heavy on content. You only have one page to get your point across, and there are only so many animations and tricks you can throw in before they get stale.

Plus, most one-page websites are unconventional in their layout. Trying to fit a lot of content onto one page without looking cluttered is pretty tough.

Potential uses vary, but some of the most popular candidates for one-page websites are personal portfolios and websites for businesses that sell only a few products or services.

If you qualify, make sure your website hits the mark. There are always certain things you have to follow through on when making any website, but the points below are especially critical to single-page websites.

1. Stay focused

Make everything as simple as possible for the audience. Chances are, if you are considering a single-page website, you probably don’t have a ton of content. That’s fine. We’re sometimes tempted to add a lot of fluff to our websites. Single-page websites don’t require any fluffing because their sole purpose is to get to the point. If you are a designer putting together a portfolio, present your best work; don’t get distracted by mediocre projects or your side t-shirt business.

Strip your website of any fluff, and get down to the stuff that matters. While this is a good strategy for any website, most multi-page websites can get away with a bit of fluff, because users will usually know where to find the information they want. With one-pagers, you get one shot, and if the information someone is looking for is not there, you’ll lose them.

There is no question about what this e-commerce website is selling.

This portfolio gets right to the point. A pretty wonderful minimalist design, too.

2. Give the layout a hierarchy

Along with maintaining the visitor’s focus, a single-page website is supposed to showcase your product or service. If you think about one-page websites you’ve come across, they probably have a singular purpose, whether to showcase an agency’s design work or to drum up interest in an upcoming event.

A great design and focused layout can help define your website’s purpose. You, as the designer, have the power to direct the visitor’s eyes where you want them to go. People naturally notice big things first and small things last, so use that to your advantage. Important things should not be the smallest or last things on the page.

Those large-font introductory paragraphs have become so popular on designer portfolios because they get to the point quickly and sound appealing to people looking for a designer. The last thing you probably want to see is what school they graduated from. But you do want to know what they specialize in and what kind of work they do.

Again, you have precious few opportunities to get your message across, so get it right. If you find that you have too much content to be able to do this, then consider going with a multiple-page website.

While this website makes several different points, even within this screenshot, we can pretty much tell what’s most important.

We can tell what this company does, but the visual hierarchy could be better.

3. Clear navigation

Some one-page websites are static pages whose navigation takes the visitor to external websites. For example, a musician might have a navigation option on their website labeled “Videos” that takes you to their YouTube account. Absolutely nothing is wrong with this, and it even makes things easy (especially for non-coders). The only thing is that visitors should know when they are being directed to an external page.

If your one-page website is to showcase a product, and your purchasing link sends customers to an external payment platform without telling them so, you could lose some sales.

Your aim is to keep everything simple. Redirecting users to external websites without warning can be confusing. They might assume that the link is broken or incorrect. Consider using icons (plenty of free ones are out there) or headings to let visitors know where they’re headed.

Here is what not to do. The links at the top take you outside of the website with no warning. This really threw me off.

The design and coding of this website are very unusual. Nevertheless, links to external pages are distinguished by the green circles, and they’re labeled as such.

4. Go design crazy

Now we get to the fun part: using a single-page website to show off. You don’t want the website to be boring or repetitive, so go nuts. Take the design to the next level, and think outside the box. An unorthodox design is fine to draw attention to your product and make it memorable.

One-pagers are becoming synonymous with great design, because you can do more with the bigger canvas. You aren’t forced to use the same background everywhere; you change it across the sections. Scrolling through one-page websites is often like thumbing through a magazine or a well-assembled slide presentation. Exploit the possibilities.

Make the design great, whether by using big pictures that span the full browser window or creating a great illustrated background. You’ll get bonus points and may end up getting featured in Web design showcases.

This design is breathtaking, something like a poster. And the rest of the website does not disappoint.

The cleanness of this design (and the code) is amazing. It makes you stop and stare.

5. Go coding crazy

Much like with the design, you want to show off your coding skills as well. Single-page websites are supposed to be interacted with. The user experience is critical, so pay attention to the details. The code can take your website to the next level.

Some things to pay attention to are the colors and behavior of links (especially the hover selector); the look and behavior of forms (for example, making the form fit the design, and using AJAX and JavaScript validators); submission and error messages (used with the forms and some AJAX); and the grid and placement of content (as well as the content’s behavior in the browser window). All of these should align with the design.

A nice simple way to put code to work on a single-page website.

I may be biased because I like the trick where content loads on scroll, but the attention to detail in the code here is incredible all around.

6. Get it moving

In addition to taking care of the coding details, you can use code to create some movement and excitement on the page. Again, avoid being boring. Give your page a sense of life and motion; make it look like it’s moving with visitors. Add some fun animations or transitions to make the page stand out.

Languages such as jQuery and AJAX have become the standard for creating movement on a website. Whether you make the content fade in from different sides or make the background a slideshow, keep the audience engaged.

This background is an animation. I have no clue what the website is about, but it looks neat.

The transitions on this website are excellent. Love this one!

What other things are needed to make a one-page website special?

Kendra Gaines

Kendra Gaines is a freelance designer from Virginia, USA. Connect with her.

Read Next

15 Best New Fonts, May 2024

In this month’s edition, there are lots of historically-inspired typefaces, more of the growing trend for French…

20 Best New Websites, May 2024

Welcome to May’s compilation of the best sites on the web. This month we’re focused on color for younger humans,…

Exciting New Tools for Designers, May 2024

This year, we’ve seen a wave of groundbreaking apps and tools. AI is reshaping the industry, enhancing productivity,…

Using AI to Predict Design Trends

Design trends evolve at a blistering pace, especially in web design. On multi-month projects, you might work on a…

15 Best New Fonts, April 2024

Just like web design, type design follows trends. And while there’s always room for an exciting outsider, we tend to…

3 Essential Design Trends, May 2024

Integrated navigation elements, interactive typography, and digital overprints are three website design trends making…

How to Write World-Beating Web Content

Writing for the web is different from all other formats. We typically do not read to any real depth on the web; we…

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…

How Web Designers Can Stay Relevant in the Age of AI

The digital landscape is evolving rapidly. With the advent of AI, every sector is witnessing a revolution, including…

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…