1. Mobile Web Development ­ Getting Started with
Responsive Web Design
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.
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 was not
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, do not forget about
taking advantage of high­res “retina” displays.

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