Pages

Archive | Web DIY

What experience are you creating?

experience

Many years ago I spent a couple of weeks with a friend in Halifax Canada. He had a very modern apartment overlooking Halifax Harbour and from his living room you could watch the daily happenings on that beautiful expanse of water. The view was captivating for a while but it wasn’t long into my visit that I stopped noticing it.

When I think back on that visit, the things that first come to mind have nothing to do with that view. The experiences I had are my fondest recollections; the food I ate (best wild mushroom soup ever), the people I met and the unique places I visited.

In some ways your blog is not any different for your readers. Your blog design is probably the initial reason a new reader will stay, but it’s the experience you create for them that will keep them coming back. How beautifully you craft your words, the wisdom and insights you impart, how easily they can move through your topics and how seamless it is for them to sign up for your email list – this is their experience.

It’s unfortunate then that so much advice and energy is spent on getting your blog design just right. Most design decisions, and here I’m talking images and colours, come from personal preference or your brand guidelines.
Have you ever stopped to consider the experience you are giving your readers that goes beyond design?

Below, in no particular order, are some tips for auditing your blog to enhance your readers’ experience and hopefully keep them coming back:

Your writing

This is a case of do as I say not as I do. I am not good at writing, well not in the way that I would like. If you’ve got this under control then skip ahead. If you’re curious to know what level you are writing at, run your favourite (and I do mean your favourite not your most popular) post through the Readability Score website. This brings back a lot of data but my favourite measure is the Flesch Kincaid Readability Score. What grade are you writing for? Keep in mind a higher grade does not necessarily mean better writing. Oftentimes a lower grade means that you can be easily understood by many levels of reading proficiency.

The navigation

This is how easy it is for readers to move through your blog. Do you require too many clicks for them to get to what they want? Are your tags and categories intuitive? Do your menu labels make sense? If you’re not sure, try this little test. Copy your menu labels (e.g. About, Contact, Downloads) onto post-it notes or small cards. Give them to someone who will give you honest feedback (a reason why friends are sometimes not a good idea for this task), one by one ask that person to tell you what kind of information that would expect to see under that label. You are welcome to set the scene for them and be up front about what you are doing and why. Try this again with a few more people – 5 should be enough. What did you learn? If what they expected and what exists is closely matched then you’re on track, if not you might want to rethink these labels and then test out the new ones. Rinse and repeat.

As an example, I once had a client that wanted three items on her navigation menu; food, art & life. Now, to me, food & art were easy to predict what I might see, but life? I had nothing. Was it about her life? Or mine? Or about living? It is such an immense word that each of us will think something different based on our own life (pardon the pun). In user experience design (and psychology) this is called a mental model. We all have them. If how you structure your blog matches your reader expectations, then you’re matching their mental model.

Remember that navigation is not just about that bar at the top of your blog, it’s how your reader moves around your blog – page to page, post to post. What opportunities are there to make that easier for them? What if they land in the middle of a post from a search engine, how well can they gain orientation in your space?

You

Your about page is so important. It is possibly the most visited page on your blog because people really want to know – who are you? Picture please. Add a little bio and only share as much as you want to share (read – please don’t overshare). How is it you came to be writing your amazing blog? Where are you in the world? Your story is the human connection your readers have with you so make it sing.

A way forward

In my day job as a user experience consultant I spend a large part of my time evaluating websites and apps. I have started doing this for bloggers as well but with a twist, not only can I evaluate your blog against a set of usability criteria but I provide a task list to help you prioritise your blog usability updates. Feel free to contact me to know more, or leave a comment.

Image by Bench Accounting via StockSnap – free high resolution stock photos

May 9, 2016 \ Web DIY \ 2 comments

Tags: ,

A maintenance schedule for your WordPress blog

maintenance

Keeping your blog up to date is an easy job but you have to be consistent and it’s never a good idea to set and forget. It pays to have a maintenance schedule for your WordPress blog.

I have had the good fortune to work on many WordPress blogs over the years and I cannot tell you how many times I’ve logged into a blog that hasn’t been updated in months and sometimes more. For many this task can be a little overwhelming and when you login and see you have 17 updates it’s really nerve wrecking to click that update button. If you are like me, you’ll have a moment of asking yourself ‘what if I break something?’.

I’m going to attempt to guide you through the tools and techniques I use to keeping my blog and my clients’ blogs up to date without breaking anything.

Install a good database plugin

There are many plugins out there that will take care of your database for you but my personal favourite is WP-DBManager. Once it’s installed I recommend you do the following

  1. Setup Automatic Scheduling.  I usually have Automatic Backup scheduled for every week and I set Gzip to Yes.  Gzip is just a compression/decompression method and this means that when it’s emailed to me, I get a slightly smaller file.
  2. Set Automatic Optimising to 1 month, which is the recommended.
  3. Make sure the Backup Email Options are filled in with your email address. This will then email you a backup after it is created. I like this because then I know that I have a copy on my hosting server and a copy in my inbox. When I receive the latest one I delete the previous one.
  4. Nominate how many previous backups to keep. I have this set to 5, which means it will only ever keep the last 5.

