This post was most recently updated on July 29th, 2024
When we talk about an emerging full-stack web developer, there are certain things that are bound to be missed owing to a developer background and a programmer mindset. A checklist with all things that should be considered before release to QA or launch will help a developer to deliver a not to miss basic web application expectations.
This check list in general is applicable to all web releases and it needs to be physically verified by the web developer.
- Title & Metadata
Web crawlers pull the page title for SEO. It is the most important element so that users know what’s on the page. Make sure you have a unique title on every page and relates to the content of that page.
1<title>Your Title | Your Page | Your Site</title>Meta description and keyword tags are not as important for SEO, but it’s still a good to include them in your page. Change this description on every page to make it relate to the content on each page as this is often what Google displays in its search result description.
1<meta name="description" content="Description associated with your title" /> - Favicon
A favicon can be a logo or an identifier that brands the tab or window in which your website is open in the user’s browser. It is also saved with the bookmark so that users can easily identify pages from your website. It ideally should be unique for individual websites. Some browsers pick up the favicon if you save it in your root directory as favicon.ico, but to be sure it’s picked up all the time, include the following in your head as follows.
1<link rel="icon" type="image/x-icon" href="/favicon.ico" />And for iPhone favicon:
1<link rel="apple-touch-icon" href="/favicon.png" /> - Proofread
Read everything on the page and get it read from someone else as well. Even if you’ve already read it. There is always something you will identify and have to change. Check if you can reduce the amount of text by keeping it more specific. Break down large text blocks into smaller paragraphs. Add individual headings throughout the content, and use lists so that users can scan through the text easily. Don’t forget to check validation content such as alert boxes, inline messages, etc.
- Cross Browser Checks
There is a usual case with web developers that the site looks great in chrome but it is completely broken in IE. Well, It is important that your website works across browsers. It doesn’t have to be pixel perfect, but everything should ideally work, and the user should not face any problems with usability and visibility of the website. The most popular browsers to check are Internet Explorer 8 and above, Firefox 3+, Safari 3+, Chrome, Opera and the iPhone.
- Link
Please don’t assume that all your links will work. Click on them and check them. You may often forget to add “http://” for links to external websites. Also make sure your logo links to the home page. make sure external links open in a new tab/window and the links should be easily identifiable when compared to the rest of the text on the page.
- Usability/Functionality Checks
Test everything in-depth. Get others to test your website especially your target market. Sit back and watch how he/she uses the website. It’s amazing what you’ll pick up on when others use your website differently than how you assume they’d use it. Common things to check for are contact forms, search functions, shopping baskets and log-in areas.
- Graceful Degradation
Your website should ideally work with JavaScript turned off. Users often have JavaScript turned off for security purpose. Test your forms to make sure they still perform as expected for server-side validation checks, and test any cool AJAX implementations that you may have on the form.
- Validation
You should aim for a 100% valid website. This doesn’t mean that things will not work if it isn’t, but it’s important to know the reasons why it does not so that you can fix any critical errors. Common issues include no “alt” tags, no closing tags and using “&” instead of “&” for ampersands. There are various CSS and HTML validators available online to validate your website.
- RSS
If your website has a blog or a newsreel, you should have an RSS feed that users can subscribe to. Users should be able to easily find your RSS feed: the common convention is to put a small RSS icon in the browser’s address bar. Put this code between your <head> tags.
1<link rel="alternate" type="application/rss+xml" title="Site or RSS title" href="link-to-feed" /> - ROBOTS.txt
The robots exclusion standard, also known as the robots exclusion protocol or simply robots.txt, is a standard used by websites to communicate with web crawlers and other web robots. The standard specifies how to inform the web robot about which areas of the website should not be processed or scanned.
The content of a robots.txt file consists of so-called “records”. both “/support-desk/index.html” and “/support/index.html” as well as all other files in the “support” directory would not be indexed by search engines. If you leave the Disallow line blank, you’re telling the search engine that all files may be indexed. If the release is an internal or a staging release then the robots should disallow all the pages to be crawled on the web by the crawler.
- Analytics
Analytics help the stakeholders to analyze the performance of the website on the target market. by installing some sort of analytics tool, you can measure statistics to see how your website performs and how successful your conversion rates are. You can track daily unique hits, monthly page views and browser statistics, all useful data to start tracking from day 1. Google Analytics is a free favorite among various website owners. Others to consider are Clicky, Kissmetrics, Mint and Statcounter.
- Sitemap
When we add a sitemap.xml file to the root directory of our website, it allows the major search engines to easily index your website. The file points crawlers to all the pages on your website. there are various free tools to create and manage sitemaps for various platforms like wordpress, umbraco, .net, etc.
- Error Handling/Defensive Design
The most commonly overlooked defensive design element is the 404 page. If a user requests a page that doesn’t exist, your 404 page is displayed. This may happen for a variety of reasons, including another website linking to a page that doesn’t exist. Get your users back on track by providing a useful 404 page that directs them to the home page or suggests other pages they may be interested in.
Another defensive design technique is checking your forms for validation. Try submitting unusual information in your form fields (e.g. lots of characters, letters in number fields, etc.) and make sure that if there is an error, the user is provided with enough feedback to be able to fix the issue.
- Optimization
Like every other developer you’ll want to configure your website for optimal performance. You should do this on an ongoing basis after launch, but you can take a few simple steps before launch, too. Reducing HTTP requests, using CSS sprites wherever possible, optimizing images for the Web, compressing JavaScript and CSS files and so on can all help load your pages more quickly and use less server resources.
- Print CSS
If a user wants to print a page from your website, chances are she or he wants only the main content and not the navigation or extra design elements. That’s why it is a good idea to create a print-specific style sheet. Also, certain CSS elements, such as floats, don’t come out well when printed.
To point to a special CSS style sheet that computers automatically use when users print a page, simply include the following code between your <head> tags.
1<link rel="stylesheet" type="text/css" href="print.css" media="print" /> - Backup
If your website runs off a database, you need a back-up strategy. Or else, the day will come when you regret not having one. Setup an automatic backup on the database and make sure the copy of the backup file doesn’t reside on the hosted VM in case of a crash.
Post your thoughts on the above content if this helps.
