Menu

Blogging 201, Day Four: Get Read All Over

Today’s assignment: 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

118 Comments

Comments are closed.

Close Comments

Comments

  1. I am currently using a theme called “Motif”, which seems responsive. I also performed the test according to the instructions. It looks good on all three views.

    But when I try to use my smartphone to view my site by clicking “View Site”, it looks different from the test results.

    Does anybody know why? Or how can get the exact views with the test results on my smartphone?

    Like

    1. Hi Yan, what kind of smartphone are you using? Every smartphone renders websites a little bit differently. Maybe try asking a friend to check out your site in using a different make and model of smartphone to see if they see anything different.

      Like

  2. Hello… I have looked around and ended up changing to the new fictive theme, which I like. I’m not sure if I can change the size of the fonts without upgrading though?? Also can anyone let me know if the colour scheme looks ok? I liked the browns and oranges but it didn’t look too good on mobile devices. Great reading all your comments and suggestions.
    http://www.debz2653.wordpress.com

    Like

  3. On Brand Identity…. I’ve had to post this comment here because;
    1. I was 3 days late on blogging 201
    2. Also, I really would like some critique on my blog and whether it communicates my ‘brand’ or not.
    When I first started blogging, it was because I found a perfect outlet for my thoughts. Then i got knee-deep in fashion, gearing towards commercial but still being able to write on style, trends from my personal view. Now it’s a mix of both. But the understated simplicity of ‘a random chic’ sharing her thoughts is all I really hope to achieve. If you can, I’d like you to read my blog…

    Your thoughts and opinions are welcomed!

    Like

    1. Hey, I really like your blog and to be honest I think it exudes your brand identity perfectly. If you don’t mind me asking I am a fairly new blogger (had only started my blog a little over a month ago). How did you find it in terms of publicising your blog and followers? Because just like your blog, mine is sort of a mixing pot of different topics and I am finding it slightly hard. Also how long have you had your blog up and running for?
      Its pretty neat btw 🙂

      Mimi x

      Like

      1. oh hey Mimi! I love love love your blog!

        I think what I had to do, eventually with my blog, was to define my audience. So even though I wrote/write across different genre& topics, I write specifically for the African reader. That sort of gave it a particular direction, localizing content and with my facebook page, I often collate and post images of, or concerning Africa – fashion, style etc

        I’ve been blogging (on-and-off, I must admit) for about 3 years.

        I’m not sure how helpful this information is… but welcome to WP and blogging buddies? Yes please! xx

        Lora.

        Like

    1. hi, i’ve just looked through your blog – inspiring btw – and i find it easy to navigate and read. The theme also has a simple vibe which works to your favour. The colour scheme is complementary and channels the essence of your blog. My on suggestion is removing one of your ‘about me’s from the sidebar; I’d keep the one with the larger picture of you:) Hope this helped and i would be grateful if you checked my blog out: keenmedic.wordpress.com (it’s very new and i need to know if i’m on the right track)

      Like

      1. thank you for your reply 🙂 yes – i was experimenting with the about me pictures right then, so your tip was helpful! I looked at your blog too – i really like it, simple yet pretty and easy to navigate. Just keep on writing and add more content now!

        Like

  4. Hiyah!
    I am a fairly new blogger and I have just customised my blog and would appreciate some constructive feedback..

    Any feedback would be amazing 🙂 Thanks everybody x

    Like

  5. I don’t have an iphone/ipad only a basic dinosaur phone (like me). Please can someone check my blog to make sure
    Yesterday’s assignment: make sure your site is mobile-friendly and let me know, please 🙂

    Like

  6. I have looked at my blog on a tablet but I do not have gotten a chance to see my blog on a phone if anyone has time to look it over and notices any problems just let me know.

    Like