For the rest of this year, I’ll be spending 2 days a week with Podnosh and 3 days a week in my current communications role at the Observatory.

Some of the areas I’ll be working on include:

• Running social media surgeries – informal gatherings of people who want to learn how to use the web to communicate, campaign or collaborate.
• Web design and development.
• Training customers to use their websites – including the conversational and social aspects, as well as technical.
• Developing approaches to open data to strengthen the connection between citizens and public information.

Exciting times! Here we go…

Photo credit: Balsall Heath social media surgery by nvirdi

• Data visualisation tools comparison
  My shared Google Spreadsheet comparing features of web-based data visualization tools. Work-in-progress. Anyone is welcome to contribute.
• TG135 Underlying data publication – Digigov
  The Government aims to release all underlying data in a re-usable way from its published information. Specifically, “From July 2010, government departments and agencies should ensure that any information published includes the underlying data in an open standardized format” (PM’s letter of 29 May 2010 to Secretaries of State). It would be possible for each public body to release the data in such a way that it is collectively no more useful than in the publications themselves. The objective of this guidance is to identify data that should be released and to ensure that the data is easy to work with using common tools.
• NESTA – Make It Local
  “Make it Local aims to encourage collaboration between local authorities and digital media developers, to provide innovative, web-based services for their communities.”
• GO Publisher Desktop Community Edition
  Publish your data into open standards.
• Google Chart Tools / Image Charts (aka Chart API) – Google Code
  “The Google Chart API lets you dynamically generate charts with a URL string. You can embed these charts on your web page, or download the image for local or offline use.”

He has subsequently been criticised for deliberately making it difficult for constituents to contact him. The MP says:

One of the things I found as an MP, is that every lobby group puts you on their email distribution list – or an automated system that sends out cloned messages from members of the public who access it.

As MPs’ parliamentary email addresses are in the public domain anyway, campaigning groups view targeting mass email at MPs fair and acceptable practice.

Now I’m not going to jump in on who or what’s right. I’ll leave that to others to chew over. What’s clear is MPs are deluged with email and other requests requiring some form of response.

Also, as those involved with a public sector website with published email addresses know, you receive a huge amount of dire, untargeted email with no hint of an unsubscribe option or email policy — event invites, PDF newsletters, press releases for new products that aren’t available online.

I’ve taken part in social media surgeries as a “surgeon” for a while now and do a little email marketing. After reading all the kerfuffle, two things occurred to me:

1. At social media surgeries, I’ve demonstrated how to sign up with and start using tools to blog, share photos or converse online. How to manage email, and handle the rise in email notifications that social networking causes, is a skill in itself — and a topic I haven’t discussed with participants at a surgery yet.
2. Retail sector businesses are excellent at both permission-based and segmented email. They have to be. If those businesses aren’t excellent, they’re in difficulty. These businesses recognise all the power is held by the recipient. If the recipient considers the sender a spammer, it is so. End of story.

Firstly, next time at I’m at a social media surgery, I’ll bear in mind the issue of handling larger volumes of email as a result of participation in social networks. I shouldn’t take this skill for granted.

For MPs, who can easily afford smartphones, there are plenty of options to streamline the inbox, particularly in dealing with blog comments, follow requests, tweets, prioritising email and so on.

In the case mentioned above, is there a disconnect in sharing knowledge and skills with MPs embracing social networking or heavier online activity? (This isn’t a criticism of work already ongoing work in this area, just an observation based on the case of the MP mentioned above who decided to resolve the problem in his own way.)

Secondly, MPs shouldn’t have to put up with spam even if legislation might expose them to email communication from organisations who don’t target or discriminate what they send.

Taking down a parliamentary email address isn’t going to resolve the problem. But organisations have a responsibility to email “ethically” — have something relevant to say and target this message to those who are interested and actively chose to receive email about it.

The tweets visualisation at top of this post was made using TwitterStreamGraphs.

• Publishing Local Open Data – Important Lessons from the Open Election Data project | data.gov.uk
  Summary of project to publish data for the UK government election 2010 in an open, reusable and machine-readable format using linked data. Contains some valuable lessons on skills required, organisational obstacles to and the need for external suppliers of content management systems to increase their own capabilities when it comes to linked data.
• Webmaster Tools – Rich Snippets Testing Tool
  ‘Rich Snippets allows you to enhance your Google search results by marking up web pages with Microformats, RDFa or Microdata.’
• Open Data Commons » ODC Attribution License (ODC-By)
  If you want to share your data to enable others to share, create works based on it or adapt into new applications—on condition that any public use of the database is attributed back to you—this is a useful resource.
