QA Standards (Internal Builders)

Critical Error = Automatic Fail

Site First Impression - 4 points

(3 points)

Were you able to conclude who the company is and what they do within 5 seconds?

Even the most user-friendly and attractive websites are not successful when they are not achieving the needs of the company. Ask yourself: Do I as a first time visitor of this site get a clear sense of what they offer and who they are upon arrival at the website? Does the design point the visitors in the direction that they want them to go? Is there a clear strategy that is informing your design? If the answer to any of these questions are no, then the design is not at its full potential.

Yes

Open the website for the first time. Look over the hero section, count to five then turn off the screen. Now ask yourself “what do I recall?” If the category or type of business is obvious, the purpose is clear, and I have a clear understanding of what action the design is encouraging me to do, you will get points here.

It’s also important that the goal of the website is clearly indicated in the upper fold. Meaning, the info most important to the customer that they want visitors to know is clearly visible and there is a call to action that directs them towards the proper conversion.

CRITICAL ERROR

Open the website for the first time. Count to five then turn off the screen. Now ask yourself “what do I recall?” If you don’t know what they do, their headline is too vague. You just failed the Five Second Test.

Here we cannot tell what the business offers. It states the industry they work with but not what they offer, it is a cliffhanger, and would fail the 5 second test.

(1 point)

Did the site score of 75 on Google Lighthouse

Yes

No, but notated

The test was not run

The test was not run and there were issues with the notations

The test was run, passed, and there were issues with the notations

The test was run, failed, and there were issues with the notations

Contact Info - 3 points

This is where we check the basic business information to ensure the pertinent details and motives for the website have been established and adhered to.

(3 points)

Business Contact Info

Acceptable

Contact info on website conflicts with intake form

CRITICAL ERROR

The phone number, email, physical address, and social media all appear correctly throughout the entire site.

Does not match in header

This is where either the phone number, email, physical address, and/or social media appear in the header, and contradict what is written in the intake form.

(i.e. - phone number is missing a number, email is misspelled, address is not formatted correctly).

Does not match in footer

This is where either the phone number, email, physical address, and/or social media appear in the footer, and contradict what is written in the intake form.

(i.e. - phone number is missing a number, email is misspelled, address is not formatted correctly).

Does not match on Contact page

This is where either the phone number, email, physical address, and/or social media appear on the Contact page, and contradict what is written in the intake form.

(i.e. - phone number is missing a number, email is misspelled, address is not formatted correctly).

Does not match elsewhere

This is where either the phone number, email, physical address, and/or social media appear somewhere other than the header, footer, and contact page, and contradict what is written in the intake form.

(i.e. - phone number is missing a number, email is misspelled, address is not formatted correctly).

Contact page contains Address/phone/email/hours in wrong or inconsistent format

Contact Page laid out poorly or missing provided info

No Contact Page Created (not a simple site)

This is where a site has either a CTA or navigation link to a contact page, but when clicked it either goes to the footer, another portion of a non-contact page, or a pop up. All sites that have contact info that the user would need to contact the business or individual require to have a separate contact us page unless otherwise noted on ticket and modgi.

If there is a send up in which no Contact page is included, the Builder is to create one using the available contact info.

Logo - 6 points

This grades the way the logo was utilized in the header area of the website.

(2 points)

Logo - graphic

Acceptable

Your logo fits perfectly and it doesn’t take up much space. It looks in proportion with the other elements on the page and it resizes without losing clarity.

The Logo may not have a graphic, and just be text.

If the logo was deemed by the designer or WS as not appropriate for the header, or the customer didn’t supply a logo, text can be used in its place. In this case, it will be marked as acceptable and the Builder will be awarded points despite no graphic being present.

Contains background different from rest of header

Could have been cropped but wasn’t or poorly cropped

Logo graphic is blurry

(2 points)

Logo - text

Acceptable

Logo text not aligned properly

Logo text font style not appropriate for industry

Logo text added but not necessary

Logo text was necessary but not added

