According to Morgan Stanley the number of internet users using their mobile devices is projected to surpass the number of desktop internet users by 2013, the increase has been amazing since the first iPhone came out 6 years ago. Conscious of the increasing number of internet users coming from mobile devices it is increasingly important to deliver the best mobile-friendly web experience.

devices

Websites now have to be able to adapt to users on different devices including tablets, smart phones, and desktop computers. According to a study done by Gartner, Android makes up 75% of the current mobile market. We see in this platform a high fragmentation with hundreds of different types of devices, ranging in resolution from 240×180 pixels to 2040×1152 pixels, different OS versions, there are different types of mobile experiences to cover. Open signal has conducted a very interesting study with visual charts. The various mobile tablets and phones, all with a range of screen resolutions, have made it quite difficult to build websites that are compatible across all of them. One of the best ways to achieve this is by creating a responsive web design wich will dynamically modify the website design and user experience based on the device that the user is accessing the website from.

Fragmentation

 

But there are important things to consider here and it isn’t as easy as it initially seems. For example, if we have an image , this image will have to resize in devices with different sized screens, pixel densities and aspect ratios. Responsive web design does not address this properly as it relies only on client-side logic to resize an image. Responsive Design relies on Media Queries and lots of extra JavaScript and CSS the users device has to download and execute. RWD includes lots of unnecessary code on the user’s device, iPhones get Android code presented which they are forced to interpret just to realize that they cannot use it at all. It’s a huge waste of resources as most browsers do is to interpret the code, lowering performance and load times.

So what do designers need to do? I´m often asked this question. Lets see two strategies very quickly, later I will post on this issue. Responsive web design (RWD) and adaptive web design (AWD, or mobile websites). Both techniques have its ups and downs.

AWD-vs-RWD

RWD vs AWD

While responsive web design can be an excellent solution in cases where mobile and desktop users are visiting for the same purpose, it can make for a poor alternative when they are not. If you’re not sure whether or not your site should be transformed with responsive web design, we’d love to talk to you about native web design, adaptive web design, and other options.