Tips On How To Make Your Blog More Mobile Friendly
Here are some tips on making your blog mobile friendly. This article is from instantshift.com. About the author: Erick Hodge is the owner of DockingStationHQ, a blog about all the latest in the Android world. He believes that every piece of technology can be made better by the right additions, and you can find the best gadgets for Android devices in Erick’s blog. Image courtesy of weedezign via Bigstockphoto.
Google recently announced that they will be using mobile friendly algorithm update to check if all blogs are mobile-friendly, and will penalize those who are not. Which left many bloggers wondering, how to make their websites more mobile friendly and how to even know if your blog is mobile friendly or not. Which is why we put together the most vital information about why making your blog more mobile-friendly is so important and how to actually do it.
Nowadays, a large chunk of any blog visitors are using their mobile devices instead of computers to do so. And since Google has vowed to boost the rankings of the sites, that are suitable to view on mobile devices, it is more important than ever to make sure your blog or website is friendly to mobile devices.
Of course, it is not only about what Google wants. Making your blog mobile friendly is also in your and your readers best interests, because, since so many people use their mobile devices to surf the internet, it will make the reading of your blog more convenient for them. According to the Pew Internet Project’s research, more than a third of all cell phone owners use their phone more than their desktop or laptop to access internet. So if you want your blog to be easily viewed on any smartphone as well as boost the readership for your blog, mobile friendliness is something you need to think about. And it actually is easier achieved than one might think.
Testing for Mobile Friendliness
As Google came up with this mobile friendly algorithm, they also made it possible for everyone to test their blogs and websites for this metric using their mobile friendly testing tool. Just enter the URL of your blog into the “Enter URL to test” box, click “Run test” and the tool will tell you whether your blog is mobile friendly or not.
If your website is mobile friendly, you can relax a bit, because you don’t have to do anything. However, if this Google tool determines that your blog isn’t the easiest to read on a mobile device then you need to do some improvements in this department asap.
For those who use a content management software (CMS) to run their blog, like WordPress, Joomla!, Drupal, Blogger, Tumblr, Google Sites, Bitrix etc., the customizing shouldn’t be a problem, since most of these software systems offer tools, that will automatically make your website mobile-friendly. But, if you went the more old-school root of not using any CMS software to make your website, or if you did use CMS, but your website still isn’t up to the mobile standards, here are some tips on how to improve your site’s mobile friendliness.
1. Update CMS to the latest version and use mobile themes
If you use CMS, all you might need to do is either update your software or change the theme that you are using for your blog. Most CMSs already provide all the tools to make your site mobile-friendly, but you must make sure that your CMS is updated to the latest version. For example, Joomla comes with mobile support, only when it’s updated to the latest version of the software. Other software, however, might require you to change the theme of your website to make it mobile friendly, since some older themes just don’t look good on mobile devices therefore they aren’t suitable for them either. To do that go to the administrative panel of your CMS, find the themes tab on your dashboard and change the theme of your blog to one, that is responsive and mobile-friendly. For example, WordPress offers hundreds of different themes, and a big chunk of them are free of charge as well as responsive. Sadly, if you are using a CMS, which don’t offer mobile support, more improvements will be needed and it might be smarter to just switch your content management software.
2. Use subheadings
A rule of thumb when it comes to blog content that is convenient for mobile users is to let them absorb the text in smaller paragraphs as oppose to have your article in one long text. So the text of your blog post should be well-structured, so the reader can orientate in text easily. That can be easily done by using subheadings. When you use subheadings, the text is automatically divided into many sub-chapters and there is smaller chance for the reader to lose their place, while reading the article. And since losing your place while reading something on your smartphone is quite a common problem for many mobile device users, because mobile scrolling makes reading of long, monotone texts difficult, solve it by using headings.
Headings can be easily inserted by using heading tags. The tag for biggest and most important heading is <h1>. This tag most commonly is used for the title of the text. Other headings have a top-down hierarchy from <h1> to <h6>, which is a barely noticeable heading, but will still help you split up your content and make it easier to read.
3. Choose appropriate size for the images
Bloggers usually choose the size of the images they are going to use in their blog posts according to the normal computer screen size, but when the blog posts are being viewed on a smaller screens, like that of a mobile phone, the images generally all end up being the same size. It means that mobile device users don’t see the images in appropriate proportion. So make your pictures so they not only are smaller in dimensions, usually pictures below 1500 by 2500 pixels are best, but also smaller in size – below 500 KB is recommended. On top of having mobile-device-friendly photo’s, shrinking the file sizes of your images will also let users to load the pages faster, since smaller pictures use less data to load.
To make your pictures smaller is file size and dimensions, use any photo editor you have on hand, because you don’t need Photoshop to be able to do this. We recommend to use either JPEGmini or Pixlr, because with these photo editors you can reduce the size of your images without compromising their quality.
4. Use responsive design
Responsive design for a blog or website provides a chance to view it from many different platforms and devices with different screen sizes more convenient, because it automatically adapts your website to the width of the browser window. And, to ensure convenient reading to the blog visitors, during this adaptation usually the design of the blog changes, for example, images shrink, columns line up vertically, and the menu change as well. But if these changes don’t happen on their own, there are tools, that you can use to do it yourself.
For example, Foundation 3, Skeleton and Bootstrap. These frameworks will automatically adjust your blog, so it is easy-to-read on any device. To use these is much easier than coding every possible combination by yourself. Of course you can do this also that by using CSS3’s new relative length units like viewport’s width (vw), viewport’s height (vh), minimum of the viewport’s height and width (vmin) and maximum of the viewport’s height and width (vmax). However, coding requires skill as well as time, and if you are not experienced programmer, I would suggest going with the former option.
5. Use simple designs
Mobile users prefer simple site designs, because large and complicated design websites become slow on a mobile device. Simple designs also make it easy to keep the reader’s attention on the content rather than distract them with fancy design, because statistically most of the mobile users have quite short attention spans.
That means making the layout of your site simple and easy to understand. If you are using a theme that your service provider offers, you can simply change it to more simple one. For example, WordPress offers many elegant, simple designs that won’t overwhelm mobile devices, but will still look good on a desktop, too. But if have made your website using HTML, you can download simple template, that will make your site look great and be mobile-friendly as well. For example, Envato Market offers many different simple designs for you to chose from and use on your site.
6. Use standard fonts
Interesting fonts can make a blog look more creative, but these fonts can also be an annoyance for mobile readers of the blog, because not all mobile devices support fancy desktop fonts. So to see the content, mobile device users will have to download new fonts to their phones, which is a hassle that is not worth it to many. On top of that, even if they have all the fonts pre-installed, some more creative fonts can be hard to read on a smartphone, because of the smaller size.
So choose traditional fonts like Times New Roman, Verdana, Comic Sans MS, WildWest or Bedrock. And also check the readability of the font you decide to use, to make sure that the text doesn’t get unreadable once it is viewed on a smaller screen of a smartphone. A general rule of thumb is that any text on a website should be at least 14 px, because this way the text will be big enough to be easily readable even if you use a mobile device with very small screen.
7. Minimize content per page
When a page is loaded on any device be it a computer, tablet or a smartphone, the device downloads all of the content of the page. It usually doesn’t cause any problems if you are using a computer, but large amounts of data can overwhelm mobile devices. To avoid that, you should minimize the amount of content on each page, because this will make sure that your blog works on every mobile device.
It is recommended to reduce the content on your page below 5 MB per page. You can easily check the size of your page content on any browser. Just use one of many web page size checker tools, that are available online. If it’s above 5 MB, either reduce the size and amount of text, images and other components of the page manually or use blog excerpts to make it easier for visitors to view your blog.
8. Use YouTube videos
If you tend to post a lot of videos in the articles on your blog, you need to remember, that they will look a lot different on a mobile device than they do on a computer. What’s more, some mobile devices don’t even support certain video formats, so to avoid the chance that user won’t be able to play the video on your site, use embedded YouTube. The embed code that YouTube provides for each and every of their videos is already responsive, which means that you will be able to view the video on almost any device and you won’t have to stress about video sizes and formats anymore.
You can get the embed code for a YouTube video by clicking on the “Share” button, which is located under the “Subscribe” button, then click the “Embed” tab and copy the provided code into your site. And you have yourself a perfectly sized video in your post without even having to convert or otherwise adjust it.
9. Replace links with tappable buttons and menus
Many times links on a website are way too small for a mobile user to easily and accurately tap with their finger. And it can be really annoying for a blog reader, when they cannot accurately tap on the content, they want to view. That is why you should replace all the links on your website with buttons that are at least 44 pixels by 44 pixels in size.
If you are using a CMS such as WordPress, you can just use plugins to create these buttons. Go to your CMS control panel, find an appropriate plugin, install it and follow the instructions for properly using it. But if you have coded the website yourself, you can use one o those free link button generators, which will save the time you would use while coding the buttons yourself.
10. Keep testing
Lastly, when you have done all the improvements and you think your blog is as mobile friendly as it can be, test your blog again with the Google testing tool or some other mobile-friendliness testing tool, that you can find on the internet. If now everything is fine and the tool assures you that your blog won’t get a penalty, because it isn’t mobile-friendly, then you can relax and continue to grow your website by creating great content. But just to be sure, I would suggest you to test your website from multiple different devices.
Ask friends or family members to look at your blog from their phones and tablets. Test your site from and Android and IOS device, as well as devices that might have a completely different operating system. And go through all of your main pages on your blog on those devices. Only by testing the mobile-friendliness of your blog in real life you can be sure, that your site actually is easy to view and read from all gadgets.
Mobile friendliness isn’t just about having a nice site design, it’s also about improving the user’s experience on your website. Which is why, when you make your blog more mobile friendly, more people will be willing to come back to your website, because it will be easy to view and understand. And since the amount of people who use their mobile phones as a primary devices to surf the web only increases with each coming year, it is only in your best interest to make sure that your website is friendly to these smartphone users and displays the content to them in convenient and easy-to-read way.
