Running a profitable blog isn’t just about creating user-driven content that draws in massive amounts of traffic. Bloggers also have to ensure that their content is displayed in an attractive fashion. While you probably put a lot of time into making sure your site looks beautiful on standard browsers, what steps have you taken to make sure they display properly on mobile devices?
Is it Really Necessary to Design for Mobile Devices?
Mobile devices have an array of features that help to take a standard webpage and scale it to fit on their smaller screens. The iPhone does a great job at this, but many android powered devices provide flawed renderings when making the adjustment.
If you aren’t sure how your site looks on a mobile device you should check. Use your device and ask your friends if you can use theirs. Make sure to check on as many devices as possible to see just how everything looks.
Even if the scaling is being handled effectively, the design would probably benefit from having a mobile-only version.
Challenges to Consider When Designing for Mobile Devices
Here’s the thing: if a reader of your blog has any trouble reading your page they are likely to go back to their search results and try another site. You can’t afford to throw away readers like that unless you are only running your blog for fun.
The challenges are easy to understand when you take the mobile devices smaller dimensions into consideration. The typical screen resolution on a desktop or laptop is 1366 pixels by 768 pixels. The average smart phone dimensions are 320 pixels by 480 pixels. That isn’t only a drastic reduction in screen real estate, but it is a totally different aspect ratio.
Add in the fact that scaled pages often display text and images in hard-to-view formats and you will understand why this can be so difficult.
Techniques for Displaying Custom Mobile Layouts
This could be easy or it could be difficult depending on your CMS. If you are using WordPress or Tumblr it is remarkably simple. These platforms have tools built in that automatically detect a mobile user and render the page properly. Most of their themes come with standard and mobile flavors, too.
If you are using any other CMS (or static HTML) you are going to have to do some coding to get things working. There are plenty of libraries out there that can help you skip the actual development, but you will still need to add it to your site’s code. Check out whatever code repository you normally use when looking for premade code snippets for your blog and you will be sure to find what you need.
If you are struggling to design your own mobile-ready theme you can check out tools like Onbile, which guarantee to easily create themes that are compatible with several popular blogs. You can also use the provided theme combined with your browser detection and redirection script to get the job done.
It isn’t going to be easy to put all of this together unless you’re using WordPress or some other CMS that has integrated mobile detection functionality, but you can’t really afford to lose all of those readers. Mobile usage is expected to overtake desktops and laptops in the near future, and if you aren’t prepared you will be left behind.