Creative Single Page Websites Incorporating Full Site Features

[strong-heading url=”#” ] Effective One Page Websites//+ [/strong-heading]

 

Single-page application [ SPA ], or single-page interface [ SPI ], is what is defined as a web application or web site which fits into a single web page, with the goal of providing a more fluid user experience similar to a desktop application.

Within an SPA, all of the necessary code such as the: HTML, JavaScript, and CSS – are retrieved with a single page load, or partial changes are performed loading new code on demand from the web server, which are usually driven by user actions. The page does not automatically reload during user interaction with the application, nor does control transfer to another page.

single page websites

Some of these traditional web applications and the way they work tends to create disruption within the user experience and workflow.

Traditional web applications work by way of reloading an entire web page. In order to advance through the workflow, a user interacts with page elements (such as hyperlinks and form submit buttons) which cause the browser to issue a request to the server for a completely new page.

The complete page reload which occurs by each user interaction results in unnecessary re-transmission of data over the wire. This can make the overall performance of the web-site, when the entire session is taking into account, much slower.

The single page website has proven to be a paradigm of the modern web lately, in which everything which needs to be conveyed to the end user can now be placed onto a single document.
Furthermore, the single page layout option can lead to an overwhelmingly large sized documents of endless scrolling, a series of clever mechanisms using modern standards and techniques such as CSS3 and Ajax which have burst onto the scene, possessing a method of granting the end user the information they are in search of.

With all the content-heavy laden content which CMS-powered websites contain these days, many users find it a welcome alternative within browsing a single-page website where all of the content is accessible without having to load or refresh the page.

[alert-blue]

The benefits to a well-designed one page website include

[/alert-blue]

  • potentially lower cost to the client
  • high usability
  • information brevity
  • increased conversions
  • opportunity for unique design decisions and more.

We are showcasing 30 creative single page or , ” One Page ” sites in this post which make great use of features such as : sliders, carousels, Ajax and auto-scroll scripts that go on to display and present their content to the end user, within a way that doesn’t hinder the user experience but rather improves it. We hope you enjoy this showcase.

[horizontal-line]

1. Matt Brothers

singlepage01
 
[button-dark url=”http://www.mattbrothers.net/” target=”_blank” position=”right”] Source [/button-dark]
 

2. Beaver Lab

singlepage02
 
[button-dark url=”http://www.beaverlab.com/#chi_siamo_a” target=”_blank” position=”right”] Source [/button-dark]
 

3. Six Clicks

singlepage03
 
[button-dark url=”http://sixclicks.net/” target=”_blank” position=”right”] Source [/button-dark]
 

4. Rodesk

singlepage04
 
[button-dark url=”http://rodesk.nl/” target=”_blank” position=”right”] Source [/button-dark]
 

5. I am Creative

singlepage05
 
[button-dark url=”http://iamcreative.me/” target=”_blank” position=”right”] Source [/button-dark]
 

6. Lucia Soto

singlepage06
 
[button-dark url=”http://luciasoto.es/#main” target=”_blank” position=”right”] Source [/button-dark]
 

7. Wit Creative

singlepage07
 
[button-dark url=”http://www.witcreative.info/” target=”_blank” position=”right”] Source [/button-dark]
 

8. Dangers of Fracking

singlepage08
 
[button-dark url=”http://www.dangersoffracking.com/” target=”_blank” position=”right”] Source [/button-dark]
 

9. Launch Factory

singlepage09
 
[button-dark url=”http://www.launchfactory.org/” target=”_blank” position=”right”] Source [/button-dark]
 

10. We New Media

singlepage10
 
[button-dark url=”http://www.we-new.com/” target=”_blank” position=”right”] Source [/button-dark]
 

11. Grayden Poper

singlepage11
 
[button-dark url=”http://www.graydenpoper.com/” target=”_blank” position=”right”] Source [/button-dark]
 

12. Two Fish Illustrations

singlepage12
 
[button-dark url=”http://twofishillustration.com/” target=”_blank” position=”right”] Source [/button-dark]
 

13. Think Green Meeting

singlepage13
 
[button-dark url=”http://thinkgreenmeeting.com/” target=”_blank” position=”right”] Source [/button-dark]
 

14. Jibe Visuals

singlepage14
 
[button-dark url=”http://www.jibevisuals.com/” target=”_blank” position=”right”] Source [/button-dark]
 

15. Logo Time

singlepage15
 
[button-dark url=”http://logotime.com/” target=”_blank” position=”right”] Source [/button-dark]
 

16. House Creative

singlepage16
 
[button-dark url=”http://www.housecreative.co.uk/” target=”_blank” position=”right”] Source [/button-dark]
 

17. Valentine Favre

singlepage17
 
[button-dark url=”http://www.valentinefavre.com/” target=”_blank” position=”right”] Source [/button-dark]
 

18. Balcktie

singlepage18
 
[button-dark url=”http://blacktie.es/” target=”_blank” position=”right”] Source [/button-dark]
 

19. Ars Navis

singlepage19
 
[button-dark url=”http://www.arsnavis.com/” target=”_blank” position=”right”] Source [/button-dark]
 

20. Charleston

singlepage20
 
[button-dark url=”http://www.charlestonrestaurant.com/#!/” target=”_blank” position=”right”] Source [/button-dark]
 

21. A Tented Affair

singlepage21
 
[button-dark url=”http://www.atentedaffair.com/” target=”_blank” position=”right”] Source [/button-dark]
 

22. Infect Media

singlepage22
 
[button-dark url=”http://saratusar.com/work/infectmedia/” target=”_blank” position=”right”] Source [/button-dark]
 

23. Nadine Weiberg

singlepage23
 
[button-dark url=”http://nadineweiberg.de/” target=”_blank” position=”right”] Source [/button-dark]
 

24. Pikaboo

singlepage24
 
[button-dark url=”http://pikaboo.be/” target=”_blank” position=”right”] Source [/button-dark]
 

25. Font Face

singlepage25
 
[button-dark url=”http://www.font-face.com/#green_content” target=”_blank” position=”right”] Source [/button-dark]
 

26. Roux at Parliament Square

singlepage26
 
[button-dark url=”http://www.rouxatparliamentsquare.co.uk/” target=”_blank” position=”right”] Source [/button-dark]
 

27. Sean Gaffney

singlepage27
 
[button-dark url=”http://seangaffney.cc/” target=”_blank” position=”right”] Source [/button-dark]
 

28. Bfeely

singlepage28
 
[button-dark url=”http://bfeely.com/” target=”_blank” position=”right”] Source [/button-dark]
 

29. TM Design

singlepage29
 
[button-dark url=”http://www.tmdesign.sk/” target=”_blank” position=”right”] Source [/button-dark]
 

30. Typer Media 2011

singlepage30
 
[button-dark url=”http://typemedia2011.com” target=”_blank” position=”right”] Source [/button-dark]
 

Rate this post

One Response

  1. Yousaf June 18, 2012

Leave a Reply