Since web apps are being used on so many different devices with different screens and resolutions, the ability to create a responsive User Interface (UI) is becoming a critical skill for every modern web developer.
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, do not forget about taking advantage of high-res “retina” displays.
Responsive Web Design
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 televisions.
There are some 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.
When working on mobile web development projects, 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.