After writing about the Defensive Web Design approach a few weeks ago, I thought of presenting you with another type of approach, called Open Web Design, and the challenges a designer encounters throughout the working process of a product developed with these considerations.
Open Web Design is another vital concept which can be called “preparation”, but it has a name of its own because it is widely used nowadays. A few years back we didn’t need to reckon about mobile phones, tablets and different screens, because there were not too many of them – or not at all. Well, the IT world has changed since then and now there are a bunch of screen sizes and platforms designers need to deliver for. Open Web Design is the concept of a website which should adapt to fit any device that chooses to show it. Not only mobile devices, but also stationery computers and tablets.
According to Ethan Marcotte, who wrote an fascinating book, Open Web Design after starting this whole concept, there are three parts to this kind of approach: a flexible grid, flexible images and media queries.
This means ancient fixed-width layouts do not fit the new web anymore and the way we work needs to be changed. This is why, today, we will review the most vital parts of the new approach and talk about each of them. As a designer, the faith of a project is always in your hands. You need to know how the layout will work and what Open Web Design means in order to be able to take on this approach.
Grid system and background images
The grid system used in magazines, for example, needs to be used in Open Web Designs as well. It is impossible to design with this approach without having a grid system. Now, in order for the layout to be flexible, you need to give the measurements in percent, not pixels. This means that a 50% width will always be half of the screen the website is shown on, regardless of its size. This is where flexible and open web design starts from.
If you wish to use background images, it is OK, but you will have to properly select the right one. Photographs, illustrations or any other images that can’t be tiled are not proper for fluid grid systems. Therefore do not use horizontal gradients either, because they do not scale well horizontally. The feel borders will also suffer and look quite appalling. If there is something you could use, then textures simple to tile are excellent, such as grunge, grain and so on.
Scale everything down
When you design with the open approach you have to scale everything down. This means the fixed-width approach you used until now has to disappear, exactly like the horizontal scroll. Instead, try to insert every information or web constituent in such a way that if you resize the browser width you will still be able to see every piece of information. With a flexible wrapper made in percent instead of pixels this is possible. Most of today’s webpages are not flexible and this hurts their chances of being properly shown on a mobile device.
Working in percent is the same as in pixels, there is not much of a variation and you don’t need to learn other properties or CSS selectors. Working in percent is also simpler, because it is quite clear what width: 100% means. Regardless of the dimensions of the screen, the mentioned div will always be at a maximum width. If instead of percent you would have had pixels, then regardless of how the huge the screen would be, the div will always be at 100 pixels. On an iPhone this is a lot. On my computer with a screen of 1600×900 resolution this is nothing. You see the variation? It is just more logic to work this way.
Consider the media queries
I am sure you all know what these media queries mean. But to clarify the concept of modules surpass, you can take a look at the following image.
This basically means that you have to consider the way your layout is going to be, by thinking of the platform you design for. The main problem on the internet today is that designers and developers do not reckon of more than the queries for desktop and, maybe, for iPad. Nobody thinks of the iPhone screen when designing a webpage for desktop use.
These modules need to be resized and went when an iPhone browses through them, therefore the design has to be flexible. By using the media queries properly this is possible. In the end of the article you will see a list of further resources and by conception those you will find out more about the media queries and how to use them. The main thought behind this concept is that the modules exchange their place and size based on the screen size that the website is shown on.
What to do now?
The reason behind the internet not having flexible designs is the designer’s lack of knowledge about this issue. Therefore I always believed a designer should also be able to code HTML & CSS, because by consequential all the potential problems, you can also design in such a way that you avoid them.
I hope that by conception this article the graphic designers will know there is a huge need of flexible layouts on the web nowadays, as this changes and will continue to exchange and grow for many years to come. With the addition of HTML5 and CSS3 coding flexible layouts just got a bit simpler, even if the new mark-up language is still in development and experts say it will always be, so we can’t count on it to be done too soon.
The amount of information given is also something to reckon about, because a desktop website should have way more information and elements than a website designed for portable devices. There are very many things to reckon about before going open on the web, but it is also therefore the internet grows and becomes more and more vital. With such a huge amount of decisions to take before even starting to design, it should be clear to everybody that designing open is a challenge for even the finest experts out there.