Website QA – Pre Launch

1. Procedure Title

Name of the Process: Website QA – Pre Launch

2. Purpose

Brief Description: This guide serves as a baseline for reviewing and testing the website before it goes live. The purpose of Pre Launch QA SOP is to ensure that every aspect of the website functions correctly and meets quality standards. This process helps identify and resolve any issues, ensuring a smooth migration and a flawless user experience. Key areas of focus include functionality, design consistency, content accuracy, performance, security, and compatibility across different devices and browsers.

3. Scope

Involved Areas: Webdev, Graphics, Content, SEO

4. Responsibilities

Roles and Responsibilities: 

• Web Dev: Ensure that everything listed in this SOP is properly checked and followed to achieve a seamless website migration and minimize any issues that may occur post-migration.
• SEO: Ensure that all SEO concerns are addressed and collaborate with the web development team for proper implementation.
• Content Team: Ensure that all website content is properly implemented and matches the content they created.
• Graphics: Ensure that the design is followed and all images are crystal clear.

5. Definitions and Key Terms

Glossary: 

Pre Launch QA: Procedures and steps that need to be checked and reviewed before the website before launch.

QA: Quality assurance is a broad process for preventing quality failures. The QA team is involved in all stages of a product’s development: production, testing, and delivery.

WordPress: WordPress is an open-source content management system (CMS). It’s a popular tool for individuals without any coding experience who want to build websites and blogs. The software doesn’t cost anything. Anyone can install, use, and modify it for free.

CTA: Call To Action buttons.

Optimize: means to make the best possible use of something. If you optimize your home storage capacity, you clean and organize your closets and drawers to be able to fit the most in.

Website Content: Website content is any written, audio, or visual content element on a website. It can include blog posts, marketing copy, photos, logos, embedded videos, podcasts, and any other creative elements on a site. Website content can also combine mediums.May 2

Dummy Content: Lorem ipsum, placeholder or dummy text used in typesetting and graphic design for previewing layouts. It features scrambled Latin text, which emphasizes the design over content of the layout. It is the standard placeholder text of the printing and publishing industries.

Plugins: A WordPress plugin is a piece of software that “plugs into” your WordPress site. Plugins can add new functionality or extend existing functionality on your site, allowing you to create virtually any kind of website, from ecommerce stores to portfolios to directory sites.

Themes: In WordPress, a theme is a set of template files and style sheets used to define the appearance and presentation of a site’s content. This could be loosely called a site design. They can be added, modified, and managed from the Appearance > Themes menu.

Wireframe: Website Outline includes page name, page urls, old websites urls, redirect plan 

Redirects: What is a redirect? A redirect is a way to send both users and search engines to a different URL from the one they originally requested. The three most commonly used redirects are 301, 302, and Meta Refresh.

Forms: a WordPress plugin that lets you easily build website contact forms that allow customers to submit inquiries and questions.

Font Styles: A font style refers to the specific design and appearance of characters in a typeface. It encompasses various attributes, such as the shape, weight, spacing, and decorative elements of the letters.

White Space:  What Is White Space? Whitespace (also known as negative space) is the empty space around the content and elements on a web page. It’s used to balance the page’s design, organize the content and elements, and improve the visual experience for the user.

Favicon: A favicon is a small, 16×16 pixel icon used on web browsers to represent a website or a web page. Short for “favorite icon,”’ favicons are commonly displayed on tabs at the top of a web browser, but they’re also found on your browser’s bookmark bar, history and in search results, alongside the page url.

Website Responsiveness: A responsive web design automatically adjusts for different-sized screens and viewports. With a responsive website, someone can browse your website from any device and it will still look and function perfectly.

Builder: In WordPress, page builders are plugins that let you create, edit, and customize your website layout without writing any code. Page builder plugins add a new editor interface to your WordPress website to make customizing your page layout faster, easier, and more flexible.

 

6. Procedure Details

6.1. Preparation and Prerequisites

1. Website QA workbook

2. Blisk Browser (For Tablet and Mobile Responsive checking)

3. For Browser Compatibility Testing

   1. Firefox

   2. Google Chrome

   3. Microsoft Edge

4. Lastpass Password Generator – Use to generate website password for the webdev, tech staff and webadmin access

6.2 Timeline for Task Completion

Timeline Overview:

Pre Launch QA: 2 – 4 Hours but still depends on Number of pages, website design and functionality.

Frequency: This SOP should always be performed every time a website is going live or before migrating the website.

Review Schedule: There is no specific frequency but everytime there is a new discovery and improvement and recommendations this SOP should follow and be updated.

6.3. Step-by-Step Procedure

1. WordPress

   1. WordPress admin email should be [email protected]

   2. Site Title should be the correct name

   3. Website should have site icon / Favicon

 

