I worked with APCO worldwide to develop the Mediasmart and Digital Adwise websites, which are used in schools across the UK to teach children about digital advertising. This involved designing a website specifically for interactive whiteboards. The Mediasmart website was recently linked on the BBC: http://www.bbc.co.uk/news/education-18531752.

One of the proposals I have been working on is redesigning the site to be responsive, and work across multiple devices by inserting break points, at which point the design would change to be viewable on a smaller viewing port.


This is the current non-responsive design (Designed by me several years ago):



I started by by building a wireframe of the existing page:



I then created several break points based on the existing 4 column layout. When the viewport was less than 975px, the layout would change to the following 3-column layout:



The next break point is at 795px, where the layout changes to a 2-column format:



The  final breakpoint happens when the viewport drops below 615px in width, at which point the layout is changed to a 1-column layout:




I also put together a mockup of the mobile version: