{"id":20601,"date":"2019-09-30T12:33:44","date_gmt":"2019-09-30T04:33:44","guid":{"rendered":"https:\/\/dp2024.sim-dp.com\/?p=20601"},"modified":"2019-09-30T12:33:44","modified_gmt":"2019-09-30T04:33:44","slug":"how-to-make-your-website-mobile-friendly","status":"publish","type":"post","link":"https:\/\/dp2024.sim-dp.com\/en\/how-to-make-your-website-mobile-friendly\/","title":{"rendered":"How to Make Your Website Mobile-Friendly"},"content":{"rendered":"

A mobile-friendly website is a website designed and optimized for smartphones and tablets. Since mobile devices come in many different screen sizes and resolutions, the content of a mobile-friendly website should be able to adjust accordingly, so that the users can read the content in appropriate size and navigate the website using different devices easily.<\/span><\/p>\n

Before the invention of smartphones, people browse websites using desktops. Webmasters are used to design websites that can display well on desktops. But after the prevalence of smartphones, more and more people has changed their habit. According to<\/span> StatCounter<\/span><\/a>, worldwide market share of mobile device is 55% in July 2019, ahead of the market share of desktop (45%). Websites that display well on desktops are not necessarily easy to view and click on small mobile screens. To keep mobile users engaged to your website, the text on your website should be easily readable, links and navigation are easily clickable. It will help lower the bounce rate and improve conversion rate of your mobile users. On the other hand, Google has already announced that its ranking algorithm favor mobile-friendly websites. Making your website to be mobile-friendly is a must for all webmasters now.<\/span><\/p>\n

Responsive Web Design<\/b><\/p>\n

A responsive website recognizes the device on which it is being viewed and automatically changes its layout to adapt to the screen size and resolution of that device. There are hundreds of responsive theme available for major CMS such as WordPress, Magento, Drupal and Joomla on the market. You can install the responsive theme and double check that your new theme looks great on both desktop and mobile devices.<\/span><\/p>\n

Large Font Sizes and Buttons<\/b><\/p>\n

When you are browsing a website on a 6-inch screen, it is annoyed to find the content being too small to read and you have to constantly zoom-in and zoom-out the content. Even worse, you may also find the buttons are too close to each other and you keep clicking the wrong button. To save visitors from this frustration, a mobile-friendly website should use a font size of at least 14px in order to be easily readable. The call-to-action buttons should be placed on a prominent position and big enough to be tapped with a finger. Make sure you keep enough space between buttons so your visitors don\u2019t click the wrong one accidentally.<\/span><\/p>\n

Stick with Standard Fonts<\/b><\/p>\n

Font is one of the crucial elements of website design. Custom, creative fonts may help your website look better, but your mobile visitors will have to download the new fonts to their phones and tablets in order to see the website properly. It will slow down the loading time of your website. Even worse, some visitors may just reject the download request and leave your website instantly. A mobile-friendly website should stick with standard fonts that are pre-installed in most devices. You also have to make sure the fonts you use are clear and easy to read on your website.<\/span><\/p>\n

Eliminate Pop-Ups<\/b><\/p>\n

A mobile-friendly website should avoid using pop-ups. The \u201cX\u201d button to close the pop-ups are often too small to be tapped with a finger. When visitors are trying to close it, they may accidentally click on the pop-ups and go to a new landing page. This is annoying and hinder the user experience. If you need to use pop-ups, only show it when a visitor clicks a link. Visitors are more likely to accept pop-ups with information they ask for. Also, make sure the pop-ups are easy to close so that they can continue to browse your website seamlessly.<\/span><\/p>\n

Don\u2019t Use Flash<\/b><\/p>\n

Neither Android nor iOS devices support Flash. Your website content that are showed as a Flash animation cannot be displayed properly on any mobile devices. It also slows down the pages\u2019 loading time and hurt your SEO. If your website is still using Flash, you should switch to a compatible technology like HTML instead.<\/span><\/p>\n

Simplify Menus and Forms<\/b><\/p>\n

The screen size of mobile is much smaller than desktop. Extensive menus that have lots of options do not work well on small mobile screen. The menu of mobile site should be concise and fit on one screen, so that visitors do not have to scroll or zoom in and out to see all navigation options. You should also keep forms as short as possible, since typing is more difficult on smartphones. Eliminate fields that you don\u2019t really need in the form. Offer an option of using a keypad instead of the full keyboard when asking your visitors to fill out number fields on mobile forms. Disable autocorrect for each form field to avoid smartphones changing the names the users input to other common words.<\/span><\/p>\n

Compress Images and CSS<\/b><\/p>\n

The loading time is usually longer for mobile devices because the bandwidth of mobile devices is much smaller than that of desktop. To keep your page loading time as low as possible, you should compress images to the smallest possible file size while still looking clear on all devices. Eliminate unnecessary heavy images and flashing lights. By shrinking the file sizes, your page will load faster and improve your user experience.<\/span><\/p>\n

Use Percentages<\/b><\/p>\n

Configuring the width of HTML elements in terms of percentages enables those elements to fit different screen sizes. This helps to provide a consistent viewing experience on many different devices. In contrast, if you specify widths by pixels, the widths of those elements do not change when the screen size changes. If the width you set in pixels is bigger than the mobile phone screen size, visitors will have to scroll horizontally. The user experience will be ruined.<\/span><\/p>\n

To conclude, a mobile-friendly website should be responsive, has simplified menus and forms, uses standard fonts, large font size and buttons. Pop-Ups and Flash should be avoided. Use percentage to configure the width and keep your images and CSS file sizes as small as possible.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"

A mobile-friendly website is a website designed and optimized for smartphones and tablets. Since mobile devices come in many different screen sizes and resolutions, the … read more<\/a><\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[],"acf":[],"yoast_head":"\nHow to Make Your Website Mobile-Friendly | Dataplugs<\/title>\n<meta name=\"description\" content=\"A mobile-friendly website is a website designed and optimized for smartphones and tablets. Since mobile devices come in many different screen sizes and\" \/>\n<meta name=\"robots\" content=\"index, follow\" \/>\n<link rel=\"canonical\" href=\"https:\/\/dp2024.sim-dp.com\/en\/how-to-make-your-website-mobile-friendly\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Make Your Website Mobile-Friendly | Dataplugs\" \/>\n<meta property=\"og:description\" content=\"A mobile-friendly website is a website designed and optimized for smartphones and tablets. Since mobile devices come in many different screen sizes and\" \/>\n<meta property=\"og:url\" content=\"https:\/\/dp2024.sim-dp.com\/en\/how-to-make-your-website-mobile-friendly\/\" \/>\n<meta property=\"og:site_name\" content=\"Dataplugs\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/dataplugs\/\" \/>\n<meta property=\"article:published_time\" content=\"2019-09-30T04:33:44+00:00\" \/>\n<meta name=\"author\" content=\"Felix Cheung\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@dataplugs\" \/>\n<meta name=\"twitter:site\" content=\"@dataplugs\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Felix Cheung\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/dp2024.sim-dp.com\/en\/how-to-make-your-website-mobile-friendly\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/dp2024.sim-dp.com\/en\/how-to-make-your-website-mobile-friendly\/\"},\"author\":{\"name\":\"Felix Cheung\",\"@id\":\"https:\/\/dp2024.sim-dp.com\/en\/#\/schema\/person\/969f09c2c1bd2a73d3dc8b7c464a2d61\"},\"headline\":\"How to Make Your Website Mobile-Friendly\",\"datePublished\":\"2019-09-30T04:33:44+00:00\",\"dateModified\":\"2019-09-30T04:33:44+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/dp2024.sim-dp.com\/en\/how-to-make-your-website-mobile-friendly\/\"},\"wordCount\":984,\"publisher\":{\"@id\":\"https:\/\/dp2024.sim-dp.com\/en\/#organization\"},\"articleSection\":[\"Industry News\"],\"inLanguage\":\"en-US\",\"about\":{\"@id\":\"https:\/\/dp2024.sim-dp.com\/en\/how-to-make-your-website-mobile-friendly\/\"},\"thumbnailUrl\":\"https:\/\/dp2024.sim-dp.com\/wp-content\/uploads\/2019\/09\/mobile_blog.jpg\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/dp2024.sim-dp.com\/en\/how-to-make-your-website-mobile-friendly\/\",\"url\":\"https:\/\/dp2024.sim-dp.com\/wp-content\/uploads\/2019\/09\/mobile_blog.jpg\",\"name\":\"How to Make Your Website Mobile-Friendly | Dataplugs\",\"isPartOf\":{\"@id\":\"https:\/\/dp2024.sim-dp.com\/en\/#website\"},\"datePublished\":\"2019-09-30T04:33:44+00:00\",\"dateModified\":\"2019-09-30T04:33:44+00:00\",\"description\":\"A mobile-friendly website is a website designed and optimized for smartphones and tablets. Since mobile devices come in many different screen sizes and\",\"breadcrumb\":{\"@id\":\"https:\/\/dp2024.sim-dp.com\/en\/how-to-make-your-website-mobile-friendly\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/dp2024.sim-dp.com\/en\/how-to-make-your-website-mobile-friendly\/\"]}],\"contentUrl\":\"https:\/\/dp2024.sim-dp.com\/wp-content\/uploads\/2019\/09\/mobile_blog.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/dp2024.sim-dp.com\/en\/how-to-make-your-website-mobile-friendly\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/dp2024.sim-dp.com\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Make Your Website Mobile-Friendly\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/dp2024.sim-dp.com\/en\/#website\",\"url\":\"https:\/\/dp2024.sim-dp.com\/en\/\",\"name\":\"Dataplugs\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/dp2024.sim-dp.com\/en\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/dp2024.sim-dp.com\/en\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/dp2024.sim-dp.com\/en\/#organization\",\"name\":\"Dataplugs Limited\",\"url\":\"https:\/\/dp2024.sim-dp.com\/en\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/dp2024.sim-dp.com\/en\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/dp2024.sim-dp.com\/wp-content\/uploads\/2021\/09\/logo_en-1.png\",\"contentUrl\":\"https:\/\/dp2024.sim-dp.com\/wp-content\/uploads\/2021\/09\/logo_en-1.png\",\"width\":1,\"height\":1,\"caption\":\"Dataplugs Limited\"},\"image\":{\"@id\":\"https:\/\/dp2024.sim-dp.com\/en\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/dataplugs\/\",\"https:\/\/twitter.com\/dataplugs\",\"https:\/\/www.instagram.com\/dataplugs\/\",\"https:\/\/www.linkedin.com\/company\/dataplugs-limited\"]},{\"@type\":\"LocalBusiness\",\"@id\":\"https:\/\/dp2024.sim-dp.com\/en\/#\/schema\/person\/969f09c2c1bd2a73d3dc8b7c464a2d61\",\"name\":\"Dataplugs Limited\",\"image\":\"https:\/\/www.dataplugs.com\/wp-content\/uploads\/2018\/06\/logo_en.png\",\"telephone\":\"+852 3959 1888\",\"address\":{\"@type\":\"PostalAddress\",\"streetAddress\":\"Suite 3602, 36\/F., AIA Kowloon Tower, 100 How Ming Street, Kwun Tong, Kowloon, Hong Kong\",\"addressLocality\":\"Hong Kong\",\"addressCountry\":\"HK\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Make Your Website Mobile-Friendly | Dataplugs","description":"A mobile-friendly website is a website designed and optimized for smartphones and tablets. Since mobile devices come in many different screen sizes and","robots":{"index":"index","follow":"follow"},"canonical":"https:\/\/dp2024.sim-dp.com\/en\/how-to-make-your-website-mobile-friendly\/","og_locale":"en_US","og_type":"article","og_title":"How to Make Your Website Mobile-Friendly | Dataplugs","og_description":"A mobile-friendly website is a website designed and optimized for smartphones and tablets. Since mobile devices come in many different screen sizes and","og_url":"https:\/\/dp2024.sim-dp.com\/en\/how-to-make-your-website-mobile-friendly\/","og_site_name":"Dataplugs","article_publisher":"https:\/\/www.facebook.com\/dataplugs\/","article_published_time":"2019-09-30T04:33:44+00:00","author":"Felix Cheung","twitter_card":"summary_large_image","twitter_creator":"@dataplugs","twitter_site":"@dataplugs","twitter_misc":{"Written by":"Felix Cheung","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/dp2024.sim-dp.com\/en\/how-to-make-your-website-mobile-friendly\/#article","isPartOf":{"@id":"https:\/\/dp2024.sim-dp.com\/en\/how-to-make-your-website-mobile-friendly\/"},"author":{"name":"Felix Cheung","@id":"https:\/\/dp2024.sim-dp.com\/en\/#\/schema\/person\/969f09c2c1bd2a73d3dc8b7c464a2d61"},"headline":"How to Make Your Website Mobile-Friendly","datePublished":"2019-09-30T04:33:44+00:00","dateModified":"2019-09-30T04:33:44+00:00","mainEntityOfPage":{"@id":"https:\/\/dp2024.sim-dp.com\/en\/how-to-make-your-website-mobile-friendly\/"},"wordCount":984,"publisher":{"@id":"https:\/\/dp2024.sim-dp.com\/en\/#organization"},"articleSection":["Industry News"],"inLanguage":"en-US","about":{"@id":"https:\/\/dp2024.sim-dp.com\/en\/how-to-make-your-website-mobile-friendly\/"},"thumbnailUrl":"https:\/\/dp2024.sim-dp.com\/wp-content\/uploads\/2019\/09\/mobile_blog.jpg"},{"@type":"WebPage","@id":"https:\/\/dp2024.sim-dp.com\/en\/how-to-make-your-website-mobile-friendly\/","url":"https:\/\/dp2024.sim-dp.com\/wp-content\/uploads\/2019\/09\/mobile_blog.jpg","name":"How to Make Your Website Mobile-Friendly | Dataplugs","isPartOf":{"@id":"https:\/\/dp2024.sim-dp.com\/en\/#website"},"datePublished":"2019-09-30T04:33:44+00:00","dateModified":"2019-09-30T04:33:44+00:00","description":"A mobile-friendly website is a website designed and optimized for smartphones and tablets. Since mobile devices come in many different screen sizes and","breadcrumb":{"@id":"https:\/\/dp2024.sim-dp.com\/en\/how-to-make-your-website-mobile-friendly\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/dp2024.sim-dp.com\/en\/how-to-make-your-website-mobile-friendly\/"]}],"contentUrl":"https:\/\/dp2024.sim-dp.com\/wp-content\/uploads\/2019\/09\/mobile_blog.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/dp2024.sim-dp.com\/en\/how-to-make-your-website-mobile-friendly\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/dp2024.sim-dp.com\/en\/"},{"@type":"ListItem","position":2,"name":"How to Make Your Website Mobile-Friendly"}]},{"@type":"WebSite","@id":"https:\/\/dp2024.sim-dp.com\/en\/#website","url":"https:\/\/dp2024.sim-dp.com\/en\/","name":"Dataplugs","description":"","publisher":{"@id":"https:\/\/dp2024.sim-dp.com\/en\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/dp2024.sim-dp.com\/en\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/dp2024.sim-dp.com\/en\/#organization","name":"Dataplugs Limited","url":"https:\/\/dp2024.sim-dp.com\/en\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/dp2024.sim-dp.com\/en\/#\/schema\/logo\/image\/","url":"https:\/\/dp2024.sim-dp.com\/wp-content\/uploads\/2021\/09\/logo_en-1.png","contentUrl":"https:\/\/dp2024.sim-dp.com\/wp-content\/uploads\/2021\/09\/logo_en-1.png","width":1,"height":1,"caption":"Dataplugs Limited"},"image":{"@id":"https:\/\/dp2024.sim-dp.com\/en\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/dataplugs\/","https:\/\/twitter.com\/dataplugs","https:\/\/www.instagram.com\/dataplugs\/","https:\/\/www.linkedin.com\/company\/dataplugs-limited"]},{"@type":"LocalBusiness","@id":"https:\/\/dp2024.sim-dp.com\/en\/#\/schema\/person\/969f09c2c1bd2a73d3dc8b7c464a2d61","name":"Dataplugs Limited","image":"https:\/\/www.dataplugs.com\/wp-content\/uploads\/2018\/06\/logo_en.png","telephone":"+852 3959 1888","address":{"@type":"PostalAddress","streetAddress":"Suite 3602, 36\/F., AIA Kowloon Tower, 100 How Ming Street, Kwun Tong, Kowloon, Hong Kong","addressLocality":"Hong Kong","addressCountry":"HK"}}]}},"_links":{"self":[{"href":"https:\/\/dp2024.sim-dp.com\/en\/wp-json\/wp\/v2\/posts\/20601"}],"collection":[{"href":"https:\/\/dp2024.sim-dp.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dp2024.sim-dp.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dp2024.sim-dp.com\/en\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/dp2024.sim-dp.com\/en\/wp-json\/wp\/v2\/comments?post=20601"}],"version-history":[{"count":1,"href":"https:\/\/dp2024.sim-dp.com\/en\/wp-json\/wp\/v2\/posts\/20601\/revisions"}],"predecessor-version":[{"id":20605,"href":"https:\/\/dp2024.sim-dp.com\/en\/wp-json\/wp\/v2\/posts\/20601\/revisions\/20605"}],"wp:attachment":[{"href":"https:\/\/dp2024.sim-dp.com\/en\/wp-json\/wp\/v2\/media?parent=20601"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dp2024.sim-dp.com\/en\/wp-json\/wp\/v2\/categories?post=20601"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dp2024.sim-dp.com\/en\/wp-json\/wp\/v2\/tags?post=20601"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}