Responsive web design has become the order of the day in the Industry as businesses look to develop a website with mass appeal. This allows them to target users accessing their sites with different devices such as smartphones, tablets along with desktops and laptops.
Responsive design, or fluid design as it is sometimes referred to as, makes a website compatible with not only the present devices but the ones which will be launched in the future. Tricks Machine is one of the website adapted Responsive web design before a month. Here are five important things that you should remember while working on responsive web design:
1. Flexible Images
Images are often one of the major areas of concern when it comes to a responsive web design. Thus, it is important that you create multiple versions of the images for all the graphic assets in your website. Here the device being used to browse the website would be detected and an image compatible with the device be rendered. Note the code and the media query associated with this.
[css]@media (min-device-width:600px) { img[data-src-600px] { content: attr(data-src-600px, url);</em>
<em>} } </em>
<em>@media (min-device-width:800px) </em>
<em>{ img[data-src-800px] </em>
<em>{ content: attr(data-src-800px, url);</em>
<em> } } [/css]
2. Assign Images To HTML
It is a common practice to add images to the webpage using the image tag. In responsive web design media queries are used to alter the size of the images but the fact remains that we cannot change the actual image file being used.
A better practice would be to use an HTML element as a container, such as div tag, and assigning an image to the background using CSS. This allows us to alter the dimension of the image as well as its position properties.
3. Change The Global Navigation Position
In a desktop site it is a convention to have the global position on the top or left. Following such a convention over a small screen often consumes a lot of space at the top hiding the content completely from the user which compels them to click on a link rather than scrolling down.
In responsive web design we need to reposition the position of the navigation at the bottom of the page for user’s benefit.
4. Anchor Tags Must Be Mobile Compatible
Once you have changed the position of the global navigation the next thing that falls in your must-do list is to restyle the anchor tags which are usually designed keeping the desktop sites in mind.
The restyled anchor tags should fit in perfectly on the small screens of the hand-held devices to add to the visual aesthetics of the website.
5. Thing of Legacy Browsers
While designing a responsive website you also need to cater to the users who are using older versions of the browser. To achieve this you need to ensure that the large screen rules are kept outside of any media queries.
The problem arises as the older browsers don’t support media queries and keeping the large screen rule outside the browser to read the CSS rules and render a page accordingly.