Menu

Apr 18, 2014

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. When I went premium and was customizing my page this was a large focus for me.
    I rarely use a desktop/laptop computer if I’m not at work; I read most blogs from my Tab or my phone & wanted to make sure others were able to do the same for my blog.
    It’s so true…It can be frustrating to view a blog that I’m excited to read and realize it’s not easily view-able from my tab or phone.
    Great assignment for today!
    Cheers to 2014 & the loveliness that we call technology! 🙂

    Liked by 2 people

      1. Thank you & Thank you 🙂
        I typically browse on a Galaxy Android Tablet – so I have never seen it with an Ipad. When I view it on my tab, there is a button with 3 horizontal lines on the right hand side that you can click on & the menu pops out – is that not on there for you? Thanks for the heads up!

        Like

  3. On the topic of responsive themes…

    This might be a good time to remind people of file sizes for images on one’s blog. Since mobile users often don’t have unlimited data plans, it’s important to keep one’s background image and other recurring elements low in KB. It’s one thing to ask people to wait a few extra seconds for a page to load; some people will wait. Asking people to pay for high-res images will usually make people click away before the page loads. (With large file sizes, one is essentially charging one’s readers for each view.)

    Liked by 1 person

      1. Let me put it this way…

        My background image is 164 KB. I’ve seen recommendations to keep backgrounds to under 250.

        My text box and sidebar are made of “background images.” (They’re similar to image widgets.) Those are in the low-double digits, but they won’t apply to everyone’s theme. I had to use CSS to get them in there.

        My header is only about 33 KB, but that’s because I had to go ultra-basic. (My background image is fairly detailed and anything more than my current header would look way too busy.)

        And then I (usually) only have one image per post. My rule of thumb is that if I don’t have to wait for it to upload in “add media,” it’s fine. Also remember that you don’t have to shrink an image’s visual size. You can also reduce its resolution to make it load faster. Those of us who aren’t photo bloggers don’t need enormous pristine images.

        Like

    6. This is a really excellent point. I often forget to resize my images before I publish them…my bad. Will do better!

      Another thought on this: Many folks, myself included, have their mobile devices set NOT to download images. This saves on battery life and data charges. So, instead of your beautiful image, the reader may be only seeing the photos’s title. For this reason, it is good to give your photo a title before you upload it to your blog. For example, most images are saved with a title that shows a number and file format…looking something like this: IMG12345.jpg. This is what a viewer will see if you do not name your photo. By giving it a title the viewer will know what he or she is missing and give them a better idea of whether or not they want to download the photo. An example is on my most recent post, I have the featured image titled Water Droplets on Daffodil by Dena T Bray©.jpg instead of the simple file name.

      Again, thanks for the tip from bumplepuppies. And I hope this comment helps, too!

      Happy blogging,

      D

      Liked by 1 person

      4. Hi, Dena. You are absolutely right that changing the filename of your image is important (as is reducing the image’s size). But it’s actually the ALT text that shows up when a device has been set to not download an image. It is actually there for people who are visually impaired or who have readers that don’t allow images, and search engines use it to rank images. It’s a description of no more than 150 characters of what the photo is about. If it’s in a blog post surrounded by written commentary, then the description should flow naturally within the context of the article when a reader got to the picture. Just like it’s part of the written story. Does this make sense? Hope this helps!

        Like

      5. In reply to SPFisher: On my phone the title shows up, not alternate text. But, I think it would be wise to include information in both places. Thanks for the tip. D

        Like

    7. I edit all images on Picmonkey before I use them in my posts and reduce the size as much as possible. It doesn’t affect how they look online and it makes them virtually unusable in other formats. This means they load fast and don’t take up too much space.

      Like

  5. I’m really happy with how my site looks, but I’ve had two readers this week say its hard to read. Whenever I make changes I have a group of people I ask about it who would be (brutally) honest, and they’ve never mentioned it. Could you guys take a look and let me know if you think it’s hard to read? (I can’t change the font without paying which means if it’s too hard to read I have to rethink my theme again and I haven’t found anything else that gives me the feel of the current theme.) thanks!
    http://2crazylittleboys.wordpress.com

    Like

    2. Hi there 🙂

      I just had a quick look over your blog, and the content looks really interesting. In terms of being easy to read, it might be better to use a darker image for your header, as the white text doesn’t show up as well as it could.

      Perhaps it would also help to break the longer posts up with more pictures and headers? Or maybe a theme with a larger font size black on white would make things easier? (Hemmingway Rewritten theme uses quite a large font.)

      But other than that it does seem quite clearly laid out. Good luck with your blog, and hope that helps! X

      Like

      1. Thanks for looking at it. 🙂 I just started using pictures and headers so I’m trying to do that with all my posts now. I don’t want to use a google image so it’s a little difficult, but I’m learning and working on it. I’ll look into the hemmingway theme. I really like the black with white words (maybe because it’s not the normal 🙂 ) you were very helpful 🙂

        Like

    3. Hi! I agree that the title and tag line need to be bolder. I don’t think the font is hard to read, I just think it’s small and white on black is not ordinary to begin with, so that may be an issue as well for some people.

      It looks good to me otherwise! 🙂

      Like

      1. Thanks for looking. I think you might be right about people not being used to the black with white words. It’s rare (which may be why I like it so much) so it takes a little for your eyes to adjust (even mine 🙂 )

        Like

    5. personal taste/view? the font is a little small. and the theme/colour is dark for a blog devoted to telling stories about your sons. not to say you have to use the chalkboard theme, but something a little brighter?

      Like

    8. I actually do think the font is kind of small and hard to read. But I wonder if the black background is your choice or a necessity. I think if you changed that it might brighten it up and be easier to read. Plus 2 crazy little boys and faith just doesn’t seem to be a dark subject to me, so……..

      Like

    9. Thank you to everyone who looked today and your suggestions. I’m planning to reply to them all but I’ve having Internet issues tonight. I will consider and look into all suggestions and I really appriciate everyone looking.

      Like

    10. I found it extremely hard to read. I was squinting and done by the first paragraph. And I’m interested in the topic. But if I’m honest, I have to say, I won’t work that hard for a blog I have no connection with already. After one minute I clicked away, because it’s just too uncomfortable trying to read the small grey print on the dark background, and all those little lines give me a headache. I think this theme would only work as a photo blog. As your blog is so heavily written word, I’d suggest a theme designed for writers.

      Like

    12. Check dashboard/appearance/mobile and make sure the 1st, 3rd and 4th mobile options are clicked ‘yes’, which also works for us ‘cheapskates’ who cant afford ‘premium’ themes.

      Like

  6. Omg, this is fabulous! I didn’t realize how many options there are for the mobile experience. Thanks to @bumblepuppies comment about data plans I opted to remove images from the landing page and to provide excerpts instead of full data-heavy posts. I didn’t realize we could do that.

    Like

  8. This is a great idea! Although I have best intentions, I often forget to check how things look on mobile devices before I publish…..I will keep this assignment in mind from here on! Thank you. D

    Like

  9. I have to weigh in here regarding theme readability in general. I’m sure I’m not the only person who has trouble reading white-on-black text. My eyes rebel: they say, “WTF??? What do you think we are, secret message decoders?” And they shut their mouths with a snap. That’s that noise you’ve been hearing: the mouth of my eyes snapping shut in protest to white-on-black text. It’s too bad, because a lot of really good bloggers like to use these themes that are essentially inaccessible to me. OK, that’s it. I will now climb down off my soapbox and go play in the street.

    Liked by 1 person

  11. I have a very old mobile, so can’t check, but that image is not quite true. I can turn an iPad round to view my site in landscape rather than portrait. This display is only showing in portrait. A column a mere 320px wide would look very poor on a lap-top.

    Then, it says You have the Mobile Theme enabled. This view may not represent how your viewers see your blog. You can deactivate the mobile theme on Appearance → Mobile. So, how does it look on the “Mobile theme”? Is it more like the emailed posts?

    Like

  12. This was so helpful! I had the mobile part enabled, but when I checked on the ‘mobile’ version on the laptop screen it looked awful. Logging in on my phone was a completely different experience…it looked fine! Thanks!

    Like

  13. This was a great assignment because I actually haven’t thought about it before. I was concentrating too much on my laptop screen. I am using the Adelle theme, and it’s already mobile-friendly. So I just activated some of the features on it to have a better mobile and tablet view. Here is a link to my blog http://mybeautycenter.wordpress.com.

    Please let me know what you think of it. I would really appreciate a feedback 🙂

    Like

  14. I have a question. When I create post I always select a “featured image” for the post. This is the pic that is associated with my post listing on my blog page. When I see my post on the Reader, it’s always a different picture than the one I set as ‘featured image’. How is the image used in the Reader listings chosen and how can I pre-select it?

    Like

  15. I am using the decode theme and am loving it. Only stumbled upon it and switched over a few days ago. This assigment is spot on–new theme looks so much better from my phone.

    One comment on my site was about the smallness of header image and I can’t change it, it’s by theme design. But it is perfect for phone (duh) I edit/work from laptop and it bothered me until I realized why it was sized so. I am also loving the hidden tab so that widgets and info don’t detract from content in blog.
    Of course, check it out if you like.
    http://www.gettingdckfordummies.com
    I will happily take credit in my own mind for every other instance I see theme used. No payment neccessary… 🙂

    Like

  16. Great pointers today, I’m going over to take a look at my Customizer right now. 🙂 There are several blogs I follow that I don’t even try to read on a mobile device because they only work well on a desktop and I don’t want mine to feel like that to others.

    Like

    1. I can see how this can be confusing! Minileven isn’t available as a theme that you apply to your blog like a regular theme. It’s a setting that you enable if you’re not satisfied with how your current theme appears on mobile devices.

      To find the Minileven setting, go to Appearance > Mobile in your dashboard.

      Like

  18. Been concerned about this recently. Everything is moving to small portable devices – adapt or die.
    Thanks for the info about Customizer…now won’t have to keep annoying people asking them to tell me how something looks.
    Cheers and hopping off to take a look/chat

    Liked by 1 person

  19. this was a great assignment. things that people don’t usually think about (i know i didn’t!).
    previewing mobile is great. being able to edit would be even greater!

    sorbet (a theme i love) is not mobile friendly even though it says it is. see screenshots in today’s post! http://wp.me/p3JAvW-re

    Like

      1. i checked out about 20 for day 3’s assignment – you might like quadra/circa. i just didnt like the fonts.
        i also made some changes to make it mobile friendly enough for me to like it.

        Like

  20. I am currently using mobile site on my WordPress blog. It seems to work ok on my Android phone. If anyone is having problems on a mobile device looking at mine please give me so ideas.

    Also, relating back a couple of days, I have decided to name my Friday and Thursday posts. I know there’s a lot of throwback Thursday around so I decided on “Twisted Thursday” and for Friday using “Freaky Friday”. Let me know what you think.

    I am also going to start a new blog relating to my years of being an insurance agent. I just started writing a column for a horse publication called “Insurance TidBits”. I welcome any suggestions on what to call this new blog also.

    Thanks so much 🙂

    Like

  21. So, i am the first to admit that I am technologically challenged; but I just realized that even though I have followed some of y’all; I wasn’t receiving notifications of your posts. I just discovered that the “edit” button under the Reader listings allows me to change whether or not the posts are delivered instantly, once a month, or not at all. *I wanted to share this in case some of y’all missed that piece of information like I did!
    And for the record, it’s been fun to read and explore some of the blogs here! Feel free to visit me at adjustmentstonormal.wordpress.com and I will gladly visit your blog, as well!

    Like

  22. Very happy I read today’s post and formatted my site for mobile viewing. The after, consisting of post previews along with photos is much more appealing on a phone now than it was a mere five minutes ago. Thank you!

    sweetteaandbourbon.com

    Like

  23. I have worked thru yesterday’s and today’s exercises and revamped http://www.genebrodejr.wordpress.com . . . I would love your feedback and would be happy to check yours out this weekend.

    Notes on what I did. I am playing with the Hemmingway Rewritten theme. I liked the sample but didn’t want to keep the default pic (as cool as it was). I tried no pic–it looked stupid, just a big black wall on top of the screen. I uploaded some pics of my own to put behind the title and still found it wanting. So I just took a pic w/ my iphone of the site title and left it.

    Then I put a static page below with the title as my tag line. Below that I gave an idea of what the site would be about.

    I also played with the menus and found it somewhat tricky, but my patience paid off. If you have this theme and need some help let me know.

    My site is just a draft presently. My main site thegraceapparatus.wordpress.com is to my liking already but I may play with that sometime too.

    Gene

    Like

    1. I know you are in the beginning stages, but the title is just too static, methinks. I would like to see a tagline in there or something to move me forward onto your blog. At this point the title comes up, but that’s it and nothing makes me want to see more. ‘
      I looked at your other blog as well. I think you need to somehow break it up more. Your font is small and your paragraphs are long and readers are quite lazy. Pics, white space and a color make people engage. This is a process, so since you are playing with ideas, I’d say be brave and make some bold color and font choices that you may not have considered…what would bring you in, if you just ‘fell across’ your blog? Good luck!

      Like

  24. My theme is responsive and seems to work rather well on multiple devices, problem is I’m getting a little bored with it and might want to switch to a premium. I like the menu options in other layouts better but I hate change almost as much as the dentist that didn’t correct me when I said I had crooked teeth. Ugh, life’s so hard. Anyone want to give me some much needed honest feedback about my layout. I’m also in the process of re-naming all of my categories since they’re from when I first started my blog a year ago — went too much for the funny over the practical. http://idlikearedo.com/ for a good time..

    Liked by 1 person

  25. I played around with my blog for several hours today-talk about exhausting. After changing my theme (several times) I learned that I like the one I had. Reasons being, It is responsive, and I like the boxes on the side instead of in the footer. It takes the work out of searching all over to like at archives or to become a reader. Tedious day

    Like

    1. I really liked your blog. It was very easy to follow. It is not cluttered, and the readability is really good. Whatever theme you have right now, I think it’s the Zoren one, matches your blog image very well.

      Like

  26. I had to check to see if mine was a responsive theme, but luckily, it is! 🙂

    Someone mentioned image sizes in posts, which I hadn’t thought about, but it’s a great idea to resize them for mobile users. I usually resize mine anyway, because otherwise the text of my post can get lost beneath the image.

    Like

  27. I gave my blog an entire make-over, including making it more user-friendly on all devises. Check it out and tell me what you think… crimewriterblog.com Unfortunately, my new theme doesn’t allow side widgets but it does everything else I wanted to do. I’m happy with the new look.

    Like

  28. I am using the Sorbet theme on my blog, which I understand is a responsive theme, however when I view my blog on my phone via the word-press app you would think am not using a theme at all just plain wordpress blue colour with drop down menu – have tried you trips on going to customise on my lap top however it just brings up the Sorbet theme but can’ t see anything about settings for viewing my blog on mobile etc… any tips?

    Like

  29. I never really thought about this before though obviously everyone nowadays tends to have some other sort of device besides the good ole pc from which they blog from excluding myself. Is there a way to get around this if you have chosen a theme that may not adapt well to be viewed from other platforms? – Naomi.

    Like