pebble.it site redesign
Recently I was asked to design a new site for our awesome sister company pebble.it. Rather than write a blog post going through the entire process I’ve decided to just talk about a few key points within the development for the new pebble.it site. A lot of development ideas were carried over from the pebblecode.com design, I wrote a blog post about that process here which is a good preface to this post.
The concept
After getting the brief from Paul (MD of pebble.it) I came to him with a few high level ideas for the site. I showed Paul some research I had done on the “international typographic style” also know as the “Swiss style” such as the work of Josef Muller Brockmann. We both really liked this style and talked about how we could use it for the website. This was the to be the main inspiration for the site. Hopefully you can see the influence of this style within the site. For example the heavy use of Helvetica and use of a single color. However as the site progressed the site became a lot less rigid than you would typically find within the “Swiss style”.
Mobile first
Luke Wroblewski first proposed the idea of “mobile first design” back in 2009. Since then the idea has been gaining more and more traction within the web development community. When I re-designed the pebblecode.com site I didn’t take this approach, after having read a lot of praise for the idea I decided I would try and take a mobile first approach to designing pebbleit.com.
After having tried it I’m fairly confident that mobile first is the best way to go about designing a responsive web site. From a design point of view it’s much easier to expand a smaller design into a larger area than it is to to the opposite (and probably gives better results). More importantly I think going “mobile first” helped us to really refine the content and kept our focus on the core features of the site.
Designing in browser
More and more I’ve been designing “in browser”. I’m always starting with sketches or illustrator mock ups but I’m finding I’m making more and more design decision in the browser and doing all most all of the detail work in CSS rather than copying from flat documents. There are a few reasons why I’m using this approach more and more but the one that stuck out on this project was the ease of getting instant feedback. Illustrator or Photoshop Documents are fine for getting an idea across but they have a few drawbacks.
- Not everyone can open .psd or .ai files. And most people can’t edit them.
- They don’t show any interactive elements. For example hover states.
- You need to create multiple files for mobile & desktop versions.
- These files can be large and therefore awkward to send.
Working directly in HTML & CSS takes out a lot of these headaches and can really speed up feedback.
Organizing Sass
Whilst working on the pebble {code} site we mainly used classes applied to the <body> tag and Sass’s nesting feature to organize our code. Something that looked a bit like this.
.page-products{
.row{
margin-top: 22px;
margin-bottom: 36px;
.columns6{
margin-left: 0;
p {
margin-top: 22px;
}
}
}
.vistazo{
.img{
background-color: blue;
background-image: url("/images/vistazo.jpg");
}
a{
color: blue;
}
}
.open-source{
.columns6 {
margin-left: 0;
}
p{
margin-top: 22px;
margin-bottom: 0;
}
}
}
Now this works but it dose create a couple problems. Firstly it produces very inefficient CSS. For example the .vistazo and open-source classes are unique and doesn’t require nesting, using nesting in this way created unnecessary CSS. Secondly its very difficult to pick out the start and end of sections visually means you spend longer searching for the rules you want to edit.
With the pebble.it Sass I used a different style of organization. This method has been tweaked from and idea in this post by Harry Roberts (skip to “Section titles” for the idea I’m discussing). So my new organizational style would look more like this looks.
// ==========================================================
// §PAGE-PRODUCTS
// ==========================================================
.page-products{
.row{
margin-top: 22px;
margin-bottom: 36px;
.columns6{
margin-left: 0;
p {
margin-top: 22px;
}
}
}
}
.vistazo{
.img{
background-color: blue;
background-image: url("/images/vistazo.jpg");
}
a{
color: blue;
}
}
.open-source{
.columns6 {
margin-left: 0;
}
p{
margin-top: 22px;
margin-bottom: 0;
}
}
// ==========================================================
Not a huge difference, but it produces much cleaner CSS and it’s a lost easier to visually distinguish sections when looking through the code. Also worth mentioning is that in Harry’s article he suggests using $ for section headers to make searching in your text editor a little easier, Sass uses $ to declare variables so I’m using § to avoid conflicts.
The new pebble.it site was a really fun project to work on and I’m really happy with the result. Even better along the way I’ve discovered a few new tricks and tactics that are going to make it into my daily toolbox.
