One of the common points of resistance on the part of designers is the perceived lack of control. The concern is that if they can’t control with pixel-perfect accuracy the way something is displayed on the internet, then their design would be compromised or might simply not work. What can too easily be dismissed as control freakery can be logically traced right back to the days where print design was the dominant medium. Back then, designers could more or less control how people viewed their work, because it was in print. Everything from the font, colours, resolution and the material or substrate that it is printed on was under complete control of the designer within the constraints of the project’s budget. The reality now though is that with the internet none of these things can be controlled by the designer. Not one. They can be heavily influenced for sure, but never guaranteed.
Faced with the advent of the internet and subsequent decline of the print industry, designers simply took their work processes and applied them to the internet and at the time this made sense since there was no order to the internet at all, and this seemed like a good way of imposing it. This is why we still hear and work with print-related terminology that has been applied to the web (points, guttering, etc). But treating the web as if it is a screen version of a magazine or brochure does not really work very well.
As an example, consider a simple web design that consists of text only. As we know, that website can be viewed on any number of devices and viewports. Even if you were to create a fixed-width design, different devices will still render the website differently. If we attempt to create an identical experience on all devices then assumptions will have to be made – assumptions which will invariably be wrong for the majority of users, given the huge variety of viewing platforms and settings available. A Windows machine displays text slightly differently from a Mac, for example, because the text is rendered differently on each platform. There is an excellent article over on Smashing Magazine that discusses the detail of font rendering on different platforms, and differences exist even between browsers on the same operating system. And this is with so-called ‘web safe’ fonts! What about the exciting new world of web fonts from Google Fonts and Adobe Typekit, amongst others? (And I really mean it when I say exciting – RIP image replacement!). Just to confuse matters further, consider the wonderful new world of retina display which not only exists on mobile devices but now on laptops as well. The fact of the matter is that you cannot control the way users view even the most basic elements of your design on the web – so please stop trying.
What it all boils down to is content. On the internet, content is king. It is the lifeblood of the internet and links are the glue that holds it all together. Without either of these things, there is no internet. You could have the best website design in the world but without relevant content no one will care. So, if you design a website for a single use case (ie desktop display) so that it is fantastic in one situation but rubbish in all others, then you are cutting out a huge swathe of your potential audience. If you do not cater for the entire audience, then the website will fail. Your client will wonder why their Google ranking is number 537 and no one is buying stuff from them, signing up for their service, sharing their carefully crafted content or whatever it is that they have set out to do. So, in the end you do have to compromise somewhat. Accept a slightly simpler interface on smaller devices to cater for the 30% (or thereabouts) of the market that are currently using mobile, but keep the full-on-design-fest widescreen site for desktop devices. This way, you can still be your usual creative self, without denying a decent user experience to a large and growing segment of your audience.
And then there are clients. Some clients still cling to the notion that their website should look exactly the same on all devices and browsers. This pixel-perfect expectation has been largely created by the practice of showing clients Photoshop designs early on in the design process. They (quite reasonably) expect the end product to be the same. The answer to this is simply education, and ditching the reliance on Photoshop mockups in the development process.
So, how do we do this? How do we ditch Photoshop? After all, there is no ‘Photoshop in the Browser’. The solution is to not ditch Photoshop at all, but simply change the way it is used. Instead of the pixel-perfect mockups of yesteryear, we can use it to help develop a ‘Visual Language’. One way of doing this is with the use of ‘Style Tiles’ which are like visual snippets of design somewhere between a mood board and a fully-fledged mock-up. Think Dribbble but with your own design work – after all, everyone loves Dribbble, right? There is an excellent article about style tiles, complete with a handy .psd template for starting your own right here.
One of the common complaints about responsive web design is that the designs tend to be quite simple and minimal. Now, I’m not saying that simplicity is a bad thing (often it is a great thing), but I completely understand this. I believe there are two reasons for this approach:
- Necessity. The simple fact is, there is less screen real estate on mobile devices so some degree of simplicity is going to be necessary. This does not, however, mean that the widescreen experience should be similarly simplistic.
- At the moment, responsive web design is firmly in the domain of developers because the design process usually happens in the browser. Unfortunately, we all know what happens when developers are responsible for design.
So, based on the first reason we have established that design is still very important, and that it should not be left entirely up to non-design oriented developers to do the design work, as illustrated in the second point. Quite simply, designers need to be involved. This is why, irrespective of how things have been done in the past, designers and developers need to collaborate right from the start or it just won’t work. Communication is the name of the game here – and communication is where traditionally things have fallen down. A little ironic, considering the fact that the internet is the greatest communications technology ever invented in the history of the world.
Next up is how we can start to bridge the communications gap…