A very practical one-page Web Design Guide

This good article will give students when the popular science can use a single page site, design what skills, what good examples can be used for reference, as well as the end of the recommendation of a large wave of professional web site resources, dry weight absolute foot, charging time to >>>

@ 10 Realities Why: Single page design is a great technique for dealing with small websites, and even some sites you might think a page is not working. From easy maintenance to reduced bandwidth usage, the benefits of using a single-page Web site abound.

If you're dealing with a small web site, usually with just a few pages, consider using a single-page design to see if it simplifies the project and makes it more user-friendly. Continue reading, and you will understand its benefits, when to use (or should not use), and some of the best practices you should follow.

　　The benefits of one-page design

Obviously, a single-page design is not an ideal choice for all projects. But if possible, there are a lot of reasons to use it.

　　Intuitive and easy to use

By default, users want to browse a single-page Web site as long as they know how to scroll. You can also add arrows or other browsing hints, but with a few exceptions, scrolling is enough to allow users to navigate between parts.

　　 Green13

There is no need to worry that users are trapped in multiple navigation and endlessly searching for what they want. If there are multiple sections on the page, the header or other navigation links are usually helpful, but even without them, the site is still available.

　　Faster and simpler to maintain

This is not a fait accompli, and a well coded single-page site may be written more quickly than a multi-page site. The design process can sometimes take less time, although this depends on the complexity of a single page site.

　　Andreaballerino

Once you have a basic layout in mind, a single-page Web site can also use some specific design constraints to speed up the process. In particular, in comparison to multi-page sites, a single page of the various parts of the site to maintain seamless convergence. If you already have a clear list of what you can and cannot do, such constraints can indeed speed up page development.

Maintenance is also simpler. When you only need to process a page, maintenance work is greatly simplified as long as the site itself is encoded well.

　　It forces you to simplify.

This article builds up the above point. When you have only one page to deal with, you have to simplify everything to their most basic form. No longer needs a page of useless marketing propaganda. You have to be straight and straight.

　　Varsity

　　More SEO Potential

High-quality site links, is the website in the search engine performance of an important part. Although search engines are not the largest source of traffic required for many sites, they are still important.

A link to a single page site always points to itself. When the search engine crawls, this can increase the weight of the site.

　　Narrative approach prompts users to act

One-page site often from the narrative point of view, this multiple-page site is not good at. This can facilitate conversion and motivate users to take action.

　　Wild

People are used to listening to stories, both online and offline, so this has the obvious advantage of user experience. We started reading and listening to stories as a child, and it was a natural thing for us.

　　Easy to Organize

There is no need to organize a list of countless pages and subpages. No need to worry about whether each page is a parent or a child. There are no complicated navigation menus and submenus. It's all on one page. Whether you want to include a navigation link or let the user scroll, depending on you, depends on how you can improve the user experience. If you have more than one page, you will never think of it that way.

Stefansohlstrom

　　Reduce bandwidth consumption

Although it's not like it used to be, it's not a problem for the server, but think about how many users have been accessing your site over the years with mobile devices. Reducing the bandwidth footprint of a website will win the gratitude of users with limited traffic.

　　Eliminated the mobile version of the Web site

Of course, the response design is not limited to a single page Web site. But even with a responsive design, the more complex the Web site, the more difficult it is to adapt to a small screen. One-page Web site is not complicated, it is inevitable. It's easier to use a responsive design overall. Simplified navigation and similar changes also make it easier to achieve the design for small screens.

　　Bearonunicycle

　　Do you want to scroll with the visual difference?

Visual error scrolling may be the most wonderful thing that has happened in the Internet, or it may be an abused gimmick to ravage our browsers, depending on how you look at it. No matter which side you're on, it doesn't seem to be going away anytime soon.

As far as I am concerned, I would like to have time and place to achieve visual difference scrolling. The effect is great for some single-page sites, and for others it's gimmick, or worse: hard to use. The key is to be clear, do you use visual poor scrolling to really improve the usability of your site, or do you think it looks cool?

If you want to use Visual error scrolling, consider one more thing, using JavaScript or pure CSS technology. For the two choices, see the Resources section for more information.

　　When to use a Single-page Web site, when not?

Although there are a lot of benefits to a single page site, they are not the perfect full size adaptation scheme. While a single page site is more reasonable than a multi-page site, there are many times when a single-page design should not be used.

