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

30 Most Exciting New Tools for Designers, 2023

As we near the end of 2023, we wanted to take a look back over all the tools we collected over the past year, to pick…

3 Essential Design Trends, December 2023

While we love the holidays, too much of a seasonal theme can get overwhelming. Thankfully, these design trends strike a…

10 Easy Ways to Make Money as a Web Designer

When you’re a web designer, the logical way to make money is designing websites; you can apply for a job at an agency,…

The 10 Most Hated Fonts of All Time

Remember when Comic Sans wasn’t the butt of the jokes? Long for the days when we actually enjoyed using the Impact…

15 Best New Fonts, November 2023

2023 is almost over, and the new fonts are still coming thick and fast. This month, we’ve found some awesome variable…

Old School Web Techniques Best Forgotten

When the web first entered the public consciousness back in the 90s, it was primarily text-based with minimal design…

20 Best New Websites, November 2023

As the nights draw in for the Northern hemisphere, what better way to brighten your day than by soaking up some design…

30 Amazing Chrome Extensions for Designers and Developers

Searching for a tool to make cross-platform design a breeze? Desperate for an extension that helps you figure out the…

Exciting New Tools for Designers, November 2023

We’ve got a mix of handy image helpers, useful design assets, and clever productivity tools, amongst other treats. Some…

The Dangers of Doomscrolling for Designers and How to Break Free

As a creative professional, navigating the digital realm is second nature to you. It’s normal to follow an endless…

From Image Adjustments to AI: Photoshop Through the Years

Remember when Merriam-Webster added Photoshop to the dictionary back in 2008? Want to learn how AI is changing design…

3 Essential Design Trends, November 2023

In the season of giving thanks, we often think of comfort and tradition. These are common themes with each of our three…