Menu

Blogging 201: Get Read All Over

Make sure your site is mobile-friendly, and familiarize yourself with the features of responsive design.

Welcome to Blogging U! This course isn't currently active, but you can learn more about what we offer and register for upcoming courses on the BU home page.

Over the past few days, you’ve been brainstorming about your brand and thinking about the elements of a well-designed site, from colors and fonts to background.

None of that matters if readers can’t view your site properly across various devices. We’re a culture on the go — no longer just reading on desktop computers, but consuming information on the phones in our pockets, and sharing thoughts from iPads at 35,000 feet.

Today’s assignment: make sure your site is mobile-friendly, and familiarize yourself with the features of responsive design.

Why?

  • Because a responsive theme allows your site to look great on all screen sizes, from computer to tablet to phone.
  • Because there are tools built in to WordPress.com to make this easy — there’s no need to know web development to have a mobile-friendly site.

According to Pew Research, mobile device use continues to increase around the world. In the beginning of 2014, 58 percent of adults in the US owned a smartphone; in many countries, that percentage is even higher. And you know what? They’re reading your blog on it — on the subway, in line, in the bathroom*, and just before they go to sleep at night.

In the Theme Showcase, you can choose from many themes that support responsive design: they’re built to look great across all devices, and “respond” to different screen sizes to ensure a seamless reading experience. (While some older themes aren’t responsive, these days all new themes are.) If you’re not sure if your theme is mobile-ready, check its description page; you can also search for responsive themes by filter.

*Like you’ve never done this.

Test different sizes right from your computer

You can use the Customizer to “test” your site on different devices — this not only allows you to see how responsive design works, you can also play with options to find the perfect mix that makes you happy on the big screen and the small.

To launch the Customizer, hover over your site’s name in the top-left corner of the screen, and click on Customize. In the panel that opens, you’ll see these three symbols near the bottom:

mobile views

From left to right, these represent desktop view, tablet view, and smartphone view. Clicking between them emulates the look of your content on different screens, and you can see what your blog looks like in various sizes. Go ahead, click on one of them. What do you see? Then click on another view. What changes?

If you have a responsive theme…

… you may find that want to make some changes — that font you loved might be too cramped on an iPhone, or you might not love the way your header changes on your Nexus. Sometimes, responsive themes move and condense different elements of your blog to create a better mobile experience, so you’ll want to make sure your widgets and menus work well in all cases.

Make tweaks in the Customizer, and preview them on different screen sizes to make sure you’re satisfied with your blog’s look across all kinds of devices.

If you don’t have a responsive theme…

…ensure your site looks good on phones and tablets by enabling Minileven, a mobile-specific theme based on the Twenty Eleven theme. Any WordPress.com bloggers can use Minileven for their mobile site without affecting their standard theme; your blog will detect when a reader is viewing it on a phone or tablet and automatically show the mobile site.

Note: you don’t have to activate Minileven if your current theme is already responsive — you’ll see a note in your Dashboard if it is.

Minileven has a clean design and pulls in your custom header (along with other tweaks, like your custom colors of CSS), to give your mobile blog a personalized feel that’s simple and readable. To make sure it’s enabled, go to the Appearance → Mobile tab in your Dashboard and select “Yes” next to the “Enable mobile theme” button, then head to the Customizer to preview it.

To see the difference, take a look at your site both with and without Minileven. If you know you have a lot of readers accessing your site on the go, consider trying a responsive theme — refer to yesterday’s assignment for info on how to preview different themes.

Questions? Ask away! For more convo, head to The Commons, where your co-bloggers can check out your blog on their own phones and tablets, and give you a heads-up if your mobile experience could use an adjustment.

 

Show Comments

121 Comments

Close Comments

