A website is usually defined as a collection of web pages under a single domain. In the past, a site that had any sort of information organisation needed to have several web pages to show it all. This meant that for every time a visitor clicked, a new page had to be loaded.
That didn’t seem like much of a problem, until HTML5 and CSS3 came along. With these new programming languages, developers and designers have been able to stretch what they can do with a single page. Infinite scrolling, tabs and light boxes are just some of the techniques that can be used to pull up all the content a site needs.
Because this has proven fertile ground for the imaginations of designers and developers, many of the coolest new websites are actually just single pages. Scroll down to see a showcase of 15 of the best one-page websites.
1. Bioipsum
Bioipsum can generate random biographies with a couple of clicks and a single page. Its classical imagery and modern font and colour choices make it seem both serious and fun.
[zilla_button url=”http://www.bioipsum.com/” style=”blue” size=”medium” type=”square” target=”_blank”] Website [/zilla_button]
2. We Came From Mars
This mobile app company showcases the company ethos, its employees and its skills with a single page and some clever parallax scrolling.
[zilla_button url=”http://www.wecamefrommars.com/” style=”blue” size=”medium” type=”square” target=”_blank”] Website [/zilla_button]
3. IamJamie!
Web designer Jamie Wright shows why this format is such a popular choice for designers: the design pulls the eye down the page, urging the viewer to keep discovering more about him.
[zilla_button url=”http://www.iamjamie.co.uk/” style=”blue” size=”medium” type=”square” target=”_blank”] Website [/zilla_button]
4. Festa das Comadres
This site, for these producers of custom party kits for kids, is charmingly nostalgic, memorable and sweet, which is everything you want from a child’s birthday party.
[zilla_button url=”http://www.festadascomadres.com.br/” style=”blue” size=”medium” type=”square” target=”_blank”] Website [/zilla_button]
5. Arun Shourie
This portfolio site features a throbbing heart and clouds passing over and behind the monkey god. It is an arresting visual delight, showing off all of Arun Shouries’s digital art directing skills.
[zilla_button url=”http://www.arunshourie.co.in/” style=”blue” size=”medium” type=”square” target=”_blank”] Website [/zilla_button]
6. Minimal Monkey
The portfolio site for developer Stephen Burgess, this site is a series of boldly coloured columns that are each an article of his. Viewers can scroll to the right to see past articles, and clicking on a link brings the content up in the same page.
[zilla_button url=”http://minimalmonkey.com/” style=”blue” size=”medium” type=”square” target=”_blank”] Website [/zilla_button]
7. Valentine Favre
Valentine Favre is a designer who has used greyscale and splashes of yellow the shade of danger signs to create an eye-catching one-page website. The little touches, like the photo of the pug, keep it from being too intense.
[zilla_button url=”http://minimalmonkey.com/” style=”blue” size=”medium” type=”square” target=”_blank”] Website [/zilla_button]
8. Night Contact
This website for a London art festival features a regularly changing animated background that is mostly obscured by the content. Scrolling feels like pulling muslin over your own eyes, rather than over the background.
[zilla_button url=”http://www.nightcontact.co.uk/” style=”blue” size=”medium” type=”square” target=”_blank”] Website [/zilla_button]
9. Aaron Hall portfolio site
UI/UX and front-end developer Aaron Hall has created a calm, quiet space to demonstrate his skills. The site gives prospective clients the sense that working with him will be as stress-free as scrolling down.
[zilla_button url=”http://aaron.im/” style=”blue” size=”medium” type=”square” target=”_blank”] Website [/zilla_button]
10. DesignEmbraced
Design Embraced is a creative agency. Their website can be navigated through a series of brightly coloured dots, and clicking sees the sections melt into each other, creating the sense of movement through space.
[zilla_button url=”http://www.designembraced.com/” style=”blue” size=”medium” type=”square” target=”_blank”] Website [/zilla_button]
11. Caramel Budgie
Web designers Caramel Budgie took a twee approach to their single page website, building a site that shows off who they are and what they do best.
[zilla_button url=”http://www.caramelbudgie.com/” style=”blue” size=”medium” type=”square” target=”_blank”] Website [/zilla_button]
12. Pixel Lab
Pixel Lab is a small team of designers and developers who integrated animation and a bit of magic into their web design. This site seems to suggest that nerdy elves are working around the clock to build their clients’ perfect sites.
[zilla_button url=”http://thinkpixellab.com/” style=”blue” size=”medium” type=”square” target=”_blank”] Website [/zilla_button]
13. House
Creative agency House decided to have a straightforward site instead of one with all the bells and whistles. Still, the simple design leaves no doubt, however, that potential clients will get the full creative force of the team when they work with House.
[zilla_button url=”http://www.housecreative.co.uk/” style=”blue” size=”medium” type=”square” target=”_blank”] Website [/zilla_button]
14. Grind Spaces
Grind Spaces is series of work spaces that are designed to help teams collaborate more creatively through their flexible designs and working arrangements. The one-page site sells the concept, and the parallax scrolling background gives glimpses into the working spaces they have on offer.
[zilla_button url=”http://grindspaces.com/” style=”blue” size=”medium” type=”square” target=”_blank”] Website [/zilla_button]
15. Misstory Designs
This site mixes the technical nous to create moving backgrounds with touches of kawaii anime-style illustrations and sci-fi to show off the skill and aesthetic of this interactive designer.
[zilla_button url=”http://misstorydesigns.com/” style=”blue” size=”medium” type=”square” target=”_blank”] Website [/zilla_button]
Nice article – if anyone is interested have a look too at this template – Slidexy – that we’ve put together: http://www.tallhat.com/templates/slidexy/ – it uses jQuery scrolling and is ‘responsive’ as it also presents the same content well on iPhone and iPad. It ‘spreads’ the content for 2D scrolling using JS, then on iPhone it presents the same content in a much simpler vertical column format.