Project Development – Responsive Website Techniques

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.

Responsive Grid System:

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.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s