WEB DESIGNER DUBAI Blog

Creative | Design | SEO | Marketing

Single-Page Websites becoming popular: Examples and Good Practices

Nowadays single-page websites are becoming more popular among web designers, both for their own projects and for client sites. There are a lot examples in which a single-page site makes a lot of sense.In such websites there may not be bulk content, may not be the contents are closely related but sometimes a particular stylistic element may works better on that single page website.

Anyways single-page sites are cropping up all over the place. But figure out when to use a one-page design and the best way to create such a site is still a challenge for many. While a lot of general web design practices are being applied to single-page sites just as they apply to more complex sites, there are some special considerations, which we are going to discuss below.

[Note: Check out the benefits of a single paged website and if you want such a website WEB DESIGNER DUBAI can help you out,call me for your service.]

Is a One-Page website apt for your project?

Single page websites seems to be particularly popular among designers. But that does not mean those are the only sites they’re appropriate for. Other places we have seen them include app websites and websites for particular products  like books. So how do you decide if a one-page site meets your needs?

Let us discuss by asking yourself these questions:

  • Do I have a lot of content to the site? Content-rich websites are probably not the best fit for a single-page site. If you have more than a dozen webpages worth of information, you’re probably better off with a more traditional, multi-page web structure.
  • Am I trying to sell a specific product through the website? A single page site can be a great solution for selling one product, like a book, website theme, or similar.
  • Are you comfortable for using Ajax and JavaScript? A very large number of single-page websites use Ajax and JS for navigation and other elements. It is a very valuable way of creating an uncluttered website that still contains a fair amount of content.
  • Is my content are all related?
  • If you are trying to put a bunch of unrelated content on a single page, it is most likely just going to confuse your visitor. If you have a bunch of unrelated pages, the are probably best left as separate pages.

    1. Following minimal Content

    When designing a single-paged website, limiting the amount of content is important. First of all, rememeber that all your content needs to be loaded at once (unless you are using Ajax, but even then there are sometimes a fair amount of content to load at once). Also, if you want to use transitions between your content areas, they often work better when there isn’t a huge amount of content to coverup between sections which are not bordering each other.

    Five or six separate content areas seems to be about the norm on many single-page sites. Some websites limit it to only two or three, even. It is very rare to see a site with more than ten different content areas on a single page.

    Examples

    Dubai web designer

    Colourpixel has a lot of varying information on their website, but most part of the site is kept short and up to the point. There’s contact information, a portfolio and about information, all together on a single page.

    Dubai web designer

    Above shown website also includes only the minimum amount of content to get the message across.

    Single-page sites are usually perfect for things like events (a wedding in this case). There’s not too much content to include and the single page makes it easy to find whatever you are looking for.

    2. Considering Horizontal Scrolling

    Not all horizontally-scrolling websites are single page websites. But most of them are, and it is an interesting way to break out of the standard single-page box.

    Horizontal scrolling can also work better in such cases like you are having more content. Combination of a horizontal layout with JavaScript can also facilitate larger amounts of content without overwhelming the visitor.

    Examples

    Dubai web designer

    This site incorporates both horizontal and vertical scrolling to get a six pages worth information on a single page.

    Dubai web designing

    F Claire Baxter’s site is a very good example of using JavaScript to create a site that smoothly scrolls horizontally.

    Dubai web designing website

    Charlie Gentle’s website uses a horizontal-scrolling slideshow effect to display the site's content.

    Web designer Dubai

    This is a huge horizontally-scrolling single page site. It contains a contact form right at the beginning, setting it apart from a lot of other horizontal sites that includes it on the last screen.

    Dubai web designer

    Peter Pearson’s website uses a mix of animation and horizontal scrolling on his site. Multiple webpages worth of content are broken up across multiple horizontal screens.

    3. Consider the Screen Size

    With a single webpage site, you may want to consider the visible area your visitors likely see within their browser. Crafting your webpages to fit comfortably within that space can minimize scrolling while viewing individual sections. This can be particularly important if the transitions between areas are very important to you. Once a visitor starts scrolling, they may just keep on scrolling rather than using your navigation links.

    Examples

    Web designing Dubai

    Above given site is a very simple, three-screen single page site. Each section of the website easily fits within a single screen and it requires no scrolling. The use of bi-directional scrolling system to navigate is also a unique touch.

    Design Dubai

    The CreativePeople website uses accordian sliders that come up from the bottom of the page to display content. Here also no scrolling is required.

    IT Company in Dubai

    Every content area on the Dafvy.co.uk site fits very easily within a single screen with no scrolling required. The background color transitions that occurs when you click to navigate to each individual section is a very innovative touch.

    Dubai web designer

    Fuel Brand website uses a single-page that fits within any browser window and uses Ajax to show more content on that page.

    Dubai web designer

    A simple website with a slideshow and minimal information. The content is adjusted to your screen size.

    4. Clearly Set Apart Each Section

    Most visitors to your site are going to load a new page for new content. If you stuffed all the content on your single-page site too close together, they may not see the transitions from one section to the next.

    There are a number of ways to differentiate between sections.One way is to use a header for each content area. Some websites use an actual line to separate different areas. Some other websites use ample amounts of white space to set areas apart from one another.

    Examples

    Design Design Dubai

    KINO uses consistent hand-drawn headers for each section of the website, along with a thin and hand-drawn border separating each one.

    Graphic Design Dubai

    Simple banners between each section helps to keep a consistent look throughout the page while setting apart each content area.

    Logo Design Dubai

    CreativeSwitch uses images similar to distinct headers for each section of the website, clearly marking transitions between different types of contents.

    Web designer Dubai

    Even something which is as simple as a thick black bar can be enough to set your content areas apart from each other, as is done here.

    SEO Dubai

    The Tomatic site uses a retro rocket and space exploration as theme. The header showing a rocket with planets. Various other sections on the website continue the retro theme, and then the footer contains a robot and UFO on a planet’s surface. Each section is given a unified header.

    5. Take Advantage of a Bigger Background

    Big backgrounds are very popular in all kinds of website design, but single page Webdesigns open up new possibilities for large backgrounds. Many designers take advantage of the large background images as a way to set apart their content areas while maintaining a unified look to the entire website.

    For example, some websites might have a scene in the background that starts with a sky at the top with one content area, further down they have a ground-level scene with another content area, and at the bottom they have given an underwater scene with yet another content area. The possibilities with this kind of websites are almost endless.

    Examples

    Internet Marketing Dubai

    This coming soon page is another great example of using a unified theme throughout the website.

    Web Hosting Dubai

    The Volll site uses a seascape/landscape image as the background, by placing the main content at sea level. Additional information is given above the main content in the sky and below in the water,ie right down to the ocean floor.

    Web designer Dubai

    Jamie Wright’s website uses a more abstract, colorful theme throughout the site. It really sets the website apart and draws your attention exactly where it should be needed.

    Web designer Dubai

    Luke Larsen’s website uses a background that resembles a goldfish bowl.

    Web designer Dubai

    This is one of the most innovative background designs I’ve ever seen. As you scroll down the webpage, colored bars in the background interact with other background elements to produce a one-of-a-kind effect that is very hard to even explain.

    6. Use JavaScript and Ajax to Organize and Display the Content

    If you have a bit more content to display but you still want to stick to a single page design, consider using Javascript and Ajax to hide some content while others is displayed.

    Slideshows are the most popular techniques for incorporating JavaScript, but modal windows and some other methods are also used.

    Examples

    Web designing Dubai

    SOFA uses JavaScript to display its content on the home page as needed. It results in a very clean and polished design that still presents the necessary information without allowing visitors to leave the main page.

    Freelance Graphic Designer dubai

    The Giant Creative site uses a JavaScript slideshow to display the content while keeping the visitors on a single page.

    Freelance Web designer Dubai

    Deluge Studios uses a variety of slideshows, modal windows, and many other JavaScript techniques to include more information on their website than is immediately apparent.

    Web designer Dubai

    This TapTapTap website uses JavaScript to load information about each of their products without loading a new webpage.

    Web designer Dubai

    This website uses JavaScript for subtle enhancements like modal windows and tooltips.

    More Examples for single-page web design

    Below are a collection of other great single-page website designs.

    Dale Harris

    Web Design Agency Dubai

    Justin Tsang

    Designers in Dubai

    Blazing Emblem, LLC

    Website Design Maintenance Dubai

    Fish Marketing

    Website Support and Maintenance Dubai

    Jared Design

    email marketing Dubai

    Angel Des Lacs

    Web Designing Websites

    Koffie Verkeerd

    Web designer Dubai

    Project 365

    Web designer Dubai

    Kevin Lucius

    Web designer Dubai

    The Rissington Podcast

    Web designing Dubai

    Bullet PR

    Graphic Designer Dubai

    Skywalker Graphics

    Logo Design Dubai

    thinkdj

    Web Designing Website Dubai

    Jan-Eike Koormann

    Web Development Dubai

    Janic Design

    Web Development dubai

    Adam Woodhouse

    SEO Dubai

    Paolo Manganiello

    PPC Dubai

    Los Colores Olvidados

    Search engine Optimization Dubai

    Hot Meteor

    Pay Per Click Dubai

    Review…

    One-page websites are a different way to design a site, whether it is your own personal site or for a client. Consider ways to differentiate your one-page website that might not work as well on a multi-page website. Things like big background images or certain Ajax techniques work really well on a one-page website and have a bigger impact than they do on more complex websites.

    Here’s a quick run-down of the best-methods mentioned above:

    1. Use Minimal content. There is only one page for all the contents,so make it up to the point.
    2. Horizontal scrolling is better. Not every horizontal-scrolling websites are single paged, it is a format that lends itself well to the one-page format.
    3. Think screen size. Creating the content areas that fit within a visitor’s screen without requiring scrolling is very common in single-page sites.
    4. Clearly set each section apart. You do not have the convention of separate pages for different content, so you need to figure out some other way to delineate content areas.
    5. Make advantage of bigger backgrounds. Single page websites are often longer or larger than other pages, giving more opportunities for the creative use of big backgrounds.
    6. Make Use JavaScript and Ajax. Organizing a lot of content on a single webpage can be enhanced if you use Ajax or JS techniques like modal windows, tooltips and sliders.