Getting a great microsite out to the market requires a lot of effort from various stakeholders. We’ve discussed the value of building out a great microsite preparation team before. There’s one key stakeholder that it’s vital not to forget about. And that’s a quality assistance (QA) team member.
Quality assurance (QA) are those often unsung heroes who make sure that what goes out the door, to the client, reflects the best work of your organization.
In the software world, these are the bug-hunters on the team who make sure that programs work as intended before they’re released to the general public. In microsite teams, these are the team members responsible for ensuring that no internal links are broken and that the site loads as well on mobile as it does on desktop.
Checklists are an ideal way to reduce human error and to verify that procedural safeguards are followed. They’re used everyday by airline pilots and project managers to make sure critical tasks are completed properly, just like a QA checklist.
So why not give your microsite development team the tools they need to get the job done?
Here’s our 21 point checklist reflecting some microsite design best practices that we’ve gleaned from years of experience working with our clients. Follow these to make sure polished, pixel-perfect microsites get out the door – every time.
Media content
Spend a few minutes going through your microsite to make sure that the images used are consistent and display well for clients.
Image resolution okay
Blurry images look incredibly amateur. Make sure that whatever imagery you’re using throughout your microsite is of a good enough resolution (between 1500 and 2500 pixels) to render well on your viewers’ screens. To do this, go through the entire microsite page by page. If images appear pixelated, download them and measure their resolution using an image editing tool. Then, find better quality images and upload them in their place.
Consistent cropping
If you’re cropping images, then make sure that you are using a consistent frame and design pattern. Ideally, you should also use the same positions. If all your images on a microsite page are left aligned and close angle then it will look strange if an image is center frame and wide angle.
Avoid using the wrong imagery
Your company might have access to a stock image library to provide images for the microsite. However, ultimately everyday users are responsible for the upkeep of the website. Users should go through the website and make sure that no mistaken imagery inadvertently made it onto the pages. Verify that every image that appears on the microsite was intended to be uploaded and that there have been no accidental mistakes. If you’re trying to avoid stock imagery, then make sure that all the images you uploaded are your own.
No branding accidents
Just as we’ve encountered companies who have accidentally uploaded the wrong imagery to their microsites, we’ve seen instances in which companies have accidentally uploaded the wrong PDF or video to their site. Yes, it really happens! If you’re looking to avoid an unhappy accident, then go through each and every document and video on your website and make double sure that you really intended to upload them.
Consistent font layout
For microsites filled with text, the typography is one of the first things that catches visitors’ eyes when logging onto your site. Make sure that it doesn’t detract from the professional impression you’re trying to create.
Site to microsite consistency
We’ve talked before about how one of the key Zoomforth advantages is its ability to replicate sites quickly from a template which can be developed specifically to capture brand and styling guidelines. Those branding guidelines often standardize fonts to be used across all marketing material.
It’s a good idea to go through the microsite and see how it squares up with your company’s actual website. Try to ensure brand conformity by applying the same fonts across both websites.
Client site consistency
Sometimes, you will find yourself building microsites on behalf of clients. Marketing agencies can undertake this activity, for example. If you’ve been given the responsibility of building a site for a client, then you should make sure that the microsite you’re building conforms with the client’s website and style guides — just as you’d make sure that it conforms with your own.
Presentation consistency
If there is information in different parts of the microsite that is designed to represent the same type of information then it should be presented consistently. Go through the microsite to see any instances in which there is a mismatch in layout between pages. Keeping the same template demonstrates conformity and consistency – which appears professional and improves the customer experience.
Eliminate text cut-offs
Text that cuts off between lines is bound to create a poor impression on the reader. Go through the microsite in order to identify any run-offs. Reformat the text. Enjoy a better presentation.
Brand consistency
Many brands have extensive guidelines for how the brand should be portrayed visually. These specify everything from the official logo through to the exact shade of colors that should be used across all marketing collateral.
Cross site sonsistency for brand guidelines
Go through the whole microsite and make sure that the brand guidelines have been followed throughout. This will take some time. Pay careful attention to the fonts used and colors. If the logo appears, then make sure that it’s an official up to date version.
Extensibility
One of the advantages of microsites relative to static documents is that users should be able to constantly tweak the site and add new pages and content as requirements dictate. Before publishing the first iteration of the microsite, it’s important to make sure that it’s capable of growing with the company’s needs.
Is the design right for growth?
You’ll want to make sure that the design you’ve settled upon can be used as the site grows, if that’s going to be a requirement. In order to do this, first duplicate the microsite. Then try to add new content. See if the current design looks good with the new content — or if a rethink is needed.
Adding new team members
One thing that is reasonably predictable in many organizations is that the team will grow over time and microsite team pages will need to be updated when that happens. If your organization is going to be onboarding new team members, then you should take a moment to test if the template you have is capable of supporting that addition. On your duplicated QA site, try to add a new team member and see if the site looks okay.
Resizing tiles
Let’s say you need to add more content to the site. To do this, you might need to resize a tile in order to make room for more text. Test out how easy it is to do this on the microsite. If it’s very hard, you may wish to rethink the design you’re using.
How do web links appear?
Try adding a few hyperlinks to the page if you don’t already have some. They should change to a specific color — which can be changed in the design settings. Do these conform to brand guidelines? If they don’t, then change them.
Do anchor links work?
Anchor links are links to specific parts of a webpage designed to save users time on unnecessary scrolling. They can be used both within web pages and as part of external hyperlinks. If you’ve added them to page(s) on the microsite, then go through these and make sure that they’re working as expected.
Do forms work perfectly?
If you’ve added forms to your microsite then it’s important to make sure that they’re sending as expected. If not, then you can end up in the embarrassing situation of wasting users’ time having them fill in forms that don’t reach their destination. Make sure that the forms work and that they are rendering properly and in conformity with branding guidelines.
Do captions work?
Users should try to adjust the length of any image captions in order to make sure that they don’t adversely affect the layout of the page. If captions might need to be updated and the test fails, then it might be worth considering alternative layouts that will better accommodate these changes.
Responsive / mobile design
A large number of users can be expected to access the microsite from a mobile device. In fact, depending on the industry, those users could be in the majority. It’s therefore important to do a thorough QA in order to make sure that the mobile version of the website is working as intended. If you’re using Google Chrome, then you can simulate how the microsite will render on mobile by using Developer Tools.
How does the site look on mobile?
Simulate accessing the site from a mobile browser using web tools and see how things look. Does anything look misaligned? If so, take note of where and edit the design so that it performs better on mobile.
Expand images and bios
Try expanding some images and biographies (nested content) while accessing the site from a simulated mobile device. Again, check for any misalignment and rendering issues. If you find them, change them.
Implementing a QA checklist makes for consistently good content experiences.
Browser consistency
Just because you’re a massive Google Chrome fan doesn’t mean that everybody else is. To properly QA your microsite, you’ll need to test it out from a variety of browsers to mimic the way your users might be accessing it.
Browser tests
Open the microsite using a few common web browsers. You could try accessing it with Google Chrome, Safari, Mozilla Firefox, Internet Explorer, and Opera.
How does the site render? If you notice anything that doesn’t work on one platform then you may wish to change it.
Accessibility
You’ll also want to make sure that your microsite is accessible irrespective of what impairments your users might have. Run through the following QA list to make sure that your site can be accessed by all. (Ensuring accessibility might put you in conflict with brand guidelines. If this is the case, you might wish to raise an internal case with customer support).
Are fonts easily readable?
How legible are your fonts? Is sufficient contrast used and is the font easily readable at the size it renders in? Check this throughout your microsite. If you discover that your fonts are hard to read then you will wish to change them.
Is alt text used throughout the site?
Alt text (short for alternative text) is text that renders on a web page in lieu of images. Including this both boosts SEO and helps people who can’t see images to be able to understand what’s happening on the page. Make sure that every image on the microsite has an alt tag. You should be able to find this out by hovering over the images. If there are any that don’t have this text, then you should add it.
Are the colors used accessible?
You can visit accessible-colors.com to see whether the colors you’re using in your microsite are sufficiently contrasting to be compliant with the WCAG 2.0 guidelines for contrast accessibility. Of course, there’s (usually!) no legal requirement to comply with this regulation. However, it’s a best practice and makes your microsite accessible to the widest possible audience.
Are links working?
Your microsite will likely both link to internal pages as well as to external URLs. It’s important to make sure that these links are all in good working order.
Broken links
As the name suggests, broken links are links that lead to nowhere. Go through the microsite and click on links to see if there are any that don’t work. Double-check that the links are pointing to the right resources.
Email hyperlinks
Hyperlinks can point to emails as well as websites; the former typically prompts the user to automatically begin an email in their default email program. Make sure that the email addresses listed on the contact page all contain a link so that it’s quick and easy for visitors to drop an email to one of the listed points of contact.
Header and footer checks
Don’t forget the header and footer! These are the parts of the website that load up first and last and can help cement the opening (and closing!) impression of your website.
Can a secondary logo be added?
You might wish to add another logo in the header. Check to make sure that you’re able to do this. If you’re not, then you’ll probably want to leave room in the footer for one to be added if you so wish.
Social media icons
Another common use of the footer space is for companies to add links to their official social media channels. If you don’t already have these added, then have you left space to add them in if required?
Space for a search function
You’ll also want to have a look to make sure that there’s room for a search functionality in the header section of a website. You might wish to add this in at a later time to give users the ability to quickly search through your site.
Easily accessible navigation
You need a clear site navigation in order to allow visitors to jump around pages on your site. Make sure that it’s easily accessible and easy to use.
Is the navigation going behind any logos?
You don’t want your main navigation bar to be obfuscated by any logos on the site. Check how the menu renders from the desktop. Then check it out from a simulated mobile device. Everything looking okay? You can move on to the next item on the checklist.
How do secondary navigation bars appear?
Your navigation may consist of both menus and submenus. Check out how both of these appear. Does the menu dock and undock as expected?
Design brief compliance
The design brief is the document that sets down your instructions for how you’d like the website to look and feel. If you’ve built the microsite on the basis of a design brief, then go over it again to make sure that you’ve checked all the boxes.
Did you get everything in?
Make sure that you’ve adhered to all instructions in the design brief. This is particularly important if you’ve designed the microsite for a client. Were all the details followed?
Create great microsites every time
We recommend going through this checklist every time you’re about to click the publish button on a new microsite. Doing so will allow your microsite team to get rigorous about QA and to stamp out any unseemly errors that might have made it to production.
Create interactive, trackable and secure sales proposals with Zoomforth.
