RESPONSIVE WEBSITE: A NECESSITY NOT AN OPTIONS
After the launch of the iPhone, the trend was to build separate sites depending on whether a person visited the site from a desktop computer or a mobile device. This was a time-consuming, expensive proposition, leading to increased maintenance costs. In 2010, web designer, Ethan Marcotte in his article in ‘A List Apart’, came up with the term ‘Responsive Design’. He discussed the rapidly changing environment of devices, browsers, screen sizes, and orientations. According to him, building separate sites for every type of device simply wouldn’t be feasible or sustainable, so he proposed an alternative concept: responsive design. Responsive Web Design (RWD) is defined by Wikipedia as “an approach to web design which makes web pages render well on a variety of devices and window or screen sizes.” As the use of mobile devices to surf the web grows at a mind-boggling pace, and screen sizes keep changing across a multitude of devices, web design calls for building flexible and fluid layouts that adapt to almost any screen, today or in the future. Unfortunately much of the web isn't optimized for those mobile devices. Responsive web design consists of three development principles. The first and most important is fluid grids. A flexible grid-based layout uses relative sizing to fit the content to the device’s screen size. CSS is used to position the content. This approach is based on percentages as opposed to the old pixel-based design. By basing text size, widths, and margins on percentages, a fixed size can be turned into a size relative to its display space. Secondly, flexible images and media are also sized in relative units, so that they adapt and load differently, depending on the device, either by scaling or using the CSS overflow property. The third and fundamental part of responsive web design is media queries, also known as breakpoints. These enable us to customize the appearance of websites for multiple devices. The website detects the type of device you’re using or the size of your web browser and correctly displays the page, adapting to different screen sizes and resolutions. In Responsive Web Design, it’s also important for designers to take ‘touch’ into consideration. On smart phones or tablets, users mostly use their fingers to navigate and select items. Moreover, there’s the issue of graphics, ads and download speed. It’s wise to display fewer graphics so that a site doesn’t take too long to load on a smartphone.