How to Make Responsive Website for All Devices

how to make responsive website for all devices

Determine which devices you want to support and then add a stylesheet with something along these lines:

/* =Responsive Structure
----------------------------------------------- */
@media (max-width: 800px) {
       /* Smaller Resolution Desktops and Laptops */
       [...]
}
@media (max-width: 650px) {
       /* Smaller devices */
       [...]
}
@media (max-width: 450px) {
       /* Even Smaller devices */
       [...]
}
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
       /* Even Smaller devices */
       [...]
}

It's easiest to test if they go in descending order. more example media queries here:

http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Is there a way to automatically make website responsive?

You can get started with something like bootstrap or skeleton. These are (free :D), light templates and include responsiveness.

Skeleton: http://getskeleton.com/

Bootstrap: http://getbootstrap.com/

You can also use media queries if you want to make your site responsive yourself.

Media queries tutorial: https://css-tricks.com/logic-in-media-queries/

Good luck! :)

How to implement responsive web design and its best practices

Using media queries will adapt a different css for different screen sizes. The way it works is telling the browser: if screenwidth = 700px or smaller/bigger; use mobile css. If screenwidth = 1000px or smaller/bigger; use desktop css. There's no limit to how many media queries you can use.

Using percentages is also a possibility; fluid design. I'd suggest using this together with media queries though.

As for frameworks, there are many out there. Bootstrap is one of the more populair ones. I personally believe working mobile first is the best way to go though. However, there is still heated debate on this subject.

As Pete mentioned in a comment earlier; working with graceful degredation (desktop first) will make the device download as much as the desktop site but not make use of the content downloaded. Wich is a huge drawback for the user. (Bigger pageload times, lots of server requests, more use of MB data etc.) Hence why I think progressive enhancement (mobile first) is the way to go.

Using progressive enhancement, the browser will always download the mobile css first; cutting down pageload times extremely.

For browser support info on responsive design, check this link.

Responsive Design for Website

I use "rem" units to avoid problems (including the "media" max/min widths).

Consider 1rem = 16px for your desktop desing and 99.99% times everything goes well even in almost unknown devices.

https://www.w3.org/TR/css-values-3/#font-relative-lengths

EDIT: (cause the comment)

There are different things.
1.- Use "rem" to size things (like font-size: 0.875rem in spite of font-size:14px) to keep thing with adecuate proportions to the size of the pixels, 2.- Use @media queries to change layout when the screen is to wide/to narrow, that sizing can be done in rems to, so min-width 20rem means (more or less) the width of 20 "M" letters (not really true, but close).

Let say you have a 24 inchs screen with 1480px, and your friend have also 1480px, but in just 6 inchs. If you make font size 12 px you will see pretty nice, but probably your friend will find it small. The device/browser developers can define a different rem size, acording to the physical size of the device (24px, for example) and your 0.875 rem will be 21 pixels in his screen (not so small, more comfortable to see)

The change in layout to adapt to a narrow screen can be done using those rems also, so for the same 1480px he can have a more comfortable layout. You have a screen 1480/16=92,5 rems width, but he have 1480/20=74 rems width.

Responsive web design is working on desktop but not on mobile device

You are probably missing the viewport meta tag in the html head:

 <meta name="viewport" content="width=device-width, initial-scale=1">

Without it the device assumes and sets the viewport to full size.

More info here.

---

Related Topics