A List Of Tools For Improvement

A set of questions you should use before handing off your application to the client.

Quick Web Developers Website Checklist & A List Of Tools For Improvement

A set of questions you should use before handing off your application to the client.

First off… download this developer checklist extension for chrome that literally evaluates the checkpoints on any webpage you activate it on.. it also provides advice and html validation so that you can improve your site and it’s SEO rankings!

Web Developer Checklist _Analyses any web page for violations of best practices_chrome.google.com

Here it is in action :

### Remainder of tool list is below this checklist:

Usefulness & Relevance:

Does the content meet user needs, goals, and interests?

Does the content meet business goals?

For how long will the content be useful? When should it expire? Has its usefulness already expired?

Is the content timely and relevant?

Clarity & Accuracy:

Is the content understandable to customers?

Is the content organized logically & coherently?

Is the content correct?

Does the content contain factual errors, typos, or grammatical errors?

Do images, video, and audio meet technical standards, so they are clear?

Influence & Engagement:

Does the content use the most appropriate techniques to influence or engage customers?

Does the content execute those techniques effectively?

Does the content use too many or too few techniques for the context?

Completeness:

Does the content include all of the information customers need or might want about a topic?

Does the content include too much or too little information about a topic for the context?

Voice & Style:

Does the content consistently reflect the editorial or brand voice?

Does its tone adjust appropriately to the context — for example, sales versus customer service?

Does the content convey the appropriate editorial and brand qualities?

Does the content seem to have a style? If so, does the content adhere to it consistently?

Does the content read, look, or sound as though it’s professionally crafted?

Usability & Findability:

Is the content easy to scan or read?

Is the content in a usable format, including headings, bulleted lists, tables, white space, or similar techniques, as appropriate to the content?

Does the content have the appropriate metadata?

Does the content follow search engine optimization (SEO) guidelines — such as using keywords — without sacrificing quality in other areas?

Can customers find the content when searching using relevant keywords?

SEO Advice From Google:

Help Google find your pages

Ensure that all pages on the site can be reached by a link from another findable page. The referring link should include either text or, for images, an alt attribute, that is relevant to the target page. Crawlable links are <a> tags with an href attribute.
Provide a sitemap file with links that point to the important pages on your site. Also provide a page with a human-readable list of links to these pages (sometimes called a site index or site map page).
Limit the number of links on a page to a reasonable number (a few thousand at most).
Make sure that your web server correctly supports the If-Modified-Since HTTP header. This feature directs your web server to tell Google if your content has changed since we last crawled your site. Supporting this feature saves you bandwidth and overhead.
Use the robots.txt file on your web server to manage your crawling budget by preventing crawling of infinite spaces such as search result pages. Keep your robots.txt file up to date. Learn how to manage crawling with the robots.txt file. Test the coverage and syntax of your robots.txt file using the robots.txt Tester.

Ways to help Google find your site:

Ask Google to crawl your pages.
Make sure that any sites that should know about your pages are aware your site is online.

Help Google understand your pages

Create a useful, information-rich site, and write pages that clearly and accurately describe your content.
Think about the words users would type to find your pages, and make sure that your site actually includes those words within it.
Ensure that your <title> elements and alt attributes are descriptive, specific, and accurate.
Design your site to have a clear conceptual page hierarchy.
Follow our recommended best practices for images, video, and structured data.
When using a content management system (for example, Wix or WordPress), make sure that it creates pages and links that search engines can crawl.
To help Google fully understand your site’s contents, allow all site assets that would significantly affect page rendering to be crawled: for example, CSS and JavaScript files that affect the understanding of the pages. The Google indexing system renders a web page as the user would see it, including images, CSS, and JavaScript files. To see which page assets that Googlebot cannot crawl use the URL Inspection tool; to debug directives in your robots.txt file, use the robots.txt Tester tool.
Allow search bots to crawl your site without session IDs or URL parameters that track their path through the site. These techniques are useful for tracking individual user behavior, but the access pattern of bots is entirely different. Using these techniques may result in incomplete indexing of your site, as bots may not be able to eliminate URLs that look different but actually point to the same page.
Make your site’s important content visible by default. Google is able to crawl HTML content hidden inside navigational elements such as tabs or expanding sections, however we consider this content less accessible to users, and believe that you should make your most important information visible in the default page view.
Make a reasonable effort to ensure that advertisement links on your pages do not affect search engine rankings. For example, use robots.txt, rel="nofollow", or rel="sponsored" to prevent advertisement links from being followed by a crawler.

