Tips to make your website cool

101 Ways to Make Your Website More Awesome

The Nuggets translation Project

Translator: Da Zai

Proofreader: Jamweak, Cyseria

Last week, I was talking to an old client and she said, “Nick, I think my website needs work, but I’m not sure exactly what I need to do.”

Then I went around and asked friends, family, and other business people outside of the Internet, and they all said the same thing:

“I need a checklist because I don’t know how to build a site, which is why I hire someone to do it. But I still need to know what’s involved.”

So I’ve made a list of optimizations we’ve done on AwesomeWeb (and some we haven’t done yet).

I can assure you:

If you can correct every item on the list, you will have one of the best websites in the industry.

How do you know that?

I’ve evaluated over 1,000 freelancers on AwesomeWeb. To the best of my knowledge, I’ve never seen a site where all the boxes are checked.

For business owners, you can use this list to see what improvements can be made next and send it to your design or development team for revision. You can even fix some of them yourself.

For freelancers, using this list allows you to create cool content and then go back to your regular clients and say,

“I reviewed the previous project, we can fix here, here and here, give me $1,000, $5,000 and you can expect the following improvements…”

The point is…

… I hope I can help you build a cooler website. Without further ado, let’s get down to business and introduce this list:

Cool brand

Pick aProfessional logoIt’s hard to find a website or blog with a great logo these days, so this is a great way to gain instant trust.
Upload aFavicon for Retina screen support(a small square icon that appears on the browser TAB). Favicons on most sites are 16×16 pixels, which can be blurry on a Retina screen. useX-Icon EditorGenerates a favicon of 64×64 pixels.
useSupports images for Retina display. This is easy, just make sure the image is twice the width and height of the container, and then zoom when displayed.
Use 2-3 colors at most. This includes background colors, text-action colors, and accent colors.
Choose a color palette fromComplementary or tricolorComplementary or triad Colors start with a complementary or triad colors selection and then adjust. Good color combinations will give you a story-filled design.
Don't use pure black(# 000000). Pure black doesn’t exist, so using it online seems inappropriate. In fact, black should always be used as a dark shadow of other colors.
Don't use light gray(e.g. # CCCCCC). If you want to make your design more personal, try adding a touch of yellow for warmth, red for energy, and blue for trust.

Cool typography

Choose a kind ofGood fonts. useTypekitOr something like that. It is said that as many as 95% of websites are typographical, and using a good font is the easiest and cheapest way to make a good first impression.
Use 2-3 fonts at most. Using more fonts is messy and slows down the load time. Choose one font for headers, one for paragraphs, and, if necessary, one for other special situations.
Set the body font size toA minimum of 16 px, smaller fonts are not easy to read on a large screen, and the minimum you can consider for mobile pages is 12px.
Set up theLayout scaling“, like an augmented fourth, a pure fifth, or the golden ratio. Set paragraph text size to scale, and H4, H3, H2, and H1 tags. Of course, the line height and spacing of the text should also be based on this ratio.
Design othersTypography element, including references, symbol lists, numbered lists, table titles, help text, warning boxes, highlighted text, code examples, abbreviations, and even addresses.
Choose aCustom icon font, such asFont Awesome”In place of images and other elements such as social media logos, navigation buttons, interactive graphics, etc. Icon fonts load faster, can be arbitrarily scaled, and icon colors can be changed at will.

Cool layout

useThe rule of thirdsTo design the basic layout. Divide the layout horizontally and vertically into thirds, then try to align key focal points when line segments cross.
Use a grid system for maintenanceVertical grid. Divide your layout into 8 -, 12 -, or 16-column layouts with enough white space between the columns.
useBaseline gridMaintain a sense of vertical harmony. The space between lines of text is just as important as the space between blocks of content. Each line of text should have a margin at the bottom, where the baseline is.
blankIt’s a luxury. Space is there to create breathing space and balance, and you should draw the reader’s eye to where it matters.
Balance out visual elementsSuch as buttons, input fields, forms, and headings. You should squint your eyes and try to track the waypoints you want your users to focus on.

Cool user interface

Use big bold onesAction button. There should be only one target per page, and it’s almost always a button click. So make sure the button is not ignored by the user.
addHover and mouse click (active) statusFor links, buttons, input fields, and text areas. If you choose to lighten your buttons when hovering over them, you should do the same for links and input box borders.
keepThe form styleThe consistency of. All text areas and input fields should have the same style. Includes the same border color, background color, hover state, click state, placeholder text, click state text, and so on. Make sure the tabIndex property is set correctly so that the user can use the TAB key to switch between form items in the correct order.
changeLinks that have already been clickedTo let the user know that they have already been to that page.
Once you have your logo, color, typography, layout, and image size, create oneStyle guide. A good user interface should use consistent components that are always the same in style.

