Personally, I am a proponent of separate sites, especially given the wide variety of devices on the market and varying screen resolutions. I abhor making a visitor download information that will not be displayed (responsive designs) versus giving them what exactly they need. That being said....

I recently adapted one of my sites to a responsive design and in testing it, found that my "mobile friendly version" did not necessarily appear well on some devices, specifically tablets with landscape widths of 1280px. No matter which way you go, responsive design or two sites, it will never be perfect and some portion will have to adapt. It truly is a no win situation.

However, if I must pick one way or another, I would stick with two sites as a) it is easier and b) none of my sites has suffered in SERPS using that method.

Marshall

I hate this situation. The Internet is the Internet. It was designed to be displayed on larger screens because it is very much a visual experience. That was one of the things that made it so popular.

The marketers are now driving people to mobile devices because people can be driven to change these more often and it easier for them (the marketers) to create a demand for new devices.

The Internet is what it is. Any attempt to miniaturise it results in a limited and diminished experience but that's where we are heading folks. They are making us change the Internet to fit these devices rather than making the devices fit the Internet. Sad but true.

>>Any attempt to miniaturise it results in a limited and diminished experience but that's where we are heading folks.

i disagree, miniaturisation is leading to a different but not diminished experience, some sites or rather should i say topics are suited to it, others are not.

Although in general i would agree that as anything becomes more mass market it is dumbed down

Then we'll have to agree to disagree. How can viewing content on a three inch screen versus viewing it on a 23 inch screen be anything other than a diminished experience?

As an example, YouTube is a major net contributor. If I am viewing YouTube content on a mobile phone there is no way that it is "different". It is quite clearly diminished. Very much more website content is the same.

No one is going to tell me that a horizontal menu that stacks vertically on a mobile phone screen is anything other than a compromise and a diminished experience of that menu.

At one end (in television) they are driving us up beyond 42" screens and at the other they are drving us down to screen sizes that are barely readable. And, as you say, everything is getting dumbed down too.

.... not all screens are 3 inches, they are getting bigger, but i take your point on size, however to use your example of youtube...

sitting at home comparing youtube between a 32inch desktop screen and a 3inch phone screen obviously no comparison .... however walking down the street with your mates and showing them some cool new music or joke video while you are on the move, that is a good experience and not diminished because it is either that or nothing at all as you can't carry a desktop down the street with you.

but not all websites are about viewing pretty pictures on a big screen

twitter for example - it is not diminished using it on a small screen at all.

walking around an art gallery, you can go online on your mobile device and look up info about a picture you like.

getting directions from the internet on a mobile device when you are in a foreign city and don't speak the language.

video chatting with your mates while on public transport.

going into a shop seeing an item you like and checking online to see if you can get it cheaper elsewhere

i could go on endlessly ... these examples are impossible with a desktop, they are only possible with a mobile device and therefore are not a diminished experience at all, it is different to a desktop but these situations are new situations where you can use the web in a way that wasn't possible before.

... in my own case, i sell tangible goods where high quality large pictures really help - so yes, using a mobile device (with a small screen) is very much a diminished experience ... which isn't ideal for me :(

i could go on endlessly ... these examples are impossible with a desktop,

I use just all of these apart from Twitter. They are certainly convenient but no one could describe them as a rewarding visual experience.

The problem is that we are all being channeled (or forced) down this road by the market that is driving people to mobile devices, which are incapable of providing the full experience.

Your own example is a good one. How can anyone buy anything other than a name brand with which they are familiar using a mobile phone? When you think about it this may be the only think that can save PCs?

well i guess we are coming from different points of view ... i feel that the internet is not just a visual experince, and in situations where it is non visual (as in large pictures, video etc) then mobile devices are fine.

i agree that devices are beign forced onto people, every kid wants an ipad/tablet whatever ... and what do they use it for, basically messaging their mates and facebook updating ... things they hardly need a high end tablet for, but try and tell them that!

