{"id":26150,"date":"2020-07-01T08:19:00","date_gmt":"2020-07-01T13:19:00","guid":{"rendered":"http:\/\/www.hostgator.com\/blog\/?p=26150"},"modified":"2020-06-25T11:22:44","modified_gmt":"2020-06-25T16:22:44","slug":"mobile-friendly-web-design-tips","status":"publish","type":"post","link":"https:\/\/www.hostgator.com\/blog\/mobile-friendly-web-design-tips\/","title":{"rendered":"7 Mobile-Friendly Design Tips for Your Blog or Website"},"content":{"rendered":"\n<p>Think about the last time you were in public with a bunch of strangers. What were people doing when you looked around? I bet you a shiny silver dollar that they had their heads buried deep into their smartphone, checking social media or browsing websites.<\/p>\n\n\n\n<p>If you don\u2019t like to rely on anecdotal evidence alone, recent research shows that the number of smartphone users in just the United States is over <a href=\"https:\/\/www.statista.com\/statistics\/275587\/mobile-phone-internet-user-penetration-us\/\" target=\"_blank\" rel=\"noopener noreferrer\">257.3 million<\/a>. That\u2019s nearly 80 percent of the total US population.<\/p>\n\n\n\n<p>All of this is just to say that if you have a blog or website, or are planning to launch one soon, and want to capture the attention of smartphone users, you have to <a href=\"https:\/\/www.hostgator.com\/blog\/how-make-website-mobile-friendly\/\">make your website mobile-friendly<\/a>. In other words, you have to make it possible for smartphone users to easily read and navigate your website from a mobile device. None of this pinching, scrolling, and zooming business!<\/p>\n\n\n\n<p>This post will provide the top seven mobile-friendly design tips for your blog or website.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"https:\/\/www.hostgator.com\/website-builder\"><img loading=\"lazy\" decoding=\"async\" width=\"470\" height=\"60\" src=\"http:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2019\/02\/470x60-Blog-DragNDrop.png\" alt=\"drag and drop website builder\" class=\"wp-image-21576\" srcset=\"https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2019\/02\/470x60-Blog-DragNDrop.png 470w, https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2019\/02\/470x60-Blog-DragNDrop-300x38.png 300w\" sizes=\"(max-width: 470px) 100vw, 470px\" \/><\/a><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">1. Pick a mobile-responsive website or blog theme<\/h2>\n\n\n\n<p>No one said you had to be a web designer to have a <a href=\"https:\/\/www.hostgator.com\/blog\/mobile-friendly-website\/\">mobile-friendly website<\/a>. They did say, however, that you have to be picky when it comes to choosing a theme. Save yourself a headache and pick a mobile-friendly theme.<\/p>\n\n\n\n<p>As a quick review, a theme is a preconfigured framework that defines how your website looks. Mobile-responsive themes are pre-coded for both optimal desktop and mobile navigation.&nbsp;<\/p>\n\n\n\n<p>If you have a <a href=\"https:\/\/www.hostgator.com\/managed-wordpress-hosting\">WordPress blog or website<\/a>, most templates will already be optimized for mobile devices. However, you can double-check by reading the theme description and also by testing the demo URL for <a href=\"https:\/\/www.hostgator.com\/blog\/what-is-responsive-web-design\/\">responsiveness<\/a>.&nbsp;<\/p>\n\n\n\n<p>If you buy a third-party WordPress website, the theme product page will usually include a picture or demo of how the theme will look on a desktop and mobile device (see below).<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/M1yDaZTMAIiaUe8rslZdxBtqxsPJVNajvoopMEoHP_KK6IVQLwnNeMw6kj9s_LyT7MVU2qxyKwlfoMqoL-yj3QquhNPIypwGVsfnBgJegvqCqybgb_QV_6Gvi4jQ-RU1g7n_lCt3\" alt=\"example of wordpress theme with mobile version\"\/><\/figure><\/div>\n\n\n\n<p>If you\u2019re running your website in HostGator, take note that all of our drag-and-drop <a href=\"https:\/\/www.hostgator.com\/blog\/top-10-most-popular-design-templates-for-gator-website-builder\/\">website builder templates<\/a> are mobile-friendly.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"506\" src=\"http:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2019\/04\/ecommerce-website-templates-hostgator-1024x506.png\" alt=\"gator website builder design templates\" class=\"wp-image-21995\" srcset=\"https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2019\/04\/ecommerce-website-templates-hostgator-1024x506.png 1024w, https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2019\/04\/ecommerce-website-templates-hostgator-300x148.png 300w, https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2019\/04\/ecommerce-website-templates-hostgator-768x379.png 768w, https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2019\/04\/ecommerce-website-templates-hostgator.png 1944w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">2. Include a viewport meta tag<\/h2>\n\n\n\n<p>If you\u2019re the 'I\u2019ll do what you say, no questions asked type of human,'\u009d here\u2019s what you need to do:<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li><strong>Copy. <\/strong>Copy the following code: <em>&lt;meta name='\u00b3viewport'\u00b3 content='\u00b3width=device-width, initial-scale=1'\u00b3&gt;<\/em><\/li><li><strong>Paste. <\/strong>Paste the code in the HTML &lt;head&gt; area for each page of your website.<\/li><\/ol>\n\n\n\n<p>Tada! You\u2019re done. Pat yourself on the back.<\/p>\n\n\n\n<p>Now the explanation. The viewport code provides search engines with the information needed to correctly display the size and scale of the content, based on what device an internet searcher is using.&nbsp;<\/p>\n\n\n\n<p>Put simply: this meta tag provides a top-notch, multiple-device navigation experience, so website visitors can enjoy your content from a large desktop and a small six-inch mobile screen alike.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">3. Simplify your content<\/h2>\n\n\n\n<p>Any time you, as an internet browser, navigate a good mobile version of a website, you\u2019ll notice the content isn\u2019t as rich as it is on a desktop.<\/p>\n\n\n\n<p>When creating copy and design elements for your mobile website, the hard and fast rule is: <strong><em>simplify<\/em><\/strong> everything.<\/p>\n\n\n\n<p>Here\u2019s what I mean.<\/p>\n\n\n\n<p>When I search Krispy Kreme (I\u2019m not eating a dozen doughnuts, you are!) on my desktop, this is what the home page looks like.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/WmbvNLJn2K4rMZCK7LhaXVvntX8QFkFgP5E_M6OB_jEjIsiBnacrrFsBHTLrGdSu0tkn326zWJR9lAZ8TO3KuLZxZXxr-ovxumzDAdWQCzHKtKLTKufwsxgv-qFjFvPD7HzDgIyk\" alt=\"desktop version of krispy kreme website\"\/><\/figure><\/div>\n\n\n\n<p>It\u2019s complete and full of all the information you could ever want to learn about these delicious confections.&nbsp;<\/p>\n\n\n\n<p>What happens when I search for the same website via a mobile device? This is how the home page looks now.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/Hjyv8kvH5cLwjxrSpYdENNP5PKmhgWsdDZJqMQIJpBd-SW4A8-48xduDhoHw7QNUBUf0tQnwybKzi-Sfzsz-WT5Y2xPi-joH85ozNkUndhjB5x-qs_ih7o-SWNA64YEchrPKbBER\" alt=\"mobile version of krispy kreme website\" width=\"370\" height=\"800\"\/><\/figure><\/div>\n\n\n\n<p>You only see the essentials. Krispy Kreme puts the most important information on the top ('order now'\u009d) and eliminates any elements that aren\u2019t critical to a mobile shopping experience. It\u2019s awesome. Do as Krispy Kreme does.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">4. Avoid fancy design elements<\/h2>\n\n\n\n<p>The goal of mobile search is to get answers from brands as quickly and efficiently as possible. This means when you are designing your mobile-friendly website, you have to let go of all your fancy design ideas and opt for the quick and simple.<\/p>\n\n\n\n<p>Here are the two things to forget about first.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Flash? Just say no.<\/h3>\n\n\n\n<p>As it turns out, Flash is not an apt name for the technology. Why? Flash can slow down a site\u2019s load time significantly. The more you can do to speed up your site&#8217;s load time, the more attractive your website will be to users.<\/p>\n\n\n\n<p>Additionally, neither Android nor iOS supports Flash. This means if your websites\u2019 mobile experience is dependent on whether or not your viewers can see your Flash animation, you\u2019re going to run into trouble when someone searches via a mobile device.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Avoid the use of pop-ups and refreshers<\/h3>\n\n\n\n<p>Pop-ups and refreshers can be a great tool for desktop viewing. They are especially helpful in capturing new subscribers, making announcements, and giving discount codes.<\/p>\n\n\n\n<p>However, these tools are distracting on a mobile device. You want your content to be as simple and easy for your visitors to navigate as possible. If your visitors see irrelevant pop-ups that take up the whole screen, it could lead to a potential customer getting frustrated and clicking out of your website.<\/p>\n\n\n\n<p>Also, have you ever tried to hit the tiny close pop-up 'x'\u009d on a small screen? It\u2019s impossible.<\/p>\n\n\n\n<p>A smart alternative is to include a small bar at the top of your mobile search page where you include promotions, announcements, or free shipping.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/3h03ZP6zRkoMATmAfh8BTS0RbuSOuBAH7Ta7IJapthA2Q2JUNGfe9h45gFVR4w6mHUqXC61Qch5JCxA5jTL5TPjvxO7VMV8OXbMjuPAu4W8C6xmnq0UZ_QLm0mGSehnVUCH4wOeH\" alt=\"sticky website banner on mobile website\"\/><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">5. Consider the size of your font and buttons&nbsp;<\/h2>\n\n\n\n<p>Have you ever visited a blog on a mobile device and had to zoom in to consume the content? How long did you keep reading? Chances are it wasn\u2019t very long.&nbsp;<\/p>\n\n\n\n<p>The font on mobile sites should be at least 14px. This makes it easy for most people to read your content without any problems. If you have any copy that is supplemental, you can keep the font at 12px.<\/p>\n\n\n\n<p>Reading articles on a mobile device isn\u2019t the only time where the size of the design element comes into question. It\u2019s also important to design any clickable buttons correctly.<\/p>\n\n\n\n<p>The last thing you want is for your mobile visitors to have a difficult time selecting products or tapping on buttons. Bigger buttons are best. Shoot for button sizes that are at least 44px by 44px.&nbsp;<\/p>\n\n\n\n<p>44px by 44px is the size of this circle:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/ekzbTRX5lFqsRuRUjxJe48z8nhaJ5OwWvzDgKGkola4onsvTslINuaV0Avp7pa0tSq43iR-Sifv5tb7ocVDvN5Nfm-SudapL73X1sOYcRHzjZgnR-Oa8UgLIFF-9gAhYp2uM4Xu7\" alt=\"\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">6. Compress your images and CSS<\/h2>\n\n\n\n<p>Did you know that 47 percent of website visitors expect a site to load in less than 2 seconds, according to <a href=\"http:\/\/www.nngroup.com\/articles\/how-long-do-users-stay-on-web-pages\/\" target=\"_blank\" rel=\"noopener noreferrer\">Kissmetrics<\/a>? And, <a href=\"https:\/\/www.nngroup.com\/articles\/how-long-do-users-stay-on-web-pages\/\" target=\"_blank\" rel=\"noopener noreferrer\">40 percent of visitors<\/a> will exit out of the website if the loading process takes more than 3 seconds.<\/p>\n\n\n\n<p>You\u2019ve already avoided using Flash and eliminated distracting elements like pop-ups, but what about images and CSS? Images and CSS take up a lot of server space, meaning they take longer to load. But, you don\u2019t want to get rid of visual design elements that make the mobile user experience better.<\/p>\n\n\n\n<p>The solution is not to leave out images or style sheets, but to compress them. When you <a href=\"https:\/\/www.hostgator.com\/blog\/how-to-optimize-images-for-your-website\/\">compress your image file sizes<\/a> they load faster without negatively affecting the quality of your site.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">7. Include a search function if you sell products on your mobile site<\/h2>\n\n\n\n<p>Think about the popular eCommerce platform, Amazon, for a second. There are over <a href=\"https:\/\/www.bigcommerce.com\/blog\/amazon-statistics\/\" target=\"_blank\" rel=\"noopener noreferrer\">12 million products on Amazon<\/a>; yet, anyone can find and purchase exactly what they want in a matter of seconds.<\/p>\n\n\n\n<p>One way Amazon accomplishes this is by including a search bar at the top of their mobile app.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/-OgvNZKK1eE88jOmS9qiKV3w4zhEBY5Oy-lwLF8GR2OteaPUCniuAvmpwYL9OKct3CW2sK7VgH2iL8NkdhiI0VHbrNL5n92TZQA7i2MrBtctbbkNsIX5qrdY6sOZfaQxcPoawOwm\" alt=\"search bar on amazon mobile app\"\/><\/figure><\/div>\n\n\n\n<p>You may not have 12 million products, but that doesn\u2019t mean the magic of a search bar can\u2019t help you organize the products you do offer.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Design Your Mobile-Friendly Website<\/h2>\n\n\n\n<p>There are over a billion websites in the world, but not all of these websites are created equal. Website owners that work hard to improve the mobile user experience get rewarded with more traffic, referrals, and repeat visitors.<\/p>\n\n\n\n<p>As you design your mobile-friendly website, implement the design tips listed above. These tips will help keep your website working properly when someone comes searching from a desktop or mobile device. You can get started with these <a href=\"https:\/\/www.hostgator.com\/blog\/tools-responsive-web-design\/\">responsive web design tools<\/a>.<\/p>\n\n\n\n<p>Remember, you don\u2019t have to do all the hard work yourself. HostGator\u2019s <a href=\"https:\/\/www.hostgator.com\/website-builder\">drag and drop website builder<\/a> is already optimized for mobile viewing. All you have to do is pick a template and customize it to your liking.<\/p>\n\n\n\n<p>Or, you can have our <a href=\"https:\/\/www.hostgator.com\/services\/web-design\">web design pros<\/a> create a professional, mobile-friendly web design that&#8217;s all your own.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Think about the last time you were in public with a bunch of strangers. What were people doing when you&#8230;<\/p>\n","protected":false},"author":203,"featured_media":26326,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[24],"tags":[127,122,133],"class_list":["post-26150","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tips-and-tricks","tag-web-design-services","tag-website-builder","tag-wordpress-design-themes"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v23.2 (Yoast SEO v23.2) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>7 Mobile-Friendly Design Tips for Your Blog or Website - HostGator<\/title>\n<meta name=\"description\" content=\"Make your website look great on smartphones with these top seven mobile-friendly design tips for your blog or website.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hostgator.com\/blog\/mobile-friendly-web-design-tips\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"7 Mobile-Friendly Design Tips for Your Blog or Website\" \/>\n<meta property=\"og:description\" content=\"Make your website look great on smartphones with these top seven mobile-friendly design tips for your blog or website.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hostgator.com\/blog\/mobile-friendly-web-design-tips\/\" \/>\n<meta property=\"og:site_name\" content=\"HostGator\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/HostGator\" \/>\n<meta property=\"article:published_time\" content=\"2020-07-01T13:19:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-06-25T16:22:44+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.hostgator.com\/blog\/wp-content\/\/uploads\/2020\/05\/Mobile-Friendly-Design-Tips-for-Your-Blog-or-Website.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1152\" \/>\n\t<meta property=\"og:image:height\" content=\"608\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Ashley Cummings\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@https:\/\/twitter.com\/ashleyrcummings\" \/>\n<meta name=\"twitter:site\" content=\"@HostGator\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ashley Cummings\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.hostgator.com\/blog\/mobile-friendly-web-design-tips\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.hostgator.com\/blog\/mobile-friendly-web-design-tips\/\"},\"author\":{\"name\":\"Ashley Cummings\",\"@id\":\"https:\/\/www.hostgator.com\/blog\/#\/schema\/person\/aba5eba8103133115253724c1ece55fc\"},\"headline\":\"7 Mobile-Friendly Design Tips for Your Blog or Website\",\"datePublished\":\"2020-07-01T13:19:00+00:00\",\"dateModified\":\"2020-06-25T16:22:44+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.hostgator.com\/blog\/mobile-friendly-web-design-tips\/\"},\"wordCount\":1423,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.hostgator.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.hostgator.com\/blog\/mobile-friendly-web-design-tips\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2020\/05\/Mobile-Friendly-Design-Tips-for-Your-Blog-or-Website.jpg\",\"keywords\":[\"Web Design Services\",\"Website Builder\",\"WordPress Design Themes\"],\"articleSection\":[\"Marketing Tips and Tricks\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.hostgator.com\/blog\/mobile-friendly-web-design-tips\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.hostgator.com\/blog\/mobile-friendly-web-design-tips\/\",\"url\":\"https:\/\/www.hostgator.com\/blog\/mobile-friendly-web-design-tips\/\",\"name\":\"7 Mobile-Friendly Design Tips for Your Blog or Website - HostGator\",\"isPartOf\":{\"@id\":\"https:\/\/www.hostgator.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.hostgator.com\/blog\/mobile-friendly-web-design-tips\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.hostgator.com\/blog\/mobile-friendly-web-design-tips\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2020\/05\/Mobile-Friendly-Design-Tips-for-Your-Blog-or-Website.jpg\",\"datePublished\":\"2020-07-01T13:19:00+00:00\",\"dateModified\":\"2020-06-25T16:22:44+00:00\",\"description\":\"Make your website look great on smartphones with these top seven mobile-friendly design tips for your blog or website.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.hostgator.com\/blog\/mobile-friendly-web-design-tips\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.hostgator.com\/blog\/mobile-friendly-web-design-tips\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.hostgator.com\/blog\/mobile-friendly-web-design-tips\/#primaryimage\",\"url\":\"https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2020\/05\/Mobile-Friendly-Design-Tips-for-Your-Blog-or-Website.jpg\",\"contentUrl\":\"https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2020\/05\/Mobile-Friendly-Design-Tips-for-Your-Blog-or-Website.jpg\",\"width\":1152,\"height\":608,\"caption\":\"Mobile-Friendly Design Tips for Your Blog or Website\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.hostgator.com\/blog\/mobile-friendly-web-design-tips\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.hostgator.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"7 Mobile-Friendly Design Tips for Your Blog or Website\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.hostgator.com\/blog\/#website\",\"url\":\"https:\/\/www.hostgator.com\/blog\/\",\"name\":\"HostGtaor\",\"description\":\"Web Hosting and Marketing Tips for Entrepreneurs\",\"publisher\":{\"@id\":\"https:\/\/www.hostgator.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.hostgator.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.hostgator.com\/blog\/#organization\",\"name\":\"HostGtaor\",\"url\":\"https:\/\/www.hostgator.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.hostgator.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2019\/04\/cropped-HG-Logo_default-default.png\",\"contentUrl\":\"https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2019\/04\/cropped-HG-Logo_default-default.png\",\"width\":1092,\"height\":215,\"caption\":\"HostGtaor\"},\"image\":{\"@id\":\"https:\/\/www.hostgator.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/HostGator\",\"https:\/\/x.com\/HostGator\",\"https:\/\/www.instagram.com\/hostgator\",\"https:\/\/www.linkedin.com\/company\/hostgator-com\",\"https:\/\/www.pinterest.com\/hostgator\/\",\"https:\/\/www.youtube.com\/user\/hostgator\"],\"email\":\"support@gator.com\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.hostgator.com\/blog\/#\/schema\/person\/aba5eba8103133115253724c1ece55fc\",\"name\":\"Ashley Cummings\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.hostgator.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/336a7b36e00fcee8d7711dc300151910?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/336a7b36e00fcee8d7711dc300151910?s=96&d=mm&r=g\",\"caption\":\"Ashley Cummings\"},\"description\":\"Ashley R. Cummings is a professional freelance writer specializing in SaaS, tech, and advertising\/marketing. In a previous life, she was a Russian teacher at Brigham Young University, a corporate trainer, and a grad student\u00e2\u20ac\u201dall at the same time. When she\u00e2\u20ac\u2122s not writing, you can find her traveling the world with her 2 kids and husband, reading poetry or taking a deep dive into the fabulous world of comedy. Connect with her on Twitter at @ashleyrcummings.\",\"sameAs\":[\"https:\/\/www.ashleyrcummings.com\/\",\"https:\/\/www.linkedin.com\/in\/ashleyrcummings\/\",\"https:\/\/x.com\/https:\/\/twitter.com\/ashleyrcummings\"],\"url\":\"https:\/\/www.hostgator.com\/blog\/author\/acummings\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"7 Mobile-Friendly Design Tips for Your Blog or Website - HostGator","description":"Make your website look great on smartphones with these top seven mobile-friendly design tips for your blog or website.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hostgator.com\/blog\/mobile-friendly-web-design-tips\/","og_locale":"en_US","og_type":"article","og_title":"7 Mobile-Friendly Design Tips for Your Blog or Website","og_description":"Make your website look great on smartphones with these top seven mobile-friendly design tips for your blog or website.","og_url":"https:\/\/www.hostgator.com\/blog\/mobile-friendly-web-design-tips\/","og_site_name":"HostGator","article_publisher":"https:\/\/www.facebook.com\/HostGator","article_published_time":"2020-07-01T13:19:00+00:00","article_modified_time":"2020-06-25T16:22:44+00:00","og_image":[{"width":1152,"height":608,"url":"https:\/\/www.hostgator.com\/blog\/wp-content\/\/uploads\/2020\/05\/Mobile-Friendly-Design-Tips-for-Your-Blog-or-Website.jpg","type":"image\/jpeg"}],"author":"Ashley Cummings","twitter_card":"summary_large_image","twitter_creator":"@https:\/\/twitter.com\/ashleyrcummings","twitter_site":"@HostGator","twitter_misc":{"Written by":"Ashley Cummings","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hostgator.com\/blog\/mobile-friendly-web-design-tips\/#article","isPartOf":{"@id":"https:\/\/www.hostgator.com\/blog\/mobile-friendly-web-design-tips\/"},"author":{"name":"Ashley Cummings","@id":"https:\/\/www.hostgator.com\/blog\/#\/schema\/person\/aba5eba8103133115253724c1ece55fc"},"headline":"7 Mobile-Friendly Design Tips for Your Blog or Website","datePublished":"2020-07-01T13:19:00+00:00","dateModified":"2020-06-25T16:22:44+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hostgator.com\/blog\/mobile-friendly-web-design-tips\/"},"wordCount":1423,"commentCount":0,"publisher":{"@id":"https:\/\/www.hostgator.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hostgator.com\/blog\/mobile-friendly-web-design-tips\/#primaryimage"},"thumbnailUrl":"https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2020\/05\/Mobile-Friendly-Design-Tips-for-Your-Blog-or-Website.jpg","keywords":["Web Design Services","Website Builder","WordPress Design Themes"],"articleSection":["Marketing Tips and Tricks"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hostgator.com\/blog\/mobile-friendly-web-design-tips\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hostgator.com\/blog\/mobile-friendly-web-design-tips\/","url":"https:\/\/www.hostgator.com\/blog\/mobile-friendly-web-design-tips\/","name":"7 Mobile-Friendly Design Tips for Your Blog or Website - HostGator","isPartOf":{"@id":"https:\/\/www.hostgator.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hostgator.com\/blog\/mobile-friendly-web-design-tips\/#primaryimage"},"image":{"@id":"https:\/\/www.hostgator.com\/blog\/mobile-friendly-web-design-tips\/#primaryimage"},"thumbnailUrl":"https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2020\/05\/Mobile-Friendly-Design-Tips-for-Your-Blog-or-Website.jpg","datePublished":"2020-07-01T13:19:00+00:00","dateModified":"2020-06-25T16:22:44+00:00","description":"Make your website look great on smartphones with these top seven mobile-friendly design tips for your blog or website.","breadcrumb":{"@id":"https:\/\/www.hostgator.com\/blog\/mobile-friendly-web-design-tips\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hostgator.com\/blog\/mobile-friendly-web-design-tips\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hostgator.com\/blog\/mobile-friendly-web-design-tips\/#primaryimage","url":"https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2020\/05\/Mobile-Friendly-Design-Tips-for-Your-Blog-or-Website.jpg","contentUrl":"https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2020\/05\/Mobile-Friendly-Design-Tips-for-Your-Blog-or-Website.jpg","width":1152,"height":608,"caption":"Mobile-Friendly Design Tips for Your Blog or Website"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hostgator.com\/blog\/mobile-friendly-web-design-tips\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hostgator.com\/blog\/"},{"@type":"ListItem","position":2,"name":"7 Mobile-Friendly Design Tips for Your Blog or Website"}]},{"@type":"WebSite","@id":"https:\/\/www.hostgator.com\/blog\/#website","url":"https:\/\/www.hostgator.com\/blog\/","name":"HostGtaor","description":"Web Hosting and Marketing Tips for Entrepreneurs","publisher":{"@id":"https:\/\/www.hostgator.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hostgator.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hostgator.com\/blog\/#organization","name":"HostGtaor","url":"https:\/\/www.hostgator.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hostgator.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2019\/04\/cropped-HG-Logo_default-default.png","contentUrl":"https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2019\/04\/cropped-HG-Logo_default-default.png","width":1092,"height":215,"caption":"HostGtaor"},"image":{"@id":"https:\/\/www.hostgator.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/HostGator","https:\/\/x.com\/HostGator","https:\/\/www.instagram.com\/hostgator","https:\/\/www.linkedin.com\/company\/hostgator-com","https:\/\/www.pinterest.com\/hostgator\/","https:\/\/www.youtube.com\/user\/hostgator"],"email":"support@gator.com"},{"@type":"Person","@id":"https:\/\/www.hostgator.com\/blog\/#\/schema\/person\/aba5eba8103133115253724c1ece55fc","name":"Ashley Cummings","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hostgator.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/336a7b36e00fcee8d7711dc300151910?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/336a7b36e00fcee8d7711dc300151910?s=96&d=mm&r=g","caption":"Ashley Cummings"},"description":"Ashley R. Cummings is a professional freelance writer specializing in SaaS, tech, and advertising\/marketing. In a previous life, she was a Russian teacher at Brigham Young University, a corporate trainer, and a grad student\u00e2\u20ac\u201dall at the same time. When she\u00e2\u20ac\u2122s not writing, you can find her traveling the world with her 2 kids and husband, reading poetry or taking a deep dive into the fabulous world of comedy. Connect with her on Twitter at @ashleyrcummings.","sameAs":["https:\/\/www.ashleyrcummings.com\/","https:\/\/www.linkedin.com\/in\/ashleyrcummings\/","https:\/\/x.com\/https:\/\/twitter.com\/ashleyrcummings"],"url":"https:\/\/www.hostgator.com\/blog\/author\/acummings\/"}]}},"_links":{"self":[{"href":"https:\/\/www.hostgator.com\/blog\/wp-json\/wp\/v2\/posts\/26150"}],"collection":[{"href":"https:\/\/www.hostgator.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostgator.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostgator.com\/blog\/wp-json\/wp\/v2\/users\/203"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostgator.com\/blog\/wp-json\/wp\/v2\/comments?post=26150"}],"version-history":[{"count":2,"href":"https:\/\/www.hostgator.com\/blog\/wp-json\/wp\/v2\/posts\/26150\/revisions"}],"predecessor-version":[{"id":26333,"href":"https:\/\/www.hostgator.com\/blog\/wp-json\/wp\/v2\/posts\/26150\/revisions\/26333"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hostgator.com\/blog\/wp-json\/wp\/v2\/media\/26326"}],"wp:attachment":[{"href":"https:\/\/www.hostgator.com\/blog\/wp-json\/wp\/v2\/media?parent=26150"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostgator.com\/blog\/wp-json\/wp\/v2\/categories?post=26150"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostgator.com\/blog\/wp-json\/wp\/v2\/tags?post=26150"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}