{"id":6402,"date":"2019-06-12T18:15:35","date_gmt":"2019-06-12T18:15:35","guid":{"rendered":"https:\/\/www.crimsondesigns.com\/blog\/?p=6402"},"modified":"2024-09-04T15:21:23","modified_gmt":"2024-09-04T15:21:23","slug":"what-makes-a-website-mobile-friendly","status":"publish","type":"post","link":"https:\/\/www.crimsondesigns.com\/blog\/what-makes-a-website-mobile-friendly\/","title":{"rendered":"What Makes a Website Mobile Friendly?"},"content":{"rendered":"<p>This beginner tutorial explains what it means to be mobile-friendly. It also describes 3 simple steps you can take to improve your small business website or blog for your mobile visitors.<\/p>\n<p><strong>Mobile-Friendly Website Characteristics:<\/strong><\/p>\n<ul>\n<li>A mobile-friendly website ensures that its mobile visitors enjoy a seamless, relaxing experience.<\/li>\n<li>They can view it easily whether sitting on a park bench or standing in a checkout line.<\/li>\n<li>Mobile visitors don&#8217;t have to pinch or zoom when they arrive.<\/li>\n<li>They can navigate through it without making mistakes or getting lost.<\/li>\n<li>They don&#8217;t have to think or work too hard to get around.<\/li>\n<li>It is mobile friendly if they come back again.<\/li>\n<\/ul>\n<p><strong>Here are 3 Simple Steps you can take to make your website more mobile-friendly.<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-6487 size-full\" src=\"https:\/\/www.crimsondesigns.com\/blog\/wp-content\/uploads\/2019\/05\/mobile-friendly-website-checklist.gif\" alt=\"mobile-friendly checklist: 3 simple website steps\" width=\"698\" height=\"657\" \/><\/p>\n<h3>1) Provide a Responsive Layout<\/h3>\n<p>You can test your website with a cell phone. Does your site fit on the screen without having to pinch or zoom the content?<\/p>\n<p>Microsoft Bing also has a helpful tool: <a href=\"https:\/\/www.bing.com\/webmaster\/tools\/mobile-friendliness\" target=\"_blank\" rel=\"noopener noreferrer\">Microsoft Bing&#8217;s Mobile-Friendly Test<\/a>. If your web page does not pass the mobile friendly test, you\u2019ll have some ideas why it failed. If it says that the <strong>&#8220;viewport is not set,<\/strong>&#8221; then your site is not responsive.<\/p>\n<p>Third, if you\u2019re sitting at a desktop computer, open up a web browser. Use your mouse to grab the bottom right corner and move it to the left. This will decrease the size of the screen. <strong>Watch closely. <\/strong>Does your website change shape as the screen gets smaller? If it does, you&#8217;re looking at a flexible layout. It has a responsive design with some flexible page elements and images.<\/p>\n<p>A responsive design uses CSS styling rules and <a href=\"https:\/\/www.crimsondesigns.com\/blog\/css3-media-queries-for-beginners\/\">media queries<\/a> to change the user\u2019s experience based on what device they are using. Mobile visitors will be thrilled to find out that they don\u2019t have to &#8220;pinch&#8221; and &#8220;zoom&#8221; with their fingers to read content on your site.<\/p>\n<p><strong>If your website adapts to a small screen, that\u2019s good news. <\/strong><\/p>\n<p>If not, you can convert your layout to a responsive one. Read\u00a0<a title=\"3 Simple Steps Towards Mobile Friendly Web Design\" href=\"https:\/\/www.crimsondesigns.com\/blog\/3-simple-steps-towards-mobile-friendly-web-design\/\" rel=\"bookmark\">3 Simple Steps Towards Mobile Friendly Web Design<\/a>.\u00a0You can also hire a <a href=\"https:\/\/www.crimsondesigns.com\/blog\/about-em-howes-nh-web-designer\/\">web designer<\/a> or switch to a different theme\u00a0if you have a <a href=\"https:\/\/www.crimsondesigns.com\/wordpress\/nh-wordpress-web-design.php\">WordPress site<\/a>.<\/p>\n<h3>2) Add Mobile-Friendly Content<\/h3>\n<p>First, ask yourself what information your mobile visitors will likely want to see right away. Is it easy to find from a mobile point of view?<\/p>\n<p>Picture your company website being SQUEEZED into a long single-column.<\/p>\n<p>That&#8217;s how it looks on a mobile phone. If your important content is at the bottom of the page, it could require a long scroll for a mobile user. If they get confused, they may give up too soon and bounce back to Google.<\/p>\n<p>Now take a look at one of your pages with a lot of information, such as your &#8220;<strong>about us&#8221;<\/strong> page or a &#8220;<strong>blog post.<\/strong>&#8221; Is it easy to read and scan? Huge walls of text can be intimidating for a mobile device user. You can improve your content\u2019s <strong>mobile-readability<\/strong> with a few simple tweaks.<\/p>\n<p>First, look at your font size. It\u2019s best to use a font size of at least <strong>14px<\/strong>.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignright wp-image-6500 size-full\" src=\"https:\/\/www.crimsondesigns.com\/blog\/wp-content\/uploads\/2019\/05\/mobile-friendly-content-1.gif\" alt=\"mobile friendly content\" width=\"285\" height=\"301\" \/>Try to keep your headings (headlines) short.<\/p>\n<p>Also add sub headings and bulleted lists to help guide your readers. Mobile users want quick answers to their questions. They often scroll faster than desktop users, scanning content first.<\/p>\n<p>Headings and sub-headings help break up content and improve readability. Visitors can quickly jump to sections they find interesting and not get lost.<\/p>\n<h4>Scannability<\/h4>\n<p>To design your content for scanning, aim for short sentences and paragraphs to help create white space.<\/p>\n<p><strong>White space is a must-have for mobile devices users.<\/strong><\/p>\n<p>Their eyes will naturally gravitate toward content with white space around it. Break up your content into short, bite-size pieces to make it easier to remember.<\/p>\n<p>This is called <strong>content chunking<\/strong>.<\/p>\n<p>You can also add <strong>brain-friendly<\/strong> information such as images, short videos and infographics to make scanning more enjoyable.\u00a0Brain-friendly content helps the brain process what it sees and prevents it from getting overwhelmed by long\u00a0walls of text.<\/p>\n<p>Avoid \u201cbig words\u201d when there are \u201csimple word\u201d alternatives to get your point across.<\/p>\n<p>See more <a href=\"https:\/\/www.crimsondesigns.com\/blog\/10-reader-friendly-tweaks-for-thumbs-up-website-ratings\/\">reader-friendly tips.<\/a><\/p>\n<h4>Mobile-Friendly Images<\/h4>\n<p>Graphics will make your mobile content more engaging, but only if they fit in the screen, are surrounded by white space and download fast. The bandwidth of mobile devices is much smaller than desktop computers so you want to create clear, crisp images with the\u00a0smallest possible file size.<\/p>\n<h4>Flexible Page Elements<\/h4>\n<p>Check your web pages to be sure your images, tables, forms and videos actually fit in small screens. You may have some &#8220;inflexible&#8221; page elements in your &#8220;flexible&#8221; pages that you had no clue about. Your login or contact form may look great on a laptop, while mobile visitors only see the \u201cLEFT HALF\u201d of it in their cell phone view.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-6722\" src=\"https:\/\/www.crimsondesigns.com\/blog\/wp-content\/uploads\/2019\/06\/mobile-friendly-form.gif\" alt=\"mobile friendly form on a cellphone\" width=\"450\" height=\"292\" \/><\/p>\n<p>Besides having flexibility, your graphics must also pass the legibility test. Unfortunately, many small business websites include fancy graphics that look fine on a large screen, but shrink down to illegible font sizes that the average mobile visitor can\u2019t decipher. Your infographics may suffer the same mobile-readability issues, shrinking down to a fuzzy blur.<\/p>\n<h3>3) Create Mobile-Friendly Menus and Links<\/h3>\n<p>Take a look at your navigation menu. If your main menu is a huge panel of multi-tiered lists with 20 links or more, you should consider a different approach.<\/p>\n<ul>\n<li>Don\u2019t give your visitors too many choices all at once. It requires too much thinking.<\/li>\n<li>Your navigation menu is not the place to link to every page in your site.<\/li>\n<li>It\u2019s best to limit your menu to eight items on the top level.<\/li>\n<li>Also be sure to keep your main menu consistent throughout your site for all your visitors.<\/li>\n<\/ul>\n<p>This is a <a href=\"https:\/\/www.crimsondesigns.com\/blog\/5-steps-user-friendly-website\/\"><strong>user-friendly<\/strong><\/a> approach.<\/p>\n<h4>Finger-Friendly Design<\/h4>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignright size-full wp-image-6717\" src=\"https:\/\/www.crimsondesigns.com\/blog\/wp-content\/uploads\/2019\/06\/finger-friendly-design.gif\" alt=\"finger friendly web design\" width=\"350\" height=\"369\" \/>Now look at the size of the navigation buttons throughout your site. Clicking on links with a mouse is easy, but \u201cTAPPING\u201d with your fingers on a small screen requires more thought and effort.<\/p>\n<ul>\n<li>One small button is hard to TAP.<\/li>\n<li>Multiple small buttons squeezed close together could\u00a0 trigger the wrong action.<\/li>\n<\/ul>\n<p>You don\u2019t want your mobile visitors to have to work hard to get around your site. It\u2019s best to <b>make your targets big<\/b> and <strong>easy to spot<\/strong>.<\/p>\n<p><b>A mobile-friendly website goes beyond an appealing site design<\/b>.<\/p>\n<p>It\u2019s about quick page load times and organizing web content so mobile users don\u2019t have to think too hard, work too hard or scroll too much. Your page elements must ALL fit in the small screen and be legible (without pinching and zooming). It also includes short words, simple sentences, short paragraphs and finger-friendly buttons. With a few simple tweaks, you can improve your website&#8217;s mobile-friendliness.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This beginner tutorial explains what it means to be mobile-friendly. It also describes 3 simple steps you can take to improve your small business website or blog for your mobile visitors.<\/p>\n","protected":false},"author":1,"featured_media":7510,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,9],"tags":[299,182,266],"class_list":{"0":"post-6402","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-small-business","8":"category-web-design","9":"tag-mobile-friendly","10":"tag-responsive-web-design","11":"tag-website-readability","12":"cat-3-id","13":"cat-9-id","14":"has_thumb"},"_links":{"self":[{"href":"https:\/\/www.crimsondesigns.com\/blog\/wp-json\/wp\/v2\/posts\/6402","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.crimsondesigns.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.crimsondesigns.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.crimsondesigns.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.crimsondesigns.com\/blog\/wp-json\/wp\/v2\/comments?post=6402"}],"version-history":[{"count":2,"href":"https:\/\/www.crimsondesigns.com\/blog\/wp-json\/wp\/v2\/posts\/6402\/revisions"}],"predecessor-version":[{"id":7749,"href":"https:\/\/www.crimsondesigns.com\/blog\/wp-json\/wp\/v2\/posts\/6402\/revisions\/7749"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.crimsondesigns.com\/blog\/wp-json\/wp\/v2\/media\/7510"}],"wp:attachment":[{"href":"https:\/\/www.crimsondesigns.com\/blog\/wp-json\/wp\/v2\/media?parent=6402"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.crimsondesigns.com\/blog\/wp-json\/wp\/v2\/categories?post=6402"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.crimsondesigns.com\/blog\/wp-json\/wp\/v2\/tags?post=6402"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}