As part of Ubuntu Accomplishments you can read information about each accomplishment to find out more about how to participate. This is an important piece of the system: being able to provide useful, discoverable information to our community.

It looks a little like this:

The goal is to create in-depth help and guidance for a variety of ways of participating in the community and elsewhere.

As you can see, with my feeble CSS skills, I have tried to make this use the Ubuntu brand guidelines, but I think there is a lot more opportunity for improvement.

As many others do, I believe that the attention to detail and small refinements help deliver really enjoyable experiences, so I am keen to ensure that the presentation of this content is comfortable, informative, and pleasurable to read.

This information is presented in the application in an embedded webkit widget, and I wanted to reach out and ask the web designers among you if you can help provide a stylesheet (and any recommended HTML changes) to make this look better, more attractive and closer to the look of ubuntu.com. I really want the information includes to look truly native on Ubuntu.

Some thoughts on areas of improvement:

  • My current design doesn’t really use any of the assets such as the dot patterns, pictograms etc (as an example, I think showing the dot pattern in the background would look better, and it would be cool if some pictograms were used next to the tops/pitfalls sections and possibly as bullet-points).
  • I am sure the font sizes and colors could use some adjustment.
  • The Tips and Tricks and Pitfalls table doesn’t have brand adherance whatsoever, so that definitely needs some work.
  • The structure of the page could be improved; if you want to propose a better means of laying out the content, feel free to experiment!

If you are a bit of a CSS guru and can make this look better and more like the Ubuntu brand guidelines you can download the zip file with an example HTML file and the CSS so you can play with it.

Some things to bear in mind while doing this:

  • Don’t assume that all sections are always there. As an example the Steps, Tips/Pitfalls, Help, and Links sections are all optional in the accomplishments, so they may not be present.
  • Assume that the page is going to be narrow and long (around 700px wide).
  • Feel free to include additional pictograms and imagery where appropriate (e.g. such as the dot patterns for the background, pictogram icons for the tips/pitfalls sections etc).
  • The rendering widget this is all displayed in is Webkit GTK, so feel free to use webkit-specific CSS extensions.

If you create something and would like to propose it for inclusion, just drop me an email to jono AT ubuntu DOT com with a zip file with your improvements.

Also feel free to join the Ubuntu Accomplishments community mailing list and aks questions!


Pin It on Pinterest

Share This