Logo text too small or too large

(2 points)

Logo - general

Acceptable

Logo was altered in a unapproved way

CRITICAL ERROR

Logos can be modified in terms of cropping and rearranging elements of the logo to better fit the header area. In addition, logos can also have the background removed, or made all monochromatic.

In the case of a vertical logo graphic stacked upon text, it might make sense to cut the graphic from the text and place these images inline.

If the text around, below, or next a logo is illegible, it’s appropriate to crop out the graphic from

Logo and type out the next to it instead.

If the logo has a white background but is a high quality image, it may be easy to remove the background, if that's the case, do it. If the logo has a white background but is a low quality image, pixelated or if after removing the background you're left with ragged edges, don't use a transparent header - use a header with a white or a heavily opaque background that hides the uneven edges on the image.

Other than this, do not modify the logo itself. Do not modify the text, color, or design built into the graphic.

Logo graphic or text do not link to the home page

Logo is missing or in the wrong place

This is where the customer supplied an acceptable logo, it was labeled correctly by the WS as the logo to be used, but it was not used. Could also be that the customer supplied a logo, and it was used, but not placed in the proper place.

In the below example, the right thing was done, which was not using the detailed logo illustration in the header. However, no icon, text, or anything was placed in the header. Even if you use the logo in the hero instead of the header, you need to put the company name or a simplified version of the logo in the header.

Wrong Logo used

Logo, text or both have poor contrast against the background

Navigation - 4 points

(2 points)

Navigation - Function

Acceptable

Anchor link goes to incorrect section

Navigation links go to incorrect page

External links don't open in a new tab

Navigation links missing from menu or in wrong order

(2 points)

Navigation - Style

Acceptable

Hover/active styled poorly

Sub-navigation menu too long

Sub-navigation menu styled poorly

Alignment or spacing is off or inconsistent

One or more page titles are too long or incorrect

Customer provided very specific instructions or reference sites that were ignored

Header - 6 points

This grades the overall style and layout of the header

(3 points)

Header - Layout

Acceptable

Customer provided specific instructions ignored without justification

Missing elements called for in Intake Form

Header width not consistent with hero content

Header displays differently between browsers

(3 points)

Header - Style

Acceptable

Sticky nav was used inappropriately

Issues with links or buttons contained within header

Home Hero Section - 11 points

Home Hero Section - 14 points

By best practices a good hero typically has a header, some supporting text, and a call-to-action button (or some kind of next steps). These can be accompanied by an image, video, or illustration that support the mission of the page.

(2 points)

Home Hero - Elements

Acceptable

Missing hero heading or CTA when they were requested

(3 points)

Home Hero - Layout

Acceptable

Hero text and CTA not visible in upper fold

Customer provided very specific instructions that were ignored

CRITICAL ERROR

It’s important that we try to always follow specific customer instructions. This may be in the form of a drawing, pdf or Word mock up, or a reference site. We do our best to set the expectations that we cannot duplicate other sites or specific instructions, but we will follow them as closely as possible. If the customer provided instructions or gave references that are in scope for us to emulate in the design, we need to do so. If this cannot be done for whatever reason, you need to notate a clear justification on why you didn’t follow the customer instructions.

Text, CTA or logo repeats or is used in both hero and header

(3 points)

Home Hero - Image

Acceptable

Since hero images dominate the above the fold area, it is critical that you pick something that not only looks good but also pushes your conversion goals. Hero images can simply display a product, or provide context to your service or product. It can be emotion focused, in which amplify the way the users feel to emphasize the importance of a product or service. Whatever it’s chosen, it sets the tone of the entire site. It needs to capture attention, and show off your product or service, or amplify whatever emotion you are trying to create.

Image not relevant to business

CRITICAL ERROR

The image needs to reflect the product, service, or information of the customer.

If your company deals in sky diving equipment, would it make sense for you to put up a hero image of a person scuba diving?

As seen in the example below, we don’t want to show overgrown grass on a landscaping site.

