For the first time in more than ten years, PC sales are expected to see a significant decrease from the prior year. In a new age where tablets and smartphones are performing the same duties as our PCs and Macs, we’re seeing the face of the Internet change. Predictions show that, by 2014, mobile will be the dominant form of web browsing.

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_Abu_Dhabi

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.