Busi
ness
Por
t
al
WHAT
SHOULD
YOU
KEEP
I
N
MI
ND
WHEN
DESI
GNI
NG
YOUR
WEBSI
TE
FOR
MOBI
LE
DEVI
CES?
1 INDEX
INTRODUCTION ... 2
1. Multi-platform web design ... 3
2. The new trend: Responsive Design ... 3
3. The advantages of Responsive Design ... 4
4. Usability advice ... 5
4.1. Optimizing the use of images ... 5
4.2. Optimizing texts ... 6
4.3. Simplifying the structure of the site ... 7
4.4. Design for mouse-free user interactivity ... 8
4.5. Avoiding pop-ups ... 9
4.6. Videos and animations: better without Flash ... 9
5. Content Management Systems (CMS) ... 9
6. The most popular CMS ... 11
7. Making sure your website is well adapted to mobile devices ... 12
SUMMARY ... 14
2
INTRODUCTION
The use of mobile devices to connect to the Internet has exploded over the last few of years. The versatility and possibilities that smartphone and tablet applications offer, along with the comfort and ease that come with using these devices mean that more and more users choose these gadgets to browse the web every day. Meanwhile, personal computers and laptops are used less and less to browse the web. As such, businesses are required to think about a mobile web version for their websites.
The tourism industry must adapt to this new reality, precisely because of the characteristics of its target audience: travellers who see great value in using the Internet on their mobile devices. Therefore, in this tutorial we will become familiar with a series of aspects that owners of tourism businesses should keep in mind when they need to make adapt their websites to smartphones and tablets.
3
1. Multi-platform web design
Up until approximately the end of 2010, designing a website with mobile devices in mind required web designers to consider the following aspects, among others:
The great variety of smartphones and tablets existing on the market. The screen sizes of each device.
Their technical features.
The additional cost of having to design a website for each brand of smartphone or tablet.
The longest time frame that this project could take to be completed.
Having to carry out this project in the future when these devices are updated, or newer devices with different features are released.
Therefore, web designs for various devices were long and costly. This affected companies in the following way:
2. The new trend: Responsive Design
Fortunately, technological advances have allowed us to improve this situation. How with Responsive Design?. Responsive Design is a web development and design technique that facilitates the adaptation of a website to any device: to the screen
Impossibility of developing multi-platform websites
Non user-friendly, non-functional web sites on mobiles and
Tablets
User dissatisfaction while browsing the
web site
Fewer visits, web site abandonment, little interaction, few purchases… Loss of competitiveness against businesses with adapted web
4
of a personal computer, laptop, smartphone or a tablet. Thanks to this technology, it is no longer necessary to create various versions of the same website, for it to be visualized on different devices. With just one version, the website will automatically be adapted to any device.
3. Advantages of Responsive Design
Responsive Design gives companies interesting advantages when it comes to planning web projects. For example:
One single design that covers all screen resolutions, for smartphones as well as for tablets.
Lower costs and shorter time frames, thus making it easier for small companies and freelancers.
The users’ browsing experience will not be affected, given that the website’s usability will remain the same.
Web positioning will improve given that only one URL will exist, and all visits and links will lead to the same website.
For the same reason, web metrics and web analytics are simplified, making it easier to understand user-behaviour on our website.
Management tasks, maintenance, and web updates are also easier. Responsive Design
One unique web development
5
4. Usability advice
Responsive Design is extremely helpful when designing multi-platform web pages. Another fundamental aspect is: usability.
The usability of a website is the capacity it has to be useful and to satisfy the needs of the user, based on a series of parameters that make the website either easier or harder to navigate.
Although some usability rules are the same for navigating from a computer as well as from a mobile device, in some cases we should pay special attention to a series of factors, listed below, that are specific to smartphones and tablets.
Some advice regarding these factors is: - Optimize the use of images. - Optimize texts.
- Simplify the structure of the site.
- Design for a mouse-free user interactivity. - Avoid pop-ups.
- Videos and animations: better without Flash.
4.1. Optimizing the use of Images
It is important to be careful with the size and weight of the images that you use on your website so that loading them does not slow the user down. The bigger the size and the greater the quality of the image, the longer the downloading time will be.
Although it is very important to show quality photographs in the tourism sector, (such as pictures of holiday destinations, hotel installations, etc.), you should not exceed a pixel count of 72 ppi (pixels per inch). Furthermore, you should also take the weight of these images into account: a professional photograph for the web should not exceed 200 kilobytes (KB).
In order to decrease the weight of an image you must reduce its size and/or quality. You should find a balance between attaining an image no greater than 200 KB in
6
weight (while still an appropriate viewing size), and adjusting to a quality that allows the details to be seen. In order to do this we recommend avoiding pictures that include many small details, such as panoramic views of hotel rooms. If you wish to show pictures of hotel rooms, you could include various pictures that each focus on one specific detail of the room.
4.2. Optimizing texts
Users have a more difficult time reading texts on tablet and smartphone screens than on computer screens. For this reason, you should compose texts that are brief, clear and self-explanatory. This way, all of the important information will be condensed into fewer words. Normally, two or three paragraphs of four to five lines of text each should be enough for the user to become familiar with your product or service.
Help the user by marking key concepts in bold. Do not use underlining as a way of highlighting text, as this is a technique associated with links on the Internet.
Example
Hotels and restaurants International
Non-optimized Text:
You will love our premium suite, which is the most requested room by celebrities who come to rest and relax at our hotel during their holidays. The room offers a very comfortable king-sized bed, excellent for relaxing after a long day of activities and perfect for a relaxing night’s sleep. The rest of the furnishings consist of two night stands; a beautiful armoire displaying restored 19th century doors; a bedroom chest with drawers perfect for storing your clothing and any other belongings you have brought along with you; a reclining sofa which can comfortably seat four; two massage chairs perfect after a long, tiring day; and a large dining table out on the room’s private terrace, so that you can enjoy breakfast, lunch or dinner by simply requesting our marvellous room service while enjoying the beautiful views.
Optimized Text:
Our premium suite is the most popular among celebrities. If offers a king-sized bed and complete furnishings including two night stands, a beautifully restored 19th
7
century armoire, a chest, a reclining four-person sofa, and two massage chairs.
You will also be able to request room service and enjoy your breakfast, lunch, or dinner at the dining table on the private terrace, from which you will also enjoy the amazing views.
Example
Hotels and restaurants Austria
The Apartment-Hotel Almhof1 is a good example of how to optimize a text to briefly describe your room. They use clear and explicative paragraphs of just a few lines of text, and they mark key concepts in bold so they can keep the attention and introduce important information.
4.3. Simplifying the structure of the site
A website with many sections and subsections is very difficult and frustrating to browse compared to one which has a simple and concise main menu. Try to structure your web site so that the home page does not display more than four or five sections with three subsections each.
Example Attractions International 1 http://www.almhof-kirchberg.com/hotel-steakhaus-kitzbuehel/Article/ID/98/Session/1-RBi83MyQ-1-IP/APARTMENTS.htm Home Page About Us Activities
Our Company Our Team
History Where We Are
Hiking Rock Climbing
Path 1 Contact Us
8
Example
Attractions Switzerland
Alpine Adventure Trails Tours2 is a Swiss company specialized in guided alpine hiking tours. Its web site structure is quite simple, with two main sections and a few subsections that condense all the information you need in order to know what they offer and what kind of tours you can book with them.
4.4 Design for mouse-free user interactivity
Browsing from a mobile device means using your fingers or a touch pen. This is a very different to using a mouse, which allows us to discover interactive sections quickly. With a smartphone or tablet we have to click on the sections to find out. Therefore, it is important to remember the following:
Do not use images that change when you scroll over them with a mouse, as they will not create the same effect on a mobile version. Instead, directly display the image that you wish to be seen.
Make sure that the links can easily be identified. The best way to do this is to give them a different colour to the rest of the text, or underline them.
If you want a specific image or graphic to act as a button, mark it differently from the rest so that it can be identified as such.
Do not use menus that drop down when scrolled over with the mouse. If you must include a drop-down menu, make sure it only performs this function when clicking on each individual section, thus preserving the functionality of the mobile version.
9
4.5. Avoiding pop-ups
Quite often, pop-ups are still used to show advertisements or other pieces of information. However, these elements always end up annoying the user. Moreover, on smartphone or tablets, these pop-ups can end up blocking the screen, thus preventing the user from browsing comfortably.
4.6. Videos and animation: better without Flash
For years, Flash technology was part of web design. However, nowadays, the combined possibilities of HTML5, CSS3 and JavaScript have replaced it. The main problem is that certain web browsers are not capable of reading Flash, thus causing these contents to be invisible to the user. For this reason, it is better not to risk it and to develop websites that do not use Flash technology in their design.
Some examples of tourism businesses that could be used as a source of inspiration when designing your website for mobile devices are:
Booking.com3
Edreams4
NH-Hotels5
Macdonaldhotels6
Berkshiresalondayspa7
5. Content Management Systems (CMS)
Up until a few years ago, designing a website meant having to start from scratch and creating a personalized project. Nowadays it is possible to reduce costs and shorten time frames thanks to Content Management Systems. CMS are software and platforms that make web development projects possible by means of templates, modules and existing plug-ins, which can all be personalized in order to adapt to the features of the website that the business wishes to construct. Moreover, CMS also 3 www.booking.com 4 www.edreams.com 5 www.nh-hotels.com 6 www.macdonaldhotels.co.uk 7 www.berkshiresalondayspa.com
10
have a general control panel from which different options can be edited at a later stage, such as texts or different sections of the website.
The following chart shows some of the main advantages of using a CMS when creating your website:
Using a CMS makes it possible for you to take greater control of your company website, allowing you to manage it yourself without needing to know about programming and design. Also, these systems allow for reduced costs and shorter time frames given that they are based on the use of editable plug-ins and templates. CMS also facilitate web scalability by making it less complicated to amplify, modify, or eliminate web contents and/or other sections in the future. And if that were not enough, the most popular CMS also rely on a large community of developers for support and backup, thus allowing for problem resolution and product/version updates not only for their own Content Management Systems, but also for any associated extensions.
Makes it possible for the owner to self-manage the web site Cost reduction Variety of adaptable plugins and extensions Ample user support network Greater ease for scalable developme nt Shorter time frames
11
6. The most popular CMS
There are many different Content Management Systems out there on the market that all have their own features, advantages, and disadvantages. However, when developing multi-platform web projects there are three CMS that particularly stand out:
The Most Popular CMS
WordPress8 WordPress started as a blogging platform but has grown so much, that it is now possible to find thousands of valid templates and plugins that represent whole websites. Its versatility, built-in Search Engine Optimization (SEO) mechanisms, and ease of use, make it one of the most widely used CMS in the world. WordPress is ideal for people who do not have any programming knowledge given that its options are simple to edit and personalize. Moreover, the WordPress user community is ample and active, thus making it easy to find support forums and tutorials specific to constructing complete websites.
Joomla!9 Joomla! is a CMS that is particularly used for big projects and e-Commerce stores. While this CMS offers great flexibility and ample features, it is more difficult to manage than WordPress given that it requires at least a basic understanding of programming.
Drupal10 Out of the three, Drupal is probably the most complicated in terms of installation and configuration, thus limiting the possibilities of self-management for website owners who have limited technical knowledge. However, this CMS offers stability against high web traffic, making it ideal for solid projects and for websites expecting many visitors. 8http://wordpress.org/ 9 http://www.joomla.org/ 10 https://drupal.org/
12
Example
Attractions United Kingdom
THE MOST POPULAR CMS
Really Wild Challenges11 is a company located in the UK that uses WordPress for its website, offering their customers a professional design while still getting all the benefits of a consolidated CMS in terms of structure, simplicity and optimization of the website.
7. Make sure that your website is well adapted to mobile devices
Whether you are designing and programming your own web site or having professionals do it for you, you should make sure that your website fulfils the following key elements for optimization in order for your web site to be correctly visualized from mobile devices. With the following table you can examine your web site and test whether or not it fulfils each of the following key elements.
Key elements your website should have in order to be optimized Fulfilled Not fulfilled Fulfilled but with exceptions My website uses optimized images: they do not
exceed 72 ppi and they weigh less than 200 kilobytes.
My website contains brief and concise texts: two or three paragraphs of four to five lines each, at most, in order to describe my products and / or services.
My website has a simple structure: no more than four or five sections with three subsections each on the home page.
My web site does not include elements that only
11
13 work with a mouse, such as images that change when scrolled over or drop-down menus that open up without clicking. Also, buttons and links are identified as such.
My website does not have pop-ups for advertisements, nor to make certain sections stand out.
My website does not use Flash. Instead, a combined design of HTML5, CSS3 and JavaScript is used.
My website uses a CMS such as WordPress, Joomla!, or Drupal, with personalized templates and modules.
Total
Results:
The greater number of ‘’Fulfilled’’ you obtain, the more optimized your website will be for mobile devices.
14
SUMMARY
Here you have a brief overview of the material from this tutorial:
Multi-platform web design
Until recently we had to develop various versions of websites in order to design versions for mobile devices. This meant a long and costly process for many businesses.
The new trend: Responsive Design
With Responsive Design: one single version of our website can be correctly visualized from any Smartphone or Tablet.
Advantages of Responsive Design
One single design covers all screen resolutions.
Lower costs and shorter time frames.
The users’ browsing experience will not be affected.
Web positioning will improve.
Web metrics and web analytics will be simplified.
Management tasks and maintenance will also reap benefits.
Usability advice
Optimize size and weight of all images.
Optimize size and clarity of all texts.
Simplify the structure of the site.
Design for a mouse-free user interactivity.
Avoid pop-ups.
15 Content Management Systems (CMS)
CMS are software and platforms that make web development projects possible by means of templates, modules, and already existing plug-ins which can all be personalized in order to adapt to the features of the website that we wish to construct.
The most popular CMS
WordPress.
Joomla!
16 GLOSSARY
Responsive design
Web development and design technique that facilitates the adaptation of a website to any device, independent of its screen size.
Usability
The capacity a website has to be useful and to satisfy the needs of the user, based on a series of parameters that make the website either easier or harder to navigate through.
Pop-up
Graphic elements quite often used in web design in order to show advertisements. Their main feature is that they ‘’pop up’’, automatically appearing as a superimposed image over the website, thus obligating the user to close this graphic element before being able to continue browsing.
Flash
Design and animation technology used until very recently in web design in order to show animations or videos. Nowadays it is being used less and less due to other technologies such as HTML5 and CSS3, given that certain mobile devices and Internet navigators cannot correctly display Flash.
HTML5
HTML are the initials for HyperText Markup Language. Now in its fifth version, this basic language of the World Wide Web presents important improvements and advantages for designing websites that are compatible with mobile devices.
CSS3
CSS are the initials for Cascading Style Sheets, a style sheet language used for adding to the look and formatting of websites written in HTML. CSS3 is the third version of this language.
17 CMS
CMS are the initials for Content Management System: software and platforms that make web development projects possible by means of customizable templates, modules, and plugins.
SEO
SEO are the initials for Search Engine Optimization. It refers to the process of making websites more visible to search engines, mainly by positioning them among the first results due to the use of relevant words or phrases.
