The volume and variety of smart connected devices is growing at an ever increasing rate, which is creating a transformation in web and application development. In 2012 alone, the global tablet market grew by 78 percent and the smartphone market by 46 percent.1 More and more users are viewing web pages and apps on connected devices of varying screen sizes and resolutions, creating the need for new development approaches and tools in order to optimize the viewing and navigation experience for more than just PCs. HTML5 can help solve this challenge with responsive web design that helps simplify UI design across platforms.
Responsive Web Design (RWD)
“Responsive web design is an approach aimed at creating sites that provide an optimal viewing experience – with easy reading and navigation, and minimum of resizing, panning, and scrolling—across a wide range of devices.”
The concept of responsive or fluid web design is not an entirely new one. In the past, developers typically optimized their web site designs for several desktop monitor sizes like 800x600 and 1024x768. The difference today is the sheer number of desktop, tablet, and mobile device screen sizes developers have to optimize for. And users are coming to expect optimized and consistent navigation experiences regardless of the device they are using.
Luckily, development tools are also evolving, making it easier to optimize web and application designs for most (if not all) device screen sizes. There are still limitations to responsive design however, and certain tradeoffs must be carefully considered. Identifying who the audience is, what devices they prefer to use, and what functionality the application or web site requires is critical information you need in order to choose the best design approach and ultimately satisfy the greatest number of users in the most efficient way.
Tools for Responsive Web Design
The most common tools and techniques used when creating responsive designs include:
- CSS media queries - Allows you to assign different style sheets based on screen size.
- CSS Flexbox - A CSS layout mode that keeps unused space at bay, and makes it easy for you to create content containers that fill unused space dynamically in horizontal, vertical, and orderable layouts.
Responsive Web Design Approaches
There are many approaches you can use when designing responsive applications and pages:
- Fluid - The Fluid approach is very common. Tools like jQuery Mobile , Flexbox, and Intel’s App Framework are examples of fluid design tools. Using this approach, you create one design that fills the available browser viewing space or device screen. This is the most simplistic and most easily adapted method – when new device form factors come out, your app will still work. This approach does make it more difficult to customize the experience for different devices and users as it does not take in to consideration how people interact with phones, tablets and laptops; nor does it consider input methods such as touch, keyboard or stylus.
The Fluid approach fills available browser viewing space using HTML5’s Flexbox
- Adaptive – The adaptive approach uses media queries to design using states. First, you define your breakpoints, so that when the browser hits a certain min or max width, the layout changes. This approach is great for applications where you know your audience is using a wide range of device sizes and you want more control in order to make your design pixel perfect for every user. The adaptive design approach is equally useful when you know (for example, through the use of traffic analysis) that a large majority of your customers use just a couple of device types. The fluid approach (above) isn’t necessary if there are only two device types that make up the majority of your traffic, in which case you could simply design for two states and switch between them with CSS. There are many open-source tools, like the Twitter Bootstrapframework, to help you get started using adaptive design. The Twitter Bootstrap framework combines a grid system with media queries to build both fluid and adaptive user interfaces.
Example of how an adaptive approach can accommodate many device types and sizes
- Goldilocks – The Golidlocksapproach is another popular responsive web design strategy. You essentially design your app or site for three basic states:
Daddy bear: A design layout that uses a multiple column layout for desktops.
Mamma bear: A state that uses a narrow column layout meant for tablet users.
Baby bear: This state places the design elements in one long navigable list for mobile device users.
You use CSS media queries to identify what browsing platform an individual is using and then switch between these pre-constructed states accordingly. The Goldilocks approach also advocates specifying your layout in “ems” rather than pixels to adjust for differences in pixel density, not just pixel resolution. An em is equal to the computed value of the font-size property of the parent element. Your design layout and fonts will therefore remain consistent even if the default font-size varies amongst users (16px is the standard font size for most browsers, therefore 1em = 16px).
- Mobile First - The mobile first approach is becoming more popular, as tablets and other connected devices continue to dominate web traffic. This responsive design strategy assumes you are building an app, not a site, since your primary audience will be mobile users. Older browser support is not a requirement, and touch interaction is a central UI concept. An example of the mobile first strategy is the Zurb Foundation grid system.
Responsive web design is an important consideration in the design of both web sites and HTML5 apps. Your app’s success depends on your understanding of the tools available to you, careful evaluation of your target audience and the devices they use, and making sure you choose the best approach or mixture of approaches that will satisfy the needs of your audience.
Learn more about web application development at the Intel Developer Zone. Check out the new HTML5 Development Environment and look at code examples at the HTML5 Playground.
Intel HTML5 Development Environment:
The XDK is the world’s first HTML5 powered mobile application development tool. With it, you can create, debug and build customized, robust HTML5 apps in hours, and the XDK runs on either Mac or PC Platforms. Build hybrid HTML5 apps for iOS, Android, Windows 8 and Tizen tablets and smartphones, as well as HTML5 web apps for Facebook, Google and other hosting platforms.
Intel HTML5 Playground:
The HTML5* Playground provides developers with a web based code editor, a live application preview window, and a library of sample code and snippets to use as starting points. Anything you that you create, can be shared using a permalink.