• Four Steps to Finding Your Ideal Writing Voice | Copyblogger
  Joy Tanksley tackles the questions ‘…what is voice, exactly? And how can you make it come through in your blog?’
• 10 expert tips on email marketing « Fiona Cullinan
  Fiona Cullinan summarises a presentation by Tamara Gielen, an independent email marketing consultant.
• A wireframe kit for Google Drawings and 5 reasons it beats Omnigraffle and Visio – Morten Just
  Useful web interface stencils for use with Google Drawings, made by Morten Just.
• 20 Warning Signs That Your Content Sucks | Copyblogger
  Lots of useful pointers from Jonathan Morrow. Yes, I’m guilty of many of these.
• Open Data Catalogue GitHub
  Steve Woodward (@equaliser) has shared the entire application used to run Warwickshire County Council’s open data website.
• A List Apart: Articles: Introduction to RDFa
  Nice and easy introduction by Mark Birbeck to marking up your HTML using RDFa.
• open data doesn’t empower communities | internet.artizans
  ‘Open data doesn’t empower communities. I’m not saying open data is a bad thing, but we need to highlight the gap between the semantic web and social impact. Otherwise we’ll continue to get swept along on a tide of technocratic enthusiasm where hope lies in a flood of data to create a data-literate citizenry’ says internetartizans.

As I mentioned in my last update on what I’m doing, I really wanted to up my wider design knowledge and put this knowledge into practice. So, I spent some time studying grid layouts and typography, getting stuck into two books in particular:

• Grid Systems: Principles of Organizing Type by Kimberly Elam
• A Practical Guide to Designing for the Web by Mark Boulton

These two books really forced me to consider the portfolio layout in detail. Elam’s book is quite theoretical, which is a good thing when you’re learning a new subject, while Boulton helped me consider the grid theory in terms of the web.

Page 43, Kimberley Elam’s ‘Grid Systems’

Specifically, Boulton’s chapter on layout helped me to consider grid layouts that work aesthetically yet always keeping in mind that I’d eventually have to turn the grid design into code for a WordPress theme.

Page 235 in Mark Boulton’s ‘A Practical Guide to Designing for the Web’

To work through this process, I chose the grid960.gs system, which is a set of sketch sheets, HTML layout generator and CSS with consistent measurements that helps streamline web development from design through to coding.

Sketching

With a content plan for the portfolio already in place, my first step was to sketch out the key page templates required using Nathan Smith’s sketch sheets:

• Home page
• About page
• Portfolio index
• Portfolio item
• Blog index
• Blog post
• Contact

Home page sketch (view full size scan on flickr)

Portfolio item sketches (view full size scan on flickr)

Wireframes

Next, I grabbed the 12 column 960 template psd, opened it in Pixelmator and drew wireframes of each page template.

Back using Boulton’s chapter on layout, I used his advice on the Rule of Thirds:

‘Photographers have used the Rule of Thirds for years, who borrowed it from, yet again, classical artists and architects. The theory is simple – which is why it’s easy to apply in your day-to-day design work. Divide any workspace, or layout, into thirds horizontally and vertically, and align key focus points of your composition to where the lines intersect.’

A web design at 960px wide breaks down nicely into 3 columns of 320px each. With a 10px gutter either side of each column, you now have 300px wide blocks for your content, which, again, is a perfect number to further sub-divide by 3 (giving 100px blocks).

In this closeup of the home page’s top left corner, I used the Rule of Thirds on the horizontal spacing. You can see the different elements—title, navigation bar, summary text in bold and the call to action buttons—aligned to the grid at units of 50px or 100px.

You can also see the content blocks on the portfolio page arranged in 3 columns, each block 300px wide and 300px high:

In summary

You may wonder why it’s worth going through this detailed grid design process. Is it too detailed? Should you just fire up your image editor and dive in?

Everyone has different ways of working—and this is a personal braindump of the thought processes I’ve worked through—but I think using grids is a valuable exercise, particularly if you find the visual side of web design difficult.

By using grids, and thereby focusing purely on layout, alignment and whitespace, you’re simplifying the visual design process. Separating layout from, say, colour and typography, reduces the number of design elements and choices you make at any one time. You can see the effect of small changes more easily and adjust as you work along.

Ever have those times when you stare at your design and think ‘this doesn’t look right’ but you struggle to identify the cause? Focusing on layout and whitespace makes it easier to deal with these problems. Something doesn’t feel right? Check your units of measurement and re-align it. Does it ‘feel’ right now?

An organised layout based on grids, using consistent measurements, can begin to feel like a good web design – even before you introduce colour and type.

This current design is the fifth version of gavinwray.com, and reflects the positioning and thinking I’ve been doing this year. The core of the design comes from some detailed study of grid layouts and through trying out a new approach to content strategy on myself. This made for some odd conversations (with myself), as both client and designer, but interesting and valuable nonetheless.

