Mobile Zone is brought to you in partnership with:

Gil Fink, Microsoft MVP, is an expert in Web development and Microsoft data platform. He works as a senior architect at Sela Group. He is currently consulting for various enterprises and companies, where he architects and develops Web and RIA-based solutions. He conducts lectures and workshops for developers and enterprises who want to specialize in infrastructure and Web development. He is also a co-author of several Microsoft Official Courses and training kits. You can read his publications at his blog: http://blogs.microsoft.co.il/blogs/gilf. Gil is a DZone MVB and is not an employee of DZone and has posted 151 posts at DZone. You can read more from them at their website. View Full User Profile

Getting Started with Responsive Web Design Development Techniques

10.08.2013
| 47923 views |
  • submit to reddit

Introduction

Since web apps are being used on so many different devices with different screens and resolutions, the ability to create a responsive UI is becoming a critical skill for every modern web developer.

Recently, I was asked to help build a mobile game with the PhoneGap framework, HTML5 and JavaScript. My main tasks were to take the UI to the next level and make it transition smoothly to the various screen resolutions on our supported devices. Since the game UI wasn’t originally developed to fit so many screen sizes and resolutions, I had a lot of work to do.

The examples in this article show that while developing apps, you should ask yourself how the app UI will adapt to different devices, and you should anticipate the need for these responsive capabilities beforehand. In this article, you will be presented with techniques to create responsive web designs using flexible layouts and media queries.

Your App Must Adapt

More and more people want to use your web apps on their mobile devices, and the sizes and resolutions of those devices are becoming more diverse by the day.  You already know the basics: generally, there are tablets and smartphones with landscape and portrait views.  Plus, don’t forget about taking advantage of high-res “retina” displays.

So, would you pick a resolution and build your app according to that resolution? Would you use JavaScript to calculate the different views sizes and adapt accordingly? All you know is, you need your code to ‘respond’ to the device information.

Responsive Web Design to the Rescue

Responsive web design is becoming a standard practice in web development. The concept really took off after Ethan Marcotte published his famous article - Responsive Web Design. Responsive web design is an approach to scale and fit the UI of app views to the variety of devices and browsers. It also includes design considerations that you, or the designer you work with, should apply while designing your UI such as where to put each page element when the screen is in landscape mode or portrait mode. Essentially, you need to design a different view for landscape an portrait views, and optionally provide different interfaces for desktop, smartphone, tablet and even for smart TVs.



While this article is only introducing the development techniques of responsive design, there are other articles you can read about UI design considerations like How to Design a Mobile Responsive Website or A Brief Look at Grid-Based Layouts in Web Design. If you are taking on the role of both designer and developer, you really need to look at these articles as well.

The next three figures show how a responsive website adapts to different screen widths:


Figure 1: Website in Wide Screen


Figure 2: The Website in Medium Screen


Figure 3: The Website in Smartphone Portrait Screen

There are some general techniques to keep in mind when building a responsive UI:

  • Flexible layouts – Using proportional sizes to fit to every page. You can also use new CSS3 modules like grid layout, flexbox and more.
  • Flexible images and media – Using CSS to avoid images or media overflow out of their containing elements.
  • Media queries – Using the CSS3 media queries module to detect media features like screen resolution and to respond accordingly with CSS. 

All the techniques are based on CSS. If you are not familiar with CSS, you should stop reading the article and use W3C CSS tutorial, starting with HTML + CSS to get familiar with the topic. The First technique we will use is flexible layouts.

Applying Flexible Layouts

Flexible layouts are mainly based on proportional sizes. You use CSS properties with percentages sizes instead of fixed sizes. In flexible layout, each element size depends on the size of the screen. The following figure shows a flexible layout:


Figure 4: A Flexible Layout

In the above figure the page is divided into three sections: sub navigation, main content and an aside. Each section has different proportions like 15%, 55% and 20% and the rest of the width is used for margin between the elements. The following code example shows how you might create the CSS for the previous image:

<!doctype html>
<html>
<head>
    <title>Flexible Layout</title>
    <style>          
        nav {
            width:15%;            
            border: solid 1px black;
            float: left;
            margin-left: 1%;
            margin-right: 1%;
        }
        #content {
            width: 55%;            
            border: solid 1px black;
            float: left;
            margin-left: 1%;
            margin-right: 1%;
        }
        aside {
            width: 20%;            
            border: solid 1px black;
            float: left;            
            margin-left: 1%;
            margin-right: 1%;
        }
    </style>
