Creating a website is quite difficult if you don’t know where to start. Designers came up with a new trend that seems to gather more and more popularity – the one page website. This trend seems to be effective and good-looking at the same time, which is exactly what people want from a website. This is a short guide that will describe how to obtain this one-page design easily.
No information will be hidden from the user, which will give visitors a more professional feeling. Moreover, it makes navigation extremely easy to handle, as visitors can find they are looking for rapidly. Everyone has something to gain if the one page website principle is applied.
The one-page trend refers to creating a single page website in HTML that displays all the information at one. Scrolling and clicking are the only actions required to find information on such a page design.
To make it even easier to use, you can include Call-To-Action buttons, responsive navigation menus, interactive visual elements and so on. One page websites must be intuitive and very user-friendly, to increase the experience.
The benefit of a one page website in comparison with a multi-page one is that they are easier to understand by all types of users. Also, another considerable benefit is that one page websites load faster than multi-page ones and are easier to optimize.
When a visitor accesses your website, he should find exactly what he is interested about in a matter of seconds. Visitors who need to struggle to find what they are looking for will leave the website quickly. Make sure to place your contact information somewhere visible and remove information that is not relevant for a person who visits the website. When including information, make sure it answers the basic questions who, what, why, when and where.
A personal website page is different from a business one. Depending on what type of company you own, you need to choose what’s the best fit: one page or classic. If the features of your business allow you to use a one page website, then go for it. If there’s too much information to handle, you might want to opt for a multi-page one.
Anyway, weighing your options carefully is the first step in deciding what it’s best for your business website. One page websites are more appropriate for businesses that require including a lot of images and small chunks of text, such as an architecture company. Do your research and see what works best for your situation.
The layout of your website will be the one that defines the user experience. Thebest one page websites use a linear layout that keeps users away from getting lost in information. The layout of a one page website is also easy to adapt for mobile versions. Moreover, it needs fewer resources from the browser compared to a website that has multiple pages. It is a great format for businesses that need responsive, simple websites.
Once you decided that a one page website is the most suitable choice, you can start putting it together. The content has to be included on the page strategically, meaning that you need to think what you want your visitors to see first. The order of the site is pretty basic since it’s based on scrolling mostly. You need to understand content hierarchies and perceive the website through the eyes of a visitor in order to plan the content the right way.
There are several things that your one page website must include no matter what. Most landing page templates you can find online include these elements, such as an appropriate menu, columns, a social bar, and a footer. In one page website, design is important to stick with some basic rules to make the experience enjoyable.
You can find one page website templates to gather your inspiration from online. You can choose a customizable one or you can build one from scratch, depending on your business type. There are multiple possibilities to choose from, but the purpose remains the same – making visitors return to your website and enjoy their experience with it.
As mentioned before, one page websites are more appropriate for businesses that need to include more multimedia content than written content on their website. Because of this, you need to carefully select the visual content you include on the website. The text bits must be enriched with the help of images, videos,and slideshows. The purpose is to give readers a quick overview of your company, without making them read large pieces of information.
First of all, start including optimized images on the website. Non-optimized images will make the website a lot slower and this will damage the overall user experience. Make sure that the images are high-quality, and the first impression is already built.
Videos governate today’s websites because they are the easiest and fastest method to transmit a message. Visitors definitely prefer getting their information from a video rather than by reading large chunks of text.
Finally, slideshows are a great way to display multiple images at once, which is basically the purpose of a onepage website. Slideshows are easy to use and visitors seem to enjoy their presence on a website.
Once page websites have one issue – scrolling. Users may have to scroll and scroll until they reach what they want and clicking on something might ruin all the scrolling. In order to get rid of that problem and ensure users that they will have a great experience, you need to add different buttons that allow them to go back to the upper side of the webpage or at the end of the webpage. It will be much easier to navigate it this way.
Parallax scrolling is another trend that has been very popular lately and it refers to a 3D illusion that moves the layers of your website in the background as the user scrolls down. This effect offers one page websites the extra touch it needs to catch the attention of the visitors. Make sure to check if these animations slow down your website or not.
Another year, another cracking One Pager promoting Dann Petty's Epicurrence event, this time snowboarding in Breckenridge, Colorado. Dann put together quite the dream team for this one and the result is extraordinary. Features include vertical and horizontal parallax scrolling, unique interactive dissolve effects, an intro image that changes according to your time of day and if I'm not mistaken that's a snowball custom cursor? Epic!
‘Fusion Lite’ is the free version of the Fusion Bootstrap 4 multipurpose HTML template by UIdeck. Features include a fixed header navigation (that smooth scrolls to sections), services overview, product feature section, pricing tables, testimonial slider, team, Google Maps and a contact form.
The Free PR book One Pager is an excellent reference to a quality Landing Page for a book launch. The long-scrolling site (built on the Shopify platform) features a mint intro cover shot (with a shine effect to emphasize the emboss type), clear typography, a testimonial slider, chapter preview download and well-presented author bios.
Such a beautiful design in this One Pager for ARK, an initiative by Cregital Agency to help charitable causes in Nigeria. Lovely touch with the friendly animated characters, the floating team members, the unique contact form design and of course the dark mode. My only real crit is there needs to be a ballpark USD comparison to the Nigerian Dollar amount for gift context.
Fun use of the .rs domain extension in this One Pager by Charlotte Dann explaining why she has magnets in her fingers. Neat touch (excuse the pun) reusing the intro magnet design element as the expand button in the FAQ accordion and the use of the Fleisch Wurst typeface – that translates to Flesh Sausages if I’m not mistaken. Bravo!
To celebrate the beta release for MailChimp‘s new postcards, they made this awesome video game One Pager called Post Haste. After you’re briefed you control Freddie (their mascot) to deliver mail while dodging fun obstacles. What a good time and a quality homage to the classic Paperboy game!
‘Grand’ is a free Event or Conference Landing Page HTML template by UIdeck built on the Bootstrap Framework. Features include intro slideshow with big image background, a countdown timer, a fixed header navigation that smooth scrolls to sections, event schedule carousal, speaker list, past event gallery, FAQs, Sponsors, Ticket pricing table, newsletter signup block, Google Maps location and ends with an enquiry form.
So much awesome attention-to-detail in this pixel-themed One Pager for the upcoming Laracon VII event. Features include unscrambling text section headers, wicked Kirokaze artwork/animations and subtle easter eggs throughout.
Once you learn some things about page design, it’s easier to put your website together. The tips you found in this article should help you achieve exactly the result you want and offer users the best navigation experience.
Free cheat sheets available
Subscribe to download a set of cheat sheets for CSS, JS, and HTML
You'll receive an email with the cheat sheets in an instant.