I’ll write some separate posts documenting the process I’ve worked through (much of which is new), from the strategy, wireframing and design, through to building a bespoke WordPress theme.

For now, I’m just pleased to launch the site. I hope you like it. As ever, any feedback, suggestions or ideas would be appreciated.

Positioning

Over the last two years, the nature of the day job and freelance work I do changed significantly. After mulling over all kinds of descriptions, “Web producer” seems to be the best fit title for what I do day-to-day. The new portfolio site will reflect this.

Learning in depth

At the start of 2010, I scribbled some New Year resolutions on paper (not brave enough to blog them and therefore make them real) about developing my web skills this year.

After flitting across many subjects, favouriting interesting tweets, starring tutorials in Google Reader, skimming blog posts, going to meetups and generally procrastinating, I came to the conclusion that I’ve tried to know about many web subjects without really understanding them.

(This isn’t a post bashing shallowness of social media, by the way. I love Twitter for new ideas, new subjects, helpful people, alternative views and curious minds.)

So, I committed to developing my skills in a smaller range of areas but learning about each one in greater depth:

• Design – specifically photography, grids and type, and taking time to absorb design outside the web world
• Web design – HTML5, CSS, more creative WordPress use and optimisation
• User experience design – I’m taking part in the Birmingham Interaction Design Association and the related User Experience Book Club
• Open data – learning the standards, formats and techniques for sharing data in better ways designed for other people (and machines) to easily re-use in applications

Progress on portfolio redesign

The first two stages are completed:

1. A content plan for the portfolio
2. Wireframes for key page templates (shared on flickr)

At the end of 2009, Cllr Ken Hawkins and I worked together to set up a new website that Ken uses to write about issues in Elmdon and Solihull in his role as a councillor at Solihull Metropolitan Borough Council.

Ken was already blogging on Google’s Blogger platform. However, following a few sessions at a Social Media Surgery, he was keen to do more with his blog both in terms of content and presentation.

I helped Ken by setting him up with a WordPress site, transferring legacy content over from the old blog to his new WordPress site and setting up the new blog layout.

Ken wanted his blog to have a clear layout with straightforward navigation. To provide this, I chose the Grid Focus theme by Derek Punsalan.

Rather than a traditional ‘menu’ navigation, all the content—posts, comments, contact details and Ken’s tweets—contained within a single page and browsed via categories.

We wrapped up with a demonstration session on using the WordPress admin interface to write new posts, upload images, assign categories and how to manage comments.

Currently, only documents can be tracked in your Analytics reports; views of published spreadsheets and presentations are not tracked. I’d really like Google to add support for tracking published spreadsheets, in particular. Here’s why.

In the day job, I’m advocating making statistics available online in multiple open formats rather than, for example, providing the statistics in a single Excel file hosted on the corporate site for users to download. I’m using Google Spreadsheets as the repository to store the data (here’s an example page linking to data).

I’m trying to follow good practice examples set by The Guardian Data Store and national discussions on Twitter around open data. By posting the data on Google Spreadsheets, users can access the data as an HTML page, download a CSV, TXT or Excel file. Users can view the data with free tools; no proprietary software required. MS Office users can still use Excel files in the usual way. Everyone’s catered for.

Being a content analytics nut, I’m always on the lookout for ways to collect as much evidence as possible on how users interact with content. Having the statistical evidence to back up ideas on where to direct web content efforts is vital for convincing other people that you know what you’re talking about. It also gives you, as a content manager, confidence in your decisions on what’s working and what isn’t.

To web standardistas, developers, open source veterans and knowledge management types, the choice to share data in open formats such as CSV, TXT, XML or HTML is a logical one. The argument doesn’t need to be made to this audience.

However, outside of these circles the argument still needs to be made.

So, Google, please give me some ammunition.

I’d love to use Google Spreadsheets as a more extensive repository for online datasets but will ultimately need to evidence that it actually can work for users. Adding support for tracking published spreadsheets in Analytics will help in making the case.

A published Google Doc is one that you have chosen to openly share with anyone on the web.

To switch on tracking of your published Docs, go into your Google Docs account, choose Settings then the Editing tab.

Select the checkbox next to Use Google Analytics to track the number of visits to your published documents and paste in your Google Analytics tracking code (here’s the tip on how to find your tracking code):

Views of all documents published from this account will now appear in your Analytics reports.

How to publish a document

To publish a Google Doc, go to Share > Publish as a web page:

Next choose Publish document:

Limitations

Note that this feature currently tracks published documents only. At the time of writing, tracking isn’t available for spreadsheets or presentations.