Home
Grant's Website Review - Re-cycle.org - November 2009 Key: Q: Question, SUG: Suggestion, SOL: Solution

Website Review - Re-cycle.org - November 2009

Key:

  • Q: Question
  • SUG: Suggestion,
  • SOL: Solution

About the Author

Grant Burton (info@grantburton.co.uk)

I am a web developer living in Brighton. I've been drafted in to help integrate the Social Platform into the existing site.
Strengths: Server Admin (linux), Drupal, Zend Framework, Php, Xhtml, Css

Aims of the website:

  • Raise profile and  provide info about re-cycle
  • Advertise upcoming fundraising events
  • Provide advice/best practice guides
  • Help facilitate project startups
  • Improve networking between projects
  • Provide feedback to supporters of re-cycle

 

Overview

AIM: Identify problem areas and fix

I've looked at re-cycle.org, noted it's current configuration and have identified problem areas.

In summary:

  • Home page - Not utilised as well as it could be. It's too busy
  • The existing content is orgainsed haphazardly and doesn't integrate well with the navigation
  • Actual content is either badly written or could do with some simple modifications
  • Site editing is currently confusing
  • Membership - Roles, allow too much, needs refining
  • Drupal underused

A few Bugs:

In no particular order:

1. Html / Xhtml - There is bad xhtml on the site (comes from editor probably!)
2. Uris - Initial caps on unix machines makes them impossible to write down!
3. Style - It's a mess, poor html, images falling out the margin, overuse of styles
4. Banner - Irritating animation. Blocky images. SUG: Loop only once or on homepage, Animate with Jquery and use JPEGS
5. Headings - The main page heading is small and bolded, Why? SUG: Make bigger? (Merlin says ok)
6. Teasers - These aren't used Why?
7. Profiles - sign-up quite awkward, if you get something wrong (Merlin says pls fix)
8. Header - Breaks on big monitors. SOL: CSS fix
9. Broken Links - Seen in node/8 - Need to check links

 

 

The rest of the document I'll group into the following sections:

 

  • Content
  • Editing
  • Homepage
  • Navigation (Menus)
  • Uris
  • Membership
  • Further ideas

 

Content

AIM: Make content more readable

Example homepage, full posts rather than teasers displayed.
Some pages have too much text.
Evolving content, can be hard to read.
Links to Pdfs, docs, aren't labelled.

SUG: Try to keep to one topic per page, or break into sections, use TOCs.

Q: How much original content was ported over from the previous Plone site?
A: MERLIN - not sure at this point, a slice, and then added to, haphazard as been said

Q: Have you got any other promotional material that can be translated to the site?
A: MERLIN

  • One side overview
  • Powerpoint (put some work into this, tells the story of Re~C, is a bit long)

Q: Is it possible to take some content away, and edit it, make more web friendly?
A: MERLIN  Sure  :)   I know that short is good on web sites

Editing

AIM: To clean up the html... Somehow.

Editor leaving bad HTML

Q: Do you really need the wysiwyg editor?
A: MERLIN  Yes, I think so, to make easy for non tech people to edit, without lots of <br>......

SUG: Improve Tinymce integration, remove, or replace
A: MERLIN Cool with me

Tinymce

To be honest js editors are never as good as you hope. They can sometimes be more pain than it's worth.

Issues:

  • Currently the editor allows too many styles
  • There is no support for teasers (drupal break)!
  • Image Assist (icon under textarea) doesn't actually insert an image!
  • ?Line returns in the editor get turned into paragraphs (extra space) use CTL+Enter.
  • Allows h1, this should be reserved for the post itself.

Q: Do you use the buttons/styles in Tinymce, can some be removed?
A: MERLIN  - can be removed http://www.re-cycle.org/admin/settings/tinymce/edit/Re%257ECycle.org%2BEditor  "Buttons and plugins"

Q: How do you add links, images and uploads with Tinymce
A: MERLIN  -

- link button (picture of chain)
- http://www.re-cycle.org/Edit_Tips

SOL: Allow minimal set of formatting - configure in Drupal.
Remove some html, currently full html filter used. i.e. a, img, p,address,pre,h1,h2,h3,h4,h5,h6
SOL: If extra styles are needed add to stylesheet or specify allowed styles conf in drupal

MERLIN - yes, style set up is messy...

Adding Images, Attachments to pages

AIM: Make this a clear and simple process.

There are 4 ways this is being done!