Focal point of image is not visible

Hero image is blurry

Incorrect image or video used without justification

CRITICAL ERROR

There will be instances where the customer or Website Specialist asks to use a hero image that just cannot be used for the hero. Maybe it's too small, for example. If that is the case, you can notate the reason it could not be used, and that is acceptable.

However, if the customer provided an image that was specifically called for to be used in the hero section, and the image was of proper size, content, and quality, and it was not used for whatever reason, points will be deducted.

More relevant images were available but not utilized

Slideshow using wrong or inappropriate transitions

We do understand that occasionally slideshows must be used. If the proper layout is chosen, and the customer demands them, then it’s acceptable to use them.

However, there are still ways to use it that would not be up to our QA standards. If an inappropriate effect is used for the slideshow, or the slides are going too fast or too slow, or anything that would be considered an inappropriate use of a slider, points would be deducted.

Background video playback issue

CRITICAL ERROR

Using video background above the fold works great at capturing attention, but there are three things you need to consider:

Do your users have fast enough connections to play the background video automatically?

Are your users older and hence, are liable to get confused by autoplaying background video?

Are your users accessing your site from devices or locations that can’t support background video?

There may be instances where the video is either too large, the wrong file format, or was not set up correctly within Beaver Builder. If the video is causing the browser to crash, or a prolonged load time, then it’s best to seek an alternative. If the Website Specialist is asking for a video to be added as a background, it must be tested before delivering to ensure appropriate load time. Points will be deducted if a site is delivered with a background video that is not working as it should.

Hero section contains more than one error or has a severe design flaw

(3 points)

Home Hero - Text Styling

Acceptable

Hero text uses colors that clash or poor contrast

Text placed directly over background with text

Incorrect or inappropriate words emphasized within headline

(3 points)

Home Hero - Wording

Acceptable

When done right, text can greatly amplify the brand message.

For example, on Airbnb’s homepage, you’ll see a video of people meeting others in a different city for the first time. The copy says, “Live There”. As the video shows, they don’t want you to just visit a city; they want you to live there and experience the local lifestyle.

Keep in mind that captions over hero images are read, on average, 300% more than body copy. That’s insane! Ensuring that caption is accurate, targeted and matches the hero image is SO important!

The text contains critical spelling, grammar, spacing or punctuation error

Hero headline or description contains inaccurate, offensive or misleading information

Customer or WS provided specific text for hero headline that wasn't used or was altered

Hero headline or descriptions contains non American, awkwardly worded phrases or insufficient information

The text contains minor grammatical, spacing, capitalization errors or non-American spelling

Hero heading or description is too long or description is not necessary

Keep the text to a minimum! A picture is worth 1000 words, so make sure any additional words are straight to the point.

Hero banners are really popular—like the one below from the Dollar Shave Club. Its high-quality imagery paired with simple text and a call to action.

Once the hero heading goes beyond 8 words, it risks not standing out at all. Effective hero headings are generally 3-8 words long. Anything hero heading 12 or more words will be considered too long, usually. Break up text using a hero description instead of fitting it all in the heading.

EX 1:

EX 2:

Sometimes descriptions below the hero headline are not necessary. Too much text clutters up the hero area, and makes it so nothing really stands out. If the description interferes with the aesthetics of the hero image, it should be omitted.

Hero descriptions should never exceed 3 lines, and should not exceed 50-60 characters (including spaces) per line.

Wording in headline is too generic/h1 or description should be swapped with headline

Homepage headlines often fail to say what the business does. Instead, they offer a general statement about quality or value.

The visitor’s first question is “am I in the right place?” The headline should answer this question by explicitly stating the main business category. Make the headline text descriptive, so every visitor can tell what you do, at a glance, within seconds.

The way to fix the above example is

poor copy utilized for the CTA

Footer - 3 points

A website footer is found at the bottom of your site pages. It typically includes important information such as a copyright notice, a disclaimer, or a few links to relevant resources

(3 points)

Footer Design and Content

Acceptable

