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?
One of the things we’re currently working on in the web and design team is a page about writing Git commit messages for our team practices website (I hope to write more about the practices website itself in the coming days). As part…
Welcome to the latest work and updates from the design and web team. Web squad Takeovers In collaboration with the marketing team, we have produced three takeovers Apellix webinar: Discover how Apellix has designed revolutionary software…
Snappy Whitelist/ Blacklist territories for your snaps We’ve recently implemented the ability to include or exclude your Snap in certain territories. This functionality has been ported to improve the publisher experience on…