At any time you can login to your dashboard and email yourself the latest backup or you can manually create a new backup. I only do this if I’m working on a client site and updating something that makes me particularly nervous, like Woocommerce.

Important note: Some database plugins (WP-DB Manager included) only backup the database structure and tables. What this means is your backup does not usually contain a backup of your Posts and Pages. Check the plugin you are using to see what it is backing up for you. WordPress lets you backup your content through it’s export tool (Dashboard > Tools > Export).

Keep your plugins up to date

It’s really important to keep on top of plugin updates. I make sure I do this at least weekly but more often I update if I login and see there are new versions waiting. I even keep a spreadsheet to keep track of the plugins I use, the versions and the date they were last updated, this way I can keep an eye on those that haven’t been updated in a while. This may mean they are no longer being maintained and oftentimes a WordPress conflict is caused by an old plugin. If I notice one that isn’t getting any updates then I might go looking for one that serves a similar purpose.

I had a client who had signed up for a service that could send SMS from her blog. The company who created the service and the plugin went out of business and so the service was switched off. She still had the plugin installed and because the service was gone the plugin actually stopped her from being able to login to her WordPress dashboard. This meant having to go in via FTP to remove the plugin. I know this is an extreme example, but it does happen.

From time to time do a plugin inventory. Which ones are really doing a great job for you? Which ones have not been activated? Remove any that you simply don’t use.

Keep your WordPress core files up to date

Like your plugins, it’s so important that WordPress is current. New releases are not only for new features they are also for bug fixes. If vulnerabilities become know then hackers target systems with know vulnerabilities, so keep on top of it. Your WordPress setup can be configured to update automatically and I have and maintain systems that do both; manual and automatic. From my perspective it doesn’t seem to make a difference to me but there are many passionate people out there in WordPress land who think of automatic updates as bad juju, so I’ll leave that up to you.

Comments and spam

At least once a week I reply to comments, although I usually reply as soon as I receive them. Some people like comments but never reply to them, whereas I see comments as a dialogue so I will always reply. Again, I’ll leave that up to your personal preference.

Delete your spam at least weekly. Plugins like Akismet (totally worth the cost) do a great job of catching spam but there will still be a few that get through. So go into the Spam folder and delete any that Akismet has caught and look through your comments to mark any spam message as such and then delete them.

To conclude

I hope this will assist you with your own self-hosted blog. Ask me a question or leave me a comment if you want to know more. I have encountered and triumphed over many Wordpress issues (including having this blog hacked) so feel free to ask.

Image by Luis Llerana via StockSnap – free high resolution stock photos

May 2, 2016 \ Web DIY \ 0 comments - be the first

Tags: ,

Thinking about :: colour contrast

Examples of colour contrast fails

I’ve been doing a lot of research this week. I’ve been seeing what trends are emerging in the web world as well as researching colour trends (more on that next week). In my extensive browsing I noticed a trend that is worrying and I wanted to share with you today some tricks for ensuring your blog or website is built for all.

The image above shows snippets I collected in my research travels from different blogs. Can you see the trend? If you said super small muted text colours then you would be correct. Do you see the problem? How easy is this text for you read? Are you, like me, struggling to read that button in the top left? Yes, I wear glasses but even with those on the effort to read that on screen is equivalent to an eye exam. In fact each of these have insufficient colour contrast to conform to WCAG 2.0 AA.

If this is news to you, let me give you a little background. The Web Content Accessibility Guidelines (WGAG) are a set of documents that assist web designers, developers and writers create site content that is accessible by people with disabilities. The WCAG guidelines have 3 conformance levels A, AA & AAA. Most of us should be aiming for A at the very least. In my day job I work with a lot of Government and Education sites so they aim for AA conformance. There are few sites that will aim for AAA, except those that may want to based on the services they provide. The conformance levels are cumulative, which means to conform to AA you must also conform to A. There are many parts to the guidelines but today I just wanted to focus on colour contrast, which I should point out is not included in conformance level A.

So as I said each of my examples fails AA for colour contrast. What it tests is that a significant contrast (represented as a ratio) exists between the foreground colour and the background colour. There are variables to this though, which you may have already worked out. Sometimes the same contrast will not conform if the text is small, but will conform if the text size is increased. Are you surprised that the text block in the bottom left of my examples doesn’t conform?

colour contrast pass and fail