Customer provided very specific instructions or reference sites that were ignored

Contains broken or incorrect links

Too many colors used or poor color contrast

Missing elements called for in Intake Form

Address/phone/email/hours in wrong or inconsistent format

Lorem ipsum present, spelling errors, html or css displaying, or footer navigation issue

Lorem Ipsum Present

If the entire site makes use of lorem ipsum text, it's acceptable to keep the footer mission statement or call to action as lorem ipsum text. However, if copy writing was completed for the site, then either 1. Text must be written to replace lorem ipsum text in the footer, or 2. You must remove the section and distribute content from the other columns to fill the gap. We want to avoid the footer being the only place on the site with lorem ipsum text.

HTML or CSS displaying

Footers are a popular place to put things like embed codes, certifications, widgets, or other badges. Sometimes if we paste in the code and miss a closing tag for example, the actual html may display on the site. If any back end code shows up on the front end, it would be marked as an error. This call out is specifically for the footer.

Issue with the footer navigation

This can include anything from the footer not including the right links, having a drop down menu, links being in the wrong order, or the navigation wrapping into another line when it could be avoided.

For WooCommerce, TOS link missing from navigation

Interior Hero Section - 3 points

This grades the overall style and layout of the interior hero area

(3 points)

Interior Hero Section

Acceptable

Keep the hero height in the interior section in the range of 200-350 pixels tall if you use an overlay layout. Have text placed over the hero image, like the example below. Make sure there is proper contrast for the text, and that the text is not over any focal points, or text within an image.

If you choose a layout other than overlay, make sure the text area still has a good heading, and it flows properly with the rest of the page. However, this may cause the header to be over 350px tall, but it should not take up the entire upper fold.

Inconsistent style from page to page

Low quality or inappropriate image

The image needs to reflect the product, service, or information of the customer.

If your company deals in sky diving equipment, would it make sense for you to put up a hero image of a person scuba diving?

It only makes sense to relate your hero image to the rest of your website. The image must reflect your brand’s values and principles. If the image is deemed completely unrelated to the business or casts the business in a negative light points may be deducted. It is also important to make sure that the interior hero images are clear and in focus. If the image is blurry it may be hard for the user to tell what the image is trying to display and points may also be deducted.

Hero section text too small or large

Typography - 10 points

Typography

Typography - Style

Acceptable

Customer provided specific instructions regarding fonts that were not implemented

Typography - Paragraph Length

Acceptable

Having the right amount of characters on each line is key to the readability of your text.

It shouldn’t be your design that dictates the width of your text. Consider this advice on readability and line length from the BaymardInstitute:

Limit Line Length

“You should have around 60 characters per line if you want a good reading experience. Having the right amount of characters on each line is key to the readability of your text

EX 1:

EX 2:

Animations present when not requested on home page

Video embeds present when not requested on home page

Slider modules present when not requested on home page

Photo galleries present when not requested on home page

Modal popup modules present when not requested on home page

Particle backgrounds present when not requested on home page

Interactive Callout modules - flipboxes, slideboxes, info circles present when not requested on home page

iFrames/Paypal/script embeds/Nested modules/Chat plugin/Social feed present when not requested on home page

Google Map present when not requested on home page

Typography - Paragraph Alignment

Acceptable

Paragraph text right aligned or justified

Paragraphs are not aligned between rows

Typography - Paragraph Font

Acceptable

No line break between paragraphs - text dump

Too much text written in all caps

Poor text formatting including widows, orphans, or inappropriate line breaks

Typography - Headings

Acceptable

Headings help guide you through the content. They give context to paragraphs. They stand out from the copy blocks and allow you to quickly scan them to get a good sense of what those paragraphs are about.

THE IMPACT OF HEADINGS

Readability Headings help guide you through the content. They give context to paragraphs.
Accessibility While most users may only care what a web page looks like in a browser, some users with disabilities rely on well-formatted HTML to read and navigate the web.
SEO Putting keywords into your headings can help boost your SEO.

