There is a new tendency in website development called Responsive web. Its ideology is about adjusting your website to different screen resolutions, including mobile phones, thus making your website mobile friendly.

Adjusment is done using fluid design (by using percentage instead of fixed widths), and loading different layouts using media queries.

Here is a example of using media queries for loading different style sheets:

<link rel="stylesheet" href="layout.css" media="screen and (min-width:400px)" />

Or applying different CSS rules:

@media (min-width:400px) { }

Basically we separate design in multiple columns and depending on screen resolution, we may combine, for example, 4 columns into 2 columns 2 rows design.

Website example:

Mobile website example:

Media queries aren't supported on older IE versions (6, 7 and 8) and older mobile browsers. Therefore a Mobile First approach was developed, where first design is created for mobile devices, and only after that, using media queries we can load design layout for bigger resolution.

It is adviced to use frameworks, like respond.js to ensure that media queries would work even on older IE browsers.

There are also many other problems related to this topic, for example, images, embedded videos or tables.

Here is a great presentation to provide an insight on Responsive Web ideology and practise