OUGD504 - A Brief History Of... Website - Scrolling Mechanism and Website Variations

Given that I wasn't able to code the website, and until this point have only been able to verbally explain the way the website will work when the user scrolls through it, I made a small animation to show how it would work.

The mechanism would work the same across all the blogs, below shows how the recipe blog would look with the scrolling mechanism implemented.

When the website is on a 1048x768 screen, this is how it will look.

This is how it will look on a 1366x768 screen.

If the window size was reduced, the content of the page would shrink to the width of the page, and work as two sub-pages which you could toggle between at the bottom of the page by clicking in the circles. The column in which the text is remains thinner than the column the images are in, as this keeps the golden ratio concept running.

   

   

The mobile variation is similar to the reduced screen width variation, except the images for suggested posts are removed, as including less images and links will use less data. For reasons of data reduction, the mobile site will only function as a blog, you will not be able to submit through the mobile site. The background colour is the same across both, as this keeps the mobile site visually consistent. I deemed this to be more important than conceptually consist given how the mobile site is meant to be practical.