Skip to main content

My Blogger theme experiment

Notice anything different? ¶ 
Title block of the "too clever" blog, split into two formats

This isn't permanent, but as of today, and for maybe a month or so, this blog will be rendered according to the responsive theme I have been working on lately. ¶ 

What do you think? Your questions are also welcome. ¶ 

More below.

Theme

My test is a modified version of Google's Notable theme. I've added some graphical elements from Picture Window, the Designer theme I've been using since I started Too Clever in 2010.

Some posts won't look as good as they did before I made this change, at least on desktop.

They were formatted to look their best on the older theme. In particular, many photos are now mis-sized, and some paragraph spacing is off, in some blog posts.

Fixing all that is doable but is a lot of fiddly work. That's par for the course when making this kind of upgrade.

It is a big project for old blogs with lots of posts.

Development

To get this theme ready, I cloned the blog and modified the clone, keeping multiple backups at every stage. 

Then I stripped away all the widgets (to avoid duplication) and imported the backup of that version into this blog.

Had you happened to be browsing here while that was going on, you would have seen an ecstasy of fumbling as I deleted and fixed things I'd missed.

What do you think?

This change is a sequel to my recent post asking if people blog on their phones and also if I should make a change like this. 

Your comments there were intelligent and provocative, so I hope to hear from you again.

Please include in your critique an assessment of how the blog looks and behaves on a phone.

Improving the mobile experience would be the main reason for making this change permanent, if I do.

A screen shot of this blog on a phone using the older theme. It shows snippets for the three most recent blog posts.
Previous theme: How it looked on a phone.


Ask me anything

You can ask me anything about this experiment, with a few limitations.

There are some theme modifications that I probably can't explain except in the most general way. 

I am not a professional developer and my method is mostly just to try things, iteratively, until they either work or I give up. I don't keep particularly good notes.

Consequently I can't tell you step by step how I did some things. I do not have the recipe.

I'm better at "why" than "how."

But feel free to ask.

Speaking of asking

This blog is a special case, because it is about using Blogger. Few people blog on their phones, so I get little traffic from there. I don't need to worry (much) about how my blog behaves on mobile.

But most bloggers do. Including you, probably.

So if you are currently using an older, non-responsive theme (like the one I will probably shift back to in a month or so), would you consider switching to a responsive theme like this one?

If not (and it can be a lot of work), I recommend that you at least weigh activating your mobile theme, if that is an option.

Related posts

