Canvas QC Guidelines:
Overall, we want to make canvases flexible enough to meet a variety of client needs (Ex: some churches
have short names, others have long names – does the logo block work well/look good with both?). We
also want to make it easy for clients to create good-looking and good-functioning sites. In some cases
this means expanding functionality. In others, it means taking it away. The role of the QC’er is not just to
check what is/isn’t working, but also make suggestions on how to improve the design/functionality to
accomplish these goals.
Initial QC
Select one canvas color theme and apply all page designs of that theme to a separate page on your site.
Typically, start on the home page working from the top down, then move to the sub-pages. Check
display and functionality in depth in one browser, then review primarily just display in other browsers.
General Items to Review:
1. Do ‘edit’ hover states appear overtop the correct areas and are the correct size?
2. Page Names:
a. Are the page names intuitive as to what appears yet brief as possible?
i. Ex: Page-Slideshow instead of Page 2, etc.
3. Page functionality:
a. Do pages stretch vertically where appropriate?
4. Design blocks:
a. When you change one, do other pages that contain that same block inherit the
changes?
b. If the design block can be changed to other block types, do other blocks types display
well? Are there other block types we should allow a design block to be changed to that
it currently cannot change to?
c. Does good sample content appear in all design blocks?
5. Custom Functionality:
a. Ex: Countdown timer, special design blocks like background Image, color picker, etc.
b. Review all works correctly, footer bar to edit these appears if necessary, etc.
6. Check display/functionality in each of the below browsers:
a. IE version 8-9
b. Latest versions of Firefox, Chrome, Safari (on a Mac)
7. Mobile:
a. Check the site on a mobile device like an iPad. Make sure there’s no display issues and
that the fly-out menus work correctly.
Specifics:
1. Logo Block
a. How does it handle images that are too large? It shouldn’t cause display issues if a large
image has been added (a common thing people do).
b. Do the correct pixel dimensions for the logo images appear in the block controls?
c. Can you change the logo block text size appropriately?
d. Try a name that’s too long. Typically text overflow should be hidden.
e. Does logo/text link back to home page?
2. Slidedown shelf
a. Does it slide down/up appropriately?
b. Slide-down title:
i. If you can change the slide-down title, is the title overflow:hidden if it’s too
long?
ii. Is it in a text block? (It should be).
c. Shelf body area:
i. When you edit the block(s) in the slide-down shelf itself, does all appear
correctly in edit mode?
3. Utilities Menu, main nav, other menu blocks:
a. How does it appear if too many menu items are added? (Typically should be
overflow:hidden).
b. Do dropdowns appear to the 4th level (if applicable)?
c. How does it appear if there are no menu items – is the edit hover state still there?
d. If the text of menu items is quite long, does the text wrap (if it should)?
e. Do hover states appear correctly over long or wrapping menu items?
4. Image Menu blocks (ex: Social network icons)
a. Do pixel dimensions appear in the block controls?
b. Do default images used appear in the ‘choose one of ours’ screen so they’re reselectable?
c. How does it handle too many menu items or no menu items?
5. Slideshows:
a. Are controls functional?
b. Do images link correctly? (Watch the area around controls, sometimes there’s hidden
areas around controls that don’t link but should).
c. Change/add an image in all slideshow design blocks. Make sure images you add don’t
appear on other pages in inappropriate slideshow design blocks.
6. Rich Content Blocks:
a. Do paragraph, heading 1-3, link, & list styles appear appropriately and the same in/out
of edit mode? Check all Rich Content design blocks and main body blocks.
b. Do 3 appropriate designer selected colors appear in the color picker?
7. Calendar Blocks:
a. If a custom upcoming events style is built into the design, does it display/work correctly?
Does this style appear if you add an upcoming events calendar to a main body area?
(oftentimes, it should).
b. In all three views (Upcoming Events/List/Grid) do all lightboxes/pop-ups appear
appropriately?
i. Check Grid view pop-ups for events at the extreme left, right, and top. (Ex: first
week & on Saturday/Sunday), sometimes these are hidden behind the
background). Check this on both default & wide page designs.
8. Blog Block:
a. Do social network icons have a border in IE? (this is often missed).
Secondary QC
1. Review all QC fixes from Initial QC
2. Review display/functionality on all remaining color themes