Responsive Web Design Basics

Responsive Web Design Basics – Basically RWD allows websites to respond or adapt to a different viewport size, smaller or greater without setting up a custom domain or subdomain for users who use mobile devices when accessing websites. Color appearance and nuance can be obtained endure to have the same experience even though Use a different device size. This is possible with the use of viewport meta tags and CSS3 media queries.

Viewport Meta Tag and CSs3 Media Queries

A responsive web is primarily built with two components. The first component is the viewport meta tag. This tag is in place- it’s in the tag and is used to control the scale of website page. For example, adding a viewport meta tag by setting the initial scale to 1 which allows web pages to be increased by 100 percent of the viewport size scale when opening for the first time. second CSS3 Component (http://www.w3.org/ITR/css3-mediaqueries/) which determines style for a given viewport size. For example, code slice The following shows how we can hide image when the viewport size is between 321 px and 480 px.

(@media Screen and (min-width: 321px) and (max-width:480px) {img { display: none; }})

Limitations of Responsive Web Design

The important point here is that RWD isn’t quite perfect, there is some problems that must be resolved, including creating the image becomes responsive. Current practice for creating images responsive is to scale it to match the viewport with the maximum width (max-width: 100%) or maybe hide- Set the display (display: none) when you don’t want the image to be displayed.

The important point here is that RWD isn’t quite perfect, there are a few issues that need to be resolved, including making the image responsive. Current practice for making the image responsive is to scale it to fit the viewport’s maximum width (max-width: 100%) or maybe hide the display (display: none) when the image doesn’t want to be displayed. Another problem when practicing in the field is that it only changes the presentation of the image, while the actual image in the HTML document still has no effect. This means that users can still download the same image resolution with a larger size, regardless of the device and viewport used, this results in wasted bandwidth and reduces the performance of the website, especially mobile users.

Responsive Images with Elements

Recently at the World Wide Web Consortium (W3C), a group called the Responsive Image Community Group (http://www.w3.org/community/respimg/) proposed a new element called to address the situation. This element allows sending an exact image size and resolution based on a specific situation. It’s worth noting that this new element is, at the time of writing, still in the design stage, meaning that it hasn’t been implemented by the browser vendor yet. These specifications may change or even be removed in the future. Consider the following script example :

<picture alt="responsive images">
    <source src=big.jpg media="min-width: 768px">
    <source src=medium. jpg media=" min-width: 320px">
    <source src=small.jpg>
    <img src=medium.jpg alt="responsive images>
</picture>

Note the code snippet above, it will give a big.jpg image file with a high resolution and possibly a wider width only when the viewport is at least 768px, while a medium.jpg image file with a lower resolution and file size will be delivered when the viewport is at least 320px. Then, if these conditions are not met, a small small.ipg image will be displayed. Finally, at the bottom of the list, we also have one more image with an element, this is also used to provide a backup image for browsers that don’t support the element