HEADINGS SHOULD GROUP RELATED CONTENT

Headings are all about the content. That’s the whole reason they exist. A heading should describe all the content beneath it until you reach another heading of the same or higher level.

That means you might have to restructure some paragraphs or even other headings to make sure your content is grouped appropriately.

The heading contains critical spelling, grammar, spacing or punctuation error

Heading contains inappropriate, offensive, inaccurate or misleading information

The heading contains minor grammatical, spacing, capitalization errors or non-American spelling

Heading contains non-American or awkwardly worded phrases

One or more paragraphs are missing headings

It's vital that isolated paragraphs or groups of paragraphs include some kind of heading.

If you are pulling content from an old site, and you recognize that paragraph headings are missing where we require them, we ask that you add them. When adding the headings, come up with your own, and use this as your method for deciding what to put:

Is there a clear, concise few words that would sum up the paragraph? If so, use that as the heading
If #1 is not applicable, just repeat the first sentence of the paragraph as the heading
If that won’t make sense, or the sentence is just too long, use another sentence or group of words within the paragraph and copy and paste those as the heading
If that won’t work or doesn’t make sense, just use the company name or page name as the heading of the paragraph. Don’t use lorem ipsum or a generic “heading 1”

Headings not placed in an appropriate place, or is not needed at all

Heading was incorrect, duplicated, or placed over the wrong section or paragraph

Typography - Quality of Copy

Acceptable

Customer provided content was altered in a way that was not requested

Copy contains inappropriate or offensive verbiage

Spelling errors or non-American spelling

Any spelling errors should be caught by the Builder or the initial QA. Any remaining spelling errors with result in points deducted.

If the name of the company, phone number, address, or the names of any employees on the site are spelled incorrectly, this will result in an immediate fail. However, if this is found, it would marked as a critical error under “Contact info on website conflicts with intake form” in the “Business Contact Info” on the form

All text should be spelled correctly, but other spelling errors within the content of the site will not be considered critical.

Poorly written copy

Grammar errors

Inappropriate use of punctuation or symbols within content

Copy written from incorrect point of view

Site Content - 6 points

(3 points)

Content - Layout

Acceptable

When you are jamming too much content without any adequate breathing space on your pages, it can leave your visitors feeling overwhelmed as they have to focus extra hard to absorb the information.

White space is simply the gaps or blank area between content like headline, subtitle, body, images or videos —simply put, it’s the empty spaces on a page.

How does white space help improve your website?

1) White space helps make your website look more sophisticated and elegant

Minimalist designs give people the impression of elegance, sophistication, and beauty.

When you add more white space in your webpages, you are making your pages more “minimalistic” and better put together.

EX 1:

EX 2:

EX 3:

Overlapping content

(3 points)

Content - Consistency

Acceptable

One of the top principles of good UX is to keep the interface consistent throughout the entire product.

Design consistency is the act of keeping all of the repeating elements of your website the same throughout the entire site. This encompasses everything from the placement of buttons and icons to the colors and fonts you use.

Heading styles, paragraph styles, colors, buttons, links, image styling, spacing, icons, patterns, layout, basically all site elements must be consistent from page to page

Different headings styles on each page or on same page

Content or column width not consistent between rows or within single row

Columns with unequal heights within same row

Overall content arrangement inconsistent from row to row within same page

Elements of design inconsistent within same page or between pages

Images, Videos and Icons - 6 points

(3 points)

Image/Icons/Videos - Quality and Function

Acceptable

Images or icons are blurry

Images don't click to enlarge in a gallery

Small, low resolution images used when high res images were available

Images or icons not relevant to industry or theme

Images clustered together instead of spread through content

File size for uploaded images or videos are too large, or images/video are broken

Issue with video playback

Relevant images were provided by not utilized where they should have been

(3 points)

Image/Icons - Alignment

Acceptable

Images or icons not cropped, styled or positioned properly

Image heights within same row are inconsistent

Icons not aligned properly with text

