Responsive Design for Restaurant & Hotel Websites - Resource Guide

What do I mean by responsive website design?

The web is evolving. It's no longer just the realm of users sat at desktop computers. More bookings are made online than not in the hotel industry - ensuring your website looks good across different viewing experiences is paramount to commercial success.

People no longer want a static web experience - they are using the web in many different and unencumbered ways, on different devices and in different locations and situations. It's all about the mobile web from here on in - Tablets, Smartphones, laptops.

For us designers, it's a different approach - a fluid form of design that allows our hotel and restaurant websites to look good regardless of viewing platform.

The theory is that the web page is no longer a fixed resource but rather adapts to our viewing device. Portrait, landscape; mobile screen or laptop screen, - web pages going forward need to adapt to fit these many different user environments and behaviours.

Here's a simple yet great example:

Desktop:

Ipad:

Tablet:

Smart phone:

The key here is that the design adapts to the screen size, allowing your hotel or website design to always look as you intended.

How do we achieve this?

The key to responsive design is the effective use of CSS (web style sheets) and media queries.

If that sounds like jargon let me break it down for you... Media queries ask the question 'What device is this web page being viewed on?' through a series of breakpoints optimised for the kind of device a user is using.

For example - a laptop screen will typically display above 960px wide and phone (landscape mode) somewhere around 480px. The browser is able to interpret these media queries, recognise the devices viewport resolution and offer up an optimised style sheet based on the response. Making sure the site looks pretty and more importantly is legible and usable across many different devices.

Easy, Yes?

At this point you are probably still scratching your head so let me point you in the direction of some articles that provide a good overview that you may find useful.

Ethan Marcotte is widely considered as the guy who kickstarted the whole responsive revolution so may I suggest you read his article on responsive web design.

Still not sure you get it just yet? Think Vitamin have an excellent article that breaks it down brilliantly.

So, you're ready to think responsive?

Here are some great resources to act as a guide for designing responsively for your restaurant and hotel website:

1. Sketch
   Responsive design sketch sheets: http://jeremypalford.com/arch-journal/responsive-web-design-sketch-sheets
   
   
2. Mock up your design
   Device templates to get a feel of the finished web design: http://punchcut.com/perspectives/expanding-universe-toolset-managing-screen-resolutions
   
   
3. Start coding with a framework
   Progressively enhance using this mobile first framework as a starting point: http://www.stuffandnonsense.co.uk/projects/320andup/
   
   
4. Consider your type
   Set some type (v important) using handy tool to ensure your type looks beautiful: http://pearsonified.com/typography/
   
   
5. Convert it to EMS
   Well if you are being responsive you need to specify your measurements in EMS rather than pixels: http://pxtoem.com/
   
   
6. Images
   Best served up responsive: http://adaptive-images.com/
   
   
7. Video
   Prefer to watch eh? Serve your responsive video using this: http://fitvidsjs.com/
   
   
8. Older Browsers
   Make sure that viewers browser is up to speed using this: http://www.modernizr.com/
   
   
9. Test
   Give it all a quick test using this http://resizemybrowser.com/
   
   
10. How does it compare?
    The best of the responsive web can be found here: http://mediaqueri.es/