Importance of Responsive Web Design (RWD)
- Responsive web apps design is very important in modern day as this allows our apps to fit on several screen sizes.
- Images do not automatically fit into different screen sizes without any effort.
- Responsive images are important because they help us deliver optimal file size, the correct image for the right screen size, improves not only the user experience but improves loading time as well.
- There should be different versions of your image for creating a responsive image.
The biggest advantage of RWD is, it can fit any technology mean tablet, mobile and computer screen of any size and try to find an attractive view. RWD is flexible and unpredictable
What Is An M-Dot Site?
It is important here before I start that what is an M-Dot Site? Web pages that we open through the web browsers in the cellular devices. Such as those links that contain the letter m followed by a point (we call them m-dot sites)
Image Size Problem
To resolve the image size problem we’ve added the max-width: 100% within a CSS file, the images will appear as appropriate in the user-visible area.
For example, if we have an image file with 500px and we want to display it on a 300px screen. The image will fit into the screen and vice versa. In the small size, the image will be reduced to the right size instead of transferring the image size.
In simple words, high-resolution images on low-resolution screens always cause high cost in the bandwidth
The transfer was used this way even in the early days of using the RWD web design, so it was common to display or hide a whole block of content depending on the size and viewport view, but this practice is going less day by day.
On the other hand, it will always load the image at its original size without knowing the size of the width and height required which is the loss bandwidth.
The proliferation of m-dot sites in 2011 was widely regarded as the best practical solution for displaying websites on mobile devices, but at that stage, the use of responsive design was also a practical solution to display the site on all screen sizes.
Still, there was a problem with a big screen
In the start, this method worked well, but then one big problem came.
THE HACKERS, it was quicked hacked by the hackers as they analyzed the behaviour of request and response and get the sensitive data from the response. Therefore developers stop using this method.
Then the idea of prefetching was introduced, to prefetch the data before page load. It was really very faster when the page comes to display and really improves the load time. It approx. get 20 per cent faster than early techniques.
But there was a Road Blocker the request hits the server, which was never requested. So if there is a huge data, then it renders without any user need.
So to overcome this problem a new technique was introduced, dynamically inject
base tags, of
But if you think, as a developer it is really very messy, huge code and browser dependent.
If you note all the solutions which have been introduced are only time passing, not the real solutions.
The main solution to resolve this problem is in HTML5 was found to have potential.
A Native Solution for Responsive Images
W3C is important community for web developers to share their suggestions and build consensus or ideas for web development.
Bruce Lawson presented a proposal to update the way Responsive Images are presented to fit with the media . That has become rich and diverse in HTML5 and has proposed a format much like the video tag so that it borrowed media from it.
The new tag was proposed for the description of images in a picture.
tag as follows:
<picture> <source ...> <img src = "source.jpg" alt = "..."> </ picture>
It provides us with strong backup support with the presence of img tang inside the picture tag.
Now we don’t need to write any extra code to build all the features of img. And then send a request to the server for different sizes according to the user screen.
Web Browsers that never understand the
picture tag and its
source elements would ignore it but still render the inner
Browsers that did understand the
picture a tag can use criteria attached to
source elements to tell the inner
img which source file to request.