Site Functionality - 3 points

This grades the use of modules and plugins on the site

(3 points)

Modules and Plugins

Acceptable

Requested plugin not set up correctly or wasn't set up, or unapproved plugins added

CRITICAL ERROR

If the customer requests a plugin, such as gravity forms, Bookly, Give, IMPress Listings, Events Calendar, etc. it must be installed, and set up to the best of our ability. That means if the customer has events, for example, we add the events, and create themer layouts when needed to properly style the layout. Points will be deducted if the plugin has either not been installed, or has been, but was set up incorrectly, styled poorly, or anything else that would be determined to be an error.

An example would be:

Placeholder events being set a few weeks to month ahead of due date so customer can see functionality

Modules or conflicting scripts breaking CSS

If the customer has a membership site, or any kind of site that requires access to the login/register pages built into WordPress, there needs to be a clear way for customers to access it. If no log in/register/sign in/ button can be found, points will be deducted. Also if the links don’t function properly, or a request that is in scope relating to login/register pages is not correctly implemented, it will also count against you.

Unnecessary elements or poorly formatted product or post page/themer layout

Improper or unnecessary use of creative module, necessary module missing, or wrong module chosen

In the example below, we show an example of unnecessary use of an accordian. There was an accordion used and a gallery placed at the bottom when the content could have been easily put into three separate rows utilizing the images within the rows instead of all together at the bottom of the page. Each accordion had a minimal amount of text, and there was not much going on in the page.

EX 1:

EX 2:

EX 3:

EX 4:

EX 5:

EX 6:

Colors - 5 points

This grades the use of color on the website

(5 points)

Color

Acceptable

The colors will be deemed acceptable when minimal colors are used, when they properly contrast, and match the industry or specific requests of the customer. For most sites, you should keep the background white, and use other colors for accents.

Color Contrast

WCAG 2.0 level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. WCAG 2.1 requires a contrast ratio of at least 3:1 for graphics and user interface components (such as form input borders). WCAG Level AAA requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text.

Large text is defined as 14 point (typically 18.66px) and bold or larger, or 18 point (typically 24px) or larger.

Hint: Colorzilla is an excellent tool for extracting the color value from any page element. Additionally, WAVE can analyze contrast ratios for all page text elements at once.

Use our link contrast checker to evaluate links that are identified using color alone.

https://webaim.org/resources/contrastchecker/

Color or color theme specifically requested by customer not used without justification

Text, containers, or any elements in the content area have poor color contrast

Don’t use the same or similar colors for text and background. The more visible the text, the faster users are able to scan and read it.

The W3C recommends the following contrast ratios for body text and image text:

Small text should have a contrast ratio of at least 4.5:1 against its background.
Large text (at 14 pt bold/18 pt regular and up) should have a contrast ratio of at least 3:1 against its background.

EX 1:

EX 2:

EX 3:

Buttons and Links - 5 points

(3 points)

Buttons and Links - Style

Acceptable

Too many different buttons styles

Hyperlink not styled appropriately

Full URL written out when it should have been a button or text

Button has too much text inside a single button

Buttons/hover/active have poor color contrast, or Inappropriate link or button color

poor copy utilized for the CTA

(2 points)

Buttons and Links - Functionality

Acceptable

Broken links

Buttons or text incorrectly link to destination

External links and linked documents do not open in new window

Urls or other text on page not linked that should be

Urls or other text on page linked that should no be/unnecessary cta's

CTA or buttons with same label have different functions

Hover effect or link only for text, not whole container

Forms and SEO - 4 points

(3 points)

Contact Forms

Acceptable

Forms have poor or inconsistent formatting

Requested fields are not present

Incorrect field types used

Confidential information is requested

Form fields text color or background color styled poorly

Forms not functioning properly

(1 point)

SEO

Acceptable

No custom title tag added for home page

A title tag should describe what a page does, not what it is. Words like “Home” just tell you what a page is. This doesn’t help Google or our customers. Title tags including these sorts of phrases have a lower click-through rate.

