Do’s and Don’ts of Responsive Web Design

Responsive web design is all about designing a site for use on different devices. It is about making sure that as screen sizes change the content is still easy to navigate. There are some do’s and don’ts that come along with designing a responsive site.


Design with the user in mind. You want to keep in mind what devices someone may be using and why they are using the site. Are they using the site to buy something or just look something up? Knowing this will help with designing because there will now be a purpose for visiting the site. You also want to keep user experience in mind; just because you can do something does not mean that you should do it. You just want to include what will be beneficial to the user.

You also want to design for mobile first. Do not design the website for the desktop first and then try to cram all the information into a mobile friendly view. It will be easier to scale up than to scale down. Another do is to design using a fluid grid. The number of columns will change as the screen size changes.



Do not hide content from mobile users. You want to change the content so that everyone can access it. At the same time you also do not want to clutter the design. You want to make sure that what it being included is necessary. If there is no use for it then it probably does not need to be included.

Do not make your links too small. Tiny links will be harder to click/tap on when using a mobile device. There should be more padding and a bigger margin around link and buttons to make them easier to click on.

Another thing to keep in mind it not to stray too far away from what people know. There are some things that people are used to seeing and interacting with; if you stray too far away from what people are used to seeing it might make the site more difficult to use.

These are just some things to keep in mind when designing a responsive site.

Example of a responsive site: Disney 

Mobile website: The New York Times | The New York Time mobile


Alchemy Interactive 

jdm digital


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s