In short, if your site has only a few pages, a Single-page site may be the best choice. By concentrating everything on one page, you can make the site as a whole a more modern look, and if the content is streamlined, a single-page site can make it look richer.

Another common case of a single-page Web site is the release of a preview page. They are usually a single-page Web site with a registration form for news messages. In most cases, public-oriented information during the release of a preview is easily organized on a single page, so it is reasonable to prioritize this style when designing these pages.

　　Clientsy

Products of a single electronic business site, but also a single page site performance of outstanding areas. If you sell only one product, whether it's physical or virtual, why bother using multiple pages? A simple single-page site is a better sales tool.

　　Franzsans

Maybe you think the more complicated the electric dealer website is not suitable for a single page site, but it still works. Of course, there are more than 10 kinds of products in the Web site I will avoid the use, but the single page is enough to support a simple online store, through the pop-up window to host product details and payment process.

　　Simplygum

It is clear that a single page site should not be used: a site that is large, complex, or that must hold vast amounts of information is not suitable for a single page site. In these cases, it is wiser to use a relatively traditional site structure.

　　Hybrid web-site

Although there are a large number of single-page sites exist, there are also many hybrid sites. They give the impression of being a single-page Web site, but with Ajax, pop-ups, and similar techniques, they actually contain multiple pages of content.

Website Dang & Blast is an excellent example of this.

　　Dangblast

This would be a good solution if you can't get everything into a single page completely.

When it comes to single-page sites, some sites use some kind of "tricky" approach. Their main station is a single-page Web site, but there is also a blog under other domain names (sometimes Tumblr or hosted on a wordpress.com site). This is no problem, it can highlight the main station information, do not have to abandon the benefits of blogging.

　　Perfect practice for Single-page Web sites

Most of the principles of good design, in a single page of the site still applies, in fact, also applies to any website design. There are some additional things to keep in mind, some of which have been mentioned before.

　　Keep it simple

Design is too complicated for what you're trying to do, and it's not good for you or your users. Instead, simplify the design and content as much as possible and express the information you want.

　　Petertoth

　　Navigation links are still helpful.

Just because users can scroll to browse your site doesn't mean it's the friendliest way. This is especially true if your site is very long and has many parts. Unless you have a good reason, you should add a link to a specific section to make your site friendlier.

　　Fraudforcesummit

　　Split content

　　Split content

A single page does not represent an entire lengthy section. In fact, it shouldn't be so. By dividing the content logically into chunks, users are more likely to find what they need.

　　Ritchiejacobs

　　Let all the backgrounds make a difference

A single page site often has a large background. Of course, sometimes these backgrounds are simple, or with tiled textures, but there are single page sites that use all the space to sway ideas. As mentioned earlier, this also helps to divide the content. The background is not necessarily a single picture. Can be a series of pictures, if this is more consistent with the content.

　　Johnjacob

　　Resources for one-page Web site

The resources of a single page Web site are hundreds of thousands, including templates; we focus here on a few outstanding performance.

　　purecssparallax scrolling : Keith Clark's article explains how to create a visual difference scrolling effect with pure CSS. This is a good choice if you don't want to use JavaScript (or not).

　　Skrollr : "The visual difference for the remainder to roll". This is a unique library for mobile and desktop applications. jquery is not required, only native JavaScript.

　　stellar.js : Stellar.js is another easy-to-use visual difference Scrolling library. It offers a lot of setup options and iOS support.

　　One page Website wireframes : If you're unsure how to build your site, this single-page site wireframe set is a good starting point. Free download. Here (Graphicburger) There is a second episode available for download.

　　 one page love: A page love is a first-page collection of Web sites with more than 5,000 Web sites and has been updated. They also featured a large number of templates and other resources.

　　start Bootstrap : Start Bootstrap integrates a mass of free single-page Web site Bootstrap themes. Topics are suitable for organizations, freelancers, collections, landing pages, and so on.

　　One page Love Templates : In addition to a rich collection of sites, one page Love also offers free and fee-based templates.

　　One page Mania : A page mania provides a unique collection of Web sites and templates for you to download or purchase.

　　Conclusion

Single-page design is a great choice for a variety of websites. Although they are not the only design options for small sites, it is worth considering for many projects. Think about the reasons for using a single page design, and then think about the reasons for not having to make a decision.