• Go to settings then click into General

 

2. Content

   1. Check all pages make sure content is properly implemented

   2. HTAGS is added on target pages

   3. Use default HTAGS on non target pages

   4. No Dummy text like Lorem Ipsum 

   5. Meta Title and Meta Description is implemented

   6. No Hello World Post

 

3. Check all CTA is properly linked

   1. Use the hard coded number if website is using call rail

 

• Go to each pages of the website
• Hover on each CTA Buttons
• Make sure each CTA has the correct links

4. Spacings

   1. Spacing between sections should be consistent

   2. Spacing on each element example format ( title + spacing + description + spacing + button)

• Go to each pages and check the spacings make sure there are no over spacing / too much whitespace between each sections or elements

 

5. Font Styles

   1. Weight

   2. Transform

   3. Size

   4. Line Height

   5. Letter Spacing

   6. Color

 

• Go to each pages of the website
• Check the headings, paragraphs, list etc if it has consistent styling across the website.
• You can use whatfont chrome extension

 

 

6. Images

   1. Image is optimized on lossless compression

   2. Resized

   3. Not pixelated or any form of blurry due to over optimization

   4. Webp format

 

• Go to all pages of the website
• Check all the images make sure the images is crystal clear and not blurry or pixelated

 

7. Plugins Installed and Setuped

Go to Plugins → Installed Plugins

 

 

1. Login Press

   1. Login Press

   2. Login Press Pro

   3. Login Press Limit Logins

   4. LoginPress – Hide Login – New login url should be /letmein

 

 

2. SEOPress & SEOPress Pro – Make sure this plugins is set up properly follow the SOP on setting up this plugin

 

3. One Click Accessibility – Make sure this plugins is set up properly follow the SOP on setting up this plugin

 

4. Head, Footer and Post Injections

 

5. Gravity Forms

 

6. Cloudflare (If DNS is hosted on cloudflare)

 

7. All-in-One WP Migration & All-in-One WP Migration Unlimited Extension

 

8. Advanced Editor Tools

 

9. Security Plugins – All email notifications should go to [email protected]

   1. Wordfence

2. Sucuri

3. Ninja Firewall

4. Stream

10. Builder

    1. If Elementor

Elementor

Elementor Pro

Jet Elements Plugins (If necessary)

2. If Oxygen

Oxygen

Oxygen Ultimate

Oxygen Extras

11. Themes

    1. If Elementor

Astra and install astra pro plugin

2. If Oxygen

Just use wordpress default theme (since oxygen did not actually reading the theme that is activated)

12. Code Snippets

    1. Disable Comments Snippet should be added (Refer to SOP)

8. Website Responsiveness

   1. Tablet Responsive-

   2. Check the website on tablet view- Visit all pages

• Make sure all layouts is good to go on tablet

• Check the Tablet Menu

2. Mobile Responsive-

3. Check the website on mobile view

• Visit all pages

• Make sure all layouts is good to go on tablet

• Check the Mobile Menu

 

9. WordPress should have 3 administrators account and passwords should be hardened

   1. WebDev – [email protected]

   2. Tech Staff – [email protected]

   3. WebAdmin – [email protected]

10. Redirects 

    1. Ask the SEO team if there is any redirect 

    2. Add URL Redirects if there is any.

11. Wireframe 

    1. Check wireframe if ALL URLs are correctly implemented and followed

    2. Follow the correct format of the website Navigation from wireframe.

12. Forms

    1. Add correct form recipient email

    2. Add Google Recaptcha on All Forms

    3. Test all forms if properly working

6.4. Tools and Resources

• WordPress
• WordPress Plugin
• Last pass password generator
• QA Workbook
• Chrome Extensions
• Blisk Browser
• Firefox, Microsoft Edge, Google Chrome 

8. Quality Control and Evaluation Metrics

Website Functionality: Ensure that the website functions as it is supposed to be.

• Forms
• CTA’s
• Pages
• Images
• Layout

No Website Error / Issue: There is no any form of error or issue like missing images, missing content, dummy contents and dummy pages

9. Exception and Problem Handling

Form Issues: Make sure to setup the form settings correctly from email should be domain email like [email protected]

Website Browser Compatibility: Make sure additional CSS codes has a browser compatibility version you can generate browser compatibility CSS code at https://autoprefixer.github.io/

Missing Contents: If there are missing contents coordinate with the content team to provide the specific content

Missing Images / Animations / Graphics Related : If there are missing graphics for the website coordinate with the Graphics team to provide the missing items

10. Documentation and Record Keeping

Documentation Requirements: Client Folder (Wireframe, Images Content)

11. Procedure Review and Update

 

Review Frequency: Every new discovery and standards of Pre Launch QA this SOP should be revisited.