</head>
<body>
    <div id="container">
        <nav>Sub Navigation</nav>
        <div id="content">Main Content</div>
        <aside>Aside</aside>
    </div>
</body>
</html> 

The main problem with the flexible layout technique is using it with wide screens. As the screen becomes wider, like in a smart TV for example, the page will have a lot of white space. This is where CSS3 can help with new modules like grid layout, multi-columns and flexbox.

CSS3 Flexible Layout Options – Oh Yeah!

CSS3 includes a few new layout options that were created with responsive web design in mind. The main modules that you can use are:

  • Grid Layout – Grid layout enables you to create two-dimensional grid-based layout systems that divide sections of your markup into rows and columns. The elements contained in the grid can be positioned in flexible layout or in fixed layout depending on decisions that developers/designers take. Grid layout is one of the most powerful options for positioning elements in pages. You can read more about grid layout in CSS Grid Layout.
  • Multi-Columns – Multi-columns is used to create a column-based layout. When a multi-column layout is used, elements flow from one column to another depending on the configurations you use in CSS. You can control the gap between the columns, the number of columns, columns width and more. You can read more about multi-columns in CSS Multi-column Layout Module.
  • Flexible Box – Flexbox is used to position boxed elements within a containing element. Flexbox helps to control the how elements relate to one another in aspects like flow, direction, space between or within elements, control box size according to containing element changes, and more. You can read more about Flexbox in CSS Flexible Box Layout Module.

The main drawback of using CSS3 layouts is that their support differs from browser to browser. Check the Can I Use… website to see if your target device browser supports the layout that you want to use.

Now that we understand the ways to create a flexible layout, let’s talk about adapting images and media.

Flexible Images and Media

In concept, images and media are always displayed in fixed size. This raises a really interesting problem – what is going to happen when the containing element is smaller than the image or media. In most situations the image or media will overflow out of the containing element. In order to avoid these situations, you can use the CSS max-width property and set its value to 100%. If the image or media size is larger than the containing element, it will get all the width of the containing element and won’t overflow:

img { max-width: 100% } 

In the code example above, all the image elements on the page will now have their max-width set to 100%.

We learned how to create flexible layouts and flexible media but how will you respond to any media changes instantly using only CSS? The answer is media queries.

Working with Media Queries

Media queries are CSS rules that are used to detect media features. Media queries can help to tailor the CSS to any device by identifying its media using a specific query, such as its width, its height and its resolution. A media query consists of a type, such as screen and print, and a zero along with more expressions to check against the media. Once the expressions evaluate to true, the CSS rule is applied.

Media queries are used mostly in CSS with the @media rule, but they can also be used in HTML link elements like in the following example:

<link rel="stylesheet" media="screen and (max-width: 400px)" href="smallScreen.css" />

In the example, a media query will run to check if the screen width is smaller than 400 pixels. If it is smaller, the smallScreen.css file will be used.  

The @media rule enables the use of style blocks that are applied if the query returns true. It is using the same query that was in the previous example but the difference is that you put the query inside your CSS not your HTML. A good practice is to put the media queries at the bottom of the CSS files in order to use the cascading behavior of CSS. The following example uses the same query that was used in the previous example but as a block inside a CSS file:

div
{
   background-image: url(‘/images/flower.png’);
}
@media screen and (max-width:400px)
{
   div
   {
      background-image: url(‘/images/flower-small.png’);
   }
}

In the preceding example, every div on the page has a flower background image. If the screen is less than 400 pixels, the media query returns true and all of the divs background images are changed into small flower. Using media queries can help address style for any device and create a responsive page.

Blending It All Together

When designing pages, you will use combinations of all the previous techniques in order to create a responsive web design. In most cases, you will use media queries to detect the media changes and respond accordingly, but the other techniques are going to be very useful as well.

Summary

Responsive web design is becoming the de-facto standard in web and mobile web UI design. Users expect the UI to adapt to their devices, and failing to do that will result in fewer users. In this article, you learned how to apply different CSS techniques to create your responsive web design. For further reading about this subject, check out these resources:


This article was commissioned by Intel and the Tizen Mobile Web Development team.

Published at DZone with permission of Gil Fink, author and DZone MVB.

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)

Comments

Hemang Shah replied on Thu, 2013/12/05 - 5:39am

 This article is very useful to develop Responsive Website.

Gil Fink replied on Thu, 2013/12/05 - 8:10am in response to: Hemang Shah

10X

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.