Making ubuntu.com responsive: lessons learned (5)

This post is part of the series ‘Making ubuntu.com responsive‘.

At this point in time, once the pilot projects were either completed or underway, we had already:

• Created an initial responsive prototype of our main site, based on some common-sense rules
• Started our first mobile-first and responsive project from scratch
• Created and launched a fully responsive site

We had a better understanding of what was involved in working on this type of project, with different constraints and work flows. With lots of ideas and questions floating in our minds, we decided that the best next step was for designers and front-end developers to spend two or three days right after the release of the new canonical.com website to discuss and capture the findings.

It’s important to take time to take in the pros and cons of certain approaches we try as a team, so that we can try to avoid repeating past mistakes and keep doing more of the things that make projects run smoothly and produce great results.

Things we learned

Make sure you have a solid grid

Our new responsive grid seemed to adapt well from large to small screens (I will be publishing a post on this later in the series, so stay tuned!) and this was mostly because when we initially created the CSS and HTML we opted for using percentage and relative units rather than absolute units (like pixels).

Use Modernizr for feature detection

The introduction of Modernizr to our developer tools proved essential to easily detect features across browsers, such as SVG support, and provide adequate fallbacks and is something we’ll keep using in the future.

SVG icons and pictograms

We started the move from bitmap-based images to SVG for things like pictograms and UI elements. This was easy from a design perspective, as all of our icons and pictograms are already created as SVGs (as well as other formats). There were some hiccups when we tested the PNG fallback solution in some operating systems and browsers, like Opera Mini. But more on this in an upcoming post dedicated to images!

Things we had to work on

Defining visual layout across screen sizes

We were used to creating large, desktop-focused visuals and we had the tools to do so quickly — our style guide. Because the deadlines were looming, we decided we wouldn’t create lots of different mockups for each page in canonical.com and instead create flat mockups for large screen and work alongside the developers on how that would scale and flow in small and medium sized screens.

The wireframes were kept as linear as possible — they were more of a content and hierarchy overview to guide the visual designers — , and the content was produced so that it wasn’t too long for small screens.

The problem with this approach was that, even though we all agreed with the general ways in which the content and visual elements would reflow from small to large screens, by creating comps for the large screen problems invariably arose and reflows that sounded great in our own minds didn’t really work as easily or smoothly as we thought.

It’s important that you define how you’re going to tackle this issue: in this case, canonical.com was designed from scratch, so it was more difficult to visualise how a large design could adapt to a small screen across the team. In the case of ubuntu.com, though, the tight scope means we’re adapting existing designs, so it makes sense to work almost exclusively in the browser and test it at the same time.

In the future, when we need to produce mockups we will make sure they are created initially for smaller screens and then for larger screens. When mockups aren’t necessary — for example, if we’re creating pages based on existing patterns — we are already building directly in code, for small screens first, and enhancements are added as the available screen space gets bigger.

Animations

Even though the addition of CSS animations to our repertoire made for more interesting pages, making sure that they are designed to work well and look good across different screen sizes proved harder than expected.

In the future, we’ll need to carefully think about how having (or not having) an animation impacts small screens, how the animation should work from small to large screens, and what the fallback(s) should be, instead of assuming that the developers can simply rescale them.

The process going forward

As a final note, it’s important to mention that in a fast-paced project, where decisions need to be made quickly and several people are involved in the project, you should keep a register of those decisions in a central location, where everyone can access them. This could be anything from a solution for a bug to even the decision of not fixing an issue, along with the reasoning behind it.

Read the next post in this series: “Making ubuntu.com responsive: scoping the work”