Blogging Design and UX

Post on 13-Jan-2015

485 views 0 download

Tags:

description

A presentation for my part in the "How to be a pro blogger' Masterclass from The Guardian, January 25th 2014

Transcript of Blogging Design and UX

Blogging

UX and Design

Design is more than just how things

are displayed visually. !

It’s a culmination of how things look, read, work and ultimately, delight

the end user.

Let’s begin by thinking about

mobile devices…

“Everyone is responsible for mobile.

!

(There’s) No difference between mobile and digital”

– Chia Y. Chen #MobileFirstLook Conference, January 2013

Do think about the web as ONE. Rather than ‘mobile’ web and the

internet on a desktop.

We are always hearing about the rise of mobile.

!

!

There is no impending ‘rise’

It has already happened and it’s getting bigger, faster and better.

!

A smartphone gives you some serious power

Your readers also have some serious power in

their pockets…

Is the theme that you’re using responsive?

!

Does the design change on different devices?

!

Is your content optimised?

These are important questions to ask…

!

WHY? !

Because we switch between devices all day

!

Mobile Tablet

Desktop

The most important thing is the user

!

NOT the device.

How do we enable the user to access our content easily, no

matter the device?

6 simple rules to follow

Be device agnostic

1

Use a responsive theme

2

Optimise your content

3

Optimise your images

4

Optimise your speed

5

Have empathy

6

Disclaimer !

The images you are about to see hopefully make this presentation

seem a bit more lighthearted.

Your blog’s design is a very important part of blogging

!

Not just from a visual perspective but also from a

search engine optimisation one

Good SEO practices and Design & Usability used to live in very different worlds…

Design SEO

Now they are closely aligned

Design SEO

1. Check and Design your 404s

Search engines can screw up inbound links to your blog !!

Make sure you have a well-designed 404 page that directs the user in the

right way if they end up there.

Offer them a helping hand and DON’T tell them that it’s their fault that they are there.

!

Add a search box. !

Direct your users to your homepage.

2. Review inbound links

Your site Site A

Site FSite E

Site D

Site C Site B

Don’t make your users bang their head on the door on their way in.

Utilise plugins that will fix broken links and redirects.

!

Plugin: Simple 301 Redirects (http://wordpress.org/plugins/simple-301-redirects/)

3. Optimise popular pages

You’ve probably got pages that are highly viewed.

!

Remember! The internet is never ‘finished’

!

Optimise these pages for the end user.

If you’re trying to make them do something: sign up to a newsletter, click a link, download a file or something else,

!

Make it easy for them.

!

Capture your audience for the long term.

4. Create Simple Navigation

Choose your categories in a strategic manner. Do you

really need that many? !

!

Think about how content is accessed and utilise the menu system built into WordPress

!

Make the journey from A to B as simple as possible.

!

5. Use images well and wisely

Think about the pain of loading a page on your mobile and there’s 10 images to load.

!

Are you serving hundreds of images to your end user?

!

Have you got a caching plugin installed? !

Plugin: W3 Total Cache http://wordpress.org/plugins/w3-total-cache/

!

A user’s attention span is short so optimise the page and leverage caching where

possible to enable a speedier page load. !

If you are using a responsive design (and you should be), install a responsive image plugin

and serve images at the best size for the device they are being viewed on.

!

Plugin: Simple Responsive Images http://wordpress.org/plugins/simple-responsive-images/

Using images well Will catch the reader’s eye and will help them

commit to consuming your content. !

!

Using images well !

Differentiates the content you want

the user to consume from all of the other similar posts.

!

!

Using images well Will craft a memorable visual

experience for your user. !

Using images well Will strengthen an already strong blog post.

!

!

Using images well Adds valuable SEO traffic to your blog.

!

6. Call To Action

With a call to action, your goal is help your users make the right decisions.

!

!

Create an effective level of usability so that they come back time and time again.

!

Call to Actions shouldn’t feel forced or required.

!

Make sure there is a benefit on click.

7. Sharing is Caring

Make sharing options prominent. !

!

Make it easy for the user to share your content

!

Don’t frustrate

them. !

!

Don’t install ALL of the sharing options because you think they buttons look great.

!

Sometimes TOO much choice is bad for the user.

8. Permalinks & Slugs

Your workflow may look similar to this !

• Create your great Title of the Post • Write the Post • Choose Category(ies) • Add tags • Review the post before publishing • Hit ‘Publish’ and wait for it… • Sit back, relax and watch the page views increase

Your post slug is defined as the direct permalink

or URL to your post. !

!

!

Maximise the density of keywords on your permalink instead of

diluting it with 20+ other words.

!

It’s much more user friendly to use smaller permalinks.

Get rid of any extraneous words like !

the, as, if, an and others.

!

They don’t contribute anything to your SEO. !

Include only targeted keywords

that specifically match that particular

piece of content.

Don’t forget the rules…

6 simple rules to follow

Be device agnostic

1

Use a responsive theme

2

Optimise your content

3

Optimise your images

4

Optimise your speed

5

Have empathy

6

Happy users Optimised content

More time for blogging

The end result?

Thank you! !Mark Jenkins Creative UX Director !theluckystrike.co.uk @markjenkins