The guideline proposes that an image, page layout, photo, illustration, etc should be imagined as divided into nine equal blocks (three wide, three tall, like a tic-tac-toe board) by two equally spacedhorizontal lines and two equally spaced vertical lines. The most “interesting” points occur where the lines intersect or along those lines.
Points of interest in the photo do not have to actually touch one of these lines to take advantage of the rule of thirds. If it falls close to the intersection of 2 of the lines for example it can still take advantage of the rule. You can place your items along either the vertical or the horizontal lines and still do fine. In most cases it is neither possible nor useful to use all four points to highlight the most important functions or navigation options in a design. However, you can definitely use some of them (usually one or two) to properly place the most important message or functionality of the site. The left upper corner is usually the strongest one, since users scan web-sites according to the “F”-shape.
In responsive web design, hitting the exact marks isn’t easy as different mobile devices will change where things sit. Remember, you don’t have to place things exactly on the points—just near them.
good reads: https://tympanus.net/codrops/2012/05/23/understanding-the-rule-of-thirds-in-web-design/
a nice way to apply it to you site: https://codepen.io/rm/pen/nemsu
also re-read the web design best practices
Rule of thirds
The guideline proposes that an image, page layout, photo, illustration, etc should be imagined as divided into nine equal blocks (three wide, three tall, like a tic-tac-toe board) by two equally spaced horizontal lines and two equally spaced vertical lines. The most “interesting” points occur where the lines intersect or along those lines.
Points of interest in the photo do not have to actually touch one of these lines to take advantage of the rule of thirds. If it falls close to the intersection of 2 of the lines for example it can still take advantage of the rule. You can place your items along either the vertical or the horizontal lines and still do fine. In most cases it is neither possible nor useful to use all four points to highlight the most important functions or navigation options in a design. However, you can definitely use some of them (usually one or two) to properly place the most important message or functionality of the site. The left upper corner is usually the strongest one, since users scan web-sites according to the “F”-shape.
In responsive web design, hitting the exact marks isn’t easy as different mobile devices will change where things sit. Remember, you don’t have to place things exactly on the points—just near them.