Comments

  1. I think it looks fine on desktop and much better than the old theme on mobile. What would be the advantage of moving back to the non-responsive theme? Is it just the look?

    ReplyDelete
    Replies
    1. Just the look? I am very concerned about user experience: many of my posts here encourage my readers to think about exactly that!

      So yes, there are some trade-offs, arguably worth it. But due to the unusual subject of this blog, I do not get much traffic from mobile. (Why: People do not blog on their phones, much.)

      So, for me, the trade-offs are not so worth it.

      There are some other considerations too. But maybe I will settle on this theme eventually—I am really just hedging my bets.

      PS Thanks for taking a look! The mobile experience is unquestionably better.

      Delete
    2. I may be weird, but while I don't blog on mobile, I read about blogging while I'm on my phone. So I really do appreciate responsive layouts.

      Delete
  2. I liked it, but I think you don't need to be limited to the parameters of the previous theme; unleash your creativity.

    ReplyDelete
    Replies
    1. You may be overestimating my creative talents!

      But a consideration for me is maintaining some continuity in design, so that readers recognize this as the same blog despite the changes. It's what marketers would call the "brand."

      In this case that has mostly meant retaining the background.

      I'm not ruling out bigger changes in the future, but for this experiment I wanted to show how it is possible to both change and retain at the same time.

      Delete
    2. I agree. It needs new graphical style and colors.

      Delete
    3. @Ditekew, what would you suggest? (I am using new typefaces.)

      Graphic design advice is always welcome.

      Delete
  3. If I open your blog post (for example, this article) on my mobile phone, the new theme layout doesn’t fit the screen properly, so there’s a blank/white area on the right side. However, this only happens on the post pages, the home page doesn’t have that blank area. I’m not sure if this issue only happens on my phone or on other people’s phones as well.

    ReplyDelete
    Replies
    1. It is a bit off-center, I agree! I will try to improve that if I can.

      Thank you!

      Delete
    2. I think I've fixed that, now. Thanks again for bringing it up.

      Delete
  4. I genuinely thought you’d keep that old template forever. So, seeing you update it now, I think this is the perfect time to ask.

    I’m honestly a bit hesitant to bring this up, but would you be interested in trying a JavaScript-based Blogger template?

    I can volunteer to create a JS version of your blog, and if you find it easier to develop and maintain, maybe you could help me spread the word by reviewing it on your blog, or something like that.

    ReplyDelete
    Replies
    1. What an interesting proposal! I am tickled by the idea of being a sort of rotating charrette of blog theme ideas. But I need to know more: can you contact me by email? (On my profile page.)

      Delete
  5. I have only looked at this on my laptop, but it sure does look nice! (And makes my own feel positively retro...) Several years ago I came up with a separate mobile version for phones, but people who read my blog (coworkers in my office) didn't like it and told me to put the web version back. Anyway, thanks for sharing your experiments with us!

    ReplyDelete
    Replies
    1. This stuff boils down to a big bunch of tradeoffs.

      Delete
  6. I don't like this template because they make the images huge on the front end and. Everything's huge, well, the body text of the post aren't huge but I don't like having so much spacing between sentences - it makes the posts longer than they should be - great for readability but way too many spaces.

    I don't read blogs on a phone so I don't know how it would look but proababy better than the desktop as this template seems to be more for phones than desktop. That's just my two cents.

    Have a lovely day.

    ReplyDelete
    Replies
    1. Thanks, lissa.

      This is probably not what you are noticing, but on some older posts the paragraph spacing will be even bigger than what you see here. That is an example of posts not looking as good, unless I go back and reformat them.

      Delete
  7. This looks nicer to me on mobile than the older one on this site. Haven't seen on desktop yet.

    You should increase the font size for mobile devices (for smaller screen widths that is, as this is responsive theme).

    Right now the post text looks too small to read comfortably on a mobile device.

    You can easily customise font size for different screen widths using CSS @media only screen rules. There may already be some set @media rules in the template. You can target the post's text only by using .post-body CSS class. If you want to target everything in main itself, then try setting for #main id or .main class (as per what is set in template). Or maybe to even body itself, but whatever you do, do take a look at it from ancient actual mobile device as the simulated previews on desktop may not match exactly as seen on a mobile. Also, a same size text may be seen bit bigger or smaller on different mobile devices.

    There may also be a default size set on html element through blogger's default styles for ?m=1 which may be causing it to seem extra smaller on a mobile device. (I know this happens in older theme versions but I don't know if it's still the case in the newer themes. It can be overridden in the template through using CSS though).

    I still continue using the previous theme version as I find them easier to customise (and I had already customised them to be responsive).

    ReplyDelete
    Replies
    1. I agree with this observation, and want to improve the design accordingly. However, there are some unexpected difficulties! and I may not be able to sort those out for a while.

      Thanks for pointing this out, though.

      Delete
    2. I think I've made things a bit better. (And improved a few other things.) What do you think?

      Delete
  8. > Few people blog on their phones, so I get little traffic from there. I don't need to worry (much) about how my blog behaves on mobile.

    Interesting, because I have noticed an overwhelming transition in the past few years to mobile views. Even just 5 years ago my traffic was still about 50/50, but today it is over 90% from mobile devices. Luckily I use one of the responsive themes too so it doesn't really matter. Just a curiosity.

    ReplyDelete
    Replies
    1. I'm referring to the act of writing and publishing blog posts, not views.

      With respect to views, I think your experience is typical. My food blog shows similar stats. But this blog does not, It is about 75% desktop.

      This is because (I conclude) its readers are blogging, and they do not blog on their phones, at least for the most part.

      The general trend is why I have been exploring this issue this year, and why I encourage my readers to think about the mobile experience of their blogs.

      Delete
  9. This is nice. It's very quick to respond page to page. Looks good on my tablet in portrait view where in the past I've had to switch to landscape. Easy to read. Nice sidebar.

    ReplyDelete
    Replies
    1. Thank you, Jocelyn. Coincidentally, I was just thinking today about the fact that the sidebar is hidden in mobile view.

      Collapsing it behind the three-lines menu is probably the best solution. But I wonder how many people click on that and see the sidebar?

      Delete
    2. I think most anyone using their phone or tablet would click on the menu icon to try to find the sidebar. I did and was pleased with the result. I'm using my big laptop right now, and I was surprised at how fantastic the site looked when I hit your front page.

      Delete
    3. I hope you are right! And thanks.

      Delete

Post a Comment