|
Click on OTHER to access the function MOBILE FRIENDLY WEBSITE.
This feature makes the website template "responsive", which means that it adapts to the resolution of the visitor's screen. The function does not change the site's content, but only how it is presented to your visitors. You can freely choose to activate and deactivate feature to depending on what you prefer or to just test temporarily.
What should I keep in mind?
With a responsive website that adapts to the visitor's screen, there are some higher requirements on the site's content for it to be presented in a good way for all visitors. The following describes a number of hints and tips that are good to follow.
Take into account visitors with slow connection
To really make a website adapted for mobile devices is it important not to forget those visitors browsing from their mobile via eg a slow 3G connectivity. It is not everyone who has a constant access to a fast WiFi or 4G. Avoid filling pages with lots of inline images as this takes time to download and display if the visitor's connection isn't particularly good.If you have many photos to show off so rather use one or more image galleries as these pages are designed to manage and display large amounts of images. Also be careful with their own JavaScript that has been put on the website for example, show weather, world clocks, information about the visitor, etc. What all these scripts do is to ask for and retrieve information from a third party outside of us. If they are slow or deliver content that is not very mobile friendly effect your own website.
Avoid large tables with fixed widths
What is mainly adjusted and adapted to the visitor's device when responsive design is used, is the website's content width to fit in a good way without having to scroll the page sideways or zoom out. However, if any one of the site's element has a fixed width and can not be adapted, that part of the content will end up partly outside the screen, which of course does not look particularly good. Avoid large tables with fixed width as these will partly be outside the website in many mobiles that do not have high-resolution screens.
Two spaces is one too many
To adjust the text and other content using two spaces after each other should always be avoided on all types of websites, but especially on websites that are responsive. The reason is that two spaces after creating a so-called "non-breaking space". What it means is a space that is not wrapped and create a new line. A long row of spaces can create a row that push away texts, images and even parts of the template itself. This becomes much more apparent on a responsive website when viewed on a smartphone with a small low resolution screen where there is not as much space on the width available.
An easy way to find rows of spaces, and empty paragraphs, is to go to a page on the website and pressing Ctrl-A (Command-A on the Mac) on your keyboard to select all content. Also lines with a space becomes marked and lit up in blue. Site content can thus be quickly checked whether parts of the contents appear to be located outside the sheet or not wraps in the same manner as the remaining contents.
Do not paste just about anything on the website
Avoid pasting text or other content that is copied directly from other sites or documents. While it is certainly a convenient and time-saving way to insert content when editing. But it can sometimes cause problems. In addition to the text you copied, all the formatting and other code (instructions) will come with in the background. This may in turn cause various troubles for certain browsers that not will be able to present the content on the website as it was intended. Therefore it is always best to first "clean" away all formatting and other text before finally pasting it on the website. Here you can read more about cleaning texts.
How do I know how the website looks like for my visitors?
If you do not have your own mobile phone (smartphone) but still want to know how the website looks to visitors when the mobile friendly function is used, there are a number of external services for this that can be helpful. Here are two examples:
MobileTest
Screenfly
Note that these services only emulates different screen resolutions on common mobiles and tablets. How the website actually looks on a device can only be determined by actually using that particular device. For just as with ordinary computers can different browsers handle content and features on websites bit different although they all strive to comply with all standards.
|