The Well Map Website Design

Coffee. So necessary.

Designed for mobile devices.

For those in the oil and gas industry, gathering and curating well data is generally either labor intensive or expensive. The Well Map‘s goal is to make this easier and more affordable.

While I designed and developed the custom WordPress front-end, Karl Becker of KB Productions developed the form filtering functionality and mapping the data points on the map.

Responsive Design

This site is mostly intended for desktop usage, but with mobile usage on the constant rise, we knew we needed to make it available and easy-to-use on all screen sizes. That’s why I designed and built it to work on mobile devices as well as desktops.

The home page’s design was a little more involved. To make it easy for the user, there needed to be large buttons that appeared only on mobile. I used Bootstrap’s responsive utility classes to accomplish this. Also, the text and functionality of the buttons needed to change based on whether a user was logged into the website as a member or not so I wrote conditional PHP to take care of that.

Responsive Map

Responsive maps may seem difficult to make, since the map itself is usually embedded within an iframe tag. Iframes require a height and width to display, which are usually provided for you using inline styles set by the map’s maker. In this case, Google.

Since a strict height and width means the map couldn’t be responsive, that wasn’t going to work. I could have written CSS media queries for each of the main breakpoints, but that seemed like code bloat and could be a pain to maintain. To make this as responsive as possible while keeping the code clean, I removed the height and width in the inline styles and put the iframe within a div. Then I allowed my CSS gridsystem (Bootstrap) to take care of the width. After that, I added an id onto the iframe tag and assigned a height to the id.

To check out the responsive properties, go to the demo map and resize the width of your browser. Pretty sweet, right?

Keep an eye on this project as there are more cool things to come.

Tools used in this project: WordPress, Bootstrap, LESS, Bitbucket, Google Maps, Coffee, TATT.

Get Free Website Advice

Receive specific website tasks to do once per month to make your website more successful.

Subscribe via RSS