How to Make Your Website More Mobile Device-Friendly
The number of connected mobile devices in 2015 was 7.9 billion, more than the world population. This means that each person on the planet has more than one mobile device, on an average, and the figure is expected to grow – it is estimated that there will be 11.6 billion connected mobile devices by 2020. The total world population for that year is projected to be only 7.58 billion. The number of mobile-only internet users is already more than that of PC-only internet users, as of 2015.
All these figures point to an increased preference for mobile devices when accessing the internet.
Responsive web design
Mobile devices have varying screen sizes, so it would be extremely hard to develop websites separately for each screen size. This is where Responsive Web Design is changing the user experience for mobile internet users. All you need to do is have one site that is Responsive Web Design-ready and you are good to go.
How exactly does Responsive Web Design work?
When a browser or app on a mobile device requests access to a Responsive Web Design-ready page, the display capabilities of the device (this includes things like resolution and aspect ratio of the screen) are also mentioned along with the request. Responsive Web Design makes use of Cascading Style Sheets or CSS to ensure that the elements on the page are ‘optimized’ for that particular mobile device. For instance, if there is an image, it is resized without altering its original aspect ratio. Blocks of text are also resized in such a way that they don’t appear ‘cut’ or cause the user to swipe horizontally to see the remainder of the text. If there is a video, its resolution is also adjusted accordingly.
For images, it is not just the size. There are high-resolution mobile devices as well as ones that have low-resolution. If a device is capable of only displaying low-resolution images, then only the image of the highest resolution that can be displayed properly on that particular mobile device’s screen is sent when the web page access request is granted. This also optimizes bandwidth usage, as high-resolution images are larger in size and might take longer to load. When users don’t have to wait too long for a high-resolution image which can be displayed only in low-resolution to download, it is also great for improving the overall user experience.
Not all fonts may be displayed correctly on all mobile browsers if the font hasn’t been previously been downloaded and stored. This was a problem even with PC-based browsers, and with Responsive Web Design, the fonts are also downloaded along with the page, so they are displayed just the way they were intended to be.
Responsive Web Design doesn’t restrict itself to mobile device screens. It also lends itself to desktop and laptop screens, which too may have varying screen sizes ranging from 11 inches to 15 inches or greater.
What if there is a large horizontal image?
This, if scaled to fit a vertical mobile screen (as in the case of smartphones), might appear too small to make anything out; and might mar the user experience. Responsive Web Design handles this challenge as well in a way you could never have thought of – you can crop images to show the relevant parts in detail, and this is applicable to both the foreground as well as the background.
This way, even for tablets that have horizontal screens, they will not appear ‘too small’.
Why should you optimize your website for mobile devices?
The chances of better business or image that comes with a Responsive Web Design-ready site notwithstanding, Google also ranks your site higher if it is mobile-friendly. This has been officially announced by the search engine and they have already updated their search algorithm to account for this, with effect from April 2016. So if you optimize your website for mobile devices, two good things happen – you get greater traffic (and hopefully more business!) from mobile device user and also from PC users as your site climbs in search engine rankings.
Does this mean I will have to overhaul my site?
The best part is, it only takes a few lines of code to make your website mobile-friendly!
Adaptive web design
Everyone is talking about Responsive Web Design, and a quick back-of-the-envelope calculation puts the number of websites that incorporate Responsive Web Design principles at 12.5% of the total – and rising.
However, those who study user experience also find that with Responsive Web Design, all the content on a page is downloaded (even if it is only the low-resolution versions) – just the way it would be on a PC – even though not everything may be displayed. These ‘superfluous’ downloads increase page loading times.
Is there another way to make it better?
Adaptive Web Design too does the same things as Responsive Web Design, only it does not download content that cannot be displayed on a mobile screen.
An experiment to compare the two was recently carried out. This included building two websites, one incorporating Responsive Web Design principles and the other integrating Adaptive Web Design, with identical content; and then the two websites were viewed on the same mobile device.
Some of the key findings were as follows:
Accessing the adaptive site resulted in 20 objects being downloaded, as opposed to 61 from the responsive site. The data downloaded from the adaptive site was 2,4744,326 kb; it was 4,229, 362 kb in the case of the responsive site. The adaptive site had a response time of 2,889 milliseconds (meaning its server took this much time to respond to a website access request from a mobile browser), while the corresponding figure for the responsive site was 4,860 milliseconds.
For the accessed web page to complete downloading, it took 1,536 milliseconds with the adaptive website and 4,086 milliseconds from the responsive website. The adaptive site also only took 568 milliseconds to respond to a user action (such as clicking on something), but the responsive site took 1,202 milliseconds.
All these point to the fact that Adaptive Web Design is better for mobile devices. Those on fixed data plans obviously stand to benefit from lesser data consumption but faster page loading and response times contribute to better user experiences even among those with unlimited data download plans.
How is Adaptive Web Design different from Responsive Web Design?
Responsive Web Design scales down the PC-version of the website to best fit the mobile device the content access request originates from. Adaptive Web Design doesn’t scale down the PC website but serves a version that it thinks would be the best fit. For this, Adaptive Web Design has several screen size dimensions and resolutions handy. It keeps in mind that most display screens have either a 16:9 size aspect ratio or the older 4:3 aspect ratio. These have been found to be optimal for viewing experience, and that is the reason why mobile device manufacturers continue with them.
Smart-phones, which have vertical screens, only reverse the aspect ratios of horizontal screens – they have 9:16 or 3:4 aspect ratio; and these are also considered by Adaptive Web Design philosophy. There are standard resolutions that the web pages are available in (such as 240 x 320, 320 x 480, 320 x 534, 320 x 568, 360 x 640, 480 x 800, 720 x 1280, 800 x 600 and so on), and the one which can best displayed by the mobile device is the one that is served to the user.
Adaptive Web Design came into being in 2011, and is newer than Responsive Web Design.
It has been constantly evolving, taking care to include the latest 5:3 aspect ratios that have been appearing on Microsoft tablets and Google Nexus smart-phones. The only downside is that it requires a bit more work than Responsive Web Design, which as already mentioned, requires only the addition of a few lines of code. You can still reap the benefits of better mobile user experience with an Adaptive Web Design-compliant site. Google is becoming increasingly human-like, and there is the probability of Adaptive Web Design sites being ranked higher than Responsive Web Design sites.
Responsive Web Design or Adaptive Web Design?
This depends on your budget, and on your user base. Responsive Web Design is the hot favourite among web designers because it is easier and faster to implement. Responsive Web Design, will in all likelihood, be lighter on your pocket too. Web design experts also point out to the practical feasibility of adaptive websites being responsive, delivering the ultimate user experience.
If you need any help with your responsive web design and development you can contact us here