Help visitors use your pages

Try to use text instead of images to display important names, content, or links. If you must use images for textual content, use the alt attribute to include a few words of descriptive text.
Ensure that all links go to live web pages. Use valid HTML.
Optimize your page loading times. Fast sites make users happy and improve the overall quality of the web (especially for those users with slow Internet connections). Google recommends that you use tools like PageSpeed Insights and Webpagetest.org to test the performance of your page.
Design your site for all device types and sizes, including desktops, tablets, and smartphones. Use the Mobile-Friendly Test to test how well your pages work on mobile devices, and get feedback on what needs to be fixed.
Ensure that your site appears correctly in different browsers.
If possible, secure your site’s connections with HTTPS. Encrypting interactions between the user and your website is a good practice for communication on the web.
Ensure that your pages are useful for readers with visual impairments, for example, by testing usability with a screen-reader.

Basic principles

Make pages primarily for users, not for search engines.
Don’t deceive your users.
Avoid tricks intended to improve search engine rankings. A good rule of thumb is whether you’d feel comfortable explaining what you’ve done to a website that competes with you, or to a Google employee. Another useful test is to ask, “Does this help my users? Would I do this if search engines didn’t exist?”
Think about what makes your website unique, valuable, or engaging. Make your website stand out from others in your field.

Specific guidelines

Avoid the following techniques:

Automatically generated content
Participating in link schemes
Creating pages with little or no original content
Cloaking
Sneaky redirects
Hidden text or links
Doorway pages
Scraped content
Participating in affiliate programs without adding sufficient value
Loading pages with irrelevant keywords
Creating pages with malicious behavior, such as phishing or installing viruses, trojans, or other badware
Abusing structured data markup
Sending automated queries to Google

Follow good practices:

Monitoring your site for hacking and removing hacked content as soon as it appears
Preventing and removing user-generated spam on your site

If your site violates one or more of these guidelines, then Google may take manual action against it. Once you have remedied the problem, you can submit your site for reconsideration.

Website Launch Checklist:

Website design checklist

It’s all too easy to miss (or break) something during the many back-and-forths, client feedback sessions, and other design iterations you go through. That’s why we created the design checklist below will help you go back and check for any design mistakes.

To start, be sure to check your:

Spacing: Is spacing consistent across the site (i.e., did you stick to that 8px grid, or let a rogue 18px in there)? Do all elements have enough breathing room?
Colors: Have you stuck to a consistent, harmonious color palette? Are all instances of the brand blue actually the brand blue?
Shadows: If you used drop shadows, is the light source consistent for each and every one? Did you use the same blur, opacity, and spread values?
Typography: Is your font stack logical and consistent (i.e., is there a reason that element is set in a sans)? Are your heading sizes consistent? Have you used proper (not faux) italics and bolding? Do all text links look right? Is all text both legible and readable?
Imagery: Do any images look blurry, pixelated, or otherwise funky? Are any images broken or crazily heavy in terms of file size? Do all non-decorative images have alt tags?
Logo: It’s (usually) just another image, but it’s so important it warrants its own step. Is it the latest version? Is it crisp (not blurry or pixelated)?

Once you’ve made these initial visual checks, you’ll want to ensure that your site’s appearance is consistent and functional on any screen.

Cross-browser appearance

Different browsers may render your website in different ways, so it’s important to test your site in different browsers. Take a look at W3’s browser stats to see where you should focus your testing. (Though if you’re working on a redesign, browser-usage stats will be more useful.)

During this process (and the next, in multi-device testing) you’ll want to make sure your layouts, typography, navigation, and other design elements are displaying properly.

The elements that tend to vary most across browsers, and therefore are most important to check, are:

Fonts
Colors/gradients
Images
Logo

Cross-device appearance

There have never been more web-capable devices around, and with that comes a staggering array of screen sizes. Done right, your site should perform well on any screen size, but be sure to double check. (You are a perfectionist after all, right?)

This is also where mobile navigation is crucial. Be sure to test out the user’s ability to navigate around the website on a touchscreen device, and make sure nothing gets lost in device transition.

