With mobile traffic simply exploding over the last few years, mobile website design has become a huge concern for many businesses, especially those in the travel industry. But, there are so many terms floating around that it is easy to get them mixed up.
In this post, we’re going to explain the difference between some of the major terms that are often used (or misused) to describe different types of websites that cater to guests on mobile devices. In short, today we’re going to talk about the difference between mobile optimized websites and responsive design websites.
Both types of websites attempt to accomplish the same goal of giving visitors to their websites a great experience regardless of the device they’re using. They just accomplish this differently, and with varying degrees of success.
Let’s start by talking about what each is. Then, we’ll talk about the key differences, and finally we’ll show you some side by side examples.
Mobile Optimized Websites
Mobile optimized websites were the first come on the scene (we started offering mobile websites more than three years ago). These websites are geared primary for smart phones and smaller tablets. They are generally built entirely separate from your traditional website.
The strategy with mobile websites is to use your traditional website for desktops, laptops and larger tablets, and to show your mobile optimized website to people on smart phones and smaller tablets. So, when someone hits your website, your website will determine what type of device they are on and show them either the mobile website or the regular website.
Responsive Websites
Responsive websites are much newer and now considered a best practice for all new website designs moving forward. But, they’re much harder to pull off for a web designer than a mobile website. They’re also much tougher to integrate into content management systems. Here’s why. A responsive website is shown to all of your guests no matter what device they are on. It’s the website itself that changes. Elements of the website will dynamically adapt to look perfect no matter what device you are on.
They work by querying what size your screen is and then displaying the website to fit that screen. To accomplish this, web designers have to style for four different ranges of screen size to make sure the website displays perfectly on all devices. Essentially, instead of building four different websites to accommodate four different screen size ranges, responsive websites handle every device with one website.
The Advantages of Responsive Design
While most mobile optimized websites will work just fine for many people, there are some strong advantages of responsive websites that make them better. These advantages become more and more important as mobile device usage become more prolific. Here are just a few of those advantages:
- Responsive websites look better across all devices because they offer a higher range of adaptability. It’s the difference between one website with styles for four screen sizes or the option of just seeing a regular website or a separate mobile optimized site.
- For the most part, responsive websites will keep all of your content and pages. Many mobile optimized websites will exclude content (and even entire pages) that are found on your regular site. This raised concerns with Google, which until recently indexed only the main websites. In some cases Google would serve up a page in search results that had valuable information on the main site, but that page or that information was not available to the searcher when they clicked through the search result to the page on their smart phone.
- Consequently, Google favors responsive websites to mobile optimized websites. But, they still highly favor and reward mobile optimized websites over websites that are not mobile friendly at all. In Google’s eye, responsive is best, but mobile optimized still meets its requirement and is way better than websites that aren’t mobile friendly.
- Responsive websites also save you time because you are only managing content on one website. Because a mobile optimized website is actually an entirely different website than your regular website, albeit with very similar content, you actually have to manage and host two separate websites. Now, if both your regular website and your mobile optimized website are connected to a central content management system (like LiveRez’s are), management of content becomes much easier.
Spotting the Differences
Because responsive design is the newer, hotter trend (and a best practice), a number of technology companies in the vacation rental industry want to claim that their mobile optimized websites are really responsive. Rather than just taking their word for it, you should learn to spot the differences. The great thing is that if you know what you’re looking for, the differences are pretty easy to spot.
Here’s a side-by-side comparison of a mobile optimized set-up (regular site + mobile site) and a responsive design set-up. We’ll show you both the home page and a search results page at different sizes and then what they actually look like on a smart phone (in this example, we’re using a Samsung Galaxy S6).
Side-by-Side Comparison
Full Sized
Here are two websites — one responsive and one mobile optimized — at full width on a desktop. As you can tell, they both look good. But, they were both designed to look good at this size.
Half Sized (about Tablet Size)
Here they are with the browser shrunk to about the size of a tablet. The responsive site still looks great, but the mobile optimized site is starting to display weird in spots. See how the booking box is moving over the navigation bar and the smaller images below? The properties still display okay in search results, but look at how much smaller they are than in the responsive website.
Smart Phone Sized
Since you don’t always have time to check out a website on your phone (and you need to do this to really tell if a website is responsive), here are both of the websites with the browser shrunk down to about the size of a smart phone. On the mobile optimized website, things are really starting to go wrong. The booking box is way out of place, and big parts of the page are missing, like most of the navigation bar and most of the text. And, on the search results page, you can’t even see the search results.
In comparison, the responsive website still looks great. The elements are now re-arranged to look great on the smaller page, and all the information on both pages is still there. The nav bar is still there, too. Everything is the same. The display of the content has just adapted to respond to the screen size.
Now, to be fair to the maker of the mobile optimized site, they were never intending for people with devices this small to actually get this version of the website. As you’ll see in the next section, people actually accessing this site on a smart phone are shown a different, mobile-optimized site.
However (and here’s the sticking point), to call the website below on the right a responsive website just simply wouldn’t be true.
On Actual Smart Phone
Here are the websites side by side on the new Samsung Galaxy S6. You’ll notice that the mobile optimized site has now switched to its mobile version, where the responsive website is showing pretty much the same content as when you shrunk down the browser. The big difference here is that the mobile optimized site is now missing a lot of the content it was showing on the home page.
Conclusion
Now that you know the difference between responsive design and mobile optimized, you’ll know for sure what you are getting when someone is trying to sell you a new site. But, if you have any further questions on the differences between responsive design and mobile optimized sites, feel free to give us a call at (800) 343-2891. We’d be happy to help.
Learn More About LiveRez
LiveRez is the most widely used software platform for professional vacation rental managers. The company’s cloud-based, end-to-end platform offers fully integrated solutions for reservation and property management, websites with online bookings, trust accounting, CRM, housekeeping and maintenance, reporting, reviews and more. LiveRez is a proud Gold Sponsor of the Vacation Rental Manager’s Association (VRMA).
Visit LiveRez.com to learn more:
Did you like this post?
Please consider “liking” it and sharing it on your social media channels via the buttons below. You can also follow us and get notifications of all new posts via the “Follow” button in the bottom right-hand part of the screen. |