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.

Previous:
Next:

Vishal Gaikar

Article by Vishal

I am Vishal Gaikar, Software Engineer, Web Addicted, Living in Maharashtra, India. If you like This post, you can follow Tricks Machine on Twitter, also you can add me on Google+.

Get Free Updates in Your Inbox!


Share This Post On Social Network

How to Unsubscribe from a LinkedIn Group
How to Write Guest Blog Posts Like You Own the Joint
How to Recover Your ICQ Password
How You Can Increase your Google Page Rank in 10 Easy Steps
  • Many use smartphones to browse sites so it is important for website owners to make their sites appealing by the use of Responsive themes.I am also now using a reponsive theme for my blog.

    • That’s really great shabnam, Responsive themes do help your blog to get more visitors from smartphone and tablets

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