Responsive website a necessity not an option

Page 1

RESPONSIVE WEBSITE: A NECESSITY NOT AN OPTION 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 pixelbased 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 size 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 principle covers media queries, also known as breakpoints, which can be used to apply different styles based on the capabilities of the device. Media queries allow the page to use different CSS style rules based on characteristics of the device the site is being displayed on. The website detects the type of device you’re using or the size of your web browser and correctly displays the page.


Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.