We needed to update the placeholder website to start to link out to our content around the web. We started by introducing our manifesto as a page on the website. I used bootstrap to lay out the two column format we had used in print and transition this to a single column layout on tablet and mobile. It was important to us to not cut corners in making our site as responsive and quick as possible. While we wouldn't use bootstrap for producing the main site, it was really helpful for this page due to the amount of text we had to arrange.
We talked about how we could adapt the site to link out to different projects and Vimeo videos. We had originally planned to completely overhaul the placeholder website but really liked the changing colours and came up with the idea of turning a key graphic from each project into a sticker graphic and placing it on the blank canvas of the home page. The benefit of a system like this is that at this stage we are experimenting and we can have the flexibility to add and remove stickers whenever we like. These also help to show of our illustration style as soon as you reach the home page.
Again, we focussed heavily on making our site as accessible on as many devices as possible. All of the icons rearrange and stack depending on the window size. We were also keen to be as efficient with our code as possible, using pure css rollovers in place of javascript.
Rollover text
Mobile format
Arranging multiple stickers on the page
desktop layout
mobile layout
This is a big improvement to what we had before and should improve massively as we complete more projects and add more stickers.
No comments:
Post a Comment