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?
It was another busy iteration for the web and design team, trying to get a lot of work wrapped up before we head off to Lyon, France for our 19.10 Roadmap cycle kick-off.
Hands up if you or someone in your team work remotely. I am sure there are many of you out there. One of the biggest growing trends, since I started working in the technology industry 15 years ago, is how common and accessible working from…
This was a busy two weeks for the Web & Design team at Canonical. Many of the things we worked on will be completed in the next iteration, but here are some of the highlights of our completed work. Snapcraft.io New JetBrains publisher…