Our first experience with Mobile First and Responsive Web Design


After we published our first responsive website, many people asked us how we did it and how we approached the whole design process.
We thought about it and decided to share our experience by telling you how we started, what were the main goals and what we did in each step.

A site is about your users and your valuable content.

A political party’s website is all about valuable content: articles, posts, opinions, public acts. It all revolves around written opinionated content in the same way as news websites do.
While rethinking the Popular Democratic Party‘s website, we focused on the great importance articles have. People entering the site are interested in reading the contents and our job, as designers, is to help them have the best experience possible.
The previous website was conceived as a web portal: with lots of sections and sub-sections. We thought that this approach, although well structured, was overwhelming.
A blog-style structure was simpler, yet less complex, but far more immediate for the user: the party publishes an article and this appears right on top of the list. Simple as that. The site appears constantly updated and the focus is clearly on the articles, nothing more, nothing less.
The robust presence of the party on social networks such as Facebook and Twitter was an other point. The site had to become the institutional source of information, but it had to also reach out on each individual party’s social presence quickly and seamlessly, thus integrating sharing buttons, Facebook’s livestream box and Twitter’s latest tweets. For experienced web designer this is nothing new and is a standard already.

The idea that “Content is the king” lead us to also rethink the design process.
We also realized that in these last months sites are more and more accessed through mobile devices, thus a mobile friendly version of the site had to be considered.
We had to decide between a separate, server-side driven, approach or an integrated, mobile first – responsive, approach.
We went with the latter.

Presenting the visual layout.

We read a lot about how to approach the responsive web design and how to present it to our client. Our first attempt was to open up Photoshop and lay down each individual breakpoint (320px, 480px. 600px, 768px, 992px and 1280px and up). But we had to decide if beginning with the mobile first approach or go straight with a standard 960px layout and then adapt it to the smaller sizes.

The buzz about mobile first was inviting and we opted to begin with the smaller size and then scale upward.
Right before I read an interesting article by Upstatement, stating that Photoshop wasn’t the right tool, but InDesign was better since it’s ability to act on master pages and paragraphs and font-styles.
I must admit that it took us a while to get comfortable with InDesign: while in Photoshop we were used to immediately see what the final result would appear, in InDesign we had to constantly switch between the “editing” view and the print “preview” option, slowing down the whole design process. But since we already had our master layouts ready and our paragraphs and font-styles in place, however we wanted to bring the task to the end.

For certain aspects the experience with InDesign was good, but for us as designers the “pixel perfection” Photoshop offers is still invaluable and, until Adobe doesn’t integrate specific features for enabling a “web preview” in InDesign, we will stick with our old pal, Photoshop.

How many breakpoints?

Well, this goes hand in hand with the design. We liked the idea of “if it doesn’t break, don’t fix it” approach and thus we set our breakpoints whenever the design appearance started to seem “wrong”. For the PPD’s site we chose 320px, 600px, 768px and 992px. 4 breakpoints were enough for us.

Templating the html.

Two years ago we migrated all our technology towards LAMP, dropping .Net for the good. We found that WordPress was an excellent CMS and that it offered a lot of features, as well as the great possibility to customize the template and each functionality. We developed an hybrid-custom template based on Eddie Machado’s Bones (that we completely revised and personalized to our needs) and learned Less, an augmented-dynamic css language to style pages faster than ever.

So we set up our template and began to style the site with the mobile first approach: the 320px size was really a bare bone layout: almost no visual elements, but textual content. For each larger breakpoint we added some visual element and a few features such as the Facebook’s livestream box (which appears at 768px) and the Twitter’s stream box (which appears in the footer at 992px).
We thought that a mobile user would not care for the social boxes, but a desktop user would.

Final considerations and conclusions.

The redesigned website is a success: a lot of people gave the party a positive feedback, both for the new layout and the better user experience.
The site stats are showing, after a month the new site has launched, an increase for both visits and time spent on site.