Chapter 6: Check your final works

The final step is checking the live page to make sure everything is solid.

Check content

  • Make sure section /row /column structure is good. Read more
  • Use chrome extension HeadingMap to make sure the heading structure is good. Read more
  • Use the Chrome extension Alt Attribute Viewer to make sure there are no images without ALT text. Read more

Check visual design

  • If you have the graphic design for the page, make sure the page built in JSN PageBuilder 4 is 99% identical to it. 
    • Use chrome extension PageRuler to measure distance on a live page and PerfectPixel to help to spot the difference.
    • Check appearance on real mobile devices, not resized browser or mobile mode in the editor.
  • Pay attention to some of the common mistakes:
    • Top and bottom/left and right spacing are not identical and incorrect. Read more
    • The background-position is not right. 
    • Line height is not good. 
    • Border styling is not as in design.
    • The full-width section is set with a fixed width.
    • Misuse of Flex. 

Check performance

Check page by Google Page Speed and make sure to have around 90 scores on both mobile and desktop.

Check CSS code

CSS code checking
CSS code checking

Go carefully through each element and their containers to check Custom CSS and spot for CSS code problems.

The amount of code must be as little as possible.

Previous chapter:

Chapter 5: Style your Pages with default settings

Leave a comment

Make sure you enter all the required information, indicated by an asterisk (*). HTML code is not allowed.

Rate this article
(0 votes)