The tool I’m using here is the Color Contrast Analyzer that is available for download for Windows or Mac. I will provide you with links to a few more helpful tools and what each of them have in common is that you have to be able to determine the foreground and background colour by their hexadecimal code. Again there are a lot of tools to help you with this, I like to use ColorZilla, an Add On for Firefox, which provides an eyedropper that lets you select a colour on the screen. In my example above you can see that while this text fails when the text is small at both AA  (#1), if I increase the foreground slightly, then I pass the test (#2).

Right now I suppose you are wondering why you should bother when it’s not a requirement for Level A. This is a very valid point, however I think it’s very clear in these examples that they are just plain difficult to read and that doesn’t make good design sense, even if you are not aiming for WCAG 2.0 conformance. Almost all of these examples I collected are navigation elements, their purpose is to assist me to navigate the site and my experience in this site could be severely impeded if I struggle to read the labels.

Remember, colour contrast is just one check you can do on your blog or site. It does provide a concrete result, a pass or a fail. Some things are a very grey area especially when we start talking usability and sometimes you just have to make a judgement call. On this blog the hyperlink colours also fail AA conformance so I’m off to find a green that I both love and conforms – wish me luck!

Here’s some more tools that work well:

Final thought: Designing and building a blog that conforms to accessibility guidelines means none of your readers are disadvantaged – win, win I say. If you are curious to have a review of your own blog or site and see how well it conforms – please get in touch.

P.S. I have not provided links to the blogs that I collected these from because they represent the artistic license of some talented designers. While I may not agree with their design decisions my intention is not to negatively impact their livelihood.

February 21, 2014 \ Web DIY \ 1 comment

Tags: , ,

Web tip :: a word on web fonts

computer with post it note over the screen

I love web fonts, they have revolutionised what web designers can do with typography in designs. Cufón, Typekit and sIFR have all made our task a little easier and our designs a lot more interesting.

Then there’s Google Webfonts who, at last count, have 436 fonts available for use. They’re easy to implement and your only difficult task is to pick one, or two, or three, or… well maybe you should stop there.

Out doing some competitive analysis browsing today I saw so many sites that have poorly implemented Google Web Fonts.  Shockingly most of these sites are by people who call themselves web designers. So today I want to show you how to avoid their mistake.

By way of example I chose two fonts from Google; Nixie One and Josefin Sans. When browsing fonts on Google Web Fonts you’ll notice under the sample text and next to the font name it will tell you how many styles there are of that font and this is important. Let me start with my 3 Nixie One sentences below… take some time to study them…

  1. This is my gorgeous Nixie One sentence at Normal weight.
  2. This is my Nixie One sentence at Bold weight.
  3. This is my Nixie One sentence at Bolder weight.

Now Nixie One has one style or weight, which is 400 or normal in font speak. So when I use the font as it was intended, in number 1, it looks crisp and clean and dare I say gorgeous. The problem comes when I start adding a weight to the font by making it bold and bolder in my CSS. Can you see it’s slightly blurry or just looks a little strange?

So what’s the fix? I’m glad you asked.

Now let’s ponder my second font, Josefin Sans. This font has 10 styles which translate to varying weights of the font from ultra-light (100) to bold (700) and even accounts for italics. The advantage of using a font like this is I can make use of the varying weights (by their numbers) without the loss of quality. Can you see the difference?

  1. This is my Josefin Sans at 400 so that is normal weight.
  2. This is my Josefin Sans at 600 so that is semi bold weight.
  3. This is my Josefin Sans at 700 so that is bold weight.

The only catch is when using a Google Web Font is make sure you’re telling your stylesheet that you want to use all 10 (or 3 in my example) styles. So you would be linking to it by either
< href=’http://fonts.googleapis.com/css?family=Josefin+Sans:400,700,600′ rel=’stylesheet’ type=’text/css’> in the HEAD of your document or @import url(http://fonts.googleapis.com/css?family=Josefin+Sans:400,700,600); in your stylesheet.

Hope this helps and feel free to leave a comment if you have any questions.

January 30, 2012 \ Web DIY \ 3 comments

Tags: , ,

Mollom :: sorting the ham from the spam

OK, please humour me with this nerdy post but sometimes I can’t help myself. Up until recently and like most self-hosted WordPress bloggers I was using a spam blocking service called Akismet… it’s not bad but I had to extend my spam prevention by also adding a CAPTCHA to my comment box. This worked great for my regular comments (your know who you are and thank you by the way) but was very sporadic for new comments. Then I discovered Mollum! For a small fry like me in web world it’s a free service and it works so well.

Mollom divides your comments into Spam (unwanted comments) and Ham (legitimate comments). Mostly spam disappears into a cyber black hole and I never see it. Take my graph – see that big spike on March 29 – that was 516 spam attempts on my site – can you believe it? Of those 516 Mollom delivered 2 comments that to me were spam but they weren’t sure so they deliver it anyway. In WordPress there’s a Mollom plugin that connects to your Mollom account and it’s from here that I moderate these comments. It pays to tag these comments as spam because that goes back to Mollom and helps them become bigger, greater, stronger spam prize fighters.

Oh and as an extension to this I’ve added an Ask a Question widget that takes you through to my Formspring page. I get some many questions from bloggers on how to change their blogs so this is a space to ask those burning technical questions… feel free to refer your friends.

April 5, 2011 \ Web DIY \ 0 comments - be the first

Tags: , , ,

Custom Wordpress child theme by Crimson Pear