Sunday, May 14, 2017

Testing the new Blogger themes

I have been evaluating four elegant, stylish new themes (aka templates) from Blogger.

wine taster
Creative Commons attribution below
Released in March, the themes incorporate many important modern features and play especially well with the tiny screens of phones and mobile devices.

However, these themes are not for everyone. Here is the story.

The new themes include some real improvements such as a design that changes dynamically in response to different screen sizes, including phones

On the other hand, the themes make some non-negotiable choices about the blog, and particularly about the display of images, that won't be suitable for everyone.

Compared to the previous generation of so-called designer templates, these are in some ways more specialized and less flexible.

Not Just a New Look

The four new themes, Contempo, Soho, Emporio, and Notable, showcase blog content in ways that are stylish and striking.

In each case the front page has a distinctive look that represents blog posts as square or rectangular tiles that incorporate the first image of each post.

But the change is more than skin deep. The template code has been reworked to add new functionality, such as a featured or "hero" post that is pinned at the top of the blog in a larger size and eye-catching design. (You can set this to be any post, or to automatically feature the most recent.)

In brief, with links to examples:
  • Contempo seems suited for mixed content (image and text). The large hero post could showcase the right image in an attention-grabbing way, and subsequent posts organize into two columns
  • Soho's eye-catching hero post is followed by rectangles organized into two columns (or one, in mobile view). It is the only theme that lacks an option to display a text snippet, except in the hero post.
  • Emporio organizes posts as tidy squares that comprise an image and the blog title only (and the option of including a short snippet)
  • Notable has a linear presentation, all posts as wide shallow rectangles. It is the most text-oriented of all the designs, but a squared off photo snippet is still present.
Page elements such as the hero post can be suppressed or modified, for instance to include a photo or text snippet.

The display of individual posts on their own pages is complete and conventional, though there are small differences in layout by template.

    A Responsive Design

    Blogger has gone all-in on a concept called responsive design to adapt to the different ways that people might view your blog. It is most fully realized in the Emporio theme.

    To see responsive design in action on a desktop computer, go to the home page of an Emporio blog and either (1) drag one of the sides of your browser window inward, to shrink the width, or else (2) adjust the magnification (ctrl + on Windows and Chromium, cmd + on Mac) upwards in small increments.

    Watch the theme redesign itself to fit available space.

    The page flows and resizes to fit different screen sizes. Shown: Emporio.
    The other templates are similarly responsive.

    If you view this on your own browser but don't start out by seeing the sidebar, or all 3 tiles in Emporio, type ctrl - [minus] until you do.

    Emporio (shown, above) has 4 distinct design states. From widest to narrowest:
    1. Full desktop shows the sidebar at right and 3 columns of tiles under the hero post.
    2. A wide tablet or smaller window might narrow the hero post and show only 2 columns of tiles per row
    3. Narrower still shows only one column, with the sidebar next door. You might have to scroll down to see that part.
    4. In phone view, narrowest of all, the posts become a single scroll-able column. The sidebar collapses into a "hamburger menu," 3 horizontal lines at top right. Click it to see the sidebar presented in a mobile-friendly way.
    Note: If a reader has a browser set at significant magnification, the sidebar may be absent.

    Other New Features

    In addition to the hero post, on scrolldown the blog title and search pop out from the top on a shallow shelf, always available wherever you are. You can also put a "subscribe" link on the shelf.

    The internal architecture of the template code has been substantially reworked to load faster and to create new ways of organizing content, at least in theory.

    Given Blogger's culture of tinkerers, I expect to see some great modifications and gadgets that take advantage of the new structure—like this one.

    Some innovations are theme-specific. Contempo has a top and bottom sidebar. Emperio has different sidebars for dynamic pages (such as the main page) and static ones, such as posts. If you use Emporio, you can show different sidebar gadgets on a post page versus the main page.

    What's Not Right

    Generally, I think that navigation in the new themes is weak, and that some readers might have trouble decoding how the site works. Bloggers don't want to make things hard on their readers.

    Also, the way the themes put photos onto the main page is limiting. In my case, the themes do not play well with my older content on this blog, particularly photos and other images.

    I'm going to have to flesh these general remarks out in a future post.

    Photo: Thanks to chispita_666 for making the image of a wine taster available via creative commons.


    1. So what is the best mobile friendly template?

      1. Fritz, these themes play very nicely with mobile. That's one of their strengths. You should consider if they are suitable for you otherwise.

    2. your opinion, in comparison to the Picture Window and Emporio, which do you think would be better?

      1. Hi Barry. I think it depends on the kind of blog you have, and in particular how you use images.

        Emporio is very image-centric, probably the most dependent on strong images of any of the new themes. Picture Window, on the other hand, lacks the responsive features of the new themes.

        Ideally there would be a them that looked like Picture Window but that was also responsive.

    3. Hello Adam,
      I like notable best of them all, but I'm unable to increase the size of fonts in the mobile version of the theme, do you have any tips?

      1. @deep, font size is generally a user-controlled attribute. I'm not sure you can override it just for mobile.

        But if you can, I'll bet that someone on the Blogger helps Forum will be able to advise you.

      2. Hey Deep! I also was struggling with tiny body font size of Notable and finally got the solution. Hope it will help you out!

      3. I think that probably is the answer that deep is looking for. Still, I am pretty sure this would interfere with user settings (which, probably, most people don't use). So if the specified font size is not large enough, it could prevent someone who is partially blind from reading the blog on mobile.

        It's just something to keep in mind.

      4. hi Adam, I would like to constribute regard Editor question.

        If you want resize the notable font in mobile just look following codes in the blogger HTML editor:

        font-size:$(item.title.font.size * 24 / 48)
        }body.item-view .Blog .post-body{font-size:$(body.text.font.size * 14 / 20)

        Then you change value of *24/48 and *14/20

        Become: 24/38 and 18/24.

        then save your notable theme.

      5. Thank you, Anissa. I wonder if one can achieve a similar result with css alone? Custom css can be added without having to edit the blog theme.

    4. Question. I have been blogging since 2006... changed to SOHO in black... but I can no longer see at the top right that I am signed in.. to choose Design or post. Where do I go to post?

      1. Hello Laurie,

        The new themes ditched the navbar at the top of the page, where you could see your email address (as signed in) and other options.

        To create a new post, go to and click "new post."

      2. Painful... I have about 45 blogs to keep up with!!! So now I have to scroll down to find my personal Main one!!! Oh well. I find this less flexible. I do not like the size of the tiles of photos on the page at all... not sure it is even flexible. But my blogger gets more hits and send folks to my website, so I needed to update and jump back in there. I sincerely appreciate the help.

      3. Laurie, I hope that means you have recovered the ability to post on your blog. There is a lot to like about the new themes, but they are less flexible than the older ones.

    5. Hello, Do you have instructions for changing the height of the featured post box on Blogger theme Notable? I used CSS code to reduce the size in my individual posts but the featured post on the home page is still quite large. Thanks!

      1. This is not something I am especially good at, but for the Notre Dame college of Arts and Letters, I'll give it a shot.

        Looks like you want to apply a "height" attribute (e.g., 10 em, etc) to the .heroPost element.

        You can add css to the theme in the customizer, an option on the Theme page for the blog.

        If that doesn't do it, my regrets. I'm going to steer you to the help community for more.

    6. The example page for Notable has been removed :(

      1. Thank you, anonymous reader. I have switched the link to another example that is still live (for now).