Common Homepage Designs

Most sites that we make have common features, events widgets, news widgets, spotlights, collages etc. What can change dramatically however are the structures within which those are placed and they require differences in how you tackle QA'ing the site.

Anchor Scrolling

With Anchor scrolling sites we take the most liberties with the designs, often needing to stretch or distort certain areas to make them fit on the screen once we have added anchors. This means that Pixel Perfect is no use on these sites and you are more reliant on artistic judgement, and visual cues, to determine if something is "wrong".

The other major caveat on Anchor scrolling sites is that they are not only horizontally responsive, but vertically as well. This can lead to issues when testing that only occur at a specific Height/Width combo. Extra testing is required, in multiple browsers, to ensure the responsiveness of each section of the homepage.

Examples:

Parallax

We do not have a true parallax site made by Vision. This was a design fad for awhile and has mostly faded away. Again, due to the nature of the sites Pixel perfect will not work, however objects and areas should be their true shapes and sizes.

Classic

The "Generic" government website. Menu at the top, collage, and area under the collage split into two or three sections. All tools are available, and these generally have the least issues and can be done at speed.

Long

The primary feature of these homepages is the incredible length of the sites, upwards of 3000px is possible. Pixel Perfect is your friend for making sure the various vertical sections are the correct height. As a note, because these sites can be somewhat monotonous when scrolling down, the devs often add animations to make it more interesting. There are also generally breakpoints or arrows that will auto scroll to the top to aid the user

Examples: