83
Blogging UX and Design

Blogging Design and UX

Embed Size (px)

DESCRIPTION

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

Citation preview

Page 1: Blogging Design and UX

Blogging

UX and Design

Page 2: Blogging Design and UX

Design is more than just how things

are displayed visually. !

Page 3: Blogging Design and UX

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

the end user.

Page 4: Blogging Design and UX

Let’s begin by thinking about

mobile devices…

Page 5: Blogging Design and UX

“Everyone is responsible for mobile.

!

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

– Chia Y. Chen #MobileFirstLook Conference, January 2013

Page 6: Blogging Design and UX

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

internet on a desktop.

Page 7: Blogging Design and UX

We are always hearing about the rise of mobile.

!

!

Page 8: Blogging Design and UX

There is no impending ‘rise’

Page 9: Blogging Design and UX

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

!

Page 10: Blogging Design and UX

A smartphone gives you some serious power

Page 11: Blogging Design and UX

Your readers also have some serious power in

their pockets…

Page 12: Blogging Design and UX

Is the theme that you’re using responsive?

!

Does the design change on different devices?

!

Is your content optimised?

Page 13: Blogging Design and UX

These are important questions to ask…

!

WHY? !

Page 14: Blogging Design and UX

Because we switch between devices all day

!

Mobile Tablet

Desktop

Page 15: Blogging Design and UX

The most important thing is the user

!

NOT the device.

Page 16: Blogging Design and UX

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

matter the device?

Page 17: Blogging Design and UX

6 simple rules to follow

Page 18: Blogging Design and UX

Be device agnostic

1

Page 19: Blogging Design and UX

Use a responsive theme

2

Page 20: Blogging Design and UX

Optimise your content

3

Page 21: Blogging Design and UX

Optimise your images

4

Page 22: Blogging Design and UX

Optimise your speed

5

Page 23: Blogging Design and UX

Have empathy

6

Page 24: Blogging Design and UX

Disclaimer !

The images you are about to see hopefully make this presentation

seem a bit more lighthearted.

Page 25: Blogging Design and UX

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

Page 26: Blogging Design and UX

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

Design SEO

Page 27: Blogging Design and UX

Now they are closely aligned

Design SEO

Page 28: Blogging Design and UX

1. Check and Design your 404s

Page 29: Blogging Design and UX

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

Page 30: Blogging Design and UX

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

right way if they end up there.

Page 31: Blogging Design and UX

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

!

Page 32: Blogging Design and UX

Add a search box. !

Direct your users to your homepage.

Page 33: Blogging Design and UX

2. Review inbound links

Your site Site A

Site FSite E

Site D

Site C Site B

Page 34: Blogging Design and UX

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

Page 35: Blogging Design and UX

Utilise plugins that will fix broken links and redirects.

!

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

Page 36: Blogging Design and UX

3. Optimise popular pages

Page 37: Blogging Design and UX

You’ve probably got pages that are highly viewed.

!

Page 38: Blogging Design and UX

Remember! The internet is never ‘finished’

!

Page 39: Blogging Design and UX

Optimise these pages for the end user.

Page 40: Blogging Design and UX

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.

!

Page 41: Blogging Design and UX

Capture your audience for the long term.

Page 42: Blogging Design and UX

4. Create Simple Navigation

Page 43: Blogging Design and UX

Choose your categories in a strategic manner. Do you

really need that many? !

!

Page 44: Blogging Design and UX

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

!

Page 45: Blogging Design and UX

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

!

Page 46: Blogging Design and UX

5. Use images well and wisely

Page 47: Blogging Design and UX

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

!

Page 48: Blogging Design and UX

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/

!

Page 49: Blogging Design and UX

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

possible to enable a speedier page load. !

Page 50: Blogging Design and UX

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/

Page 51: Blogging Design and UX
Page 52: Blogging Design and UX

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

commit to consuming your content. !

!

Page 53: Blogging Design and UX

Using images well !

Differentiates the content you want

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

!

!

Page 54: Blogging Design and UX

Using images well Will craft a memorable visual

experience for your user. !

Page 55: Blogging Design and UX

Using images well Will strengthen an already strong blog post.

!

!

Page 56: Blogging Design and UX

Using images well Adds valuable SEO traffic to your blog.

!

Page 57: Blogging Design and UX

6. Call To Action

Page 58: Blogging Design and UX

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

!

!

Page 59: Blogging Design and UX

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

!

Page 60: Blogging Design and UX

Call to Actions shouldn’t feel forced or required.

!

Page 61: Blogging Design and UX

Make sure there is a benefit on click.

Page 62: Blogging Design and UX

7. Sharing is Caring

Page 63: Blogging Design and UX

Make sharing options prominent. !

!

Page 64: Blogging Design and UX

Make it easy for the user to share your content

!

Don’t frustrate

them. !

!

Page 65: Blogging Design and UX

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

!

Page 66: Blogging Design and UX

Sometimes TOO much choice is bad for the user.

Page 67: Blogging Design and UX

8. Permalinks & Slugs

Page 68: Blogging Design and UX

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

Page 69: Blogging Design and UX

Your post slug is defined as the direct permalink

or URL to your post. !

!

!

Page 70: Blogging Design and UX

Maximise the density of keywords on your permalink instead of

diluting it with 20+ other words.

!

Page 71: Blogging Design and UX

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

Page 72: Blogging Design and UX

Get rid of any extraneous words like !

the, as, if, an and others.

!

They don’t contribute anything to your SEO. !

Page 73: Blogging Design and UX

Include only targeted keywords

that specifically match that particular

piece of content.

Page 74: Blogging Design and UX

Don’t forget the rules…

Page 75: Blogging Design and UX

6 simple rules to follow

Page 76: Blogging Design and UX

Be device agnostic

1

Page 77: Blogging Design and UX

Use a responsive theme

2

Page 78: Blogging Design and UX

Optimise your content

3

Page 79: Blogging Design and UX

Optimise your images

4

Page 80: Blogging Design and UX

Optimise your speed

5

Page 81: Blogging Design and UX

Have empathy

6

Page 82: Blogging Design and UX

Happy users Optimised content

More time for blogging

The end result?

Page 83: Blogging Design and UX

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