however the good news is that i imagine that the television and home computer will merge in many ways .... so many homes (not mine!) have a tv in every room, how long until it is mainstream that your mobile device connects wirelessly to the tv and you use that screen and with a slight hand gesture you can switch between tv and internet, additionally the home computer/entertainment system/broadcast tv is all merging ... so before long the internet will be commonly available in homes on 40-50+ screens

Nobody is forcing any device on anybody, least of all the manufacturers. After all, 50% of mobile cellphone users still use basic phones with no smartphone characteristics at all.

While some data downloaded on mobile may be unnecessary, it doesn't have to be that way or be bad. Hence the "mobile first" strategy where you create pages for mobile first. That eliminates much of what would be served to them and the added stuff, like larger images and text, get added on later using server side detection or scripting.

For example, I have one theatre company where the about page shows 9 links to all the members. Each link is a photo. All 9 are contained in one small sprite that gets served to everybody. However, javascript detects if we're on a mobile device and, if not, swaps out the sprite for the full size images and no one is the wiser and no additional code is downloaded save for the few lines of javascript.

Now, that said, responsive design is a lot more work than a fixed size page but having a second mobile site also increases the workload. One of the biggest disadvantages of that is if the user has to select the mobile site or if its detected server side. But server side detection isn't always reliable.

I'm accepting the responsive design challenge with open arms because the hurdles of adapting aren't that difficult to overcome. And, I'm not doing this to appease any entity. I'm doing it because it makes sense as a natural evolution of technical development.

For anyone who has been in the Internet stream for the last 15 years or more it has been a constant uphill battle with very few opportunities for us to catch our breath. We've had to constantly adapt to remain effective. IMHO I feel we're finally reaching a plateau with the advent of widely used portable devices and HTML5. It was inevitable that would arrive at this time of requiring constant contact with information. That's not to say it's for everyone. But for those who choose to adopt constantly being connected I'm willing to do what I can to accommodate the need if it fits the audience profile of any particular site.

If I eventually get a smartphone it'll simply be out of necessity as an ultimate tool for monitoring my systems and staying fully connected for clients. That's especially true during summer months when I like to go on all-day bicycle rides along the local stretch of the Trans-Canada trail -- away from people and traffic. Being mobile will afford me that luxury and I welcome it.

There are probably many similar reasons for other people needing to be mobile. However even if I access websites while mobile I know I'll hold off on any meaningful research or transactions until I'm back on my desktop with it's large wide screen. For me mobile devices are only a tool of convenience. Whenever I drop into a WiFi enabled café and observe the folks around me the majority of them have both a laptop and a smartphone, mostly the 20-35 year old demographic. Without fail they appear to be doing something very productive on their laptops while occasionally glancing at their smartphones.

In more broad and general terms; other aspects to take into consideration are users in urban vs rural environments. Another important consideration is the fact that in many regions users have to pay for access by the KB. Adapting style sheets by using smaller images, or better still, encoded images for mobile users (img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAAZABkAAD/7AARR...blah blah blah...) is quite effective.

I'm glad I resisted a few years ago when the very early adopters often created completely watered down versions of a site for mobile users. I think even the .mobi extensions are now obsolete. Except in maybe a few exceptional circumstances it now only takes one HTML environment and control flow of presentation via stylesheets and viewport size.

If you want to get your feet wet in understanding how easy it is I'll paste a mockup below. Keep in mind this isn't anything I have in production at this moment, it's a playground right now. My previous sites are mobile friendly but not full responsive like the code below will facilitate. If you only browse this code it might be difficult to visualize on it's own so I would highly recommend using the Web Developer Firefox add-on by Chris Penderick. From within the options menu select > Resize > View Responsive Layouts. That will pop open a new window showing you how the content will look at various viewport sizes and orientations. I've changed the background colours in some of the headings for demo purposes.

This was put together very quickly so do not expect it to be a fully functional cut and paste solution ready for production. It's just something to experiment with. One thing you'll probably realize if you take some time to kick the tires is that one device in portrait mode may use it's own assigned stylesheet whereas changing it's orientation to landscape mode, depending on size, will allow it to use another device's wider stylesheet. It's quite fluid and uncomplicated.

