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.
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.
agile development emerging technologies group emerging technology responsive web design secure development user experience user interface
The Empower and Protect Blog brings you cybersecurity and information technology insights from top industry experts at Telos.