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 kiskolabs.com 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
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.
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
Other techniques used
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:
- Kisko Labs: Responsive jQuery slideshow
- Jeremy Keith: One Web
- Jeremy Keith: Context
- Ethan Marcotte: On being responsive
- A List Apart: Responsive Web Design
- Jason Things: More Responsive Design, Please
- Tim Kadlec: Responsive Web Design and Mobile Context
- Joaquin Lippincott: Stop! You are doing mobile wrong!
- Stephen Hay: There is no Mobile Web
- FitText: A plugin for inflating web type
- jQuery Waypoints
// Viljami, @viljamis on Twitter