Home > Developer > Web Develop
This article was originally published in Awesomeblog.
I was chatting with an old client last week and she told me, "Nick, I think my site needs to be improved, but I'm not sure what I really need to do."
So I went to ask a lot of people around, friends, family and some non-internet-oriented business people. They all said the same thing:
"I need a checklist because I don't know how to build a website and I have to hire some people, but in the end I still don't know what to do." ”
So I made a list of what we did in the Awesomeweb (and, of course, some that haven't been done yet).
I can pack a ticket ...
...... If you meet every item in the list, you'll have a great site.
How can you be sure?
At Awesomeweb, I've watched over 1000 of the best freelancers in the world, and I haven't seen a website that meets every item on the list.
As an owner of a business, you take control of what happens after this list. You can give the task to a designer or developer, or you can do it yourself.
As a freelancer, you can refer to this list to do a better job and then go back and say to the previous customer: "I reviewed what we did before, and then found that we can adjust this, and this and this, you only have to pay 500, 1000, 5000 you can see the great effect ..."
In general, it is ...
...... I want to help you make a better website, starting with this list.
Use a professional logo. It's hard to find a beautifully designed logo on your website or blog, but it's the first step in building a good impression.
Upload a high resolution adaptation (Retina-ready) Favicon(The block icon on your browser tab). Most Web sites use 16x16 pixel Favicon, but on high-resolution screens they blur. You can generate a favicon of 64x64 pixels on the X-icon editor.
Use High-resolution images . At least make sure the picture is twice times the size of its container, and then zoom out to show it.
use a maximum of 2-3 colors . One of the background colors, one active color, one accent color.
When choosing a color, the preferred complementary or three primary colors (complementary or triad colors), and then adjust, a good color combination will give you a sense of the story of the design.
Reject Pure Black (#000). Pure black does not exist, so black looks like it's always not right. Most of the actual black is used in shaded areas as other colors.
reject neutral gray (e.g. #ccc) [However, I often use, embarrassed-]. If you want your design to have certain qualities, you can use light yellow to add warmth, red to provide energy, and blue to create trust.
Choose a quality font . 95% of a Web page is a word. Using a quality font is the easiest way to improve your impressions.
Use a maximum of 2-3 fonts . Too many fonts can appear cluttered and slow to load. Select a title font and paragraph font, and then a special example of the font.
Set the page body font size to 16px. It is difficult to read a smaller font size on a large monitor. The size of the mobile device is reduced to 12px.
Select a typographic scale to set the paragraph, h4,h3,h2,h1 the font size, according to the scale. Set your line height and text distance based on this scale.
Design other typographic elements such as references, unordered lists, ordered lists, headings, help tips, notifications, highlighted text, code examples, acronyms, and addresses.
Installs a custom icon font , such as font Awesome. Use it instead of a picture to do some social media, navigation buttons, and interactive graphics icons. icon fonts are loaded faster, arbitrarily scaled, and are free to change colors.
The basic layout uses a three-part method that divides your page horizontally into three parts and then arranges the key points according to the intersection of the segments.
Maintains a vertically-arranged raster system. Divide your layout into 8 columns, 12 columns, or 16 columns.
Maintains a vertical structure through a baseline grid . The space in the middle of the text line is actually as important as the space in the middle of the content block. Each line of text should have a baseline-based margin-bottom.
staying white is too extravagant, it is mainly used to create breathing space and maintain a visual balance. The reader's attention should be drawn to the most important place.
balance virtual elements such as buttons, input boxes, forms, headings, and so on. You should generally find a track that you want users to follow.
Use an enlarged, bold active button . Each page has a goal, which is usually done by clicking the button. So make sure that this button is not ignored
Add hover and active states to links, buttons, input boxes, and text fields. If you choose to make the button lighter in the hover state, then the other elements hover state should also be consistent.
Maintains the consistency of table Styles . All text fields and input boxes should be styled uniformly, with the same border colors, background color, hover status, click Status, prompt, click Text, and more. Set the TabIndex so that you can access the elements in turn by pressing TAB.
Change the colors of the visited links so that your users know they've been to these pages.
Once you have your own logo, color, typography, layout, and image size, you should create a set of style guides . A user-friendly interface can be built with a consistent style of components.
Add a micro-interaction to a button or other area. For example, an "upload" button can become "uploading" or "processing" after being clicked.
no scroll jacking! Do not change the default behavior of the browser, you may feel that the speed of the mouse wheel is twice times better than before, but you think that is not what you think.
Remove the carousel from the home page . This reduces the conversion, and there are other better ways to show more information in a small space.
do not use the Welcome page . When visitors visit your website for the first time, they prefer to see your homepage.
Use headings, subheadings, first paragraph (lead paragraphs), lists and captions to make your content easier to navigate. Most people are going to skim over a webpage before they read it carefully.
Add descriptive reserved text to all forms, input boxes, and drop-down menus. If you want others to be able to fill an area in some way, please tell them. For example, drop-down list and selection area, put the description in the first option. "Please select the year" is much better than "2016".
Add HTML5 validation [HTML5 validation]on the form so that users can be more aware that they are trying to submit a form that has the wrong one.
By avoiding blurred link names, reducing clutter, using punctuation, maintaining a concise layout, adding alt descriptions to images, using large text, and guaranteeing high contrast between text and background colors, you can make your site accessible to visually impaired people .
Use brokenlinkcheck.com to check your website for invalid links . To prevent people from hitting the broken link when they get mad or quickly fix it 233.
Make sure your site is Mobile-optimised and can be displayed on any device responsive. Good mobile-optimized sites load faster, rank higher, and give users a better experience.
Generate and display the best-sized images . If you upload a large picture to make a feature map of your blog, and you want to show it in the sidebar, you should be sure to show a zoomed-out image instead of the original.
add tags and titles to each picture and link . If for some reason a picture is not loaded, your site can display its label in the original location of the image. Similarly, when you hover over a link, the browser will show the title of the link.
Use <strong>and<em> replace<b>and<i>to define bold and italic text. Their effect is the same, but there are essentially differences.<b>is a style, but the<strong>meaning of the content is pointed out.
dispose of redundant HTML. When you copy and paste content into a visual editor (like WordPress's virtual view), it adds a lot of useless span and inline styles. This will make your website less readable.
Speaking of which, let's talk about it. To Remove inline styles , 99% should be done with a CSS file that updates all the component instances instead of a single page row.
Use the sass variable instead of CSS to maintain the consistency of colors and components in your site. When you want to change a color and the shadow of this color, the update line is perfect.
link with permalink instead of URL in case you change the domain name. For example, when you want to join a link, your HTML should be<a href = "/slug-goes-here">instead<a href = "http://domain.com/slug-goes/here">. The same is true for picture resources and CSS. If you do not, when you put the site under the new domain name, you link all the resources files and pages do not exist.
Develop custom plug-ins or use them on your website with tools that provide unique features. Custom software is difficult to maintain but offers a strong competitive edge over similar sites.
Test cross-browser compatibility to ensure that your site can be displayed properly in Chrome, Firefox, Safari,ie and other browsers. We all know that the low version of IE browser in the display site time difference of a [beep---], so you can use Browserstack to manually detect.
Use the tag verification service to discover the obvious errors in your HTML. You know, most websites don't use the right HTML perfectly. This is not the highest priority, but it would be comfortable if there were no errors on the page.
Create a simulation environment to show recent changes. Ideally there is a finished site for everyone to see, and there is a development site to make changes to the developer. Once the changes are ready to go online, the development site is pushed to the finished site.
Displays the current year in the footer's copyright . When you see a website using past copyright, you will assume that the page is no longer maintained. You can use PHP or a similar script to display the current year in static text (e.g.?<established year>?—?<current year>)
Select the keywords you want each page to be sorted by. Based on this keyword to optimize each part of the page, but not to put the keyword in each sentence, but the flexibility to show how you want it to sort.
Set the title element of the rich keyword for each page. In Google's search results, the title is displayed as a blue link within 55 characters.
Limit each page to have only one H1. In most cases, the content of the H1 should be the same as the content of the header element.
Use a lot of H2,h3 and H4 to create subheadings to make your page's content feel layered.
Optimize pages with a specific keyword that is included in the title, H1, subtitle, and top 1/3 content.
Your meta-description will be displayed in the description under link in the search results. Make sure you add a meta description to each page and include the keywords in the description
A fixed link (i.e. domain.com/permalink-here/) in the URL, after the domain name, should contain the keywords separated by dashes.
Google's algorithm considers the age of the domain name, because a domain name that has been registered for many years is more like a high-quality source. Register your domain for years ahead. Once your domain has been registered for 10 years, you can prove that you are serious about your career.
On average, the first result of any keyword SERP (search engine results page search engine results page) is a page that is more than 2000 words per page. If you want to build a well-ranked blog or page, try to keep at least 2000 words.
Wont use a sitemap.xml file to create a sitemap, and place the file in the root directory so it can be displayed on the domain.com/sitemap.xml. It will let Google know where all of your pages are located and should be updated automatically when you add new content. Submit files to Google via Webmaster tools.
Add Google Webmaster Toolsto your site so that you can see Google rankings for your site and maintain updates if dangerous situations occur.
In order to improve the picture, remember to rename the pictures and other files before uploading the site (e.g. promote rank. png based on this keyword).
Include a robots.txt file in your Web site to tell the web crawler which pages should index which ones should not be indexed.
Add a Typical redirect to the Web site without www access to the WWW version, and vice versa.
Re-search and consolidate potential semantic index (latent semantic indexing) words for each page to help improve the ranking of main keywords. Search for the potential semantic index words you need by searching your keywords and then selecting the relevant search.
Make sure that the links in the content that jump to each other are available. You should make sure that each page is accessed up to three clicks from the homepage.
Add structured data to the relevant pages so that Google can try to index your content. The types of pages that need to customize structured data are people, products, time, organization, movies, books, reviews, etc. You can use schema creator to generate structured data.
Using Google's pagespeed Insights to make sure that you solve the problem that often affects page speed. The faster the page loads, the higher the ranking will be.
Keep pages smaller than 2MB. Use tools.pingdom.com to check your primary login page. No matter how much more than 2MB.
Keep page requests less than. Each file or picture brings an HTTP request with fewer requests and a faster page load. Each page has an average of 70 requests, using Gtmetrix to view specific requests.
Use CSS instead of background images to design the page. Never use a picture to make buttons, tables, or other basic components in a Web page. CSS is faster to load and more flexible in responsive layouts.
optimize them before the site loads the pictures. To tinypng This tool, you can reduce the size of the picture file 80%-95% and ensure that it is not distorted.
Build a content distribution network to distribute pictures and some large files in different locations around the world. CDNs can intelligently select local servers based on the visitor's physical location to achieve maximum loading speed.
Use the compile and compress tool to narrow the javascript,html and CSS files before uploading. JavaScript can use closure Compiler. HTML can use HTML Minifier. The CSS can use Yui Compressor.
move the blocking rendered JavaScript to the footer . Scripts that affect page design only in the first place should be placed in the header (e.g. custom fonts).
Avoid login page redirection. Redirection triggers an additional HTTP request to delay page rendering.
Reduce Browser caching by setting a valid period for pages that are not updated frequently. The browser cache tells the browser to download a good page before loading the local disk instead of loading it over the network.
gzip compression is allowed in the server configuration. Compression reduces the transmission response time by 90% when the page is rendered for the first time.
Allowing long connections in server settings allows the same TCP connection to send and receive multiple sets of HTTP requests, thereby reducing the latency of subsequent requests.
Upgrade to a dedicated server or add additional servers to increase server response time. When you use a shared hosting environment, your site is only a trivial part of the same server. If other sites have a lot of overhead causing congestion, it will slow down your page.
Design a custom e-book cover . This is a thing that is not complicated but can bring a lot of conversion rate.
Design a custom plot for the homepage and the sales page. A good illustration can be a simple way to get someone to recognize your site and impress.
Create one or a series of custom blog feature images . It is used to display on facebook,twitter,pinterest and other platforms. When the user sees a certain type of image associated with the post, they know that this is your article.
Show you and your team members personalized illustrations and cartoon avatars . Compared to hiring a professional photographer every time a new member joins, a personalized comic picture is a cheaper option. Besides, this is a great gift for the new members.
Using Custom charts is more intuitive than using blogs to show data and some other content to get more traffic. People like to share charts on Pinterest sites or forward them on their own sites and bring a link to your site.
If you do a video or a series of videos, you should have a custom title trailer to give it a more professional feel. And not mentioning other video images and animations will make your brand more prominent.
Install an SSL certificate to ensure that the Web server initiates a secure connection to the browser. When you accept a credit card, most of the verification software requires an SSL certificate. Google has mentioned that an SSL certificate can improve your search rankings.
Ensure that your software and plugins are updated . When WordPress and other CMS software releases updates, it is usually a bug fix. If you don't have an update, it's only a matter of time before your site is attacked.
Set up a two-factor authentication login portal on the Administration page. Most attacks start at the login page.
Check for and remove malicious software . If your site has been attacked before, then they are likely to join the infected files that are not easily discoverable. If you do not remove it in time, your site may be blacklisted by Google, reducing the rankings and receiving a warning when users visit.
Never set your administrator name to "admin". Delete the default administrator account and create a new account with a different user name.
back up your database and Web site files regularly. Most backup software and plugins usually only back up the data and content in your database. However, once you have lost your site, you may need a backup of the site files to restore it.
Define a personalized 404 error page that will be displayed whenever a user wants to access a page that does not exist. Use 404 pages to guide them back to the homepage or help them find where they are searching.
In addition to the homepage, the Aboutpage is probably the most visited page in the site. So make sure it shows you and your company a good image.
The contact page helps people reach you, and can also play a role in building trust between you, visitors, and Google. When deciding to improve your site rankings, bots will go to your contact page to search for mailboxes, phones and addresses. Contact can make Google feel more credible about this site.
It's good to has opt-in forms strategically sprinkled throughout your site, but it's also smart to has a squeeze pag E with nothing but a high-converting opt-in. When you want someone to subscribe, link to that page. [Seek guidance]
When someone subscribes to your list, you should send them a confirmation page that allows them to confirm the email message. Otherwise, if they don't give the right email, then he might forget your site and never remember it again.
After the user clicks on the confirmation link, show them a thank you page , and they'll know what to do next. Each subscriber sees this page and sees it only once, so it's a great opportunity to build a deal with them or encourage them to buy.
When a user takes certain actions, the site should display a login page template.
If you want to sell something, first make sure you have a good-looking sales page . Start with a headline and leave enough space for the sales module, or add a sales video. Then instruct the user to make a purchase at the bottom of the page.
Limit the number of social media buttons in blogs and pages, because each button runs a script, so the page adds extra load time. Keep only 1-5 buttons, such as facebook,twitter,linkedin,pinterest,google+, which are often used to share content.
Create social media images for your Facebook page, Twitter account, and YouTube channel. Custom images can be instantly accessible to first-time visitors like, follow, subscribing to your page.
Set up Facebook's open graphics meta tag to make sure your content is shared correctly on Facebook. Use Facebook Debugger to check how the page is displayed when someone shares the URL of your page, blog, and so on.
Set up Twitter Cardsto allow rich images and videos to be bundled on your microblog when the URL of the site is shared.
Set up Google + Snippets to customize the style you share on your Google + website. Use snippet Guide to generate code. Even if your site doesn't get a lot of Google + favorites, Google will have some promotion because you've added meta data correctly.
hide the social media icons that link to your profile in your site, and you can set them smaller or put them in footer. The goal of social media marketing is to direct users to your site, not anything else.
101 Ways to make your site a great one
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
