Understanding Responsive Web Design


Responsive Web Design involves developing sitesthat serve all devices and gadgets on the same set of URLs, with each URL serving the same content to all the devices and using just CSS to change how the page is rendered on the device in other to supply suitable content to each device. Because of so many different gadgets and smart mobile devices available this days with different screen resolutions and the need for each device to receive suitable content from a website, the need to develop websites with responsive capabilities can never be over emphasized. It’s also worth noting that greater percentage of online users do so via mobile devices and gadgets. Personally as a web designer and developer almost every client these days request for mobile version of their sites.
            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.
On a historical angle Ethan Marcotte coined the term responsive web design (RWD) in a May 2010 article in “A List Apart”. He described the theory and practice of responsive web design in his brief 2011 book titled Responsive Web Design. A site designed with RWD adapts the layout to the viewing environment by using fluid, proportion-based grids, flexible images, and an extension of the @media rule.
Ø  Media queries allow the page to use different CSS style rules based on characteristics of the device the site is being displayed on, most commonly the width of the browser.
Ø  Flexible images are also seized in relative units, so as to prevent them from displaying outside their containing element.
Ø  The fluid grid concept calls for page element sizing to be in relative units like percentages, rather than absolute units like pixels or points.
Finally With so many devices available this days and more are still been produced, this has resulted in varying screen resolutions, definitions and orientations. New devices with new screen sizes are being developed every day, and each of these devices may be able to handle variations in size, functionality and even color. Some are in landscape, others in portrait, still others even completely square. As we know from the rising popularity of the iPhone, iPad, tablets and advanced smartphones, many new devices are able to switch from portrait to landscape at the user’s whim. As a web developer how are you able to design for these situations? The answer or solution is simply responsive web design (RWD). We are in a new age of Web design and development. Responsive Web design is a good concept that when implemented correctly will improve the user experience, traffic and SEO. Understanding how to make a design responsive to the user doesn’t require too much learning, and it can definitely be a lot less stressful and more productive than learning how to design and code properly for every single device available. For more information, questions or you would like to enroll with us and get trained in different ICT packages feel free to use our contact page.

About the Author

Comments are closed.