And create separate stylesheets using the following as a guideline:

mobile.css
-------
*{margin:0;padding:0;}
body{color:#fff;font-family:arial,sans-serif,'Liberation Sans',Freesans;font-size:16px;}
#aaa{background:#0e1ef4;margin:0 auto 0;max-width:320px;}
#bbb{padding:0 20px 0 20px;text-align:center;}
-------


mini-tablet.css
-------
*{margin:0;padding:0;}
body{color:#fff;font-family:arial,sans-serif,'Liberation Sans',Freesans;font-size:16px;}
#aaa{background:#fff000;margin:0 auto 0;max-width:600px;}
#bbb{padding:0 20px 0 20px;text-align:center;}
-------


tablet.css
-------
*{margin:0;padding:0;}
body{color:#000;font-family:arial,sans-serif,'Liberation Sans',Freesans;font-size:16px;}
#aaa{background:#11f709;margin:0 auto 0;max-width:768px;}
#bbb{padding:0 20px 0 20px;text-align:center;}
-------

desktop.css
-------
*{margin:0;padding:0;}
body{color:#000;font-family:arial,sans-serif,'Liberation Sans',Freesans;font-size:16px;}
#aaa{background:#c7c7c7;margin:0 auto 0;max-width:1024px;}
#bbb{padding:0 20px 0 20px;text-align:center;}
-------

<!DOCTYPE html>
<html lang="en">
<head>
<link href="mobile.css" media="only screen and (width:320px)" rel="stylesheet" type="text/css" />
<link href="mini-tablet.css" media="only screen and (width:600px)" rel="stylesheet" type="text/css" />
<link href="tablet.css" media="only screen and (width:768px)" rel="stylesheet" type="text/css" />
<link href="desktop.css" media="only screen and (min-width:1150px)" rel="stylesheet" type="text/css" />
<meta name="viewport" content="height=device-height, width=device-width, minimum-scale=1.0, user-scalable=yes|no" />
</head>
<body>
<div id="aaa">
<div id="bbb">
<p>Design Layouts</p>
</div>
</div>
</body>
</html>

Here's a variation that excludes allowance for mini tablets but you'll have to adjust the 'max-width' in each style sheet accordingly:
<link href="mobile.css" media="only screen and (max-width:320px)" rel="stylesheet" type="text/css" />
<link href="tablet.css" media="only screen and (min-width:321px) and (max-width:768px)" rel="stylesheet" type="text/css" />
<link href="desktop.css" media="only screen and (min-width:769px)" rel="stylesheet" type="text/css" />

For whatever it's worth I don't think mini tablets will get a foothold in the marketplace, thankfully. I say thankfully because they cause an overlap issue between smartphones and tablets that's difficult to accommodate. You'll see what I mean if you take it for a test drive.

For the above examples I've converted all font sizes to pixels so it can be easily cross-referenced by the Web Developer tool however it's better to apply fonts sized as EM.

The problem with using a separate site is that most, if not all, send high end tablets with large high resolution screens to the same site as low end smart phones, while sending netbooks with lower resolution screens to the same site as desktops with massive monitors.

Here's what we do. When we are creating a new site, we use responsive design... but we also create a separate mobile version that looks and behaves like an app store app, but it's actually just a jquery/css web app.

When the user visits the site on a smartphone, they are redirected to the web app. We include a link to the full site that is enabled using cookies so that if they click on "View the full Site", they are taken to the responsive design site.

This serves two functions, first, the important info - call us, find us, email us, learn about us and other site specific info is served up right away. This is essential for most brick and mortar businesses. The second function is that if the user for some reason needs more info, they can get it directly from the responsive full site.

Any tips on how to make a site look like an app store app? Is it possible to do in a way that looks right cross platform?

Use JQuery Mobile. You can make your smartphone optimized site look just like an app. You can add a "bubble" that pops up when the site is first loaded that tells the visitor to add the site as a bookmark on their phone's home. When the site is loaded via the bookmark, it looks and acts like an app.

Thanks! I have used JQuery a bit, but did not know JQuery MObile. The demos look impressive and I am just digging into the docs.

Don't use jQuery Mobile. It's a huge library that has to be downloaded on a cell phone network. Use plain javascript instead.

Minified and Gzipped: jquery.mobile-1.3.0.min.js (24KB, ready to deploy)

I'm not sure what your definition of "huge" is, but for me, 24KB does not fall into that category.

Full disclosure: I've never used jQuery Mobile.

I have used it for dozens of sites. It loads exceptionally fast and as Fotiman said, it is not huge by any means.

I have always thought that separate sites are key, but as someone above said, and it's true in my world at least, google prefers a single responsive site. in that vein I constructed my new site totally in HTML5, CSS3 and JQuery, And except for a small bump in the road, it renders perfectly on my iphone in chrome.
My bump is..I placed two youtube videos in one <section> side by side. now I have to put a javascript mobile os detect between them and insert a conditional line break, then I should be good to go

Been thinking a lot on this and my conclusion is:

Responsive Design + separate site

Responsive design seems like a growing trend but won't do the trick. The mobile traffic uses diff devices, every single one of them having diff power so it's not a good idea to send 800KB website into a mobile just because it has [RD]responsive design. Many techniques of RD rely on CSS and Javascript, and the reality is diff devices will respond differently, some will fail, and some will be just slow.

I believe that if I give an user (for testing purposes) one website for viewing on a mobile device, and a responsive website to try on the same device... the user will go for the responsive one being easily readable.

What if we give the user a third option? a mobile website? and let the user choose between mobile and responsive? the mobile site will load faster, ready for trying while the responsive will not (in most cases). That's my bet. I was doing experiments with one of my sites (the one with more traffic) and [RD] responsive design, I finished and was actually bored, I wasted a lot of time there due to the device limitations (Android phone and Android Tablet on a fast internet connection). Well the finalized mobile version loads in a blink of the eye.

Jquery is the solution for some cases, or so it seems, but many devices won't be able of even running the tricks. We all could disagree here because our opinions will be based specially on what devices we use to test the websites, but that doesn't mean most people have Iphones or fast Android Phones/Tablets.

A practical website should be able of showing the user the right version for the device and screen. Not easy, but speed wins I believe.

Hi explorador,
the site I mentioned above, now renders perfectly on all mobile devices that I know of. HTML5, CSS3 & JQUERY worked out fine for me. With the announcement today by google that sites that do not render on mobile device well will, shortly, be ranked lower than those that do...we are pleasantly relieved

Where was the announcement?

BeeDeeDubbleU,
This is what he is referring to:

Smartphone users are a significant and fast growing segment of Internet users, and at Google we want them to experience the full richness of the web. As part of our efforts to improve the mobile web, we published our recommendations and the most common configuration mistakes.

Avoiding these mistakes helps your smartphone users engage with your site fully and helps searchers find what they're looking for faster. To improve the search experience for smartphone users and address their pain points, we plan to roll out several ranking changes in the near future that address sites that are misconfigured for smartphone users.

[googlewebmastercentral.blogspot.com...]

Thank you.

Also check out this page [developers.google.com ] where common misconfiguartions are explained and a high emphasis on load time is mad.

[edited by: phranque at 12:34 pm (utc) on Jun 13, 2013]
[edit reason] fixed link [/edit]

yes that was it!

I'm very new at this but kind of know how to build a basic responsive site with Auto Width that will fit on any device.

A "mobile phone" version of the full site in other words with less images.

Is there a way for the website to tell the browser what version to load depending if it's on the mobile or a PC?

I'm new to this mobile thing because I have no choice! Any great tutorials to recommend?

To make things even harder I work with CMS like Joomla, Worpress and Drupal...;(

Search for Media Queries. ;)