Mobile Friendly Theme or Responsive Width Theme?

mobile arrayBack in the day we all viewed blogs on desktop computers. Back in the day every blog theme had at least one sidebar that appeared on every page in the blog. Back in the day mile long blogrolls were common.

Not so, today.

The days of mile long reciprocal link blogrolls in sidebars and sidebars on every page in a blog are over.  That’s not to say that such themes aren’t available; it’s to say that there are new themes available for new times. Many themes have page templates like Links pages, full pages (no sidebar), post formats and custom menus.  That’s not to mention, featured post sliders.

3 theme choicesLooking Forward

There’s no doubt it. The mobile explosion has yet to crest but visitors are accessing our blogs via mobiles and tablets is on the rise and affecting on blog design. Laptops, smartphones and tablets are performing tasks that used to be the desktop computer territory. Our blogging future will feature responsive width themes, infinite scroll and effective use of custom menus, page templates and post formats.

Fixed width means the width of the theme does not change according to screen resolution (or the width of browser) your visitors use.

Fluid width means the width of the theme changes according to screen resolution (or the width of browser) your visitors use.

Responsive width means the layout adapts depending on the size of the device being used to view your site. When responsive width themes are viewed on mobiles sidebars appear below the posts in order to provide as much space as possible for reading.

What’s the Difference Between Fixed, Fluid, Adaptive, and Responsive Web Design? | Treehouse

Why Use Responsive Web Design? | Treehouse Quick Tip

mobile statsJust the Facts

Take a look at Cisco’s Global Mobile Data Traffic Forecast (PDF).

Global mobile data traffic grew 2.3-fold in 2011, more than doubling for the fourth year in a row.  Last year’s mobile data traffic was eight times the size of the entire global Internet in 2000. Mobile video traffic exceeded 50 percent for the first time in 2011. Mobile video traffic was 52 percent of traffic
by the end of 2011.

Is Your Blog Mobile Compatible? Do you know which sites are getting  the most mobile web traffic across the world wide web? Check out Quantcast ‘s new *mobile web rankings to find out.

 Mobile Friendly Themes or Responsive Width Themes

In Why You Need a Responsive Blog Design Instead of a Mobile-Friendly One, Danny Brown tells us why a responsive width theme is a good choice to make.

“Because responsive design adapts to any screen size, it’s also great for widescreen displays as well as smaller desktop or laptop screens. … Also, for any blogger that cares about the community experience when on-site, responsive design also means your blog adapts around your reader, as opposed to them having to adapt to you – an immediate plus for you over other bloggers.”

Making Changes

If you are a regular reader you will have noticed that since I published I have been making theme changes. WordPress.com bloggers can choose to use these responsive width theme free or paid for their blogs. (Note: More themes are being added continuously.) I have used Twenty Eleven previously and have been testing Able, Blaskan and Sight recently. I haven’t made a firm choice yet and feedback from readers responsive themes will be welcomed.

