{"id":27655,"date":"2016-04-26T14:33:23","date_gmt":"2016-04-26T11:33:23","guid":{"rendered":"http:\/\/blog.superhosting.bg\/en\/?p=27655"},"modified":"2022-04-02T10:33:28","modified_gmt":"2022-04-02T07:33:28","slug":"3-options-for-creating-a-mobile-friendly-website","status":"publish","type":"post","link":"https:\/\/blog.superhosting.bg\/en\/3-options-for-creating-a-mobile-friendly-website.html","title":{"rendered":"3 Options for Creating a Mobile-friendly Website"},"content":{"rendered":"<p>In a previous article we told you more about <a title=\"10 Web Design Trends to Watch Out For This Year\" href=\"https:\/\/blog.superhosting.bg\/en\/10-webdesign-trends.html\" target=\"_blank\" rel=\"noopener noreferrer\">the latest web design trends<\/a> and the importance of keeping pace with them. We also emphasized on how useful it is for your website to be liked by users so that they wish to visit it often, share it and talk about it. Your website must be accessible from everywhere so as to increase traffic to the maximum. For that reason the existence of your site&#8217;s mobile version is crucial.<\/p>\n<p>Mobile compatibility is important for each and every web user. Interesting statistics about mobile&#8217;s share of web traffic, made by StatCounter, shows that the average share of web browsing via mobile device is 33%, as there are countries where it exceeds 70%!<\/p>\n<p>Do you want your website to be easily accessible across all devices? Here is what you need to know!<br \/>\nThere are three ways to make your website mobile-friendly:<\/p>\n<ul>\n<li><a href=\"#ResponsiveDesign\">responsive design;<\/a><\/li>\n<li><a href=\"#DynamicServing\">dynamic serving<\/a>;<\/li>\n<li><a href=\"#SeparetedURLs\">separate URLs.<\/a><\/li>\n<\/ul>\n<p><a style=\"padding-top: 42px; margin-top: -42px;\" name=\"ResponsiveDesign\"><\/a><\/p>\n<h3 style=\"border: 1px dashed #cccccc; text-align: center; background: #fefdc7;\">Responsive design<\/h3>\n<p>The website&#8217;s appearance in the browser depends on <a title=\"How Does a Website Work?\" href=\"https:\/\/blog.superhosting.bg\/en\/website-how-it-works.html\" target=\"_blank\" rel=\"noopener noreferrer\">HTML and CSS code<\/a>.With responsive design the server always sends the same HTML code to all devices and CSS is used to alter the rendering of the page on the device. This means that when your website is loaded on a mobile device the design will adapt (adjust) to the screen size. The URL stays the same regardless of the users\u2019 device (desktop or mobile), which makes the site&#8217;s link easy to share across all devices.<\/p>\n<p>Responsive design has many advantages. By using it you do not need to upload web content twice or redirect from desktop to mobile version \u2013 create neither a separate website version, nor a separate subdomain for mobile devices only.<\/p>\n<p>If you choose responsive design for your website, avoid making the following common mistakes:<\/p>\n<ul>\n<li>Unsuitable font size \u2013 when a page is resized for smaller screens the users should still be able to read the contents.<\/li>\n<li>Not enough space between links \u2013 since on mobile versions users tap or pinch, navigation through the website might become complicated if links are too close to each other.<\/li>\n<li>Small buttons \u2013 buttons and anchor text should be easy to tap. In this way users will enjoy spending time on your mobile website as much as they would on its desktop version.<\/li>\n<li>Avoid elements, such as videos, which are not playable on mobile devices. It is not recommendable to have errors on your website explained with &#8220;The content is not available on mobile devices&#8221;.<\/li>\n<\/ul>\n<p><a style=\"padding-top: 42px; margin-top: -42px;\" name=\"DynamicServing\"><\/a><\/p>\n<h3 style=\"border: 1px dashed #cccccc; text-align: center; background: #fefdc7;\">Dynamic serving<\/h3>\n<p>Unlike responsive design, here the website is served differently, depending on whether it is requested by a mobile device or desktop. Dynamic serving is a setup where the server responds with different HTML and CSS code depending on the user agent requesting the page.<\/p>\n<p>Dynamic content serving actually happens when: the website responds with different content on the same URL depending on the features of the user accessing the site. This is implemented through detecting the User-Agent.<\/p>\n<div id=\"boxcolorp5mb12green\"><a title=\"User-Agent\" href=\"https:\/\/en.wikipedia.org\/wiki\/User_agent\" target=\"_blank\" rel=\"noopener noreferrer\">User-Agent<\/a> is an application through which visitors access certain services. Websites are accessed through browsers and emails through email clients\/programs.<\/div>\n<p>\u0422he website can identify a desktop or mobile user from the information which is provided in the HTTP header. When a user accesses a website, the browser is presented to the server as User-Agent containing information such as browser name, version, user operating system, etc.<\/p>\n<div id=\"boxcolorp5mb12orange2\">\n<p><strong>For example<\/strong> for someone using Windows and Mozilla\u00a0Firefox v. 44 who tries to load a website the following header in HTTP request will be loaded:<\/p>\n<p>User-Agent: Mozilla\/5.0 (Windows NT 6.1; WOW64; rv:44.0) Gecko\/20100101 Firefox\/44.0<\/p>\n<\/div>\n<p>The website will select a suitable content version based on this information.<\/p>\n<p>When a website serves dynamic content it&#8217;s highly recommended to notify clients about that through the <a title=\"HTTP vary header: User-Agent\" href=\"https:\/\/help.superhosting.bg\/en\/http-header-vary.html\" target=\"_blank\" rel=\"noopener noreferrer\">HTTP vary header: User-Agent<\/a>. In this way search engine bots crawling a page from this website will detect that this is not the only available content version.<\/p>\n<p>This is crucially important for Googlebots, since they\u00a0<a title=\"Dynamic serving\" href=\"https:\/\/developers.google.com\/search\/mobile-sites\/mobile-seo\/dynamic-serving\" target=\"_blank\" rel=\"noopener noreferrer\"> in order to access and crawl separately each website version. Thus visitors using different devices and platforms are able to find the most suitable content.<\/a><\/p>\n<p>The advantage of dynamic serving is that the server responds on the same URL just like with responsive design (i.e. the mobile and desktop domains are the same). You do not need to redirect links either.<\/p>\n<p>A disadvantage here is that sometimes errors occur because the device used might not be recognized properly by the server.<br \/>\n<a style=\"padding-top: 42px; margin-top: -42px;\" name=\"SeparetedURLs\"><\/a><\/p>\n<h3 style=\"border: 1px dashed #cccccc; text-align: center; background: #fefdc7;\">Separated URLs<\/h3>\n<p>In this configuration, each version has a different URL serving mobile-optimized or desktop content. For each of them HTML and CSS are different. The URL also differs. This means that if you use superhosting.bg domain for serving desktop users, the mobile version can usually be found on the m.suuperhosting.bg subdomain. Thanks to user-agent, the web server recognizes the specific requirements of each device and loads the suitable website version. The difference with <a title=\"dynamic serving\" href=\"https:\/\/developers.google.com\/search\/mobile-sites\/mobile-seo\/dynamic-serving\" target=\"_blank\" rel=\"noopener noreferrer\">dynamic serving<\/a> is that if you type superhosting.bg in your mobile browser, you will be redirected to a new URL \u2013 m.superhosting.bg. However, this process of redirecting might be an obstacle in mobile configuration.<\/p>\n<div id=\"boxcolorp5mb12orange2\"><strong>For example<\/strong>: when redirecting, every desktop URL should point to the respective mobile URL. Redirection to other page is considered as an error (e.g. superhosting.bg\/uchenici-bg redirecting to m.superhosting.bg). Another common problem is when the &#8220;Error 404&#8221; is loaded on the mobile version webpage.<\/div>\n<p><strong>A possible solution is:<\/strong>\u00a0When some of your webpages does not have a mobile version, just do not redirect it. Better leave it like this. Thus its desktop version will be served.<\/p>\n<p>Different websites implement different redirection policies. Some websites only redirect mobile users visiting a desktop page to the mobile page (\u201cunidirectional\u201d redirects), and some websites redirect both mobile and desktop users if they visit pages on, respectively, the desktop and mobile sites (\u201cbidirectional\u201d redirects).<br \/>\nIn this case it&#8217;s crucial to specify that there are two different versions of a website so that search engines identify them. You can do this by adding the rel=&#8221;canonical\u201d tag (to the mobile version) and rel=&#8221;alternate&#8221; tag (to the desktop version).<\/p>\n<p>The advantage of this configuration is that you can publish different content on mobile and desktop versions if you want it to be available only on one of the versions. The disadvantage of this method is a possible redirection error, as well as sharing a link from a mobile version and serving it on a desktop version, if bidirectional redirect is used. In this case the code of the mobile version will be served on desktop.<\/p>\n<div id=\"tipsupport03\">\n<p><em style=\"color: #666666; font-family: trebuchet ms; font-size: 16px;\"><strong>QA:<\/strong><\/em><\/p>\n<p><strong>How to make my website mobile-friendly?<\/strong><\/p>\n<p>If you are using <a title=\"How to Build a Website \u2013 3 Tricks for Beginners\" href=\"https:\/\/blog.superhosting.bg\/en\/3-ways-to-create-a-website-wordpress-joomla-drupal.html\" target=\"_blank\" rel=\"noopener noreferrer\">CMS<\/a> as WordPress, Joomla! \u0438\u043b\u0438 Drupal, select a responsive theme or template.<\/p>\n<p><strong>I already have a website. How to check if there is a mobile version?<\/strong><\/p>\n<p>You can easily check if your website is mobile-friendly and if it meets Google&#8217;s requirements. For this purpose use the <a title=\"Mobile-Friendly Test\" href=\"https:\/\/search.google.com\/test\/mobile-friendly\" target=\"_blank\" rel=\"noopener noreferrer\">Mobile-Friendly Test<\/a> tool.<\/p>\n<p>he easiest way to check <a title=\"How Does My Website Look on Mobile Devices?\" href=\"https:\/\/blog.superhosting.bg\/en\/mobile-site.html\" target=\"_blank\" rel=\"noopener noreferrer\"> if your website has a mobile version<\/a> is try and load it through your mobile phone. To see how it would look like on other mobile devices, use Google Chrome (<a title=\"Mobile version\" href=\"https:\/\/developer.chrome.com\/devtools\/docs\/device-mode\" target=\"_blank\" rel=\"noopener noreferrer\">Right click =&gt; Inspect =&gt; Toggle device mode<\/a>).<\/p>\n<p><strong>My website is not responsive? How to make it mobile-friendly?<\/strong><\/p>\n<p>If you are using a CMS, check the <a title=\"Options to become mobile-friendly\" href=\"https:\/\/developers.google.com\/search\/mobile-sites\/website-software\" target=\"_blank\" rel=\"noopener noreferrer\">options to become mobile-friendly<\/a>through changing the theme or using plugins.<\/p>\n<p>If you are using a custom designed website, ask for help the developers who created it.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Mobile compatibility is important. Do you want your website to be easily accessible across all devices? Here is what you need to know!<\/p>\n","protected":false},"author":7,"featured_media":53811,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"_lmt_disableupdate":"","_lmt_disable":"","footnotes":""},"categories":[122],"tags":[],"class_list":{"0":"post-27655","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-superhosting-website-en"},"aioseo_notices":[],"modified_by":"\u041c\u0430\u0434\u043b\u0435\u043d\u0430 \u041c\u0435\u0442\u043e\u0434\u0438\u0435\u0432\u0430","post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/blog.superhosting.bg\/en\/wp-json\/wp\/v2\/posts\/27655","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.superhosting.bg\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.superhosting.bg\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.superhosting.bg\/en\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.superhosting.bg\/en\/wp-json\/wp\/v2\/comments?post=27655"}],"version-history":[{"count":11,"href":"https:\/\/blog.superhosting.bg\/en\/wp-json\/wp\/v2\/posts\/27655\/revisions"}],"predecessor-version":[{"id":65202,"href":"https:\/\/blog.superhosting.bg\/en\/wp-json\/wp\/v2\/posts\/27655\/revisions\/65202"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.superhosting.bg\/en\/wp-json\/wp\/v2\/media\/53811"}],"wp:attachment":[{"href":"https:\/\/blog.superhosting.bg\/en\/wp-json\/wp\/v2\/media?parent=27655"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.superhosting.bg\/en\/wp-json\/wp\/v2\/categories?post=27655"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.superhosting.bg\/en\/wp-json\/wp\/v2\/tags?post=27655"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}