Index

In Depth

p.7

Be responsive

Be responsive

Design for print media is static. When a design is printed it will always be the same format, and it looks and feels the same to everyone, no matter where and when and how you view it. You know your design will be millimeter perfect. But is this really perfect?

The Guardian


The Guardian, 2008

Newspapers have always been large format prints, relying on typographic excellence. Great for having large amounts of content on small space, and a great reading experience at home in your favorite chair – viewing large images over a big spread right in front of your eyes. In other words: not a great reading experience when you are on your way to work, and just want to digest the main headlines. Printed designs doesn’t adapt to your current situation, they don’t adapt to the setting they are viewed in. Websites doesn’t do it either – in a traditional perspective, there is. On your smartphones' 4 inch screen everything is teeny-tiny on a normal website, of course. But last year, a true revolution happened in the field of design – CSS3 and media queries. Technical yes, but this technology was created because designers demanded better control over their designs on the web. With these new techniques, it’s one single website that adapts itself to the resolution it’s viewed in. All the way from your desktop computer, through tablets, and down to smartphones. The best part? You design and use the same code as before – with a twist.

The Boston Globe


BostonGlobe.com – A newspaper that responds to the user's situation!

The principles of responsive web design are built on classic fluid layouts, where you define the measurements in percent, and not in static pixels. Code wise pretty simple, design wise it can feel a little challenging. Suddenly you can’t just set up your design as a static sketch in Photoshop, you have to take into account that the design must respond and adapt to different viewing conditions. Your design must be responsive, and be designed after the “user first” mantra.

Why is this so important? Mobile browsing is expected to outpace desktop browsing in the next three to five years, and the demand from clients to have an iPhone-version are rapidly increasing. Sometime in the near future, a mobile adapted version of your website will be as natural as having a website at all. This leads to the principle of “Mobile first”, where you start to design for the smallest screen, and expand as you go up in resolution. Surely this requires a quite different way of thinking design, but for some projects this will be the way to ensure a good process, and a great website ensuring a tailored reading experience for the users.

You must adapt your mindset as well

In today’s reality, you have to understand the basics, limitations and possibilities to design for the web. If not, you will only deliver the traditional static web designs as you are used to. There is no point of putting a “print design” on the internet – that is not web design.

Kim Andre Ottesen