Title tags are a major factor in helping search engines understand what our customers websites are all about, and they are the first impression many people have of their page through their google search results.

Title tags are used in three key places: (1) search engine results pages (SERPs), (2) web browsers, and (3) social networks.

As we are working to bring our overall standards of design to new heights in 2020, part of that is creating and adding a good title tag to every HOME page. We can settle for the Yoast generated title tag for the internal pages.

Because title tags are such a vital part of both search engine optimization and the search user experience, writing them effectively is a terrific low-effort, high-impact SEO task.

See articles like this for assistance generating title tags

https://mrs.digital/blog/title-tags-still-important-for-seo-2019/

But going forward the title tag should for the home page must not include the word “home” but must instead provide relevant information about what the website wants the users know.

Again, we are just doing this for the home page. The Yoast generated title tags for the interior pages are not ideal, but are sufficient for now.

Title tag misspelled, added incorrectly, or poorly written

H1 tags missing

More than 1 H1 tag on a page

There is no favicon

Failed SEO Audit

Customer Provided Content - 3 points

Content - 3 points

(3 points)

Necessary Content Missing or content added incorrectly

Yes

Minor, or less significant provided content was omitted

Mobile - 360px - 7 points

This grades the overall style and layout of the header, nav, and hero on the mobile site.

(3 points)

Mobile Header, Nav and Hero

Acceptable

Overlapping content

Content is aligned, sized or formatted inconsistently or incorrectly

Hero text, hero image, or logo is too large or small

Text is being cut off or single words dropping to second line

Elements showing on mobile that should be hidden

Elements disappear on mobile that should be showing

Hero/nav/header section contains more than one error or a severe design flaw

(3 points)

Mobile Page Content

Acceptable

Overlapping content

Columns widths too narrow

Text or other content aligned inconsistently

Columns or rows have too much or too little padding/margin

Forms do not appear properly

Elements showing on mobile that should be hidden

Elements disappear on mobile that should be showing

(1 points)

Mobile Footer

Acceptable

Footer elements not aligned consistently

Overlapping content

Large gaps between elements

Tablet - 768px - 7 points

(3 points)

Tablet Header, Nav and Hero

Acceptable

Poor color contrast or overall poor color choice

Overlapping content

Content is aligned inconsistently or poorly

Hero text, hero image, or logo is too large or too small

Text is being cut off or single words dropping to second line

Too many header elements - looks cluttered

Navigation is styled poorly

Elements showing on tablet that should be hidden

Elements disappear on tablet that should be showing

Hero/nav/header section contains more than one error or has a severe design flaw

(3 points)

Tablet Page Content

Acceptable

Overlapping content

Columns widths too narrow or too wide

Text or other content is aligned inconsistently

Columns or rows have too much or too little padding/margin

Forms do not appear properly

Elements showing on tablet that should be hidden

Elements disappear on tablet that should be showing

Paragraph or heading text too large or too small

(1 points)

Tablet Footer

Acceptable

Footer elements not aligned consistently

Overlapping content

Large gaps between elements

Laptop - 1366px - 4 points

(3 points)

Laptop Header, Nav and Hero

Acceptable

Overlapping content

Content is aligned inconsistently or poorly

Hero text wraps incorrectly

Navigation wraps into two lines

Hero/header/nav section contains more than one error or has a severe design flaw

(1 points)

Laptop Page Content

Acceptable

Overlapping content

Columns appear too narrow or wide

Text no longer fits in its container

Content not properly aligned

Text does not wrap appropriately

Laptop footer elements overlapping, not aligned or has other design issue

Customer WOW Factor

How would you rate the site?

This is a more subjective grade that expresses the overall impression of the website from the perspective of the customer. It is not scored, but used as a way to categorize the quality of the site.

5 - Wow!

4 - Above Average

3 - Average, could be improved

2 - Below Average - Dull and lacking creativity - needs full polish

1 - Poor - Unacceptable. Will require complete redesign.