Establishing An Open Device Lab

I wrote an article to Smashing Magazine. It’s an in-depth guide about how to establish an open device lab. The article gives practical tips about things like location, how to get devices, what devices to get and what software to use. It would not have been possible to write it without the help from Shaun Dunne, Jeremy Keith, David Blooman and Andre Jay Meissner. Thank you guys, I owe you one.

Continue reading

Helsinki Open Device Lab

If you’ve been building websites during the past two years you must know that the web doesn’t live on a desk anymore. The reality is that we now need to test our work on multiple devices, instead of just few desktop browsers. All this is easier said than done. It's easy when you have a dozen devices laying on the desk in front of you, but what about the rest of us? Devices are expensive and the landscape is ever expanding.

That is the reason why we decided to set up an open device lab to Kisko’s office. ‘Open’ meaning that anyone can pop round, use the devices freely and contribute by lending their old devices to us. The list isn’t very long yet, but it will grow over time. I am also planning to contact few device manufacturers to help us out here.

Joni Korpi and I are leaving our spare devices at the office for testing purposes and we are hoping to see others to contribute too. Kisko Labs is also—in addition to the space—giving four devices for testing purposes. If you’ve got an old mobile device which you aren’t using anymore and it’s just gathering dust, then why not lend it to our lab. The device will of course remain yours all the time, and you can take it back whenever you want.

Continue reading

Responsive Workflow

During the last week I was at the Webshaped conference listening Stephen Hay’s talk about responsive design workflow. This post isn’t going to be strictly about that, but as Stephen’s way reminded somewhat the way I work myself, it made me want to write down some thoughts about my workflow and how it has evolved during the past two or three years and how it might still evolve in the future.

About three or four years ago—when I mostly did just static width sites—my projects went through the different phases in the order illustrated below, which looks like a typical waterfall process. Back then there wasn’t much room for revisions, and what clients saw were either the wireframes or almost finished Photoshop designs.

Printing Machine Old workflow

That model kind of used to work back then, but now there’s just one problem. Waterfall model doesn’t make that much sense when combined with responsive design. Actually it wasn’t ever very optimal way to do web design, but as I and everyone around me were so used to delivering things in that specific order we never really tried to challenge that.

Continue reading

Modular Grids

Couple months ago while I were designing a website I remembered a technique I had long forgotten. I used to use this technique before I moved from print design to web design about eight years ago and it was, for me, an essential way to utilize modular grids better. Grids in design are kind of like the scales in music. They give you a way to anchor your layout elements and typography to a certain rhythm.

What is a modular grid #

A modular grid is a grid which has consistent horizontal divisions from top to bottom in addition to vertical divisions from left to right. Modular grids are created by positioning horizontal guidelines in relation to a baseline grid that governs the whole document. Baseline grids serve to anchor all (or nearly all) layout elements to a common rhythm. [1]

Modular grid

Continue reading

Extending CSS With Sass

CSS is designed primarily to enable the separation of content from presentation, including elements such as the layout, colors, and fonts. This separation improves content accessibility and provides more flexibility and control over the presentation. CSS is quite flexible language on its own, but as websites become more and more complex we sometimes need to have more control.

I’m using Sass to extend the basic behavior of CSS and this post is mostly about some basic things I’m using. I’ll also assume that you know something about Sass already and that’s why I won’t dive deep into what it actually is. If you are running OS X, you can get Sass up and running using these two commands below. The first one installs Sass Ruby gem and the second one translates your .scss file into a .css file.

Continue reading

Scaling with EM units

Recently I started testing how proportional scaling of bigger layouts would work in reality and if it makes any sense. It’s possible when using EM units and then changing body’s font-size when viewport’s height grows above certain point. Basically that means, that I have to change only one or two css properties between @media queries which are targeting larger screen sizes.

The reason why I started doing this, is that I wanted to rethink my current approach to responsive design and try something which would make the process at least a bit easier.

Warning: You’ll need to view my demo on at least 24" or 27" monitor with 1920×1200 resolution or bigger. Otherwise you won’t see this method in full effect and it might be harder to understand the benefits.

Demo viewed on 27" and 15" screens:

Continue reading

Adaptive vs Responsive, What’s The Difference?

There seems to be some confusion about these terms and what they mean, so here’s my thoughts on the subject and few links to back them up. I’m usually not very keen when it comes to debating over what something is called, but this time I wanted to make it clear, as I hear this question quite often.

Responsive design” is a subset of a larger concept which is called “Adaptive design.” When talking about responsive we refer to the layout only (Ethan Marcotte, fluid grids, flexible images & media queries).

Adaptive design” on the other hand includes much more than just fluid layout. In practice it means the same thing as progressive enhancement, which means in short, that we aim to deliver the best possible experience to the widest possible audience. Also: “Adaptive design” shouldn’t be mixed with “Adaptive layout” which is a completely different thing.

Continue reading