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:
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.
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:
Responsive design sketch sheets: http://jeremypalford.com/arch-journal/responsive-web-design-sketch-sheets
- 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
- Start coding with a framework
Progressively enhance using this mobile first framework as a starting point: http://www.stuffandnonsense.co.uk/projects/320andup/
- Consider your type
Set some type (v important) using handy tool to ensure your type looks beautiful: http://pearsonified.com/typography/
- Convert it to EMS
Well if you are being responsive you need to specify your measurements in EMS rather than pixels: http://pxtoem.com/
Best served up responsive: http://adaptive-images.com/
Prefer to watch eh? Serve your responsive video using this: http://fitvidsjs.com/
- Older Browsers
Make sure that viewers browser is up to speed using this: http://www.modernizr.com/
Give it all a quick test using this http://resizemybrowser.com/
- How does it compare?
The best of the responsive web can be found here: http://mediaqueri.es/
you have elaborated the issues on web design so specifically that will certainly help the audience of your site to design a website for his own purpose. Most of the author concedes information regarding to the topic but you have provide necessary substantial to built up any website. Sir please tell me is this sufficient to design a website for smart phone also..
This is my first opportunity to visit this website. I found some interesting things and I will apply to the development of my blog. Thanks for sharing useful information.
I stumbled across this post when searching for info about responsive web design, in particular in the context of accommodation sites, as I'm thinking about rebuilding a site a did a while ago for a B & B that I'm involved with (www.tuscanyholidays-casaverde.com). I think there are some really good links in your article. I'm also currently looking through .Net magazine, issue 221, to get a bit more info. Thanks for the info.
- Restaurants (59)
- Restaurant Marketing (54)
- Hotels (41)
- Hotel Marketing (39)
- Internet Marketing (35)
- Strategy (24)
- Marketing Ideas (20)
- Operational Consultancy (15)
- Conversion Optimisation (15)
- Design (13)
- Restaurant Social Media Marketing (11)
- Restaurant Website Design (9)
- Interiors (9)
- Email Marketing (9)
- Hotel Social Media Marketing (8)
- Analytics & Analysis (8)
- Hotel Website Design (7)
- Restaurant SEO (7)
- Sustainability (6)
- Hotel SEO (6)
- Pay Per Click (PPC) (5)
- Mobile Marketing (4)
- Recipes (4)
- Branding (4)
Interesting reading - an @Cornell report on how restaurants use social media: http://t.co/GBAAcSSsed
1 hour, 6 min ago
Ignite Hospitality Brightbox Daily is out! http://t.co/lhvIzF8FoP ▸ Top stories today via @JamiesFifteen
23 hours, 25 min ago