The days when people viewed the internet through only a few sizes of screen are long ago. That's a pity because designing websites for just a few screen sizes was easy. Now Responsive Web Design (RWD) can not be ignored. Pixel perfection is less of a concern as we do not know what device our website viewers will be using.
Smart phones and tablets are becoming the primary way to use the internet for some people. I've written about RWD before but it's an important topic in today's wired world.
No longer in control
I know that I'm no longer in full control of what visitors to a website will see and that truth comes as a surprise to some clients. Hours trying to decide whether a feature should be one pixel to the left or right is time wasted more than ever and in this situation I always try to direct the client away from micro detail to the goals of the project.
To understand the variety of viewing devices used by website users, I've taken a look at screen resolutions in use over a 2 year period from from the Statcounter analytics website. In total there were 215 resolutions, representing a massive array of devices being used to browse the internet, and these have either grown in use or faded away.
Wire frames and prototyping
With the explosion in number of screens sizes to design for, the job of the website designer has been changed right down to the discovery and design phase with the client.
I sometimes work with wire frames, drawing line pictures on pieces of paper to show the rough design. But what happens if that paper is turned from landscape orientation to portrait? Obviously the drawing is not going to adapt to the new orientation and it makes it difficult to describe to the client what the page will look like. Some areas may need to move to specific parts of the page or not even need to show on a small screen.
Obviously some kind of prototyping is needed after the initial drawings. A prototype is an early sample or model built to test a concept. There are numerous applications that can be used for this but with frameworks such as Bootstrap I have a collection of ready made front end tools for creating websites. These ready made tools allow for rapid development of ideas and provide a visual representation of the design. Because this will also be in a browser it will allow a product owner to see how the screen will behave when viewed in different devices.
This is a method of development that is characterized by the division of tasks into short phases of work and frequent reassessment and adaptation of plans. In other words, I work with the client to understand what they need, and deliver it in chunks, with each chunk being a meaningful, fully working piece of software.
There are a multitude of devices being used to browse the internet and the job of the website designer is to provide a great looking website which will look good no matter what device is being used. This great variation in devices mean that a website designer is in fact designing several website and this complicates the creative process when trying to describe the design to the client. Pen and paper is a good place to start for sketching out ideas but a prototype conveys much more.
A prototype will allow the client to see how the website will look on screen and to see how it behaves when viewed in different devices. The danger when doing this is that a client will often think the project is further along than it actually is and the website designer should be clear that it is for concept only. Often it is the equivalent to just looking at an empty box.