Make Your Blog More Mobile-Friendly Without Redesigning
The mobile web is huge, and it's going to get bigger as people all over the world fall in love with smartphones. Now that so many people are browsing on small screens with data plans, a mobile-friendly blog helps you welcome a larger audience.
Lots of blogs are switching over to responsive or adaptive designs that scale and rearrange themselves depending on the size or type of the screen. But, redesign can be costly and time consuming. And, if you have fixed-placement arrangements with advertisers, you may feel like you're trapped in your current layout.
That doesn't mean there's nothing you can do to make your mobile readers happier!
If a full redesign isn't in the cards for you right now, there are adjustments you can make — ranging from tiny tweaks to more ambitious changes — that let you show your mobile readers some love without starting over from scratch. Today I'll give you some suggestions.
Reduce the Per-Page Post Count
This is by far the easiest tweak I'm going to cover today — it might only take you a few seconds!
Showing fewer posts per page reduces the load time & size of your home page and the index pages (the ones your readers reach using older & newer post links).
If you're on Blogger, you can adjust your posts-per-page under Settings > Posts and Comments > Posts > "Show at most".
Say No to Popups
Real talk: people hate popup windows and popup overlays, and they hate them even more on mobile devices. Popups block the content, they're hard to dismiss on small screens, and they can slow down the load time. And I mean, come on — they're popups. They're annoying by design.
Please, think of your dear mobile reader: so excited to read your post, getting blocked from your content by a popup... and sadly closing the tab. With that reader in mind, go get rid of your popups.
Drop the Dropdowns
Or at the very least, test your dropdown menu(s) on mobile devices to see if they actually work. Unless your dropdown navigation was designed with mobile users in mind, it most likely relies on hover/mouseover events to create dropdown link lists. Those effects don't work the same on touchscreens as they do with a mouse.
Many dropdown menu styles that work smoothly on a computer frustrate touchscreen users with awkwardly-timed hover states and disappearing, unclickable links.
If your dropdown menu isn't compatible with mobile devices, consider streamlining your navigation to reduce or eliminate the need for dropdowns. A simple navigation layout is great for readers on any device, not just mobile users.
And, as an added side-benefit, simplified navigation can make it easier for search engines to crawl your blog. Give it some thought!
Limit Widgets & Gadgets
Widgets and gadgets, especially social media embeds and ads, can seriously bloat your blog and make it harder to load on mobile browsers. While you're getting mobile-friendly, take some time to reevaluate your widgets. Are they all earning their place on your blog?
Don't be afraid to experiment with removing widgets — you can always add them back! If you need help figuring out which widgets should get the boot, try out Pingdom's Website Speed Test. You can arrange the Pingdom results to show you which elements are taking the longest to load or have the largest filesize.
Enable an Alternate Mobile Template
You can "fake" a responsive design with an alternate template that only shows itself to readers on handheld devices. These templates let you leave your blog "as is" for computer screens, while radically optimizing the experience for mobile users. Mobile-only templates strip your blog down to its essence, hiding sidebars and most of the design elements. That means some or all of your sidebar ads will be hidden from mobile users.
Blogger has a built-in mobile template, and there are lots of plugin options for Wordpress — I'll show you my favorite!
Blogger's Mobile Template
Blogger's mobile template automatically sets mobile posts-per-page to 4. It also truncates all of your posts to the title, a thumbnail of the first image, and the first few sentences of your posts. If you use AdSense on your blog, up to two AdSense ads will appear — one at the top of your page and one at the bottom. Any other ads that show up in your regular design will not.
Blogger's mobile template is turned on by default, but if you've turned it off, it's easy to turn it back on. Go to Template and click the gear icon below the Mobile template. Set the radio button to "Yes. Show mobile template on mobile devices", then press the orange Save button.
Wordpress Mobile Plugins
For Wordpress users, I recommend WPTouch, a very slick mobile plugin with lots of customization options and features. And, like the Blogger mobile template, it supports AdSense! There's also a premium version with lots of sweet features. Complete installation instructions are available on the plugin page.
If WPTouch doesn't strike your fancy, there are plenty of other options available. WPMU has a great rundown of 8 excellent mobile plugin options.
Let's Talk!
Have any questions or suggestions on getting mobile-friendly? Leave a comment, get in touch on Twitter, or say hi on Google !
