Web design Page

July 1, 2018
Web Page Design Ideas

single page web design - dangers of frackingWeb design trends come and go and there is no “correct look” online – the never-ending possibilities are half the fun! Design best practices will be debated indefinitely, but at the end of the day, the best designed website is one that site visitors can easily navigate to reach their objective, whether they are buying a product or looking for information. Today, we take a look at single page web design, because sometimes, one page is all you need. Decide for yourself whether this design trend is a yay! Or a nay.

What is single page web design?

Single page web design is an easy concept to grasp – all content and navigation on a single page – albeit more complicated to execute. Because you are space limited (you cannot spread content across multiple pages), you must be meticulous in content selection and very strategic as you lay out site content and navigation. For this reason, many single page websites are very visually appealing, allowing the user to take cues from the graphics instead of site navigation or text. Your site must tell your story and deliver a seamless user experience with as minimal content as possible.

Single page web design often takes advantage of both horizontal and vertical navigation to direct users down and around the page, instead of to new tabs or pages. JavaScript is often used for scrolling and to collapse or expand areas of content to guide your users through the site journey. Content seems to disappear and appear, as you’re swept down the page. You can also add stunning enhancements like Parallax design, adding elements of excitement and interactivity.

Jamie Oliver's restaurant FifteenDangersoffracking.com, a site that explains the process of hydraulic fracturing or “fracking, ” to support filmmaker Josh Fox’s film on the same subject, Gasland. This single page site uses a combination of parallax scrolling and simple graphics to tell a detailed, informative story of the dangers of fracking.

Graphics enhance appeal and provide context without being text heavy. When designing a single page site, split content into separate columns, use different headings, and play with font sizes and color blocks to segment sections vertically or horizontally on the page. Make each piece of content count!

The single page website for Jamie Oliver’s upscale restaurant Fifteen is simple and elegant, enhancing the user experience with beautiful food photography, while detailing Fifteen’s commitment to youth training and The Jamie Oliver Food Foundation.

Single page sites Pro’s and Con’s


  • Streamlined content means your message or “story” takes center stage
  • Easier to maintain a single page, than to update multiple site pages
  • Better control of the user’s journey through your site, because they cannot bounce around to other pages and potentially miss important information.
  • Focus on design, interaction, and storytelling promotes user engagement
  • HTML5, CSS3, and JavaScript add interactive and animated elements that surprise and excite site visitors


  • Site planning and content selection can be complex, as you try to boil your story down to a single, meaningful page, and adding a new section in the future is more difficult
  • Requires high level of tech skills, like HTML5, CSS3, and JavaScript
  • All site assets load at the same time, causing initial load time to be slower
  • SEO – less content and pages means more difficulty optimizing for SEO. Site is missing internal anchor text links and will only have one URL and one title tag to reference.
  • Analytics – it becomes more difficult to use analytics to make assumptions about visitor behavior, because all analytics data is referencing the same page.

One page web design is not for everyone. A large company would likely have a very hard time telling their story in a single page. Single page design might work best for a small company, a campaign-specific landing page, a freelancer, a javascript programmer showing off technical skills, or a graphic designer showcasing a portfolio. The key to single page web design, like all web design, is creativity and strategic planning to ensure each content piece drives your user towards whatever primary reason they have for visiting your site.

Web Design: How to design the Home Page
Web Design: How to design the Home Page
How to design a killer home page (advanced web design)
How to design a killer home page (advanced web design)
Web page maker - Web Design Softwere
Web page maker - Web Design Softwere
Share this Post