Web-Dev-Hub-Docs
Web Development Frameworks & Libraries
Productivity
Misc
Backend
Networking
Science & Tech (Innovation)
Reading
Docs
Code Editors & Tools
Free-Stuff
Blockchain & Crypto
Data Structures & Interviewing
WEBDEV-Bootcamp-Notes
Group 1
Powered By GitBook
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!

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:

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.
  • 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:
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

Make sure your site looks and performs beautifully on any device.
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
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

Give the king its due.
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 lorem 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)

Analyzing and optimizing your website *after* publishing is a never-ending process. And you need to consider semantic site structure from the get-go. But that doesn’t mean you won’t benefit from an SEO review before you hit publish.
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.

Tool List:

Update:

Can I UseProvides browser support information of front-end web technologies. Enter a search term to find out which browsers support it. caniuse.com
Online HTML EditorFree online HTML editor with WYSIWYG and source composer and instant preview and many useful built-in features html-online.com
Web CleanerOnline HTML, CSS and JavaScript cleaner and code editors with syntax highlighting and customizable cleaning features. html-cleaner.com
Word HTMLFree online Word and other rich text editor and HTML converter. Copy-paste your document in the editor and switch to HTML view to get the code. wordhtml.com
HTML Cheat SheetHTML, CSS, JavaScript and other web technology cheat sheet with interactive user interface. Grab the code you’re looking for quickly. htmlcheatsheet.com
Stack OverflowHuge programmer community where you usually don’t have to ask for help because probably someone has already answered the same question. stackoverflow.com
w3schoolsThe place to learn web technologies. There’s a big chance that this site gives the first search result when you’re looking for a HTML term. w3schools.com
Mozzilla Developer NetworkAn evolving learning platform for web technologies. Providing tutorials, developer tools and the information to easily build projects. developer.mozilla.org
Markup ValidatorEnter the link of a webpage and the online tool will highlight the errors and warnings to fix in the source code. validator.w3.org
GitHubCollaborate with other developers. Fork, send pull requests and manage all your public and private git repositories. github.com
BitbucketWeb-based hosting service for development projects with version control system that makes it easy for you to collaborate with your team. bitbucket.org
DribbleTell others what are you working on! Dribbble is a community of designers sharing screenshots of their work, process, and projects. dribbble.com
Built WithEnter a domain name to find out who is hosting it, what CMS and framework is used and many other insights. builtwith.com
HTML TidyAn online tool for checking and cleaning up HTML source files. Useful for finding and correcting errors in deeply nested HTML. htmltidy.net
Div TableCreate or convert tables to responsive div tags with a few clicks. Use the provided CSS code to render the divs as table cells. divtable.com
BootstrapThe most popular free and open-source HTML, CSS, and JS framework makes front-end development easier and faster. getbootstrap.com
HTMLGProfessional HTML editor. The free version is enough to do magic with your markup. Tag and attribute manager filter etc. htmlg.com
Facebook DevelopersDeveloper tools for login, share widget, analytics, monetization, messenger platform and more from the biggest social media site. developers.facebook.com
Google Mobile-Friendly TestCheck if Google considers your web page mobile-friendly and adjust the deficiencies if there is any. google.com/mobile-friendly
Webpage Speed TestAnalize the loading speed of a website from many available servers. The website creates a detailed analysis with screenshot and waterfall view. webpagetest.org
NetRendererRenders quickly a webpage with the selected version of the old Internet Explorer web browser. NetRenderer goes back to IE version 5.5. netrenderer.com
Browser ShotsCreate the screenshot of a webpage with many available browsers in various operating systems. browsershots.org
PageSpeed InsightsThis tool by Google analyzes the submitted link from mobile and desktop to suggest you what to consider optimizing. developers.google.com
Google FontsAn interactive directory of over 800 free hosted web fonts. It allows to optimize loading speed by including only what you need. fonts.google.com
Font AwesomeThe most popular icon set based on CSS and LESS. The vector icons can be customized as text — size, color, drop shadow fontawesome.io
RGB Color CodesSearch and save color codes. Search by name or mix the RGB, HSV or CMYK values. Use the generated HTML/CSS codes. rgbcolorcode.com
FreePicBrowse the large directory of free photos, vector arts, icons, illustrations, PSD files at FreePic. freepik.com
Placehold.it/Image placeholders with customizable size. Just add the image resolution after the domain name, for example placehold.it/400x250 placehold.it
XML SitemapsGenerate XML sitemaps and URL list of a website. The crawl limit is 500 pages. xml-sitemaps.com
Broken Link CheckerCrawl a domain for dead links. Locates both internal and external links pointing to 404 error pages. brokenlinkcheck.com
CodepenRegister to create, save and share HTML-CSS-JS code snippets and run them online. codepen.io
JSFiddleSimilar to Codepen but this one doesn’t require registration. Test HTML-CSS-JS code online and save your small project in a shareable URL. jsfiddle.net
WordPress.OrgMore than 10 million websites use this free and open-source content management system based on PHP-MySql. wordpress.org
Blog StarterA free guide that shows beginners how to start a blog using WordPress.org theblogstarter.com
Website SetupA friendly guide about how to make a website, discussing the hosting, the CMS, domain name and promotion. websitesetup.org
Expired DomainsHunt for expired domain names or get inspiration for your next project. It’s worth registering for an account on this free website. expireddomains.net
Bad HTMLThe ugliest website on the internet, collecting bad UI/UX practices. A deterrent example about how not to build a website. badhtml.com
1st Web DesignerFollow this web design blog to find out what’s new in freelance, marketing, UX etc. categories. 1stwebdesigner.com

Discover More:

Exported from Medium on August 31, 2021.
Last modified 1d ago