34 thoughts on “Mobile Friendly Theme or Responsive Width Theme?

  1. Pingback: Responsive Web Design: The Gold Standard | one cool site

  2. Pingback: Which Widgets are Essential? | one cool site

  3. Pingback: Mobile Growth and Blogging | one cool site

  4. Pingback: 12 Website Navigation Guidelines | one cool site

  5. Pingback: Mobile Friendly Theme or Responsive Width Theme? | better blogging tips | Scoop.it

  6. Hey Timethief!
    Great post detailing what users should do in today’s day and age to make their blogs more reader-friendly.
    Being a Computer Science student, this was an issue that cropped up at various places whenever we dealt with UI or mobile devices. Good to see that people without rigorous CS training will now have a good idea on the issues they can face in their UI. :D

  7. I’ve been comtemplating changing themes, but hesitant because ‘Black Letterhead’ which I’ve been using since I started writing only last year, seems to have been discontinued, i.e. when I checked out themes, it’s not there anymore. I’m worried if I miss it and want to go back I can’t. I like dark or earthy backgrounds.

    I like this ‘Able’ theme you’re using, especially the large clear font, but mostly I like the gorgeous images you are using for the background and the header. That gives me the idea that if the theme is a tad too cheery or bright for me I can try to find some quiet stoic images to tone it down a bit.

    • Hi Halim,
      The Black-Letterhead theme is based on a theme called Letterhead which in turn is based on Kubrick, which was the default theme for WordPress until Twenty Ten was introduced. When themes are discontinued those who have used them in the past or who are using them can continue to use them. They just aren’t made available to anyone else.

      The best approach to trying out a new theme is to create a mirror site in a private blog. That’s why I say every blogger needs a test blog. Then you can try out images and widgets and basically mock-up your main site without changing anything there until you are ready to. http://onecoolsitebloggingtips.com/2010/05/19/how-to-select-a-wordpress-com-theme-part-1/

      Thanks for your feedback on the Able theme. I get bored easily when I see that same thing over and over again so I change backgrounds and header images frequently.

      • Wow, thanks so much timethief for all that information and for passing me the idea of a mirror site, set to private, to test out themes and other stuff. I just finished reading the post you linked to. Everything is so clearly explained as usual. Looking forward to reading Parts 2 and 3 and then getting to work on the mirror site.

        Cheers!

        • Hi Halim,
          It’s good to hear you feel my post is useful and well explained. Having a mirror site is great for testing and it’s insurance from a backup POV.

  8. I have to admit that I don’t have a mobile anything – no phone, no ipad, no ipod, no smart this or smart that. So I haven’t the foggiest how things look or are meant to look on them. (And I’m turning into the sort of dinosaur that I hoped I would never become!) And I’m truly reticent to change anything in my blog to accomodate these devices. I suppose I’m still clinging on to the notion that a blog is more than just its content and that the surround of it is important.

    TT… tell me if I’m being stupid here, but I just had this thought upon reading your post… that eventually WordPress.com will make ALL the themes Responsive. Rather like they made all (or nearly all) the themes have Infinite Scroll (they’ve not yet done it to mine but I know they will). Is that likely?

    • Hi Val,
      All is 100% and I don’t think every theme may accommodate such changes but I’m not a web designer. I believe the aim is towards making as many themes as possible accommodate both infinite scroll and responsive width design. Take a few minutes out to view the two short videos I posted in above as they may allay your concern.

  9. Pingback: Mobile or Responsive? How about both | This page intentionally left ugly

  10. Certainly one needs to be alert to ensure one’s blog theme is width responsive with the explosive use of mobile readers world-wide. At this time I’m a bit demotivated to make time to switch to another theme (from Twenty-Eleven) and do some clean-up afterwards to make sure transformed posts don’t look too wierd, patchy with spacing in the wrong spot. I’m just secretly glad that Twenty Eleven is screen width responsive for now.

    How do some of you deal with when switching several times annually amongst different themes?

    • Hi Jean,
      Yes, Eleven is a responsive width theme so that’s indeed good news for you. I don’t know what you mean by the how do you deal with switching themes question. I do it frequently but I never choose to switch to themes that are much wider or narrower re: maximum displayed images widths, or create any featured images so that means I don’t have to resize any images when I do.

  11. I prefer responsive themes and I think that Danny Brown has nailed it with what he says.

    TT,
    When I look at your Blaskan theme on my iPhone, the only menu item I see is ‘Home’. The rest of the menu items are accessed via a drop-down.

    I have Blaskan running on a self-hosted site and when viewed on my iPhone, it looks very top heavy with all the white-type-on-black-background menu items dominating the page.

    I wonder whether Blaskan for WP.com is slightly different than the .org version?

    • Hello David,
      The versions of the Blaskan theme we have here at WordPress.com is adapted from WordPress.org version so I’m not surprised to hear it differs. I’m not please to hear the menu items are displaying in a drop-down. As neither my husband or I have smartphones (he has a tablet ie.an iPad) your feedback it very important to me. Could I trouble you to take screenshots so I can see how Blaskan, Able and Sight present in mobiles?

      P.S. I’m changing this blog to the Able theme today and would appreciate your sharing how it appears in your iPhone.

      • Hi TT,
        I grabbed a screen shot of ‘Blaskan’ and ‘Able’ on your site and ‘Sight’ on mine. One thing about ‘Sight’ is that as a consequence of me having made certain posts sticky so that they would show in the slider on the PC screen, they are the first ones to appear on the iPhone screen and I have scroll past the five or six of those sticky posts to get to the latest posts.

        How to get the screen grabs to you? DM me your email address on Twitter?

        • Hi there David,
          I just emailed you so you have my email address to send the screenshots to me. Thank you so much for doing this for me. I appreciate it.

  12. I’ve been using Able for some time now with the right side-bar enabled. Looks quite good on an iPad, although I notice the side-bar is missing. I usually only test with my PC and laptop….looks like I might have to re-think this strategy.

    • I quite liked testing Able and used it for a couple of weeks. It’s definitely an appealing choice when it comes to clean and minimalist responsive width themes. I like the way Able frames your photography very much.

  13. Hi,
    This is helpful. I like your current theme a lot. I am using Suburbia because I love it, but I am not sure whether or not it has responsive width theme. Will have to check that out.
    Thank you -:)!

    • Hi Daniel,
      Thanks for your feedback on the Blaskan theme, which I’m using today. I’m liking it and I like Able too but neither one has a featured post slider. This WordPress.com blogging tips blog has 784 posts. Many of those posts contain evergreen content that’s buried in the Archives and I am considering how to feature them effectively.

      Suburbia is such an attractive theme. I used it on my personal blog for awhile and enjoyed using it very much. I created many 155 x 155 header images and set them to rotate. I wondered how they would go over but it didn’t take long until I received several compliments on them by email. I haven’t rejected the notion of returning to using Suburbia on my personal blog.

      • Ok, I’m being a dummy here but what do you mean by “evergreen content”?

        Is it old posts that folks still find informative, therefore like evergreen trees (spruce, pines, firs, cedars etc.) which stay green and live all year even in my cold northern climate?

        I kind of lost my decades-old-peanuts-for-pay job (or did I quit??) last summer when I refused to take a pay cut. Now I have a “different” job at the same not-for-profit which makes me an official webmaster. LOL. me being not very organized nor technical…

        It is just that I need the money. At any rate, I’m wondering what the differences are between the “flexible width themes” and “responsive themes.” Any info would be illuminating. For my work, we will be using wp.ORG so I’m very confused about how things will work… Boss lady got a $10 analysis (salesman who never even looked at the site before talking to us) of our current website and the only thing she latched on to was “responsive” web site.

        • You nailed it! By “evergreen” content I meant posts that have content that is still as valuable and relevant today as the day it was published.

          I believe but I could be wrong that “flexible width” amounts to what Danny refers to as “mobile friendly” (theme changes according to screen resolution or the width of browser your visitors use) in his post and he explains why responsive width is better.

          Addendum:
          I forgot to include a link to this article for you

          http://blog.teamtreehouse.com/beginners-guide-to-responsive-web-design

          “The first key idea behind responsive design is the usage of what’s known as a fluid grid. … Fluid grids go a few steps beyond the traditional liquid layout. Instead of designing a layout based on rigid pixels or arbitrary percentage values, a fluid grid is more carefully designed in terms of proportions.”

          I also added two short explanatory videos to the post above.

    • Your photos are fabulous and your use Twenty Eleven, a responsive width theme, on your photo-blog is very effective. The Twenty Eleven feature I like best is that there are no distracting sidebars on single posts displayed on their own pages. In a photo-blog I rate that showcasing very highly.

      Though I did use Twenty Eleven for a long time and have not rejected the notion of returning to using it again there is something I dislike about it. I like being able to change the color of links, but what I dislike is that appearance of the fonts for links is somewhat “blurry”, rather than crisp.

  14. I know I have followers,who surf on a tablet, and/or mobile device,and I have been using able and currently using the hatch theme,which is very nice

    • Hatch is a very attractive responsive width theme for photo-blogging. It has many great features and I like it very much. The grid-style design for on featured images looks so good when there is a featured image in each post.

Comments are closed.