Making responsive

Responsive Web Design is a methodology for designing web sites that can adapt to a range of screen sizes and device types. I’ve personally been a fan of responsive design for a long time, following people like Jeremy Keith, Ethan Marcotte and Luke Wroblewski. I also think, that in many cases, there shouldn’t be a separate mobile site or separate mobile content. Because of all this it seemed obvious that our new site would also be responsive and work with wide range of devices/screen sizes.

Usually, when designing responsive layout, it’s easier to design a content heavy site without much functionality. But with a site like the new which has more functionality, it can be more challenging.

Of course I could have just dumbed down the content of the desktop version to make the process easier, but that would be against my own paradigms. Also assuming that the mobile users are in a completely different context than the desktop users, or assuming that they have only one context, is just arrogant. It can also be annoying for the user if a feature he wants isn’t included in the mobile version.

Sometimes there might be a clear need for more separate mobile site, but this wasn’t the case now anyway. One thing to keep on mind though is that this approach only solves the viewport problem.

“The primary design principle underlying the Web’s usefulness and growth is universality. When you make a link, you can link to anything. And it should be accessible from any kind of hardware that can connect to the Internet: stationary or mobile, small screen or large.”

- Tim Berners-Lee

"Just as we generated a mythical desktop user with the perfect viewport size, a fast connection and an infinite supply of attention, we have now generated a mythical mobile user who has a single goal and no attention span.

More and more people are using mobile devices as a primary means of accessing the web. The number is already huge and it’s increasing every day. I don’t think they’re all using their devices just to look up the opening times of restaurants. They are looking for the same breadth and richness of experience that they’ve come to expect from the web on other devices.

Hence the frustration with mobile-optimised sites that remove content that’s available on the desktop-optimised version.”

– Jeremy Keith

The Process

I usually tend to start on paper doing sketching & wireframes and after that jump to Photoshop or to a Web Browser to test and mockup my ideas. This time the process were a bit different. I had a quite clear vision on my mind and I started executing it straight in the browser, doing most of the design work there with CSS3. Occasionally I jumped to Photoshop, for example, to do the background of the site.

After finishing the 940px wide design and most of the JavaScripts I started implementing CSS @media queries to add the responsiveness. I ended up using six breakpoints to trigger the media queries. Those were respectively 970, 840, 740, 600, 480 and 320.

While writing the CSS I have usually several different browsers open and also iPhone & iPad on the desk showing my localhost. On my Mac I have iOS simulator, Opera Mobile simulator and Android simulator in addition to the native browsers. I do most of the previewing in Desktop Safari and use the Webkit’s inspector and at times make sure that it looks like it should in Opera Mini for example. Depending on the case I might also make sure that everything works with Nokia’s and other manufacturers phones.

One interesting design aspect of the site is, that the sticky main navigation jumps to the bottom of the page when viewing on smaller widths and a “Skip to site navigation” link is displayed on top. Same kind of approach is used on Mobilism 2011 site. Ended up using that approach mainly because the navigation would’ve otherwise filled up the whole screen of small device and I prefer more "content first" approach.

Difficulties with fluid design

One tricky part was the work section. There’s a JavaScript slideshow for every work and they open inline inside the same section. The slides in the slideshow have one image per slide and the browser loads those images only after user has clicked a link. That’s really where the tricky part begins - Everything should be fluid. At first I thought I’d just write here how this problem is solved, but I ended up doing a second blog post about that. you can find it here: Responsive jQuery slideshow

Other techniques used

First thing worth mentioning is a JavaScript plugin called FitText. It makes font-sizes flexible, which means that you can achieve scalable headlines that fill the width of a parent element. Another great JavaScript plugin is jQuery Waypoints, which makes it easy to execute a function whenever you scroll to an element. It’s used for the navigation, highlighting and scrolling.

The site is also made so that you can add it to your iPhone’s home screen and use it like a native application. This is done by adding few meta tags to the page head and thus removing Safari components, customizing the default status bar style and adding an icon for the site.

Further reading and references:

// Viljami, @viljamis on Twitter