Leave a Reply to deepbellylaugh Cancel reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Comments

  1. Thank you for this guys. I forget people use mobile to view these. I’m 17 and can’t use my phone to read wordpress blogs. I only use the WordPress app to respond to comments people send me.

    Liked by 4 people

    1. I like the app, as I can write on the go, very convenient. The only thing I don’t like is sometimes the notifications don’t get updated as quickly as the desktop ones.

      Like

  2. Yesterday,at first, I thought I didn’t need to modify my blog’s look that much..but one of my 201 mates, @SomniVision , advised me to use featured images and posts so that the look of my blog connected with Photography. I did follow his suggestion and started try to change almost everything.. Thanks to @SomniVision , my blog now looks much better and also,when i check it on my mobile, it became more attractive than before… but if there is anything i should still do to make my blog stunning, you all are so welcome to advise me.. I will be so appreciative…
    All the Best..!

    Liked by 1 person

    1. I haven’t seen your page before but I am sure the featured images have been a great addition.
      I have another suggestion though: Looking at your blog I am not quite sure who your target audience is. Since your posts are picture-only, I am wondering if a platform like Flickr wouldn’t be a better fit for you. But your pictures are beautiful and I think it’s great to have you here on wordpress. In short, what I want to say is, why don’t you add a bit of text? I am sure you could gain a lot of readers if you would tell us the stories behind your pictures or if you could add some tips on how to make such beautiful images.

      Liked by 2 people

  3. This is the first time I’ve looked at my site on my phone when not using the and it looks good, but I have to scroll past my featured content to get to the other posts. I’m going to have to decide if the mobile look can suffer because I really like the way it looks on the computer.

    Liked by 2 people

  4. Thank you so much for this reminder! I thought I had done this, and it turns out I hadn’t…which sounds like the story of my life. Or the makings of a good epitaph. At any rate, I think I am now mobile ready and able to be (un)read across many devices. Thanks again; you guys are great! :o)

    Liked by 1 person

      1. If only. It’s weird. You can see the sidebars at the bottom if you scroll just fast enough, but then it disappears into the ether of the infinite scroll. Like a ghost story, you might say.

        Like

  5. Yes — thanks so much for featuring responsive design as a Blogging 201 lesson! As much as I love desktops, being mobile friendly really is important. A blog without sponsored design just doesn’t look as credible. Aside from the small text of the tagline on my banner, I’m PRETTY sure I reached a good place in my blog’s responsive design. Thank you for rolling out all these beautiful responsive themes!

    Liked by 2 people

  6. Here’s a question: do you think it’s better for a home page to show snippets of articles for readers to click-through, or all recent posts in their entirety. The reason I ask is that I get stats that say “Home” and I don’t know whether the reader has scrolled down or not. Perhaps if I switched to “snippets” I’d start to see more clicks on stories. The downside is that I may discourage readers altogether. Ah, the perils of blogging!

    Liked by 2 people

    1. With mobile blogging, you definitely want to only go with snippets. On my desktop version, I still go with snippets, mainly because that’s how the theme works it. It’s especially helpful if you have posts over a long time, less so if you’ve just started and there’s not a whole lot to scroll through. But again, it all depends on your site and content.

      Liked by 2 people

    2. Love the name of your blog 😀 . I asked the same question about my blog before I changed the theme last week. Since I’m going the free route as I am still just starting out, my choices were limited, but, went the snippet route with, appropriate for today’s assignment, the Responsive theme. I’m not sure if readers would be discouraged by snippets, but I’d prefer to think of it as offering them an idea of the variety of topics you cover. Certainly agree with you on the problem of interpreting stats otherwise which is another reason for my switch.
      http://4dframework.ca/

      Liked by 1 person

      1. Hi Nato. Thanks for the reply (odd I can’t reply directly to your comment). From what I’ve seen, not all themes allow the switch between snippets & whole posts, at least for the free ones (probably more choice for premium themes). Under customize on your dashboard, see if there’s a Themes Option in the menu. There you can choose if you want to display Blog Excerpts.

        Like

    3. I think snippets because not all readers want to read all posts one at a time in a row. Most readers click on the specific posts that interest them, I think.

      Well, because of that, I started with a theme that was a blog roll, but eventually changed to one with snippets.

      Liked by 1 person

      1. Wow! After reading this I realized that I definitely needed to utilize the “more” tag (which I never knew existed until now) because my posts tend to be quite long. I’ve started going back and adding it to older posts and I’ve already noticed a huge improvement in the cleanliness of my blog. Thank you! 🙂

        Like

    1. Definitely, try a few more. And, if you’re like me, don’t be married for one for too long. It may take some time, but keep trying things out until it fits. Your blog’s look now has a hard time showing your personality as much. I’d say try some things and see what fits. Nobody says you have to keep it forever. Beware though: you’re organization will likely get screwed up somewhat every time you change. Think of it like installing an update to your computer. A little annoyance can get you some big rewards.

      Liked by 1 person

  7. It’s definitely essential have a mobile responsive theme and I think responsiveness is now one of my most important criteria for selecting a theme. If anyone’s looking for a responsive newer one it’s handy to hit the “New” tab when perusing through themes – my current one is actually a slightly older gem though. You can also turn on enable a mobile-friendly option via Appearance>Mobile on the Dashboard but you lose the look and it just looks like the default WordPress blue. I definitely recommend a responsive theme!

    Like

  8. I’ve been in the hospital and have missed the first two assignments, so I’m playing catch-up, but I have decided to change my theme. My problem is that I have lost all my buttons, from my blogging 101 and such. I am so new to all this, I have no idea how to recover any of this, although I’m certain it’s a simple process. If anyone can help, I’d appreciate it! http://faithhopeloveequalsjoy.wordpress.com

    Like

      1. No, I meant the things I got that said I participated in blogging 101 and the daily post and such…I thought they were called buttons.
        And thanks so much for the compliment on my blog! That really boosts my confidence! 🙂

        Like

    1. Have you changed themes since doing 101? Sometimes, that causes some of your widgets to turn inactive — you should be able to find them at the bottom of the widgets page, in the inactive section, and just add them back.

      Liked by 1 person

      1. I remember what they’re called! (forgive the memory lapse…I’ve had a stroke x3 and forget sometimes) They’re badges! That’s what I’m missing and don’t know how to recover.

        Like

  9. This was super helpful. I just recently found a website that let me see my blog on different devices (not realizing I could have just done that on WordPress). I really love figuring out the functions on WordPress so these were excellent tips. Thanks!

    Like

  10. Having looked at this I am quite happy with my theme. Think it looks neat except for when I put in a video post. It looks out of place because it doesn’t have a feature image.
    So my question is- what difference/benefit is there in classifying the various type of posts? I.e link, gallery, standard? Should I just keep it consistent or am I missing something? Thanks

    Like

  11. Did this in the very early stages, very good point to bring up. Go into Reader –> My Sites –> click on your site –> when you are in your site hover over your site title in the left upper corner –> and click Customize, here you will see what your blog looks like on different devices

    Liked by 1 person

  12. Hi all. I’ve checked my blog on the various devices before making sure that they were readable at least. I’m not sure if the color schemes helps or if it blinds you when you are trying to read it late at night. Please feel free to give any suggestions. I’m also putting a post up where you can comment any advice. Thanks in advance 🙂

    Like

  13. It would be helpful if the WordPress stats showed us which or how many or what percent of our readers are using mobile devices. Currently I have to go to StatCounter for that information.

    Like

      1. @i-read Yes I like 2014 as well. I also liked the one called ‘Suits’ but I went with ‘Motif’ and really enjoy the layout. I loved my 2010 theme too and thought it would suck to switch. but now that I have it’s so much better 🙂 Just hover over each theme with your arrow and they will say which are responsive in the description. There are a bunch more.

        Liked by 3 people

  14. Yesterday I had a great chat with Chrissie the WordPress Happiness Engineer, and today I think I may have finally understood why I cannot access the Blogging 201 commons. The new blog I wanted to use for my class has the same address as another blog I own. It is no wonder my Gravatar constantly shows up for the wrong blog.

    Like

  15. Ironic in a good way that I just switched my blog theme to “Responsive” last week. Still working on a free basis, but it would be nice to adjust my post headline font size, but good otherwise since my content is mostly text. When it comes to tablets & smartphones, question I had on thius mobile-friendly subject was do users prefer landscape vs portrait view modes? Did a quick search to find that a July 2013 survey says 59% of tablet users prefer landscape. Also worth keeping in mind.

    Like

  16. I’d be thrilled just to figure out how to get my chosen profile photo to show up when I respond or post to people! I’m so clueless at all of this. But thank you for all your tips!

    Like

  17. I am using the Spun theme and I haven’t had to make any changes as it looks the same on all devices. The thing I am having problems with is using the app, it is fine on my iPhone but can’t seem to use it on my iPad due to the 2 step verification. When I log into the app I get this screen – Sorry we can’t log you in. This account has 2 step authentication enabled. Please configure an application-specific password to use with this application. I have all the passwords but it doesn’t give me a space to insert them? Any help would be appreciated as I am having to use the internet on my tablet.

    Liked by 1 person

    1. I don’t use the 2-step verification, so haven’t got a clue, sorry. I checked out your blog and wanted to comment, but this option seems to be disabled. Just to say that I now follow you, so feel free to stop by and follow back if you want. 🙂

      Liked by 1 person

      1. Thanks I am now following you too, you should be able to comment if you go to the bottom of the post there is a very small white speech bubble with + in it you have to hover over it to enlarge it xx

        Liked by 1 person