Followup question to rand(om) question: Would two different versions (mobile/desktop) on the same URL work well from an SEO perspective and provide a better overall end-user experience?

[davidangotti]

We read today's rand(om) question on responsive design. This is a topic we have been thinking about and ultimately landing on a different solution. Our opinion is the best user experience is two version (desktop and mobile) that live on one URL.

For example, a non-mobile visitor that visits http://www.tripadvisor.com/ will see the desktop (non-responsive) version. However, if a mobile visitor (i.e. iOS) visits the same URL they will see a mobile version of the site, but it is still on the same URL  There is not a separate subdomain or URL - instead the page dynamically changes based on the end user's user agent.

It looks like they are accomplishing this by using javascript to change the physical layout of the page to match the user's device. This is what we are considering doing for our site.

It seems this would simultaneously solve the problems mentioned in the rand(om) question and provide an even better user experience. By using this method, we can create a truly mobile version of the website that is similar to an app. Unfortunately, mobile versions and desktop users have very different expectations and behaviors while interacting with a webpage.

I'm interested to hear the negative side of developing two versions of the site and using javascript to serve the "right" version on the same URL. Thanks for your time!

[retailgeek]

Hey David,

TripAdvisor doesn't use JavaScript to decide if you get the mobile version or note.  The server detects your useragent and then sends you the proper version of the site (on the same URL as you noted).

Remember, JavaScript executes on your client.  So the JavaScript would have to be sent to your browser and then execute before it could figure out what kind of device you were on and then render the rest of the page.  That's basically how responsive design works, except that most commonly a CSS @Media Queries is used to determine the width of your viewport, and then the page is optimized for that width.

What TripAdvisor does, is what Google calles a Dynamic website.  Basically the server handshakes with the browser before the page is sent, the server learns the useragent, and then sends different source code to the browser that is specific to that type of device/browser.

You can read about the google definitions, I'm referencing here: https://developers.google.com/webmasters/smartphone-sites/details

You can read a bit more about the SEO implications of the three approaches in this thread: http://www.seomoz.org/q/how-does-a-responsive-site-kill-seo

I prefer to use Dynamic websites when the user tasks are likely to be different on different devices.  (i.e. Trip Advisor has a "Near Me Now" on smartphones, but not on the desktop).

I prefer Responsive Design, when my content and user tasks are going to be the same on all devices, and only the formatting/presentation is going to be the same.  (such as reading a blog)

I prefer separate URLs when the Information Architecture is going to be dramatically different on different devices, and it's unlikely that a single user is going to share URLs across multiple devices.  (Such as displaying a mobile boarding pass on a mobile phone, that I'd never offer on a desktop device, or scanning barcodes in a store).

In many cases, you can combine all three.  I.E.  detect different devices on server to send different images and menus (Dynamic).  Use @media queries to optimize my content for the exact width of my current viewport (Responsive), and have a separate m.URL for mobile only pages, like that mobile boarding pass.  The cool buzzword for combining responsive and dynamic is called Responsive Design with Server Side Components or RESS (I have no idea what happened to the W or C in that acronym).

I hope that helps!

-Jason "Retailgeek" Goldberg.