Design Your Blog to Be Mobile Friendly - dummies

Design Your Blog to Be Mobile Friendly

By Melissa Culbertson

It’s important to design your blog for readers who visit your blog on a mobile device. Because mobile devices have small screens, your blog’s design may not appear the same as on larger devices such as PCs and laptops.

If your blog design is PC-centric, your mobile visitors may have to scroll back and forth, or even side to side to view information. If the placement of one element depends on the placement of another, on a mobile device, they could all look scrunched.

Use responsive blog design for mobile users

Responsive design is one of the hottest topics in web development. The phrase refers to a website or web page’s ability to respond to the user’s screen size automatically.

When two PCs have screens with different resolutions, then even with the same browser, they might not display your blog design identically. Responsive design adapts to these differences. It works within a web page’s CSS, querying the browser about the device’s size and resolution. The web server then responds by changing the page layout to best suit that particular device.


The design of the WordPress theme Karma from Theme Forest is one great example of responsive design. Its layout changes depending on the characteristics of the device displaying it.

The best way to solve the responsive design problem is to use a theme that has responsive design already built into it. Some websites, like Theme Forest, offer responsive design themes for both WordPress and Blogger platforms, along with many others.

Use a mobile plug-in to add responsive blog design

If your blog’s theme or template doesn’t use responsive design, you can use another method to ensure that your blog is easy to view and navigate on a mobile device. Blogger uses a mobile template, and WordPress employs a mobile plug-in.

For Blogger, the default setting has the mobile template turned on. To double-check, go to Template. The image under Mobile reads Disabled if the mobile template is disabled. To turn it on, click the icon under the mobile image and then select Yes, Show Mobile Template on Mobile Devices. You can also choose from a selection of mobile templates from this window.

In, you can use a mobile-ready theme or choose from many mobile plug-ins. One of the most popular mobile-ready themes is WPtouch:


Here’s how the momcomm blog looks with the WPtouch plug-in installed and a blog design adjusted for display on an iPhone. Note that this shows how the blog appears before it has been customized. With the basic installation, WPtouch lets readers navigate your blog without having to scroll back and forth, zoom in and out, and other unpleasant stuff.