Responsive Web design is the approach that suggests that design and development should respond to the user's behavior and environment based on screen size, platform and orientation. The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries. As the user switches from their laptop to iPad, the website should automatically switch to accommodate for resolution, image size and scripting abilities. In other words, the website should have the technology to automatically respond to the user's preferences. This would eliminate the need for a different design and development phase for each new gadget on the market.1
Responsive design is not only a good idea, it is becoming an absolute necessity in modern day web designing. As more devices that are used to view webpages become available in many different screen sizes, web designers must implement responsive design into their CSS to allow proper viewing of the page across all devices.
Fluid Design, also known as Liquid Design differs from fixed designs in that they use percentages to set the dimensions of elements rather than pixels. This allow the elements to grow and shrink to fit all types of screen sizes.
Fluid designs are a good way to start implementing responsive design into CSS, but it most likely will not be enough to cover the large variety of display sizes.2 With Fluid designs, the developer has less control over what the user actually sees and may overlook possible layout problems because the layout looks fine on the screen he/she is using. Images, video and other types of content with set widths may need to be set at multiple widths to accommodate different screen resolutions. With incredibly large screen resolutions, a lack of content may create excess white space that can diminish aesthetic appeal.3
All containers on the page have their widths defined in percents - meaning that they are completely based on the viewport rather than the initial containing block. A liquid layout will move in and out when you resize your browser window.4
In conclusion, the purpose of responsive design and fluid layouts is to allow proper viewing of a webpage across many different screen resolutions.
It is surely good practice to use responsive and fluid layouts. Almost every new client these days wants a mobile version of their website. It's practically essential after all: one design for the BlackBerry, another for the iPhone, the iPad, netbook, Kindle - and all screen resolutions must be compatible, too.5
It took us a lot longer than I expected. I knew it could take some planning, but responsive design is not new to me. We started with a plan that I knew that I could implement fairly quickly on my own. I underestimated how long it would take while working as a pair. I realize now why pair programmers spend 15% more time on a project.
It's very clear that smartphones and tablets have profoundly affected web design. It has made a designers job more difficult, and yet the level of quality design continues to rise quickly. It could be argued that these challenges have helped good designers to focus on what was most important in their designs and has actually impacted design in a positive way.
I think VR and AR displays will affect it in the opposite direction in the next 10 years. Instead of having to pair down a design to work on a phone, designers will be given a freedom that they have never had before. It will likely affect design almost the same way that digital design itself has given new freedoms to designers.
There is no question that we must continue to design for the visually impaired. They access the web through screen readers. This is a difficult area for many designers because they never experience the web in this way. I have to admit, I have never experienceed the web through a screen reader.
I am a huge fan of design and of web design. I fully understand the importance of good design to the success of any project. Quite frankly, I do not understand how anyone could discount it. I have enjoyed the past two weeks very much.