Cool user experience

Used for buttons and other form field elementsMicrointeractions. For example, after clicking the upload button, the prompt text can change to “uploading” or “processing.”
Do not use Scroll jackingRedefining the scrolling speed and amplitude of the mouse to control the visual effect of the visible area! Don’t mess with your browser’s default behavior, and while you might think it’s nice to scroll twice as fast, it’s not.
Abandon the use of home page rotation. As rotation reduces conversion rates, better ways to display more information in limited space can be considered.
Don't use the welcome screen. When users open the home page for the first time, they expect to see the content on the home page.
useHeadings, subheadings, header paragraphs, lists, table headingsMake your content more searchable. Most people search the full text of a web page before deciding whether to read it or not.
addDescriptive placeholder textGo to your forms, input fields, and drop-down menus. If you want your visitor to fill out a form in a certain way, you should show him how to do it. For drop-down menus and selection boxes, make the first option a description. For example, “Select year” is more appropriate than “2016”.
Add to formHTML 5 validation, so that users can clearly know which parts of the form are filled in incorrectly when submitting the form.
Keep your site simple by avoiding ambiguous link names, reducing typography clutter, using punctuation, keeping your layout simple, adding Alt text, using large font size, and maintaining high contrast between text and background colorsIt is suitable for people with visual impairment.
throughBrokenLinkCheck.comCheck if your site has itBroken link. Fix these broken links so users don’t get mad when they click on them.

Cool development

Make sure your site is throughMobile optimizationThat is, it can be displayed responsively on any device. Optimized mobile sites that load faster, rank higher, and provide a better user experience.
To generate andDisplays an optimized image. If you upload a large image, such as a feature image from a blog post, make sure you show a thumbnail of the image in the sidebar instead of the original if you want to display it elsewhere on your site (such as a sidebar).
Add Alt and title attributes to all images and hyperlinks. When an image does not load properly, the site should display Alt text at the image’s location. Also, when you hover over a link, the browser should display the value of the title property for that link.
use 和 Label instead of and To output bold and italic characters. Although their functions are the same, there are fundamental differences.The tag corresponds to a style, andA tag is a semantic representation of how to interpret the meaning of the tag.
Remove excess HTML. When you copy and paste content into a WYSIWYG editor (a WordPress editor), it adds a lot of unnecessary SPAN tags and inline styles. Over time, your site code becomes unreadable.
Having said that, you need to give your HTMLRemove inline styles. 99% of style rules should be written into CSS files so that you can update a component’s style on all pages at the same time.
useSass variableReplace native CSS to keep colors and other components shared across the site. That way, when you want to change the color, you only have to change one line of code instead of hundreds.
Links use permalinks instead of full urls. When you want to switch domain names, your links are best usedInstead of full pathDomain.com/slug-goes-h…”>. For some image resources and CSS backgrounds, if you don’t do this, all your resources will be invalidated when the domain name changes.
To develop aCustom plug-inOr tools that provide unique features for your site. Custom software can be difficult to maintain, but doing so can make your site stand out from the crowd.
testCross-browser compatibilityMake sure your site displays properly in Chrome, Firefox, Safari, Internet Explorer and other browsers. Although older versions of IE are notorious for compatibility, they can passBrowserStackConduct manual inspection.
useThe W3C Markup Validation ServiceTo check for obvious errors in HTML. Keep in mind that the HTML for most sites is not perfect. While this check isn’t the highest priority, you’ll be happier if your HTML is error-free.
Set aSimulation environmentUse to change your current site. Ideally, you should have a production environment where users can see it; And a mock environment for developers to make changes. Once the changes are ready for release, you can deploy the code from the mock environment to production.
Displays the current year on the page. When you see a site whose copyright is not up to date, you think the site has not been maintained for a long time. You can use PHP or a similar scripting language to display the current year dynamically, rather than just static text. (such as © -).

Cool search engine optimization

