Home  /  Empower and Protect  /  Responsive Web Design (RWD): Promise and Limitations

Responsive Web Design (RWD): Promise and Limitations

By Emerging Technologies Group •  August 5, 2013

The Complications of Web Interfaces

Developing dynamic web applications is one of the most daunting tasks in the software industry. Modern technology has made the challenges of web development even more complicated with the introduction of a wide variety of web browsers and Internet-enabled devices.
Browsers use different rendering engines that have a certain variance in interpreting HTML, CSS, and JavaScript, which can cause pages to display differently from one browser to the next. The impact of this can be mitigated by conforming to standard practices (e.g., compliance to W3C standards) and using popular tools (e.g. jQuery and HTML5 Boilerplate).  However, it is still more difficult to develop an interface that is suitable for mobile devices that have different screen sizes and resolutions.

Introduction to Responsiveness

HTML5 and CSS3 attempt to address the mobile display issue with a development approach popularly known as responsive web design, or RWD. Prior to HTML5 and CSS3, mobile users who wanted to access the web were forced to zoom in and out of full HTML browsers on their small screens. Or, devices rendered a separate “mobile version” of the site, if available.
CSS3’s media query eliminates having to build a mobile version of a site. Instead, developers simply focus on one code base and can forget about the need to code extra client or server-side scripts to make their pages load properly on targeted mobile devices.  Additional styles can be defined on the style sheet, and the browser automatically applies the appropriate style based on the user’s screen resolution.
Here are two examples of CSS styles used in responsive web design; one responds to screen orientation and the other to display resolution:

A Good Start but Not Quite There Yet

Responsive web design, albeit a big leap for developers and users alike, still has its flaws. Many browsers are not fully compliant with HTML5 and CSS3 standards, and responsive web design only addresses problems with screen resolution but not pixel density.
In general it is assumed that smaller screens have lower resolutions, which is not always the case today. For example, given the following:
  • Samsung Galaxy S4 with a screen resolution of 1920 x 1080 pixels with a pixel density of 443 pixels per inch;
  • Apple iPad with retina display with a screen resolution of 2048 x 1536 and a pixel density 264 pixels per inch;
  • 24-inch computer monitor with a native resolution of 1920 x 1080 that has a much lower pixel density compared to the above two devices
Viewing a web page designed using responsive UI on the Samsung Galaxy S4 and the 24-inch monitor will show exactly the same page view despite the difference in screen size.  This is because the current state of responsive UI design takes into consideration screen resolution but not screen size or pixel density.
On the other hand, viewing the same site on the Apple iPad may display a different – possibly wider – page design given the higher screen resolution.  This is despite the fact that the Apple iPad is much smaller compared to the 24-inch monitor.
The current state of responsive web design is a positive step toward a seamless integration between our Internet-wired world and the abundance of devices that access the web.  It shows that more consideration is being given to the means by which a user interacts with a site.  Does responsive web design still have ways to go?  Definitely.  But it is on the right track.

 

 

The Empower and Protect Blog brings you cybersecurity and information technology insights from top industry experts at Telos.

Leave a Reply

Your email address will not be published.

4 × 5 =