Grid Based design is based on the principle that a person naturally reads a page top to bottom and left to right. The desginer uses this tendancy to plan their design and places important features in the next immediately obvious place from where the viewer is on the page. For example, webpage might have a title, and this title will be placed at the top of the page in the first place a viewer will look. Next they viewers eyes will progress to the next row of the page on the left side, where the designer will have placed an image or title that will catch the viewers attention. The importance of the content in maintianing the viewer attention decreases as they get deeper and more immersed in the page.
Grid based design is an extremely common method of laying out a web page and is used throughout most of the webpages you come across in your daily lives. The page is divided into a series of rows and columns the content of which is strategically planned to progress the attention of the viewer towards the main content. Pages are commonly divided into 2, 3 or 4 columns and multiple rows. This allows for enough room for content as well as providing multifaceted content of a single screen.
Responsive webpages are ones which change depending on the device/browser that they are viewed on. This includes screen size and browser capability and covers a range of changes such as making the website's layout change depending on what device it is displayed on. Equally, some browsers cannot display some types of CSS tags which can be overcome by creating a responsive webpage. Some people use pre-made css files which can be linked to a html page and make the page responsive to a variety of different browsers and screen sizes. This is an essential tool in a forward thinking web designer's toolkit as it allows for universal, optimal viewing of the website that they are designing.
Semantic structure is a range of tags which clearly display their meaning to the developer as well as the browser. Semantic tags are ones which you can understand by reading them, for example h1 is the most important heading tag, while p is a paragraph tag and img is an image tag. These tags are immediately obvious in their purpose and allow the developer to more easily define the changes they are making.
I found the grid based design and understanding the pyschology behind it interesting as it shows that web design is a logical craft. It is also interesting to recognise the links between the grid and the boxification discussed earlier.