Thoughts on the responsive web process

5. juni 2013 /// /// In English, Prosess, Webdesign

It’s been 2 years since the way I work with websites as designer and web developer got revolutionized. Responsive web design took me by storm, and it became a competitive advantage to know in an industry where being up-to-date is essential.

I’m enthusiastic about responsive web design not because it’s trendy but because I think it’s how websites should be created!

responsive-web-process-thumb

Why responsive?

Internet users from phones and tablets are becoming more common than users from regular computers. That means you should have a website that adapts. Your website travels across the network to unknown browsers and devices. Internet has neither fixed width or fixed boundaries, and it’s a fact that new devices appears all the time.

The term «responsive» has been around on the internet for quite some time already, in the brief history of the internet. Long enough that we should rethink our old work processes regarding websites. Responsive websites demands a different work process from traditional websites, and requires some innovation. The work process is important for all parts involved; client, designer, developer, copywriter and project leader – and the process is important to the final result!

Alternatives to the responsiveness

Within the concept of mobile-friendly websites, there are several possible solutions. Responsive is only one of them. A competing and in my opinion worse solution than responsive, is developing a separate mobile version and in some cases adding a separate iPad version. Others go to the extreme of developing an app – which only may be appropriate in cases where it adds something new and not replacing a regular website.

I have many arguments against separate mobile versions of websites. In this context, the main argument; the process.

 

The time and costs the client saves by going for a responsive solution rather than separate solutions makes a huge difference.

 

For many companies, however, the reality is that it is out of question to do something with the current website («it’s only two years old and cost a fortune«), but it is important to get it mobile friendly in a hurry. As is often the solution to leave the current website as it is, and develop a separate simplified mobile version. One of the problems with this solution is URLs. You end up with different URLs for the same content and must use «browser sniffing», also called «device detection» to determine the url to be shown to the visitor. It’s a concept that, with the current flow of new handheld devices, is unreliable, and you will end up only taking into account the majority of devices.

I’m no certified search engine expert, but when I go about recommending responsive websites rather than custom versions for different devices, there is every reason to believe that responsive sites are better search engine optimized. This assumption is based on the link value not being distributed to several different URLs.

Another problem with mobile friendly websites is that one is left with two solutions to be maintained. If your business has been really unlucky, it has bought a solution where there’s also two sets of databases of almost similar content to be maintained.

 

In the long run, your business benefits from taking the leap and pursue a future friendly, responsive website.

 

In some cases, the existing website can be made responsive by simple means.

 

Traditional web processes

As a professional web developer has consciously (and sometimes unconsciously) followed a process. In a traditional web process the design part of the job is finished when the client has approved the design and the developer has taken over and started coding.

 

  •  PLAN
  •  DESIGN
  •  DEVELOP
  •  DEPLOY

 

Responsive web processes

One can try to stick to the traditional web process in dealing with responsive web pages, but in reality you will see the need to break it. Developing a responsive website requires that the whole team works closely together regarding design, content, development, testing, redesign and refining.

 

  •  PLAN
  • DESIGN
  • and
  • DEVELOP
  • combined and repeated 
  •  DEPLOY

 

Traditional design and development teams needs to restructure in order to deliver responsive sites. Static Photoshop files are no longer enough to explain a responsive context. Think of all the aspects of a website a static design can’t explain. All the possibilities and misperceptions this forms the basis for. For example:

 

  • Browsers and devices differs, in such as CSS3 capabilities and rendering of fonts
  • The effect of liquid layout
  • Animations, transitions and loading of items.

 

Static design can give the client an erroneous impression and make the process inefficient; the developer misunderstanding designer. This does not mean that it is best to design directly in a browser, it just means that we need to develop and design interchangeably.

 

There is a common perception among clients that their website should be pixel perfect in every browser and on any device. Today’s reality is that a website does not look exactly the same in all browsers, it will not and should not look the same on all devices.

 

Another aspect that makes a process like this useful, is that there is often a lot of back-end functionality to be developed for a website. Member functionality, online store solution and user interactivity makes websites look more and more like what we call web applications, which requires to the design flow of how the user moves from page to page on the website.

 

Involving the client in the responsive web process

As a designer, developer or part of a web design team you are involved with creating websites daily.

 

It’s easy to forget that the client this is perhaps only involved with building a new website every half-decade, and very possibly the first time they get professional help for a website.

 

So, make the web project pleasant and exciting for the customer as well. Consult, explain and include the client in the project! You are the professional that the client has hired, but remember that the client is the professional who their clients again are hiring. Your client knows their products / services and know their customers best.

 

Let the client know that you want the best for their business, and involve them web process.

 

If you send a static design to the client, you should make time to explain to all the aspects the static design does not show. Do expect constructive criticism in return if you email a picture of the web design to the client asking what they think, without providing guidelines for what you want feedback on. The client will bewildered propose amendments just to have something to say.

If you send a dynamic design to the client, there is less room for misunderstandings and surprises. It sets the right expectations. The client agrees to browser differences more easily, and is aware that the rounded corners are not necessarily round in Internet Explorer 8. You won’t have to insert a javascript for rounded corners to make the client happy, because you never sold rounded corners in Internet Explorer 8.

 

What do I mean by dynamic design?

A very good way to design in a responsive web process is to design styleselements and atmosphere (as typography, color and texture) and all the fine details. Sketches and interactive clickable wireframes has probably already been done (or should have been done AND approved by the client) anyway.

An efficient responsive design process makes web project cheaper for the client and less time consuming for you.

 

Some tips to help the designer making the process even more efficient:

  1. Let the developer take a look at your design often. Ask for advice if you are wondering technical possibilities. If you are lucky (or nerdy, like me) you are both designer and web developer yourself.
  2. Do not wait  until several weeks of photoshopping before «revealing» the fully responsive web design to the client. This will cost you a lot of frustration, unless you are extremely lucky. Do rather work closely with the client and receive feedback on the design often.

To the point

The term «websites» is in the process of becoming such a huge field of profession that it requires expertise across several professions closely related. It’s almost, just almost I guess, impossible for a single performer to be a specialist in all areas.

This also makes it harder and harder to be a purchaser of websites and make the best choices.