1. Get the facts
Before making a blog mobile, it’s helpful to know how many people access the blog from a mobile device. This can be determined by using Google Analytics. Under the audience section, select Mobile > Overview. The devices page shows what devices visitors to the blog are using. That’s helpful to know, as different devices feature different screen sizes, and what’s accessible on one device may not be on another.
2. Test the site
After gathering essential background information, the next step is to test the blog’s mobile compatibility. This involves viewing and interacting with the blog using a broad range of mobile devices, such as the iPhone, iPad, Droid, etc. Google offers a website designed specifically to help with testing called How to Go Mo.* You can test sites by going to the Mobile Meter page, typing in the website address, and clicking “Test Your Site.” After clicking, Google will show an image of how the website appears on a mobile device. Next, it asks questions about the primary purpose of the site, if the content is readable and more. Based on answers to the questions, Google identifies issues mobile users might have and gives personalized suggestions for making the site more mobile-friendly.
3. Utilize a mobile-optimized theme
With a mobile-optimized theme, there is only one website, but an alternate version of the site is shown when visitors access it from a mobile device. WPtouch is an excellent example of a plugin designed to create mobile versions of websites. It works by creating a simplified mobile-optimized template for the content, keeping the more detailed version of the site intact but displaying the simplified version when users access the site on their mobile devices. The installation process for WPtouch is the same as for any WordPress plugin, making it a quick and easy procedure. Another plus? WPtouch is free.
4. Construct a responsive design
With a responsive design, content instantly adjusts to the size of the screen displaying it. This means that the same content could be laid out differently, varying according to the mobile device. With responsive design, certain things are important to keep in mind, such as:
Flexibility is key: Everything about responsive design (the grid, type, photos, etc.) must be flexible. Otherwise, there will be problems.
Effective responsive design begins with a grid: High quality responsive design projects typically use a fluid grid. Based on the percentages, sites can scale proportionately, or they can be constructed based on a number of grid stops. Fluid breakpoints, which are determined by the overall design as opposed to pre-established stops, are also rising in popularity.
Image size and quality matter: The number of images doesn’t matter nearly as much as the quality of the images. This is especially true for mobile users who have a limited bandwidth anyways. Maintain a balance between quality and load time in order to avoid the unfortunate practice and bad habit** of using ineffective images. Cropping images before uploading them and saving photos at the smallest size possible while still maintaining visual quality, is the best way to ensure that images are responsive.
Videos need to be mobile-friendly, too: Like images that need to be posted with mobile devices in mind, it only makes sense that videos should be mobile-friendly as well. Tools like Fitvid or CustomCSS can ensure that videos are resized to accommodate mobile devices.
Type should be responsive: Line length is a crucial concept in the domain of responsive typography. The screen width should determine how the type is optimized in order to maintain readability. Fifty to seventy-five characters per line might be okay for websites, but on mobile devices, that number declines to 35 to 50 characters per line.
In addition to considering the number of characters on each line, it is also important to keep typeface in mind. Typefaces with dramatic, fancy lettering will be challenging to read on smaller screens.
Navigation is important: Simple navigation is a crucial part of having a responsively designed site. Also, users who click or tap must be able to navigate. Navigational elements should be designed to be functional at the smallest sizes first. Then, larger sizes can be worked up to by adding more navigation features as needed.
If users try to access a site that isn’t mobile friendly from their mobile device, they will most likely give up out of frustration. In order to ensure that all users have an optimal viewing experience regardless of what kind of device they use, especially for businesses using websites and blogs as marketing tools to stay at the top of their game, mobile-friendly content isn’t just a possibility any more: it’s a necessity.
*Copy this link: www.google.co.uk/think/collections/make-website-work-across-multiple-devices.html
** See: http://www.12keysrehab.com/blog/science-of-habit-video/
This article is the copyrighted property of the writer and Communities @ WashingtonTimes.com. Written permission must be obtained before reprint in online or print media. REPRINTING TWTC CONTENT WITHOUT PERMISSION AND/OR PAYMENT IS THEFT AND PUNISHABLE BY LAW.