101 Ways to Make Your Website More Awesome

So I asked around. Friends, family, other non-internet-y business folk. They all said the same thing:

“I need a checklist. I don’t know how to build a website. That’s why I need to hire someone. But I still want to know what’s involved.”

So I started making a list of everything we’ve done at AwesomeWeb and on Bundlify.

Here’s my promise…

…If you fix everything on this list, you’ll have the best website in your industry.

How do you know?

I’ve reviewed 1,000+ of the world’s best freelancers. As far as I know, I’ve never seen a site that can check every box.

As a freelancer, use this list to make everything you create more awesome. Go back to old clients and say:

“I was reviewing what we built and noticed that we can fix this, this, and this. I can do it for $500, $1000, $5000 and you can expect these results…”

The point is…

…I want to help you make the web more awesome. It starts here, with this list.

Awesome Website Checklist: 1-7

Branding and Colors

1. Get a professional logo. It’s rare to find a website or a blog with a great logo. So it’s a good way to build instant credibility.
2. Upload a retina-ready favicon (the square icon on your browser tab). Most sites have 16×16 pixel favicons. On retina screens, they’re blurry. Use X-Icon Editor to generate a 64×64 pixel favicon.
3. Always use retina-ready images. Make sure the image is twice as large as it’s container, then scale it down.
4. Use 2-3 colors max. You should have a background color, a call-to-action color, and an accent color.
5. When choosing a color palette, start with complementary or triad colors. Adjust from there. Good color combos give you a design that tells a story.
6. Never use true black (#000000). Pure black doesn’t exist so it looks out-of-place online. Black, in reality, is always a dark shade of another color.
7. Never use a neutral grey (e.g. #cccccc) if you want your design to have a personality. Add a tint of yellow to provide warmth, red to give energy, or blue to create trust.

Awesome Website Checklist: 8-13

Typography for Headings, Body Copy, and Icons

1. Pick a premium font. Use a service like Typekit. It’s been said that 95% of the web is typography. Going with a premium font is the easiest and most inexpensive way to make a good impression.
2. Use 2-3 fonts max. More is messy and slows load time. Choose a heading font and a paragraph font. One more if you want a font for special cases.
3. Set a body font size at 16px minimum. Anything smaller is difficult to read on large displays.
4. Choose a typographical scale like the augmented fourth, perfect fifth, or golden ratio. Use the scale to set font sizes for your paragraph text, H4, H3, H2, and H1. Base your line-heights and text margins on this scale.
5. Design other typographical elements like blockquotes, bulleted lists, numbered lists, captions, help text, alerts, highlighted text, code samples, abbreviations, and even addresses.
6. Create a custom icon font like Fontastic instead of using images for common elements like social media logos, navigation buttons, and interactive graphics. An icon font loads faster, scales endlessly, and gives you the freedom to change it’s color as you wish.

Awesome Website Checklist: 14-18

Balancing Layouts and Grids

1. Use the rule of thirds for a base layout. Divide your layout into thirds horizontally and vertically, then align key focus points where the lines intersect.
2. Maintain a vertical grid with a grid system. Break your interface into 8-, 12-, 16-column layouts with generous gutters between columns.
3. Keep a consistent vertical rhythm with a baseline grid. The space between lines of text is just as important as the space between content blocks. Every line of text should have a margin bottom that sits on the baseline.
4. White space is luxurious. It’s there to create breathing room and balance. Draw your readers’ eye to what’s most important.
5. Balance the visual elements of your site like the buttons, inputs, forms, headlines, etc. You should be able to blur your eyes and track the path that you want your users to take.

Awesome Website Checklist: 19-23

User Interface Design

1. Use big, bold call-to-action buttons. Every page should have one goal. It’s almost always to click a button. Make sure that button can’t be missed.
2. Add hover and active states to your links, buttons, inputs, and textareas. If you choose to lighten your buttons on hover, you should also lighten the links and the borders on your inputs.
3. Be consistent with form styling. All textareas and input fields should be styled the same. Same border colors, background colors, on hover, on active, placeholder text, active text, etc. And make sure the tabindex's are set up correctly so you can tab through them in the right order.
4. Change the color of visited links, to let the user know that they’ve been to that page before.
5. Once you have your logo, colors, typography, layout, and image sizes, establish a style guide. Good user interfaces are built with consistent components that are always styled the same.

Awesome Website Checklist: 24-32

User Experience Design

1. Add microinteractions to buttons and other fields. For instance, an “Upload” button should change to “Uploading” or “Processing” after it’s clicked.
2. No scroll jacking! Never mess with the default behavior of the browser. You might think it’s nice to scroll twice as fast as normal, but it’s not.
3. Get rid of your homepage slider. They decrease conversions and there are better ways to display more information in a small space.
4. Never use a welcome gate. When visiting your homepage for the first time, the user expects to see your homepage.
5. Use headlines, subheadlines, lead paragraphs, lists, and captions to make your content easily scannable. Most people who visit a webpage will scan it before they decide to read it.
6. Add descriptive placeholder text to all of your forms, inputs, and dropdowns. If you want someone to fill out a field in a certain way, tell them. For dropdown or select fields, make the first option descriptive. “Select Year” is better than “2016”.
7. Add HTML5 validation on your forms to make it clear when there’s an error in the form after a user tries to submit it.
8. Make your websites accessible for the visually impaired by avoiding vague link names, reducing clutter, using punctuation, keeping a simple layout, adding alt text to images, using larger text, and maintaining high contrast between text and background colors.
9. Check your site for broken links with BrokenLinkCheck.com. Fix broken links so people and search engines don’t get mad when they click them.

Awesome Website Checklist: 33-45

Web Development Best Practices

1. Make sure your site is mobile-optimized to display responsively on any device. Properly mobile-optimized sites load faster, rank higher, and give your users a better experience.
2. Generate and display the optimal image size. If you upload a large image, like a blog post feature image, and you want to display it in other places across the site—like the sidebar—make sure you display the thumbnail version of the image instead of the full-size image.
3. Add alt and title tags to all images and links. If for some reason an image isn’t loading, your site will display the alt text in its place. Also, when you hover over links, the browser displays the title tag for that link.
4. Use <strong> and <em> instead of <b> and <i> to bold and italicize text. They have the same effect, but they have a fundamental difference. <b> is a style. <strong> is an indication of how something should be understood.
5. Fix sloppy HTML. When you copy paste content into a WYSIWYG editor (like the visual view in WordPress), it adds unnecessary spans and inline styles. Over time, your site will become un-readable.
6. Speaking of which, remove inline styles from your HTML. 99% of the time, your styling rules should go into a CSS file so you can update all instances of a component at the same time instead of page-by-page, line-by-line.
7. Use Sass variables—instead of CSS—to keep colors and other components consistent across your site. Want to change a color and every shade of that color? Update one line instead of hundreds.
8. Link to permalinks not URLs in case you switch domains. For example, when linking to a certain page, your HTML should read, <a href=“/slug-goes-here”> instead of <a href=“http://domain.com/slug-goes-here”>. Same for image sources and CSS backgrounds. If you don’t do this and put the site on a new domain, all of your sources will link to pages and files that no longer exist.
9. Develop a custom plugin or tool to provide unique functionality to your site. Custom software is difficult to maintain but will give you a competitive advantage over similar sites.
10. Test for cross-browser compatibility by making sure your site displays properly in Chrome, Firefox, Safari, Internet Explorer, and other browsers. Older versions of IE are notoriously bad at displaying websites. Use BrowserStack and check manually.
11. Use W3C's Markup Validation Service to find glaring errors in your HTML. Keep in mind, most sites don’t have perfectly valid HTML. It’s not the top priority but will give you a good sense if there are any errors.
12. Set up a staging environment to make changes to your current website. Ideally you should have a production site—which everyone sees—and a staging site—where your developer makes changes. Once the changes are ready to go live, push the staging site to production.
13. Show current year in copyright footer. When you see a site with an old copyright, you assume that it’s no longer active. Use a PHP or similar script to display the current year instead of static text (e.g. © <established year> - <current year>).

Awesome Website Checklist: 46-63

Search Engine Optimization Best Practices

1. Choose one keyword phrase per page that you want that page to rank for. Focus on optimizing every aspect of that page for that keyword.
2. Set keyword-rich title tags on every page. The title displays as the blue link in Google search results. Limit to 55-characters.
3. Include one and only one H1 tag per page. In most cases, this will be the same as your title tag.
4. Include plenty of H2’s, H3’s, and H4’s within the content of your page to create subheadlines and visual hierarchy.
5. Optimize your page for a specific keyword by including it in the title, H1, subheadlines and in the first 1/3 of the content.
6. Your meta description displays in search results as the description under the link. Make sure you include it on every page and include the keyword phrase.
7. Your permalink, which is the URL after the domain (i.e. domain.com/permalink-here/), should include the keyword phrase separated by dashes.
8. Google considers domain age in it’s algorithm because a domain that’s registered for many years is likely to be a high-quality resource. Register your domain for several years in advance.
9. On average, the first result on the SERP (search engine results page) for any given keyword leads to a page with more than 2000 words per page. When writing a blog post or creating a page that you want to rank well, try to hit at least 2000 words.
10. Always create a sitemap as a sitemap.xml file and put it in your root directory so it displays on domain.com/sitemap.xml. It tells Google where all of your pages sit and should automatically update when you add new content. Submit it to Google through Webmaster Tools.
11. Add your website Google Webmaster Tools so you can see how Google indexes your site and stay updated if there are any critical issues.
12. To help your images rank, always rename your images and other files before uploading to your website (e.g. rank_for_this_keyword_phrase.png).
13. Include a robots.txt file on your site to tell web crawlers which pages they should and should not index.
14. Add a canonical redirect to point the non-www to the www version of your website, or vice versa.
15. Research and integrate LSI keywords (latent semantic indexing) on every page to help the page rank for the main keyword phrase. Find the LSI keywords by Googling your keyword phrase and searching for the “Searches related to…” links.
16. Make sure to actively interlink your content. Every page on your site should be accessible through three or fewer clicks from the homepage.
17. Add structured data on relevant pages to help Google properly index your content. Page types that need custom structured data include people, products, events, organizations, movies, books, and reviews. Use Schema Creator to generate structured data.
18. Check Google's PageSpeed Insights to make sure you’ve fixed all of the common problems that slow down your page speed. The faster your site loads, the higher it’ll rank.

Awesome Website Checklist: 64-75

Boosting Website Page Speed

1. Keep page weight under 1MB. Use Pingdom to check the page weight for your primary landing pages. Anything more than 1MB is too heavy.
2. Keep page requests under 30. Every file and image on any given page is a HTTP request. The fewer the number of requests, the faster it’ll load. The average webpage has 70 requests. Use GTmetrix to see your requests.
3. Design page elements with CSS instead of background images. Never use an image to show a button, form, or other common component on your site. CSS loads faster and is more flexible in responsive layouts.
4. Optimize images before uploading them to your site. Tools like TinyPNG can reduce your image file sizes by 80-95% without losing resolution or image quality.
5. Set up a Content Delivery Network to host your images and other larger files in several locations around the world. CDNs store and deliver your files from strategically located servers to maximize loading speed depending on your visitor’s physical location.
6. Minify JavaScript, HTML, and CSS by using compiling and compression tools prior to uploading files to your website. For JavaScript, use Closure Compiler. For HTML, use HTML Minifier. For CSS, use YUI Compressor.
7. Move render-blocking JavaScript to the footer. The only scripts that should be placed in the header are the scripts that immediately affect the design of the page (e.g. custom fonts).
8. Avoid landing page redirects. Redirects trigger an additional HTTP request which delays page rendering.
9. Leverage browser caching by setting expiry dates for pages and page types that aren’t updated often. Browser caching instructs the browser to load previously downloaded pages from the local disk rather than through the network.
10. Enable gzip compression in your server configuration. Compression can reduce the transferred response time by 90% which improves the time to first render for your pages.
11. Enable Keep-Alive on your server settings to allow the same TCP connection to send and receive multiple HTTP requests, thus reducing the latency for subsequent requests.
12. Upgrade to a dedicated server or premium hosting service to improve server response time. When you use a shared hosting environment, your site is typically one of hundreds on the same server. If any one of those hundred sites is experiencing a lot of traffic, it’ll slow down your page speed.

Note: Find out how we got this site to load faster than 100% of websites.

Awesome Website Checklist: 76-81

Graphic Design and Video Best Practices

1. Get a custom ebook cover for your opt-in bonus. They’re not difficult to create and can make a huge difference in your conversion rate.
2. Design a custom graphic or illustration for your homepage or sales pages. A nice illustration that’s done specifically for your site is an easy way to make your site more memorable.
3. Create a custom blog post feature image design. That’s the image that spreads on Facebook, Twitter, Pinterest, etc. When a user sees a certain type of image associated with a blog post, they should know that it was written by you.
4. Display custom avatar illustrations or caricatures for yourself and each member of your team. Custom caricatures can be less expensive than hiring a professional photographer each time you add someone to your team. Plus, it’s a nice gift to a new team member.
5. Custom infographics that display data and other content in a visual way tend to get more traffic than the blog post equivalent. People like to share infographics on sites like Pinterest or re-post them on their own sites with a backlink back to your site.
6. If you produce a video or series of videos, you should have a custom video intro and/or outro to give it a professional touch. Not to mention other video graphics or animations that’ll help your brand stick out.

Awesome Website Checklist: 82-87

Maximizing Website Security

1. Install an SSL Certificate to allow a secure connection from the web server to the browser. Most checkout software requires an SSL Certificate if you’re accepting credit cards and Google has said that an SSL Certificate will improve your search rankings.
2. Keep your software and plugins updated. When WordPress and other CMS software releases a update, it’s typically to patch up a vulnerability. If you don’t, it’s only a matter of time before your site will be hacked.
3. Set up a double authentication login gate for your admin pages. Most hacks start with the login page.
4. Check for and remove malware. If your site has been hacked before, they likely added corrupt files that aren’t easy to find. If you don’t remove it promptly, your site might be blacklisted by Google which tanks your rankings and warns users to leave when they visit.
5. Never leave your admin username as “admin”. Delete the default admin account and create a new one with a different username.
6. Regularly back up your database and website files. Most backup software and plugins only back up your database, which includes the data and content. But if you lose your site, you’ll need to have a backup of the files to restore it.

Awesome Website Checklist: 88-95

Website Content and Copy

1. Create a custom error 404 page that’ll display anytime a user tries to visit a page that doesn’t exist. Use the 404 page to direct them back to the homepage or help them find what they’re looking for.
2. Other than your homepage, your about page is likely the most visited page on your site. Make sure it represents you and your company well.
3. A contact page will help people contact you, but it’ll also build trust between you, your visitors, and even Google. When determining how to rank your site, the bots will find your contact page and look for an email, phone number, and address. Contact info tells Google that the site is slightly more trustworthy.
4. It’s good to have opt-in forms strategically sprinkled throughout your site, but it’s also smart to have a squeeze page with nothing but a high-converting opt-in. When you want someone to subscribe, link to that page.
5. When someone subscribes to your list, make sure you send them to a confirmation page asking them to confirm their email. If they don’t confirm their email right away, they might forget about it and never come back.
6. After they click the confirmation link in the email, send them to a thank you page where they can see what’s next. It’s a page every subscriber will see and they’ll only see once, so it’s a perfect opportunity to give them a deal or encourage them to make a purchase.
7. Your website or theme should have a landing page template that you can use when you need your users to take a specific action.
8. If you sell something, make sure you have a nice-looking sales page. Start with a headline. Make room for your pitch. Maybe add a sales video. And direct people to purchase at the bottom of the page.

Awesome Website Checklist: 96-101

Social Media Buttons and Meta Data

1. Limit the number of social media buttons on your posts and pages because each button runs a script that adds extra load time to the page. Only include the 1-5 buttons, e.g. Facebook, Twitter, LinkedIn, Pinterest, Google+, etc. where your content most often gets shared.
2. Create social media graphics for your Facebook page, Twitter account, YouTube channel, etc. Custom graphics make an immediately positive impression that’ll encourage first-time visitors to like, follow, and subscribe to your page, profile, or channel.
3. Set up Facebook Open Graph META tags to make sure your content is shared correctly on Facebook. Use the Facebook Debugger to check your homepage, posts, and other pages to see how they display when someone shares that URL.
4. Set up Twitter Cards to automatically attach rich photos and videos to your tweets when a URL on your site is shared. Get started with Twitter Cards.
5. Set up Google+ Snippets to customize what people see when your site is shared on Google+. Use the Snippet Guide to generate the code. Even if your site doesn’t get a lot of Google+ love, Google will know if you add the meta data correctly and that should carry some weight.
6. Tuck away the social media icons that link back to your profiles by making them small or only showing them in the footer. The purpose of social media is to get people back to your site, not the other way around.

Alright, what am I missing? Is there anything you do as a freelancer or business owner to make your sites more awesome?

I’d love to hear your feedback. Leave a comment below.

If you think more people should see this list, please share it. Let’s make the web more awesome!