CSS3 and HTML (5) comes along with a great tool to give your pages a different look depending on different features of the client.

Differently sized pages can have different CSS styles without having to do anything fancy. In fact most modern browsers on a desktop (Firefox, Chrome, Safari) all cause a re-evaluation of the screen size when it is changed. This means the user always get a nice looking site without any unnecessary scrolling regardless of device or screen size:

<link rel=”stylesheet” href=”small-style.css” type=”text/css” media=”screen and (max-width:480px)”>
<link rel=”stylesheet” href=”style.css” type=”text/css” media=”screen and (min-width: 481px) and (max-width: 1024px)”>
<link rel=”stylesheet” href=”large-style.css” type=”text/css” media=”screen and (min-width: 1025px)”>

Suddenly we have three different CSS files that can feed the page: resize divs, change the font size or even hide entire sections.

Some websites take you off to a completely different subdomain of their site (e.g. m.mywebsite.com).

This means that you have to maintain a completely separate subdomain. Analytically I don’t see any benefit really – you still get the stats from your Google Analytics of user agents and hence how many people are accessing the site on their mobile.

In terms of adverts, there will be no different as to which system is used really.

So assuming that you want to show the same content to your users regardless of their device, this responsive method is definitely more useful.

Alternatively you can use just one CSS file and include:

@media screen and (max-width: 480px) {
/* SMALL SCREENS */
.menu{
display:none;
}

.mobile-menu{
display:inline;
}
}

/* NORMAL SCREENS */
.menu-title{
display:inline;
font-size:24px;
}

.mobile-menu{
display:none;
}

@media screen and (min-width: 1025px) {
/* LARGE SCREENS */
.menu-title {
display: inline;
font-size:32px;
}

.mobile-menu{
display:none;
}
}

This is just the surface of how the dynamic web pages work and there are some great frameworks out there that you should investigate to help you with your design: e.g. normalize, modernizr