1. sftp - Merlin copies files up and then links to them
2. image attach
3. image assist
4. file attachments

Q: Which is used?
Q: Which have you recommended in the howto?

A: MERLIN  - is confusing....

http://www.re-cycle.org/How_Edit

http://www.re-cycle.org/Edit_Tips

 

No right way to do it in Drupal!

SUG: ? Image Attach ensures one image to the page. (+ves consistency).

MERLIN

  • Want it to be easy for users
  • Be great if there's a folder where they go, rather than clutter up the main SFTP folder

Home Page

AIM: Make more scanable and feature rich.

You want to get the main links to the most important areas of the site included here.
Think magazine cover and features.

SUG: Stories could be reduced in size, so it's more scanable.
MERLIN - cool

SUG: Divide page into clear areas.
MERLIN - open to this

Q: What's the most important stuff to showcase or link to on the homepage?
MERLIN
- who we are
- what we do
- get involved
- donate
- lives transformed

Think beyond the menu. Which stories/info should be on the frontpage, important links?

DISCUSS: What should be on the homepage:

Global Navigation (See navigation below)

About Recycle - In short what is re-cycle, with link to more info...

Some main features, with a short teaser and click more, can include image.

  • Upcoming fundraising events / activities
  • Why do bicycles change lives - a testonial or sucess story
  • Example of re-cycle's work (Over 3000 bikes...)
  • Latest partnership
  • The journey of the recycle bike

Perhaps short lists, might help.

Lists:
Events (fundraisers)
Latest howto guides
Latest comments

Little featurettes, blocks of artwork?

Features:
Donate your bike
Cycle Journey  - story of a donated bike (outcomes)
Why Recycle
Latest Video

For those that don't know the site content, the homepage is really important!

Navigation

AIM: Reorganise content
AIM: Reconstruct Main menu

  • Easy to get lost - navigate away, no breadcrumb, no highlighted menu, how would you get back?
  • Your main menu needs less links (ideally 7)
  • Concern buried content/deep menus - 3 levels.

The Global Navigation (Nav aids on on every page)

Currently consists of: Breadcrumbs, two menus and a search box.

The first menu contains some links for info about recycle, and Africa.
The second menu links to howtos and how to donate.

SUG: Combining the menus into one consistent menu.

Current Menu 1:
Home
360 Degree Impact - Why would I click here?
Find out more - more what? You are being a bit cryptic!
Gallery - How boring - hardly a section!
Videos - Again, how dull
Links - Yawn, but the page is great!
Newsletter Archive - Bugger all in here
Contact Us - I understand this.

  • The Gallery, Videos and Links pages all have good assets, but the links say nothing about the content. They are generic. Why would you click on them? You'll need to figure out how to tie these into the site.
  • Contact Us, certainly needs to be a link available on all pages, but we might be able to move it, perhaps top right or footer.
  • The current wording in the navigation isn't immediately obvious. What does 'Find Out More' Stand for? Find out more about what? What's wrong with 'About' or 'About Re-cycle'?  Merlin is open to making this more clear...

SUG: New Combined Menu (Discuss - not carved in stone....):

Home
About (Re-cycle) - About the charity, what they do etc.
UK - Collection, Partners
Africa - Distribution, Partners, Projects, Training, Testomonials?
News and Events
Help/Donations - Donate a bike, money, other ways you can help....
Guides and Resources

Menu Expanded:

Home

  • About
  • Contact Details
  • History
  • Annual Reports
  • Faq

UK

  • Partners
  • Collection points

Africa

  • Partners
  • Why?
  • Success stories

News and Events

  • Newsletters
  • Upcoming Events
  • Press Releases

Help Us

  • Donate a bike
  • Donate money (and where it goes)
  • Other ways you can help
  • Sponsors

Guides and Resources (Now would this be the social platform)? Merlin says yes :)

  • Setting up your own project
  • Fundraising Models
  • Cycling and re-cycling on the web

Of course you might want to modify or add to this list.

THINK ABOUT:

Additonal Navigational Aids

SUG: When you are reading an article, you can use the sidebar, or the bottom of the article, to list:

Further links - Links to sites on the web
Related - Autogenerated list of links from re-cycle.org

Merlin says nice :)

THINK ABOUT:

Site Categories

To improve the navigation, it might be an idea to think about the general areas and topics/categories posts would fall under.

With that in mind you could group content, better and/or additionally add tags to the site. Tags provide a way for the user to group content, and can also be used for related link style posts.