Choose a keyword for each page, this keyword is related to your page rank. Optimize every aspect of the page around this keyword. Of course, you don’t have to mention the word in every sentence, but think about where you want it to rank.
Give each page a keyword filledThe title tag. The title appears on the blue link text in Google’s search results and is limited to 55 characters in length.
Each pageThere is one and only one H1 tag. In most cases, this tag should have the same text as the title tag.
Include a lot in the page contentH2, H3, and H4 tagsTo create subheadings and visual hierarchy.
With aSpecific keywordsOptimize the page by including it in the title, H1, subtitle, and first 1/3 of the content.
yourDescription of meta tagsIt will appear below the link in the search engine. So make sure you include meta description on every page, and make sure you include keywords in the description.
yourPermalink, the part of the URL that follows the domain name (such as domain.com/permalink-here/), should contain keyword content separated by dashes.
The GoogleDuration of domain name registrationTaking into account the algorithm, they argue that domains that take longer to register are more likely to provide high-quality resources. Register your domain name in advance. If your domain name has been registered for more than 10 years, trust that you are serious about your business.
On average, the first result of a SERP (search engine results page) opens no fewer pages than any keyword2000 words per page. When writing articles or creating pages, if you want to rank higher, try to write at least 2000 words.
alwaysCreating a site mapName it sitemap.xml, put it in the root directory, and make the file accessible at domain.com/sitemap.xml. This file tells Google where all your pages are and should update the map when adding new content. Can be achieved byWebmaster ToolsSubmit to Google.
Add your website’sGoogle Webmaster Tools“, then you can see how Google indexes your site and keeps it up to date when it encounters critical issues.
In order to improve the ranking of images, it should always be before uploadingRename your imageAnd other documents. (e.g. Rank_for_this_keyword_phrase.png)
Contained in the siterobots.txtFile that tells the crawler which pages should/should not be indexed.
addCanonical redirectRedirect the non-WWW page to the WWW version of the site, or vice versa.
Research and integrate each pageLSI keywords(LSI: Latent semantic index) to help improve the ranking of pages in the main keywords. A Google search for keyword phrases and the “Related Search” link will help you find LSI keywords.
Always make sureYour content can be connected to each other. Every page of your site should be accessible with no more than three clicks from the home page.
addStructured dataGo to relevant pages to help Google index your content properly. The following types of pages require structured data: people, products, events, companies, movies, books, newspaper reviews, and so on. useSchema CreatorCan help you generate structured data.
useGoogle’s PageSpeed InsightsTools to make sure you fix any common problems that can slow down pages. The faster the page loads, the higher the ranking.

Cool web speed

keepThe page traffic is less than 2MB. usetools.pingdom.comCheck the load traffic of the main page. If it is more than 2MB, it indicates that there is too much content.
keepFewer than 50 page requests. Each file and image on a page is an HTTP request, and the fewer the requests, the faster the load. The average number of requests per page is 70. useGTmetrixCheck the number of page requests you have.
When designing page elements, useCSS instead of background images. Do not use images to display buttons, forms, or other generic elements. CSS loads faster and is more flexible in responsive layouts.
Before the image is uploadedTo optimize the image. Such asTinyPNGThis tool can help you reduce image file size without reducing resolution or image quality.
useContent Delivery NetworkTo store your pictures and other large files in different parts of the world. CDN can maximize page speed by strategically locating servers to store and distribute your files, although loading speeds vary depending on the location of the visitor.
Before uploading your code files to the server, use the compilation and compression tools,Minimize JavaScript, HTML, and CSS. For JavaScript, you can useClosure Compiler. For HTML, you can useHTML Minifier. For CSS, it can be usedYUI Compressor.
theJavaScript blocking rendering moves to the bottom. The only scripts that should be in the header are those that immediately affect the design of the page (e.g., custom fonts).
Avoid target page redirection. Redirects trigger additional HTTP requests that delay page rendering.
With the help ofBrowser cacheYou can do this by setting expiration times for pages and resources that are not updated frequently. The browser cache notifies the browser to load previously downloaded pages from local disk to reduce unnecessary network requests.
Enabled in the server configurationGzip compression. Compression can reduce transport response time by up to 90%, greatly reducing the time to render a page for the first time.
Enabled in the server configurationKeep-AliveTo allow the same TCP link to send and receive multiple HTTP requests, thereby reducing latency for later requests.
Upgrade toDedicated serverOr better hosting services to reduce server response times. When you use a shared server environment, your site is usually hosted on a server that needs to respond to at least a hundred sites at once, and your site speed will naturally slow down if there is a lot of traffic from other sites.

Cool graphic design

