ubuntu.com responsive‘. The front end framework that powers www.ubuntu.com represents the visual evolution of the site over the past few years: designs have become cleaner, lighter and…" /> ubuntu.com responsive‘. The front end framework that powers www.ubuntu.com represents the visual evolution of the site over the past few years: designs have become cleaner, lighter and…" />
This post is part of the series ‘Making ubuntu.com responsive‘.
The front end framework that powers www.ubuntu.com represents the visual evolution of the site over the past few years: designs have become cleaner, lighter and more open. It was designed without responsiveness in mind, but it has proven flexible, robust and great for our needs: user experience designers can quickly create wireframes for new and updated pages based on existing patterns and developers can create new pages that look good with little input from designers.
Web style guide front page.
Even though the framework uses a fixed-width container to wrap the content, the containers within it were built to percentages, which means that if that surrounding container were to be removed, the site would become fluid.
One page of the current site without a wrapping container.
We didn’t want to lose the work that has been put into this style guide. After a long discussion, we agreed that even though we were going to convert the CSS powering the site into mobile-first — so the media queries would be added for larger screen sizes instead of the other way around —, we were going to keep the desktop version as it was initially defined in the style guide.
This is likely a restriction that many other teams share: where there is a will and need to make an existing site responsive, but no budget and/or resources to start from scratch.
We decided that it would be a good idea if our developers, Anthony, Graham, and Karl, could sit in a room for a few days and create a ‘quick and dirty’ prototype of what our current site, using the current styles, would look like in a responsive world.
The main goals of this exercise were:
We created a Google doc, structured in the same way as our style guide, where we laid out some rules that would get the developers started on the prototype.
The document started with the more broad and general rules:
We then laid out some scaffolding (layout and grid) rules:
We then moved on to forms rules:
And tables rules:
Many of our styles didn’t need changing at this stage and this was all written down in the doc too.
We also knew that, at this point, we couldn’t look into trickier problems such as the navigation, the typographic scale or how our multiple footers would play in a small screen, so we decided to leave this for later.
Navigation and multiple footers were too complex an issue to be solved at this early stage.
Now it was time for the developers, with this doc in hand, to take a first go at making www.ubuntu.com responsive!
Read the next post in this series: “Making ubuntu.com responsive: making the rules a reality”
Interested in running Ubuntu Desktop in your organisation?
Updating the design of the Ubuntu Releases website using Vanilla Framework
Welcome to the latest work and updates from the design and web team. Web squad Three new homepage takeovers This iteration we designed three, built two and are showing one new homepage takeover. Branded snap appstores is live Broadsign and…
A month ago, we published our web and design team practices website, from the repository that we’ve been building up for nearly two years now. I’ll try to explain why I am so proud of it. Why practices? A strong team needs…