For SAC Ampleforth's website, I pulled back my progress a few stages to design the mobile version of the website. As to order the content and see how it would fit on the smaller screen and then scale it up to the full version – as I was taught at Work in the Web.
The landing screen of the home page, with the full screen image, with the SAC logo and the hamburger which takes the form of the menu, to allow quick navigation of the website.
Scrolling down, the vertically aligned elements, the large clickable class buttons have been rearranged to fit horizontally, making best use of the space on the screen. I would imagine the layout of this element would be based on the width and height of the screen.
If the height is greater than the width – horizontally aligned buttons.
If the width is greater than the height, vertically aligned buttons.
Moving down again to the membership section, with the text box overlaying the image, taking advantage of the vertical space. Perhaps in a parallax format to add an extra dynamic to the page. Although, this could ruin the user experience to due to the lag...
Similarly, the swimming pool section of the web page also collapses into a vertical format, stacking the content above the image. Which makes best us of the space, rather than cramming it all horizontally.
It'll certainly be fun to animate...
Leave your comment