Mobile Web Development – Getting Started with Responsive Web Design

Web Spiders Logo 2013

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.

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.

Advertisements

2 Comments

    • It is my pleasure that you have liked by blog. I will be pleased if you follow each and every post and share your valuable inputs.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s