Responsive Design
“Although mobile devices have seen the largest percentage of recent growth, these devices only represent a fraction of total web traffic. The wider Internet audience remains spread across a multitude of devices.”
Why We Need Responsive Web Design?
iPhone was released in 2007 by Apple. Finger based touch was the primary interface of this device, because of which users are now able to browse and navigate websites on a mobile device. iPhone brought a revolution in mobile technology and soon many company’s followed, now most of the companies have thier touchscreen based mobile devices in different form factors, be it samsung, microsoft or blackberry.
Smartphones & tablets with similar capabilities have now become common place; resulting in a huge spike in mobile-related web-traffic. In fact, based on current growth trends the IDC is forecasting that mobile traffic will overtake “traditional” desktop traffic by 2014.
Because of this immense growth, organizations are understandably interested in mobile opportunities. However, mobile traffic represents only a subset (8%) of all web traffic.
Real-world web-usage reveals a diverse spread of devices & resolutions; these devices vary from 320px (Blackberry devices) to 1600px (Widescreen displays). Furthermore, the number of web devices is accelerating and creating even more diversity and fragmentation. As a result, organizations targeting only two scenarios (desktop & mobile) are creating an unoptimized experience for many of their visitors.
By contrast, creating ideal web experiences for ALL web visitors requires extensive support for a wide variety of devices. To create this support websites must adapt based on the visitor’s personal choice of device. Creating these device-specific adaptions has historically been very challenging.
Historic solutions do not scale to address the proliferation of web devices
Web designers have struggled to adapt websites for different devices and browsers for many years. Consequently, there are several techniques used to provide these device-specific adaptations. However, these traditional solutions create problems of their own; resulting in bad user experiences or crippling content management efforts.
Using tables for adaptive web content
Using tables for layout formatting was a common technique during the 90′s and occasionally continues today. When most browsers started supporting CSS2, using DIV elements became much more popular. Later on, when displays larger than 1200px became popular, many front-end developers used tables for their adaptive layouts. Table designs can adapt the layout to the screen’s width, but cannot adapt font sizes, buttons, etc. Furthermore, tables are row-based which means a 3-column table will always have 3-columns, regardless of the underlying device. This results in an uncomfortable viewing experience on smartphones:
Creating dedicated (mobile) versions of web content
Many websites maintain separate mobile versions of their web content. These websites detect the visitor’s device and redirect to a sub-site ( for example, m.domain.com ) to present a customized experience. Alternately, the website might use the same page but apply different HTML markup. These techniques work fine for a couple of devices, but it’s impossible to scale this strategy to address the large number of web-devices already in use today. For each device programmers, front-end developers, and content writers must manage an additional version of the web content.
Supporting an unlimited number of devices with responsive design
“Responsive design utilizes web standards (CSS3 media queries) to create web pages that adapt fluidly to any device.”
CSS3 (Cascading Style Sheets) media queries are at the core of responsive design; this technology enables web pages to detect the visitor’s device-type and screen resolution and adapt the web styles to create an optimized UI for that device. Below is a simple illustration of this technology in action:
Here is a sample CSS3 media query definition for these two different displays:
By establishing a set of adaptive styles web pages will fluidly conform to an unlimited number of devices and resolutions. For website managers, there is no need to re-create web content in sub-sites or create dedicated markup for a particular device. Your web page transforms into a perfect fit for all devices.
Because we have historically targeted only a couple of device scenarios (desktops & smartphones) most web visitors aren’t getting an optimized experience. By contrast, a website using responsive design could transform a standard 3-olumn layout into numerous scenarios.
Comparing the advantages & disadvantages of Responsive Design
Advantages:
- No additional server logic is required – It is not necessary to detect devices or redirect the user in order to provide accessible content for smaller/bigger screen sizes. The logic for transforming the webpage is built into the styling.
- Implementation without templates – You don’t need to support different templates or markup for the different devices.
- It can be easily integrated to an existing website – If your website is written with compliant HTML and CSS, you can easily go responsive.
- No extra work for the content writers – There won’t be any additional work for your content writers; for example, creating multiple versions of the same content or populating extra data fields for mobile version.
- No double URLs and user agent problems – You will have only one address for one page and it will be accessible for all devices – no mobile subdomains or URL parameters will be necessary. In addition, many smartphone “browser user agents” introduce themselves as desktop browsers. With the responsive design technique, you don’t need to worry about the browser behind the device.
- Additional Useful Properties – There are many more device properties that you can access with media queries besides the screen width. These include: orientation mode, aspect ratio, colors, resolution, etc.
Disavantages:
- JavaScript control – If you want to go with one website version for all devices, then you should always have in mind JavaScript events like hover or click since the newest devices prompt the user to touch, tap, swipe etc.
- Information architecture is the same - Since some devices have really small screen sizes, the information architecture of a website can be constructed in a different way. Also, there are specific web applications like mobile banking where the logic and security are implemented differently.