Web designShowcase

Airport website is beautifully responsive

Humberside Airport has a new responsive site built by KMP Digitata with the Umbraco CMS. Check out this responsive beauty...

humberside airport
Using new elements, this is a truly wonderful responsive website

Built with the Umbraco CMS by KMP Digitata, Humberside Airport uses new elements, some new form input types and attributes, geolocation and data-* attributes.

Tim Brook, lead frontend developer explains, "We started off using input type="date" for the car park booking widget to use the native date picker (where available) with a jQuery fallback using YepNope.js along with Modernizr for browsers with no support. However, problems arose when we couldn’t change the date format returned by the input so had to fall back to a default text input."

humberside airport
The viewing pleasure isn't ruined by smaller devices

"Each widget is built as a stand-alone item which can be dropped anywhere on the page and, using Bootstrap span classes, will format correctly," says Brook. He believes this makes it easier to maintain from a "frontend point of view" giving the client much more freedom with the page layout.

He adds, "On some of the smaller widgets where the images aren’t required, the image’s src is stored in a data- attribute then loaded in with JavaScript to lighten the load on devices with smaller screens and slower connections."

humberside airport
The site uses geolocation to pass the user’s URL longitude and latitude to the Google maps

Developer Adam Astle uses geolocation to pass the user's URL longitude and latitude to the Google maps API to retrieve all the address information. "This lets us pre-populate driving directions onto a Google map from their current location to the airport longitude and latitude.

"The Google Map API is very extensive, and allowed me to provide step by step printable directions to the user," he says, adding that, "Relying on the browser’s current location isn’t always accurate and depending on the user’s security settings wasn’t always possible. To cater for this erronousity [sic], we extended the geolocation functionality so users have the option to enter their town/postcode manually, and overwrite data retrieved by the browser."

Like this? Read these!

Have you seen an inspiring responsive website? Let us know in the comments box below!

Log in to Creative Bloq with your preferred social network to comment

OR

Log in with your Creative Bloq account

site stat collection