In Webflow, we make it easy for you to test the most popular devices and preview your website on almost any size, streamlining the process of cross-device testing all in one place. Of course, nothing replaces real-world testing on a variety of devices as small details may differ on the real device.

Image optimization

Images and graphics are an important element of many websites, so you’ll want to make sure they display properly, especially on all those ultra-high-definition devices (like Apple’s Retina screens) out there.

The rule of thumb is to upload your image at twice the size it’ll display on your site. In some cases, you can upload two images: an actual-size version for lower-res devices, and another that’s twice the size for high-res devices.

Why? Because the heavier the image, the slower your page will load, and the worse your user experience will be (which also negatively affects SEO, which we’ll cover later on).

In Webflow, we automatically scale, compress, and optimize images for every device. Learn more about our responsive images feature or check out our more detailed article on image optimization.

Website functionality testing

Design and functionality go hand in hand, but I like to isolate the two to make sure the website both looks the way it was designed to and that it performs as intended.

Integration testing

This one is super important, and can range from a quick task to a giant one, depending on how many integrations you have. Typically, I’ll create a list of integrations as I add them so I don’t forget later on.

Some common integrations to test might be:

Web forms (check that the forms work and that submitted information goes to the right place)
Autoresponders
Marketing emails (MailChimp, Constant Contact, HubSpot, drip campaigns, etc.)
RSS feeds
Ecommerce
CRM
CMS

Link testing

This one can be a doozy, simply because most sites have dozens (if not hundreds) of links. More often than not, there’s a link or two that goes nowhere, and it’s important to find them before your end-users do.

Some of the most important links to check are:

Top navigation links
Footer links
Social media links (Facebook, Twitter, etc.)
Logo (typically links to the home page)

Rather than doing all this manually, I’d suggest trying a link crawler like the W3C Link Checker, the Chrome plugin Check My Links, or Screaming Frog (which is excellent for SEO audits, too).

Content editing

Content is king, and the testing process should be fit for one. Typically this involves making sure that all content has been updated and approved. I can’t tell you how many websites I’ve found that still have a l_orem ipsum_ paragraph somewhere.

Now, if you practice content-first design, you should have final content already in place, so you can focus on more fine-toothed-comb review, like proofing for spelling and grammatical errors.

It’s also important to note here that it’s okay for content to be changed later on. Clients, team members, or you can always adjust text through a CMS. The main goal here is to ensure that your website content isn’t complete gibberish.

Search engine optimization (SEO)

There are multiple things that can be done to optimize your website for search engines.

1. Use proper semantic structure

Web crawlers (like Google’s bots) read through your website to get an understanding of your content, so that search engines know to display your website when people search for it. To help them crawl your site, you need to use language they’ll understand.

Historically, this has meant using the following semantic tags:

h1–h6 (heading tags)
p (paragraph tags)
ul/ol (unordered and ordered Lists)

You can also go above and beyond with some new HTML5 semantic tags:

<article>
<aside>
<details>
<figcaption>
<figure>
<footer>
<header>
<main>
<mark>
<nav>
<section>
<summary>
<time>

These tags are important because they let you identify the content that’s most relevant to users. In short: making it easy for search engines makes it easier for users to find you.

2. Meta SEO tags

Aside from on-page structure, you can also help web crawlers understand your site by titling and describing your pages as a whole. We outline a few tips on website SEO on our blog, narrowed down to 2 main considerations below.

Meta title

Your page’s meta title translates to the linked text people will see on search engine result pages (SERPs). It also displays on the browser tab when people click through to your page. Some best practices include:

Define the page’s central topic
Keep it under 70 characters in length (including spaces)
Use relevant keywords
Put important keywords in the front of the title

Meta description

The meta description is a short sentence (or two) that describes what your website has to offer. It will (sometimes) show up below your meta title in search results.

Some best practices include:

Include keywords that describe the page
Don’t go over 160 characters
Write your description for people, not robots. (Google doesn’t use descriptions in web rankings).

3. Open Graph settings

Social media has become a key element of SEO, so it’s crucial that you amplify this process by providing effective Open Graph information. Open Graph settings include three pieces of content: title, description, and an image.

The title and description follow the same rules as their SEO counterparts, but instead of showing up in search results, they appear as the default title and description on social media platforms when shared.

This is hugely beneficial because it lets you determine what the messaging (and image) will be when others share your website, helping you keep control of your brand.