In the old days of the web we designed sites to fit specific resolutions. If the user had a larger or smaller screen they just had to live with it. As the web evolved and mainly when mobile devices came into everyday’s life, web site owners had to come up with solutions that would fit the mobile experience as well. Many sites created two versions of their site: A standard size and a minified version. This solution was the common practice for many years, in the last few years with the explosion of various media devices and resolutions, this solution just doesn’t fit no longer.
How we got to responsive design?
CSS has enabled us to separate between our design and the structure of the HTML site. Modern websites avoid placing CSS rules directly inside of an HTML page and instead keep the rules in external files. With the separation of the styling from the actual content of the page the capability to create different designs for the same content was born. A problem was still around the capability to define when one design would work over another – with the introduction of Media Queries in CSS2 this problem was about to be solved.
With new tools and capabilities in web browsers through the updates in CSS2 and CSS3 designs no longer need to be set for a static size (actually it is best to design relatively nowadays). So what types of design exist:
Static Web Design:
The good old web is full of static design sites. They target a resolution and make a design that fit that resolution. Most of the old web was one design set to a specific resolution. Static websites have been around since the early days of the web and they seem like they will be around for a long time. While google is starting to “punish” sites that are static as they usually don’t look well on mobile devices or devices with small monitors. Most hand held devices force a resize of sizes making their fonts not legible – and making everything really small and unfriendly.
When should you use static web design? If your reading this article now, the answer is never. Build designs that would work for mobile and desktop. While you might opt for Adaptive web design (as it might be easier to create) the overall recommendation of professionals in the industry is to stick to responsive web design.
Adaptive Web Design:
Adaptive web design is a step above static web design as it’s a design that adopts to the users device. The idea behind is to create a few designs and match designs to users. (mobile, desktop and such). In other words the designer designs for a set of pre-defined resolutions and serves these designs up based on the user type/device type.
When should you use this strategy? If you already have a designed site and can’t afford to redesign the full site this can be an easier modification to update your site to fit to mobile designs. Usually it is best to first design for mobile and then design up, that is because it’s much harder to figure out what to remove from a design than it is how to format it. In a case, when you already have a site and can’t go through a full redesign this solution can be very fitting.
Liquid design moves away from static definition of pages and instead focuses on relative sizes. Website that follow the liquid principles adopt to the user as they resize their browser. The design would then react to the user. The design is not fundamentally changed but instead is designed relatively using relative values such as 20% instead of hard set pixels. As such a responsive design is by nature usually liquid as well(but not the other way around).
When should you use this strategy? Ideally always. Any new design you create try to move away from using hard set sizes and instead move to relative values such as percents. By doing so you will be making your sites automatically more responsive and ready to evolve.
Responsive design is a design that changes and adopts to the user dynamically. Responsive websites react to their environment and the user. In essence responsive web design is multiple liquid designs that are grid based.
Ideally this is the best solution but would be done usually when it’s a fresh new design or the older design was updated to work as a liquid design first. Responsive designs are liquid designs with modifications and alterations to fit many screen resolutions.