As an optional bonus, useCustomize ebook covers. It’s not hard to create, but it can dramatically increase your conversion rate.
Design one for your home page and sales pageCustom plane graphics or illustrations. A good illustration designed specifically for your site can make your site more memorable.
Create one or a series of customizationsBlog feature image design. These are the images you use to spread the word on Facebook, Twitter, Pinterest, etc. When users see a certain type of image associated with a blog, they will think that you might have written the post.
Display a custom one for yourself and each member of your teamHead illustrations or cartoons. Custom comics are cheaper than hiring a professional photographer, especially if you add new members to your team. Plus, it’s a great gift for a new member.
Custom chartDisplaying data and other content in a visual way can get more traffic than similar blog posts. People are more likely to share graphs on sites like Pinterest, or take a backlink to your site and forward it to their own site.
If you create a video or even a series of videos, you should have oneCustom video opening and/or closing sectionsLet everyone feel that the video is professional. Don’t mention other videos or animations that will help your brand stand out.

Cool Web security

The installationSSL certificateTo allow a secure connection between the server and the browser. If the site uses a card payment function, most detection software requires SSL certificates. Google says the use of SSL certificates can help improve the site’s search rankings.
The software and plug-ins you useKeep up to date. WordPress and other CMS software releases updates, often to fix bugs. If you don’t keep it up to date, it’s only a matter of time before your site is attacked.
Set for the administrator pageDual-authentication Login. Most hacks start with the landing page.
Check andRemove malware. If your site has ever been hacked, the hackers probably left behind some back doors that weren’t easy to find. If you don’t, your site may be blacklisted by Google, significantly lowering your ranking and warning users to leave when they open the site.
Don’t put theAdministrator accountReferred to as the “admin”. Delete the default administrator account and create a new account with a different name.
On a regular basisBack up database and website files. Most backup software and plug-ins only back up your database, which contains data and content. But if you lose the entire site, you’ll need a backup of the contents of the files to restore the site.

Cool content

Create a customError 404Page, which is displayed when the user tries to access a non-existent address. Use 404 pages to direct them to the front page and help them find the page they want.
In addition to the homepage,On the pageProbably the most frequently visited page. Make sure the page represents you and your company well.
Contact pageHelp users find you, but also build trust between you and your visitors and even Google. When ranking sites, the machine looks for your contact information and then finds your email address, phone number and address. Contact information tells Google that the site is a bit more trustworthy.
Strategically, it is right to have a fill-in form on your site, but build oneProspective customer collection page“Is also a good idea, except for a high conversion rate optional form to put nothing. When you want users to submit information, just link to that page.
When users subscribe to your list, make sure you can give them oneConfirmation pageSo they can confirm the email address. If users can’t verify that their email address is correct, they may forget about it and never come back to your site.
After clicking the confirmation link in your email, send the user oneThank you pageLet them know what they can do next. The page is visible to each subscriber only once, so it’s a great opportunity to encourage users to pay for content.
Your website or theme should have oneLanding pageTemplates, which you can use when you need the user to do something specific.
If you buy something on the website, make sure you have a nice oneThe sales page. Start with the headline; Leave enough space for your store; Make an introductory video if possible; At the bottom of the page, users are instructed how to buy.

Cool social media

On your articles and pages, limitNumber of social media buttonsBecause each button runs a script that adds extra page load time. It’s usually a good idea to have 1-5 buttons, such as Facebook, Twitter, LinkedIn, Pinterest, Google+, etc. These are the sites where your content is most likely to be shared.
Create it on your Facebook page, Twitter account, YouTube channelSocial media images. For first-time visitors, custom images can give them a good first impression and encourage them to like, follow and subscribe to your pages, profiles and channels.
Set up theFacebook Open Graph META tagTo make sure your content will display properly when shared to Facebook. You can useFacebook DebuggerCheck out your home page, articles, and other pages to see what urls look like when they’re shared.
Set up theTwitter Cards, so that when your site URL is shared to Twitter, a wealth of images and videos can be displayed on the card. To start usingTwitter CardscanClick here to
Set up theGoogle+ SnippetsFor custom users to share what they see when they visit Google+. You can useThe Snippet guideGenerate relevant code. Even if your site isn’t that popular on Google+, Google will know that you’ve added the right meta information, which will give you a weight bonus.
Weaken social media ICONS that link to your profile, you can make the icon smaller or put it at the bottom of the page. The goal of social media marketing is to drive users to your site, not the other way around.

Okay, is there anything I missed? As a freelancer or owner, have you used any of these methods to make your website cool?

I look forward to hearing from you. Leave a comment below or contact @wntart on Twitter.

If you want more people to see this list, you can recommend this article. Let’s make the website more cool together!

Come on! Nick

P.S. If you need help completing the list, find designers, developers, or post your help-wanted AD here. We have some of the best freelancers in the world who are more than happy to help you!

If you also want to join AwesomeWeb as a freelancer and meet more clients, you can click here to register.