Responsive Web Design

Adaptive Design is an approach to Web design that utilizes fluid layouts, CSS3 media queries, and custom scripting to effectively display content at any screen resolution. Website elements’ sizes are based on relative values such as percentages or em values rather than pixels or points. This allows content to resize as the browser window does. CSS3 takes this approach one step further with the introduction of media queries.

Media queries are conditional statements that call upon predefined styles or stylesheets based on the device used to access a Website. For instance, smartphones are not suited for columnar data. Therefore, Websites that cater to the smartphone screen size display content in a linear fashion. Media queries allow you to define conditional styles for any resolution and, in the case of the iPad, orientation as well.

HTML5 brings even more control to the developer by making use of custom attributes for images. In a flexible layout, large images are scaled down to fit smaller viewports. This can eat up valuable bandwidth for a mobile user. With a custom HTML5 tag, you can define a smaller version of the same image and use Javascript to load the appropriate image.

Desktops, smartphones and tablets can all have variations in screen resolutions. Creating an application using Adaptive Design with media queries can ensure that your content is displayed as intended, without creating dozens of different applications or stylesheets.

Tablet devices have been the focus of publishers and media companies since the premiere of the Apple iPad. Since then, numerous competitors have released tablet products of their own into the marketplace with heir own particular OS environments. Now, content publishers need to decide how to deliver content to this new family of devices: Native Application or Web Application?

Native Apps vs. Web Apps

Native Apps are applications developed for specific devices and therefore can leverage the capabilities of the device’s hardware such as the camera, GPS, local storage, or tilt sensors. Native applications have been the standard in mobile development since the opening of Apple’s App Store in 2008. Companies have seen enormous success by leveraging the App Store’s exposure to a large audience of consumers.

Since Apple’s initial launch, other App stores have sprung up, centered on serving applications to different devices. For many companies, the cost to build and maintain native Apps across devices outweighs the profits made from selling those Apps on the App stores. New, progressive techniques in Web application development offer these companies other options.

Web Apps utilize techniques such as HTML5, CSS3, and Adaptive Web Design to deliver the same content across multiple platforms while providing a consistent user experience. Depending on a company’s business needs, this may be a more favorable and profitable alternative. Web Apps also provide complete control over monetization. This includes advertising and subscription sales which is often the main source of revenue for existing company’s existing Website. Other Web Application benefits include:

  • Content is updated when the Web Application is launched. Users are not required to download periodic updates from an App store.
  • Data is stored locally and content is served based on whether or not a connection is available. For instance, a news site can download the most recent stories when a wi-fi connection becomes available and have those stores remain available to the user when the connection is lost.
  • Availability on non-touchscreen devices, such as desktop computers and some devices that have Web browsers that support HTML5.