In this articleArticleWe will examine the content of the dung Beatles website to understand what elements need to be included in a good web site and webpage.
You do not need to study the basics of websites and webpagesCodeInstead, you only need to examine different web pages, think about what elements should be included, and think about some key issues, such as consistency, availability, and accessibility. The contents of this article are as follows:
Many people tend to think that "it is logical to let us start from the page-homepage accessed by most users first ?"
This sounds logical, but it is not. Focusing too much on the homepage is a common mistake. The home page of a website is often a hodgedge, trying to summarize all the content of the website.
Let's look at an instance of this type of homepage, that isMsn website homepage(See figure 1 ). This home page lists too many content and links, from travel to TV, from dating to guidance, from small accessories to green products, which are very complex and try to attract your attention.
Figure 1: too many links are listed on the homepage of the msn website!
This "put everything you want on the top" home page may be suitable for those large websites. However, if this is the same for our band website, it is undoubtedly inappropriate, this will lead to the loss of many users that can be attracted.
Another common misunderstanding is that the home page must be the first page seen by people who visit the website. If visitors have learned about the website of the band, or see the website of the band from advertising leaflets, posters, or badges, and then type the website of the band in the browser, the first thing you can see is the homepage of the website.
However, it is more likely that website visitors visit the website based on search results. If they search for the name of a band, it is very likely (but not necessarily) that the top search result is the homepage of the band website. However, in other cases, for example, when they search for "imitating the concert of the Beatles band", the first search result may be the "tour date" webpage; for example, when they search for "the music team in mojojo", the first search result may be the "about TDB band" webpage, this is because the webpage mentioned that the band came from mojojo, which is not mentioned on the homepage.
The New York Times website mentioned in an article about the decision to stop charging users for accessing old content that its visitor behavior has almost changed, what changes have taken place? In this article, I wrote:
What does this mean for our website?... More and more readers visit our website through the search engine and links on other websites, instead of directly accessing nytimes.com. Readers who access the website in this indirect way will not be able to access the articles that require payment. They are less likely to be willing to pay the license fee than those loyal users who directly access the website. Canceling the charges for accessing old content is an opportunity for users to access more web pages and increase website advertising revenue.
This means you need to split the content and place it in a single webpage. You should think about how Website Visitors will find the content and information they are actually looking for, or what the next webpage they want to visit once they start roaming the website.
Although many people try to put too much content on the home page, it is actually better to use the home page as a page to highlight the content of other webpages on the website and direct access to these webpages. Process the home page as other pages of the website and give it a definite purpose (that is, display updates, provide a website overview, only briefly introduce the band, and allow visitors to continue accessing other pages, and so on ). The home page also needs a navigation bar pointing to other pages and displaying the website brand.
Next we will learn more about this content.
Navigation
How to navigate a website is one of the most critical factors in website design (or even the most critical ). You should confirm the main column page of the website and display it in the main navigation bar.
There is also a common misconception about website navigation (You may have heard of it), that is, to prevent visitors from clicking more than three times when obtaining information. The spread of such misconceptions has led to the worst and most complex navigation on some websites. As an example, you can check out a lot of shopping or price comparison websites. They always tend to place as many links as possible on the page to try to minimize the number of clicks before buying anything, to prevent them from leaving and accessing their competitor's website. However, this approach may result in the fact that too much information is listed, which prevents users from effectively obtaining and using such information. Too many choices are the same as too few.
In fact, as long as a clear path from a link to the next page shows that the user is leading to the final page, the user will continue to visit the website in depth.
Based on the information architecture described in the previous article, the main navigation bar of the TDB band website should include links to the following parts/pages, the "Store" page, and "about (about us) "page," Contact "page," the music "page, and" band News "page, and a "back to homepage" link does not need to include links to pages such as "tour dates (tour date)" and "lyrics (lyrics. The links to these pages should only be placed in the corresponding webpage. That is to say, any visitor who needs to jump directly from a certain lyrics page to the "tour dates (tour date)" page, you can navigate to the "band News" page and then go to the "tour dates (tour date)" page.
To create a successful website navigation bar, the most critical aspect is "consistency ". See the page shown in Figure 2 below. Some links are displayed in the navigation bar at the top of the page, such as "Home (Main Page)", "articles", "forums (ForUM). On other pages of the dev. Opera site, the navigation bar is the same. Navigation points to the location where you are currently on the website, and provides a link to the specific content in this topic. For example, clicking the "articles" tab on the navigation bar will take you to the homepage of the "articles" section, which contains links to recent articles, and a series of links to sub-topics such as "accessibility (Accessibility)", "CSS", and "mobile devices" (see Figure 2 ).
Figure 2: The navigation bar of the dev.opera.com Maintains consistency across all pages of the website.
Other common elements on the website
In addition to the navigation bar, there are usually other general elements to be displayed on each page of the website.
Most websites have brand images, website identifiers, or headers that indicate ownership. For example, Yahoo! Almost every page in a website has a website ID in the upper-left corner of the page, which is appended with the name of the project to which the page you are visiting belongs, such as "Travel) "," Movies "," autos ", and so on.
The header section on the top of the page (across the top of the page) can not only contain the website ID, but also include or attach to the main navigation bar. In addition, the search box is not uncommon, which allows users to directly search the content and information of the website without navigation by using menus and links. You should include all or most of these general elements on every page of your website.
The footer section (the bottom part of the page) should contain additional information, such as copyright notice, and point to useful secondary pages (such as "about this site (about this site) "," Terms & Conditions (Terms and Conditions of Use) "," Contact Us ", and so on.
Color, page layout, use of images and icons, layout settings, and images create an overall image of a web page as an integral part of the website. "consistency" is the key here. Keeping the appearance and layout of webpages consistent helps maintain the unity of the website and create a sense of familiarity. In this way, you will know that the page you are visiting is related to the web page of the previously visited website, which is an integral part of the website, because the visual images displayed on these pages are interrelated. When designing a website, remember this and do not make the pages on the website look different.
On our TDB band website, the top title of the page will include the band's logo and name to enhance the recognition of the band, so that when they access each page, they all realized that they were reading information about the band. The footer part includes the copyright information of the website and its lyrics, images, and auditions, as well as links to pages such as "Contact Us" and "book concert tickets.
Context is very important
Every page, although containing all these general elements, should be unique in itself. A good web page should effectively perform one or a few specialized functions.
Related content
To make a very good web page, a key factor is to separate the content and make them relevant to each other. The content must be placed on different pages (these pages have different URL addresses), and must be logically associated (both on the website and on the page ), in this way, it is easy to find.
Take the concert information that the band will hold as an example. Although a "concert to be held" module can be placed on each page, the information should still be placed on an independent page. A simple module that links to the "next concert" module on the "tour date" page can also effectively promote this information, instead of copying information everywhere (this may confuse users and search engines ).
Title
Next time you read the newspaper, take a closer look at the newspaper content and layout design. Note that some reports are longer in length, with highlighted fonts and images, and the title is more eye-catching. The purpose of this is to immediately discover the major news if you only want to know about the major news.
This principle applies to web pages. Each part of a page should have a title to show the relative importance of this part of content in the page (this part of content belongs to the previous part, or is it equally important ?)
For example, in this article, there are two sections entitled "related content" and "title", both under the title "context relationship, show that they are all subtitles under the big title.
Availability
Availability means that a website can be used by users in a reasonable way as expected.
Consider the following situations: when you read a news article on your previous news portal, you must register with this website before reading it; when you book a plane ticket or train ticket online, it also takes two minutes to explain your itinerary to the ticket booking staff by phone. When you enter an email address or credit card number, the website only tells you that the entered format is incorrect; there are no useful entries in the returned search results, or a website does not have a search tool on its first page.
The above are examples of poor website availability, which is due to the absence of considerations for the needs of website users. When you build and design a website, if you put the Website user's needs in the central position, it is very likely to create a good website that satisfies the user's satisfaction.
Creating a website with good availability is not an easy task. Much of this knowledge can only be attributed to experience. You can write down the poor availability of other websites to avoid repeating the same mistakes. The best way to test website availability is to observe the user experience. Once you create a website, observe the user experience from the following aspects:
Professional companies charge a lot for the website availability tests they undertake, but you can choose informal testing, for example, if you want your friends and family to tell you how they use the website you have created, this will also help you better understand the problems of some websites you have not noticed. This is the so-called "fans of the Board.
AccessibilityThe most common misunderstanding of website accessibility is to understand it as "allowing blind people to access the website". In fact, accessibility is a problem that affects more people.
The term "auxiliary technology" is used to describe any auxiliary device or hardware that helps people interact more effectively with the computer they use. You may immediately think of screen readers for blind people, or voice input devices for people without the mouse or keyboard. But what about glasses? In fact, for people with myopia, glasses are also an auxiliary technology, but most of them do not think they are disabled.
Realizing many problems that users may face when using the Internet, it is very important to make a good web page. Do not assume that many assumptions are made. For example, if a Website user has a mouse, you will be able to see the images you are using, and Flash players will be installed.
When considering the accessibility of a website, consider other users, such as those who use mobile phones, in addition to those who need "auxiliary technologies. Currently, mobile phones do not support flash well (even if Flash is available). For example, Apple's iPhone does not support flash (which may not be available in the future ), in other aspects, browsing web pages with the iPhone is similar to browsing web pages with the Safari browser on the Apple Computer (and the opera mobile browser does not support flash ). Some new technologies, such as the opeara mini mobile browser, can rewrite web pages for low-power mobile phones on the Internet to make the web page smaller. For most users, the images on the web page will be displayed much smaller in the mobile browser, which means that users may not be able to obtain any content on the web page that relies on subtle details.
In the example of our band website, you should realize that if you use a lot of images (band photos), you must describe the image content. If you use a flash music player on the page to enable people to hear the band's songs, you should also create a link directly pointing to the song, so that those who have not installed flash players can hear these songs in the way they choose.
Summary
In this article, I describe some important concepts that you need to keep in mind when creating a web page, so that the web page can be accessed by more people for better availability, and can run more smoothly. In future courses, We will detail all the important concepts mentioned in this article.
Exercise questions
Mark Norman Francis has been engaged in the Internet field since the birth of the World Wide Web, and has continued until now. He is currently the world's largest website, Yahoo! Front-end designers are responsible for developing the best habits, code standards and quality standards for web development.
Join Yahoo! He has worked at Formula One Management (F-1 management), purple interactive (purple interactive company), and City University of London, it includes web development, backend CGI programming, and system architecture. His blog address is http://marknormanfrancis.com /.
Address: http://kb.operachina.com/node/22
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
