6 tips to create better one-page websites

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?

0 shares
  • http://pixeno.com Pixeno Web Host

    Get it moving is a great point! I love when I visit one page websites and when I scroll it has moving effects down the page.

  • http://www.pscyhed.be/wordpress CiNiTriQs

    moving effects… going to be a hurdle in the near future though, people want everything to be “interactive” until the web gets cluttered with it… then the next trend will be to keep it all very subtle again. I have to agree though, I like jQuery and what it can do for the community, but let’s not make EVERYTHING a moving distracting train of… ufo’s :)

    • Anonymous

      hi

    • Anonymous

      hi

  • http://twitter.com/j_clardy j clardy

    Nice article.
    cheers
     

  • http://twitter.com/iliadraznin Ilia Draznin

    I gotta disagree with point 6, especially when it comes to sites where the comment is “I have no clue what the website is about, but it looks neat.” – that’s a fail in my book. Animations should be subtle and only used when they add to the site, not distract. It’s fine to have some fun with them on occasion but it should be done sparingly.

  • http://twitter.com/GanimeCreative Anthony Ganime

    Love one pagers…I’m thinking of reworking my site into one…

  • http://twitter.com/lilylz lily leguizamo

    Glad to see that I made great decisions last year with my one pager.
    Going design crazy can be challenging. I mean it’s nice having a bigger canvas, but because of the amount of content and any needed js or server requests the loading time may restrict this.

  • http://www.jamienorthrup.com Jamie Northrup

    I love one page websites, I mean it can’t work for everyone, but to have access to everything I need on one page is great, it’s also easier to promote and market, but harder to get people to come back, unless your content on that one page is always changing.

  • http://twitter.com/MrNis Sean Leask

    Pigspotter is about Speed Trapping cameras and road blocks in and around South African roads.. It warns drivers of any roadblocks or cameras incase they might be under the influence…

  • Dawid Nowak

    JQuery is not a programming ‘language’ – it is a library for commonly used functionalities, written in JavaScript (which, by contrast, is a language).

  • http://twitter.com/NMdoglover NM Dog Lover

    How are these “one-page websites” rather than splash pages?  All of these link to internal and/or external pages, meaning they’re **more** than one page.  What am I missing?

  • Anonymous

    shashacaicai~~~Welcome to (http://www.fashion-designshoes.com) .Our company was founded in 2004 and was committed to internet marketing businesses in 2006. NFL Jerseys are always in a great demand and sells well. Recently, we launched some new NHL Jerseys and updated them on our website. Here you can find some scarce MLB Jerseys, which were difficult to find from other websites. NBA Jerseys are also always in hotsale.

  • http://twitter.com/CreativeWPTheme WordPressThemeBlog

    Nice article. 

  • martha

    By creating a one-page website you can`t use to many strong colors, because they`re make the eyes tired and cause headaches. :) To many textures are also confused. And don` t forget about “page up” button. 
    Very nice article, thx. :)

  • Mi-design

    Once agian awesome post!
    can we have tutorials please….!

  • http://newinternetorder.com/ Floricel

    Absolutely awesome! Many have commented that the moving effects tends to stand-out and to me they are really interesting and fun to navigate around. You cited some really great and genius ideas, Kendra! :)

    Cheers! 

  • http://sellfromtheweb.com web design guys

    I definitely feel that less is more, concise and to the point. The page should have a nice flow that leads visitors to a focal point, for sure. Hard to maximize a 1 pager, so 1 page should equal 1 agenda

  • kMist Design

    electricpulp.com is not actually a one page site.. it is actually 2.. cool but does not belong in this work-up.

  • http://twitter.com/EdeeSims Eddy Sims

    One thing that should be said about one page websites is that imo they need a static navigation. I love the concepts of one page websites, however it frustrates me to have to scroll back to sections that i would like to view.  Static navigation should be one of your key design elements on your one page site

  • http://twitter.com/digital_ark digital ark

    I like the concept of one page sites.  Clean and can get the message over quickly.  Silly question: is a 1 page web site the same as a micro site?

  • Pheesh

    Mark Dearman’s link in between “TWITTER” and “CARGO” might be misread :)

  • Kamal Chaurasia

    very very good article.

  • http://www.logicstudent.com Josh

    Great article! appreciate the love for one-page websites! Thanks!

  • Sagala

    tat pigspotter site rocks!