Question

I am looking into responsive web design and have come across many methods of doing so, however I am struggling to distinguish the best method of doing so.

I -really- like the how these two sites work:

1. http://paulrobertlloyd.com/
2. http://colly.com/

However I cannot seem to figure out how the are dynamically changing their layouts. Is there a technique I am missing that is not listed below?

---

So far I have come across the following methods:

1: Javascript

Example – adapt.js

Detects the screen resolution dynamically and selects the appropriate stylesheet.

---

2: CSS3 Media queries

Using a technique like:

@media only screen and (max-width: 480px) and (min-width: 320px) {

}

---

3: Backend

Example – Prepending PHP files

Only really works for a single mobile version of a site, mirroring the original domain and changing the headers.

Answer 1

Both of those websites use media queries, as you can see in the bottoms of their respective CSS files.