Call us on 08448 794368

The 360 Degrees site uses cookies.

 

May 28, 2013

Responsive website design with an Edge

WEBSITE-DESIGN-EDGE-SCHOOL-H.jpg

The client: Edge Hotel School is the first hotel school in the UK. They offer a practical route to a career in hotel management with students dividing their time between the classroom and working in a real, luxury hotel alongside professional, experienced staff. Their course is an intensive route to a degree, condensed into two years (instead of the usual three).

The proposition: Working in a real hotel whilst gaining their degree gives the students an unrivalled experience and set of skills that will be useful and will be valued by employers. It is this combination of a degree and experience that is so valuable.

The requirement: A brand new website that encompasses all of the above and works across all platforms - desktop, tablet and smartphone. By Easter.

The design: After a week or so we presented four design concepts. I've included all four design concepts below (with paraphrased client comments), some were liked, some were not and one (luckily) was loved.

EDGE_HOTEL_SCHOOL_B.jpg

'Too... hotely.' Although the student experience is highlighted really well.

EDGE_HOTEL_SCHOOL_A.jpg

'Too... green'But that word 'EXPERIENCE' could be worth exploring couldn't it?

EDGE_HOTEL_SCHOOL_D.jpg

'Too... boringBut the full width images make a strong impact.

EDGE_HOTEL_SCHOOL_C.jpg

'Wow... nice!' Good choice - lends itself well to a Responsive Web Design approach.

The development: After the website messages and imagery one of the most important elements of the brief to consider is the provision of an optimal viewing experience across a wide range of devices. So, although each design was only presented in the (currently) most commonly viewed desktop browser size we were already planning ahead for tablet and smartphone views.

You'll notice one thing the four designs share is they are all in a grid format with individual content modules. The idea being that when viewed on different size browsers the grid and modules resize and reposition themselves seamlessly to fit the size of device being used.  This is a web design approach commonly know as Responsive Web Design - there's a cool interactive tool that illustrates the concept of responsive design here.

The build:  Refine the messages, carry out some minor design tweaks suggested by the geeks in SEO and get cracking. PSDs were sliced. HTML was coded. Content Management Systems were constructed. Copy was written. Tags were embedded. 301s were redirected and developers went on holiday.

The result: The site went live, as planned, at Easter. You can see screen grabs below that show the site on various devices or, if you're stuck at your computer at work, you could try visiting the site and playing around with the size of your browser window - make it smaller and you'll see the site shrink to tablet view, make it smaller still and things will rearrange themselves as if you were viewing on a smartphone.

WEBSITE-DESIGN-EDGE-SCHOOL-F.jpg
Edge Hotel School website - desktop version
WEBSITE-DESIGN-EDGE-SCHOOL-G.jpg
Edge Hotel School website - tablet version landscape
WEBSITE-DESIGN-EDGE-SCHOOL-E.jpg

Edge Hotel School website - mobile version

The outcome: A truly responsive website delivered and, if early analytics are anything to go by, a website that truly delivers response.

David