Responsive Design

 

Responsive design is an approach of web design that makes web pages render well on all kinds of devices and screen sizes. For example, the above video shows the Transport for London website changing as the browser window size is narrowed and widened.

Before getting to the point of how the responsive design affected web design, I will demonstrate the key concept of the Internet. It is metabolic and changeable. Because I was majored in architecture, I found that the way of designing a building is really different with the way of designing a website. A building’s foundation, frame and façade are determined once the building was set up and these attributes are almost immutable and unchanging. However, web design is a totally different matter with its transient designing elements such as the screen sizes, resolutions and users’ preferences. The intangible design needs to be updated all the time to keep pace with the development of the technology. In other words, architecture faces towards structure, physical space, and concrete stuff while web design faces towards strategy, purpose, and the abstract concept.

The evolution of responsive web design is very brief which began to develop from about ten years ago with the evolvement of the increased interaction between humans and mobile devices. Before the emergence of RWD, the multiple site approach for designing website is hard to use and to keep up with the progress of technology. After Ethan Marcotte, the author of Responsive Web Design (2011), who coined the term RWD to describe the new way of designing for the ever-changing website, the old-fashioned multiple versions of a website were abandoned. Different from adaptive web design which focuses on the creation of several distinct layouts to suit several screen sizes, RWD is truly dynamic, like water. It can automatically adjust content to all kinds of screen sizes. Nowadays, responsive design becomes Google’s recommended design pattern and the latest Google update will penalize any website that does not feature RWD.

With the development of RWD, it is more and more important for the web designers to focus on creating usable experiences for the visitors. The ultimate goal of responsive designers is to provide the same access to information regardless of device. Because RWD uses CSS to change styles and resize everything to match the devices, it enables the visitors to have a better experience. The target visitors and the needs of them largely depending on the widely use of RWD. Take the online shopping website for example, it is important for the web designers to make sure that the website have clear content categories with the images of the products that can be resized with the different window sizes. The site should also seek to make a conversation between customers and prospects as easy as possible. For instance, the below image is the responsive online shopping website called Taobao which provides a good experience on a range of devices while dealing with a massive amount of images of all shapes and sizes.

Overall, responsive web design requires radical changes in designer’s thinking. As time goes by, the development of responsive web design has changed from the pool of passing fads into the realm of standard practice. Web designers need to get used to the transition from table based layouts to CSS, in order to create more user-friendly web page.

 

Leave a Reply

Your email address will not be published. Required fields are marked *