The nice thing about tags, is that content can be associated with multiple tags.

Can use: categories, author, content type to group content.

I'd say the whole site (and social platform) fall into the following areas:

  • About Recycle - Information about the charity
  • Info about Projects and Partners - UK and Africa, collection, distribution, training, project feedback
  • How to Help - Fundraising, Volunteering, Donating
  • Guides/Howtos - Best practice, how to strat project etc
  • Feedback - Where your money goes
  • Events - upcoming fundraising events e.g. sponsored bike rides

Suggested Content Types:

Page - Pages about Re-cycle?
News - Feedback
Event - Fundraising activity
Press Releases - Media focused
Videos
Photos - (and groupings/collections i.e. galleries)
Projects - Recycling Project
Forum Post/Comment
Howto/Guide

Topics (prefix with bike?)
Collection
Distribution
Education?
Refurbishment
Art - Make are out of bikes
Fundraising -
Innovation - Trailers, Tools
Maintenance - Looking after bike, might include refurb
DIY Project - Roll your own
Feel Good? - Making a difference

Q: Could we tag all content with the above keywords?
A MERLIN: open to this, if help

Q: Would categorising content help?
A MERLIN: good question!  you tell me...

Q: How did you categorise your projects?
A MERLIN: Don't....  :(

Howto Guides:
Set up collection point
Set up a Refurbushing project in Africa

add more here...

Uris

Currently a right old mixed bag. Some caps, some hyphenated.

Q: Who looks at uris these days anyway? What's wrong with /node/345 ?
A MERLIN: URL is king in search, have been reliably told

Q: How do you edit these currently?
A MERLIN:in the page edit

Q: Have you used Pathauto in the past?
A MERLIN: no

As long as a search spider can follow links through pages, it should index the page regardless. I think clean urls are overhyped and also a waste of time (If a search engine can read the title or h1, who needs it). The only time I find them useful, is when you use them as shortcuts (but really your site needs to be big for that):

http://re-cycle.org/thebigcycle

There is a general trend not to advertise like this. Want doctor who on the bbc? Google: doctor who bbc. Or go to bbc.co.uk and search for doctor who.

What's easier to write down: /node/34 or /news/2009/11/03/human-race-is-back-pedaling ??

Seo folk might tell (sell) you otherwise!

If you do want clean urls, I suggest you automate this as much as possible. Pathauto is pretty good for this.

-ves
Changing uris, isn't advised. (I think that's also another good reason to stick with node/345, it's less likely to change), as it can break links (link rot). Solution: Map the old uris, for a length of time.

When editing in drupal, the title is automatically used as the page title and main heading. Using 3rd Party module pathauto it can be automatically be turned into an url alias.
I.e. Node Title: Proven link between cycling and good health,
The url could read /story/proven-link-between-cyclcing-and-good-health instead of something like /node/256.

Good Uri:
/news/2009/11/1/Re-cycle-film-premiers-in-New-York
/news/2009/11/1/Re-cycle.film.premiers.in.New.York

Bad Uri:
/News/Film_and_Matthew_Modine_supports_bicycle_charity (Case sensitive pain in to write)

MERLIN - no its not case sensitive, these both work

MERLIN - not matter what case type, just think it looks better

 

/news/2009/11/1/Re-cycle%20film%20premiers%20in%20New%20York (Can't read or write)

The good uri's above avoid/reduce the chance of URI clashes, because of the date.

Spaces in URIs technically spaces aren't allowed in a URI, unless they are encoded. Google used to favour the underscore, but you can uses hyphens or dots.

MERLIN short is good - open to suggestion, SEO good

Membership

AIM: To give users bare minumum to do needed tasks

*Issue with signup, errors make it quite a process

TODO: Check Nav
TODO: Check Roles

Social Platform
...

Further Ideas....

Slideshows
Flash - if you have video links, why not flash!

 

MERLIN - have been advised against flash for propriety software and memory (think Africa users also)

 

 

Subdomain:
howto.re-cycle.org / wiki.re-cycle.org

Slideshows
You could do this with CSS. Better than powerpoint.
360 Degree Impact (node/119) - This could be turned into a powerpoint presentation.
Or an animation.

A MERLIN: Cool!

You could take your existing ppt's and transform them. Have a downloadable html doc instead of a PPT.
You could even transform them into images - and a slideshow.

Good to have download also for people to show at their club/school - I'm open to how this works....