Eventually, we redesigned the site to link out to our projects across the web and transform it into a shared portfolio for us. To do this, we decided to use a sticker aesthetic to put projects onto the existing placeholder. With the site, I was concerned with making it as efficent and responsive as possible. The sticker rollovers were made using CSS sprites instead of javascript to ensure that they would work with a low footprint cross-browser and device. I was careful to tweak my media queries to make our site functional on as many devices as possible, making the stickers rearrange and eventually stack at different breakpoints.
In our third revision, we designed our own project pages. I used a responsive image solution to serve different sized images to the use depending on the screen width. This meant that a mobile user was not served the same huge image file as a HDTV and our site would run efficiently on any device.
No comments:
Post a Comment