5 Points You Should Remember For Responsive Web Design

You Are Here

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 web design

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.


Vishal Gaikar

Article by Vishal

Meet Vishal Gaikar, the tech wizard hailing from Pune, India, who's on a mission to decode the digital universe one blog post at a time. When he's not tinkering with gadgets or diving deep into the digital realm, you can find him concocting the perfect cup of chai or plotting his next adventure. Follow his tech escapades on Twitter and buckle up for a wild ride through the world of innovation and geekery!

Get Free Updates in Your Inbox!

Share This Post On Social Network

© 2008-2020 - The content is copyrighted to and may not be reproduced on other websites. Designed by Vishal