Introducing responsive website design

Responsive web design is a powerful and modern approach to designing and building mobile-friendly websites and applications.

More online businesses are now looking to cater for an increasing mobile market, as mobile and tablet web traffic is set to overtake desktop users by 2015. With an ever-growing array of screen sizes and devices to browse the Internet, having a responsive website means that all these different visitors are using and navigating your website in a way that is tailored for them regardless of the device they use.

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 1: Website in Wide Screen

Figure 2: The Website in Medium Screen

Figure 2: The Website in Medium Screen

Figure 3: The Website in Smartphone Portrait 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. 

CSS3 Flexible Layout Options

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.

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%. 

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.

Blending It All Together

hen 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.

Having a normal website is not enought these days, have a user friendly and Responsive website is a must if you planning to get your website built.Our latest Responsive works can be viewed here.

Article Courtesy: dzone.com