You may often hear designers and tech heads throwing around terms such as responsive, liquid or fixed design. ''What does it all mean and why is it going to cost my business more money?'' you ask. With the increasing complexity of website development that enables simplistic viewing for users, responsive design might be the optimal design type for your business's website. Let us shed some light on these terms first:
Fixed design
Fixed web pages have a set width that won't alter when the browser is resized, no matter what device the website is being viewed on. On smaller devices, such as smartphones or tablets, content is harder to view and can be annoying for users due to the need to scroll horizontally to view the rest of the content on a page, or continuously ''pinch and expand'' to zoom into the page's text. When the browser on a screen is enlarged or reduced, images and text may visually fall apart on the screen.
Liquid or Fluid design
When resizing the browser, the content on the page spreads itself out to fill the width of the browser when expanded, hence the term liquid design, and will look enlarged or as though is has shrunk. The columns containing the content on the webpage are built using percentages, rather than fixed columns used in fixed design, therefore the columns increase or decrease in size relative to each other.
Responsive design
This approach aims to make website viewing easier by displaying websites on different devices in forms that are easy to read and navigate. This avoids the user from having to resize, pan or scroll through the webpage to read the website's content. Essentially the website is easily viewable and usable on desktop computers, tablets and smartphones. When creating a responsive website design, designers do not need to design multiple website formats that have been rearranged for different devices.
Websites created using responsive design are designed to display different content as the browser is expanded or reduced to predetermined sizes. For example, when the browser size is reduced to 70% of its maximum width, the webpage may have been set to display only two columns on the screen rather than three. When the browser is expanded past 70% of the screen, the third column of content will return to the screen. Mashable.com has been designed this way; click the link and have a play around with the size of the browser for a better understanding.
The quality of images and videos are also downloaded differently depending on the internet connection that the device is connected to. For example, a video being watched on a slow internet connection, will display the lower resolution video that has been uploaded, rather than the high resolution version of the video that has been uploaded. This ensures the user views a video that will download much quicker than the larger, high quality version causing the viewer to endure the ''buffering screen'' (loading screen) that we all hate.
What's best for your company
Companies need to analyse which devices their target audiences are viewing their website on in order to determine the best design structure of their website. For example, if your customers are not viewing your website on smartphones, don't bother spending large amounts of money or time on perfecting the responsive design structure and layout for smartphones. In turn, you may believe that due to the increase in smartphone use in the near future, your audience will be using smartphones and in order to stay ahead of the pack, prepare your website for every device.