ARTICLE

Web Design Help Needed

by | Mon 12 Mar 2012

As part of [Ubuntu Accomplishments](https://wiki.ubuntu.com/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](https://design.canonical.com/the-toolkit/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](https://www.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](https://design.canonical.com/the-toolkit/ubuntu-brand-guidelines/) you can **[download the zip file](https://ubuntuone.com/5CJAe4kVECr94bwUFYV4Rn)** 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](https://launchpad.net/~ubuntu-accomplishments-contributors) and aks questions!

Thanks!

An invitation-only accelerator that develops industry-leading community engagement and growth via personalized training, coaching, and accountability...all tailored to your company's needs.

Want to read some more?

Happy Holidays

Happy Holidays

Just a quick note to wish all of you a happy, restful, and peaceful holidays, however and whoever you spend it with. Take care, folks, and I look forward to seeing you in 2015!

The Impact of One Person

The Impact of One Person

I am 35 years old and *people* never cease to surprise me. My trip home from Los Angeles today was a good example of this. It was a tortuous affair that should have been a quick hop from LA to Oakland, popping on BArt, and then getting home for a cup of tea and an...

Feedback Requested: Great Examples of Community

Feedback Requested: Great Examples of Community

Folks, I need to ask for some help. Like many, I have some go-to examples of great communities. This includes Wikipedia, OpenStreetmap, Ubuntu, Debian, Linux, and others. Many of these are software related, many of them are Open Source. I would like to ask your...

Ubuntu Governance Reboot: Five Proposals

Ubuntu Governance Reboot: Five Proposals

Sorry, this is *long*, but hang in there. A little while back I wrote [a blog post](https://archivedblog.jonobacon.com/2014/11/14/ubuntu-governance-reboot/) that seemed to inspire some people and ruffle the feathers of some others. It was designed as a...

Ubuntu Governance: Reboot?

Ubuntu Governance: Reboot?

For many years Ubuntu has had a comprehensive governance structure. At the top of the tree are the Community Council (community policy) and the Technical Board (technical policy). Below those boards are sub-councils such as the IRC, Forum, and LoCo councils, and...

Dealing With Disrespect: The Video

Dealing With Disrespect: The Video

A while back I wrote and released a free e-book called [Dealing With Disrespect](https://www.dealingwithdisrespect.com/). It is a book that provides a short, simple to read, free guide for handling personalized, mean-spirited, disrespectful, and in some cases,...