Considering the high rate of internet traffic from mobile users, it was imperative to develop Explore:ldn to a highly compatible responsive design.
The website makes use of a number of techniques to enable responsive content. I have used a combination of responsive frameworks alongside my personal responsive CSS rules to ensure compatibility across multiple devices.
I personally developed CSS classes that enable responsive columns ranging from 1-4 column layouts depending on screen size. Moreover, in regards to defining widths, I ensured that percentages or “em’s” were included as opposed to traditional set pixel sizing. In addition, from my own experience I have found creating html containers from which content can sit provides a highly effective way of managing the DOM element structure. For instance, I would often set the position of my container elements to relative whilst the content that sits within is set to absolute positioning to ensure effective presentation.
The Responsive Grid System is a fantastic straightforward CSS framework created by a developer named Graham Miller. The framework enabled developers to create responsive column based layouts ranging from a 1-12 column setup. I utilised the responsive grid functionality when developing the route planner section of Explore:ldn to ensure the various elements where positioned effectively across multiple device widths.