Tips for Responsive Web Design

Guys I need an answer to this question in the best way.

Q. Explain five points which a developer should keep in mind while designing a responsive website which would serve customers across multiple devices with different screen resolution ?.

1 Like

This is kind of unrelated to your question, but it may help some people.

A really nice site I’ve found is the How to Center in CSS site. You simply type in what the width and height of your elements are (you can even check ‘Unknown’) and it spits out code that works all the time!

i’m new to this and I simply use a container div set the width to some percent (usually 75%) then i set a left margin to half of what remains( 12% or 13% would be half of the 25% left over from the “usual” 75%). Now this is a very basic thing lol. I have been exploring the bootstrap .row and .col-- but seeing how I’m in a lower level websites my way works just fine for me. Even if i want to float another container to the left or right i just make it the percentage i want and float it. I am looking forward to seeing what others have to say. I dream of the day i can use bootstrap responsive design so good that the entire layout changes when a screen is less than x amount of pixels. I do know that the .container gives you a centered container with some margin, i think :confused:

  1. Does my website factor in different input methods? For example, a form may be hard to fill in when a digital keyboard from an input device blocks the form / submit buttons.

  2. Does my code (mainly CSS) work on different browsers and platforms? A good website to check this is canisuse.com

  3. Does my layout make sense on other screen widths? This might sound a bit obvious, but consistency when navigating menus is key. Let’s say you have a main action button that is centered (Instagram). Try to keep those key elements consistent across different devices.

  4. I my website bandwidth friendly? Using a lot of frameworks, images and code like JS really can make a website slow, especially on lower bandwith (mobile) connections. Using methods like lazy image loading (https://www.sitepoint.com/lazy-loading-images-not-really-annoy-users/) can really improve the user experience.

  5. Is my website accessible for users with disabilities? There are a lot of people who have trouble browsing the internet in the same way most people do. People who cannot hear or see audio are greatly helped by captions for videos and images for example. You can read more about this here: https://www.w3.org/WAI/intro/people-use-web/principles

2 Likes

Responsive web design makes your website look good and function well across devices. Depending on the device, this design approach hides, shows, shrinks, enlarges or moves content to make it look good on any device.

Responsive web design is also called a mobile-friendly design or mobile-first design.

Responsive design checklist:

Test across devices & browsers.
Test for content order based on importance.
Test the website visually.
Test device fonts.
Test for interactivity.
Optimize for mobile first.