When I first started blogging in 2007, I only needed to worry about what my blog looked like on my computer. There wasn’t that many readers using mobile devices.
How life has changed! Sales of mobile devices continue to see incredible growth and with this there has been a major shift in the consumption habits of our readers.
In fact, nearly 20% of all visits to blogs on Edublogs.org come from mobile or tablet devices! And the number has doubled in the past year!
Now I need to worry what my blog looks like on a computer and mobile devices. And I have this annoying voice in my head going — you can only change the theme if it is responsive….it must be a responsive theme.
PS. The annoying voice is my colleague Ronnie Burt – and he is right 🙁
Responsive themes are designed to display nicely on all devices, including phones, tablets and desktops, whereas non-responsive themes are best viewed on desktops. With a responsive theme you can customize it to your heart’s content knowing that it’ll look good on all devices.
Let’s look at why using a responsive theme is a good idea if you want your blog to be mobile friendly.
What is responsive theme design?
A responsive theme is designed to automatically adjust to fit the device you’re reading it on; it adapts the content and layout to suit the resolution of the device.
Non-responsive themes don’t adjust to the resolution of devices.
If you view a non-responsive theme on most modern phones it will automatically zoom out so that your entire blog can be seen. This means your readers need to zoom in to read your content.
Responsive themes and reader experience
Responsive themes are designed to be mobile friendly; they serve web pages at lightening fast speed on any device and in a format that doesn’t require the reader to adjust by zooming in or out to read.
Most major websites now use responsive themes as it means they only need to have one version of their website to work seamlessly across all devices while providing the best reader experience for all visitors.
Check out the following examples of what a non-responsive photo blog theme vs a responsive photo blog theme looks like on an iPhone.
Here’s what my AutoFocus demo blog, which is a non-responsive theme, looks like on my iPhone. You can see the entire blog but need to zoom in to read the content.
And here’s what my Hatch demo blog, which is a responsive theme, looks like on my iPhone. The text and images (and videos if I had added any) are served at a size that allows the reader to immediately start reading.
Theme layout and responsive themes
A non-responsive theme uses the same layout regardless of the resolution of the device whereas a responsive theme changes layout depending on the screen resolution.
If you are reading this post on a desktop browser just gradually make your browser window smaller. You’ll see the images, videos and content column shrinks, the sidebar disappear and the layout change from two column to a single column of content with the widgets displayed at the bottom of the theme because The Edublogger is using a responsive theme.
Here’s what my personal blog, which uses Yoko – a responsive theme, looks like when viewed on an iPhone, iPad and desktop.
Examples of Responsive themes
You can check out the entire list of Responsive themes on Edublogs here.
See some of them in use on the following blogs:
- Hatch (photo blog theme) – Hatch demo blog
- Hum – Lisa and Tim Photography
- Magazino – Miss Kelly’s Science
- Responsive – Edublogs Help and Support
- Yoko (clean looking white theme ) – Teacher Challenge blog (without image header) Larry Ferlazzo’s Websites of the Day (with custom header image)
There are variations in how blog platforms handle being mobile friendly but if you have an option to use a responsive theme — use the responsive theme!