When you look out into your lobby, we bet a lot of people are looking down at their smartphones or tablets. We live in a world where internet access is at our fingertips wherever we go and making sure that your website performs well on all different types of devices is becoming standard. Don’t fall behind the times with a website that isn’t responsive! Lyles shares the benefits and importance of a responsive website design and how it helps with your conversions compared to other mobile options.
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Webinar: Responsive Website Design
1. RezStream Webinar
Responsive Website Design
Presented by Lyles Armour
You Provide Hospitality. We Provide Solutions
3801 E Florida Ave. Suite 800
Denver, CO 80210
866.360.8200
2. | About Me
Lyles Armour Jr. Marketing Coordinator
• 4 Years with RezStream
• UNCO Graduate (Marketing/CIS)
• Customer Service Oriented
• Website Development Background
• Sports Fanatic
• Dallas Cowboys Fan!
You Provide Hospitality. We Provide Solutions
3801 E Florida Ave. Suite 800
Denver, CO 80210
866.360.8200
3. | Responsive Website Design
also known as RWD
We live in a world where internet access is at our fingertips wherever we go and making sure that
your website performs well on all different types of devices is becoming standard.
You Provide Hospitality. We Provide Solutions
3801 E Florida Ave. Suite 800
Denver, CO 80210
866.360.8200
4. | Topics
You Provide Hospitality. We Provide Solutions
3801 E Florida Ave. Suite 800
Denver, CO 80210
866.360.8200
01
What is Responsive
Website Design
02
Responsive Website
Design Pros & Cons
03
Why Responsive
Website Design
04
Resources
05
FAQ
06
Getting Started
5. PQ| Question #1
You Provide Hospitality. We Provide Solutions
3801 E Florida Ave. Suite 800
Denver, CO 80210
866.360.8200
6. 01 | What is Responsive Website Design
Responsive Website Design (RWD) is a design approach that allows your
website to “respond” or resize itself by adjusting the layout so that it can be
seen on desktop, laptop, tablet, and mobile devices.
Desktop Laptop Tablet Mobile
You Provide Hospitality. We Provide Solutions
3801 E Florida Ave. Suite 800
Denver, CO 80210
866.360.8200
7. 01 | What is Responsive Website Design
Continued…
OLD STANDARD was fixed widths
• This ensured all browsers saw the same presentation on all computers
• Each “container” was coded with the actual pixel value
You Provide Hospitality. We Provide Solutions
3801 E Florida Ave. Suite 800
Denver, CO 80210
866.360.8200
Website = 960px, Content = 640px, Sidebar = 300px
8. 01 | What is Responsive Website Design
Continued…
In comes “MOBILE” and soon after… Responsive Website Design
• 3 Main Principles
• Fluid Grid
• Fluid Images
• Media Queries / Breakpoints
You Provide Hospitality. We Provide Solutions
3801 E Florida Ave. Suite 800
Denver, CO 80210
866.360.8200
9. 01 | What is Responsive Website Design
3 Main Principles : #1 Fluid Grids
Fluid Grids are “containers” built with percentages which allow your website to “respond”
eliminating the fixed widths.
Sidebar: 300px / 960px = 31.25% | Main Content: 640px / 960px = 66.66667% | Margin: 20px / 960px = 2.08334%
You Provide Hospitality. We Provide Solutions
3801 E Florida Ave. Suite 800
Denver, CO 80210
866.360.8200
Internet Browser – 100%
10. 01 | What is Responsive Website Design…
3 Main Principles : #2 Fluid Images
Fluid Images are able to proportionately resize within the confines of a fluid grid.
You Provide Hospitality. We Provide Solutions
3801 E Florida Ave. Suite 800
Denver, CO 80210
866.360.8200
CSS Code Sample: img { max-width: 100%; }
This will tell the browser that images should fill the full width of the container they reside in.
Desktop Laptop Tablet Mobile
11. 01 | What is Responsive Website Design…
3 Main Principles : #3 Media Queries / Breakpoints
Media queries allow CSS to only be applied when specific conditions are met. These
conditions are often based off the width of the screen a website is being viewed in.
These media queries dictate when the layout should be changed between desktop,
tablet or mobile environments.
You Provide Hospitality. We Provide Solutions
3801 E Florida Ave. Suite 800
Denver, CO 80210
866.360.8200
12. 02 | Responsive Website Design vs. Mobile
Pros & Cons
Responsive Website Design Mobile
Single Website Yes No
Single URL Yes No
Easy SEO Yes No
Easy Marketing Yes No
Low Cost Yes Yes
User Experience Yes Yes
Speed No Yes
Future-Ready Yes No
Easy Reporting Yes No
You Provide Hospitality. We Provide Solutions
3801 E Florida Ave. Suite 800
Denver, CO 80210
866.360.8200
13. PQ| Question #2
You Provide Hospitality. We Provide Solutions
3801 E Florida Ave. Suite 800
Denver, CO 80210
866.360.8200
14. 03 | Why You Need a Responsive Website Design
Top 10 Reasons
Reason #10
• It has become a website design standard, it’s not going anywhere!
• Hudson Crossing theorizes that by the end of 2018, 89 percent of U.S. travelers will own
a tablet and 91 percent will own a smartphone.
Reason #9
• Your online visitor will appreciate it, it creates a great user experience.
• According to Google’s Think Insights if users have a positive experience with your mobile website they
are 67% more likely to buy a product or use a service.
Reason #8
• Boots your SEO
• Makes it easier for Google to “crawl” through your website and rank it accordingly.
You Provide Hospitality. We Provide Solutions
3801 E Florida Ave. Suite 800
Denver, CO 80210
866.360.8200
15. 03 | Why You Need a Responsive Website Design
Top 10 Reasons
Reason #7
• Assist in Social Referrals
• If you post blogs as a way to increase your SEO, and then post the blogs to your social
media accounts, users who are using mobile devices will expect that the blog will be
responsive.
Reason #6
• Easier to Manage
• Easier to manage because there is only one code base, rather than having separate
websites to manage. Also makes updating content and photos a breeze.
Reason #5
• Get the competitive advantage
• Your property can STAND OUT and show that you know what it takes to meet their
needs.
You Provide Hospitality. We Provide Solutions
3801 E Florida Ave. Suite 800
Denver, CO 80210
866.360.8200
16. 03 | Why You Need a Responsive Website Design
Top 10 Reasons
Reason #4
• Cost-Effective
• One website costs less than two.
Reason #3
• Adapts to the Future
• When Apple introduced the new iPhone 6 in 2014, the screen size had increased to 4.7
inches from 4 inches on the iPhone 5.
Reason #2
• More Conversions / More Sales
• The action you want visitors to take is readily APPARENT and CLICKABLE so you can
convert those leads into actual sales.
• Not fitting with pinching and pulling
You Provide Hospitality. We Provide Solutions
3801 E Florida Ave. Suite 800
Denver, CO 80210
866.360.8200
17. 03 | Why You Need a Responsive Website Design
Top 10 Reasons
#1 Reason:
• Google Highly Recommends Responsive Web Design
1. One URL makes it easier for your users to interact with
2. One URL makes it easier for Google's link algorithms to work with
3. One URL and same HTML makes it easier on crawl efficiency so Google can better crawl
more of your site.
You Provide Hospitality. We Provide Solutions
3801 E Florida Ave. Suite 800
Denver, CO 80210
866.360.8200
2012 Google Recommends responsive website
design for building smartphone optimized
websites.
Full Article: http://googlewebmastercentral.blogspot.com/2012/06/recommendations-for-building-smartphone.html
18. 03 | Why You Need a Responsive Website Design
Top 10 Reasons
#1 Reason:
• Google Highly Recommends Responsive Web Design
• They now indicate “mobile-friendly” websites which allows user to pass early judgment
of if they should go to your website over your competitors.
You Provide Hospitality. We Provide Solutions
3801 E Florida Ave. Suite 800
Denver, CO 80210
866.360.8200
19. 04 | Resources
• Google Web Fundamentals
• Responsive Website Design Basics
• Think With Google
• Testing Resources
• ResponsiveDesignChecker.com
• AMI.ResponsiveDesign.is
• StudioPress.com
• Responsinator.com
• QuirkTools.com
• RezStream
• Staff
• Blog
• Webinars
You Provide Hospitality. We Provide Solutions
3801 E Florida Ave. Suite 800
Denver, CO 80210
866.360.8200
20. 05 | FAQ
Q: Can you convert my current website into a
Responsive Website Design?
A: Yes, It’s never too late to add responsive design to
your website. By making changes to your CSS we can
implement a responsive design.
Q: Do I have to have a Responsive Website design?
A: No, but it is highly recommended. It’s more
important to have a mobile presence. If money is an
issue think smaller (mobile only).
Q: Can Responsive Website Design work with my
CMS?
A: Yes, these are two separate items. The CSS is the
only code modified.
Q: Can video be use in Responsive Website Design
A: Yes, similar to images we would make sure that
the video has a fluid width so it can scale
Q: How do I check if my website is responsive?
A: You can use the resources provided or adjust the
width of your browser while viewing a website.
Q: How much does a Responsive Website Cost
A: They can range from $6,000 to $15,000+. Depends
on your needs/wants.
Q: Does RezStream offer responsive websites?
A: Yes, we offer a pre-built solution (TCMS) as well as
custom property websites.
You Provide Hospitality. We Provide Solutions
3801 E Florida Ave. Suite 800
Denver, CO 80210
866.360.8200
21. 05 | Getting Started
You Provide Hospitality. We Provide Solutions
3801 E Florida Ave. Suite 800
Denver, CO 80210
866.360.8200
Convert Existing Website
Get a mobile presence
and convert your current
website responsive
website design.
New Responsive Website
A responsive custom
artistic designs reflect the
look and feel of your
property.
Pre-Built TCMS
Pre-built lodging website
fully loaded with
conversion-driven
features and functions.
Starting at $197/mo.
22. | Thank You!
Survey
I would love to hear your direct
feedback. Please fill out the survey
that you will receive after the
conclusion of this webinar.
Email
Contact RezStream to discover the
tools and resources that can make
your online presents stronger.
Happy Holidays!
You Provide Hospitality. We Provide Solutions
3801 E Florida Ave. Suite 800
Denver, CO 80210
866.360.8200
Sales@RezStream.com
Notes de l'éditeur
How many of you have a separate mobile website?
Green = Internet Browser
960px represents the old standard for fixed widths on websites
This was to insure all browsers saw the exact same presentation on all “computers”
Each “container” was coded with the actual pixel value
In comes MOBILE
Because there were so many unknown device and sizes of devices
The “Container” is where the width is set.
It is also best to resize your images to their largest size prior to adding to your website
These should be web safe
Be sure your website/server has caching tools
CSS: Is the code that create the visual presentation on the webpage. It positions and styles elements on the website.
Single Website
Easier to manage one website where all the content and images are the same for all devices
Minimal maintenance
Single code base
Single URL
User don’t need to decide which website to view. Or switch between the two when they find out the mobile website is missing pages or important information
Do make your visitors wait on redirects to get them to the appropriate webpage
Easy SEO
No need to create new content.
Easy Marketing
No extra work is required to promote or get users to your mobile website
No more “visit our mobile website” links, banners, or popups
Low Cost
Upfront cost my be greater but you when long-term (updates, seo, maintence, codebase etc…)
User Experience
RWD
Access to all pages, no redirects, eliminate which link to click on in searches (mobile vs. desktop)
Mobile
Optimized solely for mobile
Separate code base
Less pages, images
Speed
RWD
There are tools that allow your website pages and images to be caches (saved) to that they are retrieved and loaded faster
Because you cannot control mobile users data plans or signal
Loading everything (sometimes things that are not necessary for mobile)
Mobile
Optimized solely for mobile
Separate code base
Less pages, images
Future-Ready
RWD
Because of the media queries/breakpoints your website will respond to all the new devices to come
Mobile
You may need to re-work the code overtime
Easy Reporting
RWD
All the URLs are the same. Google allows you to then segment mobile vs tables etc..
Mobile
A whole new set of URLs (which can been seen on desktop computers)
What percent of your website traffic consist of mobile & tablet devices?
- Mobile traffic is predicted to overtake desktop in 2015
Source: http://digitalmarketingphilippines.com/10-reasons-why-having-responsive-website-is-a-great-investment-infographic/
Within a matter of second users will be able to depict if they are going to have a good or bad experience just by seeing if it is mobile friendly.
Think of it as mentioning Free Wi-Fi (not every property offers it)
By having a responsive website you are allowing your mobile users to access all pages of your website so they can make an informed decision
Helps SEO by
Eliminating redirects to mobile or table websites serving up the correct page
Increase mobile users
A responsive website (mobile) will get higher ranking on mobile searches (usability – getting the user the most relevant information in a friendly format)
Reduces duplicate content between separate mobile websites
Why is Google so important?
They are the leader in search engine page views
With
67% desktop share
83% mobile share