How to serve 2 different websites according to device-width without affecting SEO?

Question

I have one website for desktop that is designed for 1024 width and above. This means that some mobile devices in landscape mode will also fit this criteria. I have another website that is designed for below 1024 width, that means the same devices in portrait mode will show this instead.

Although this sounds like conventional responsive design, the 2 versions have very little similarities to tweak. It will be much easier to just do both version from scratch.

What is the way to go for this situation? Must be SEO and robots friendly for at least the PC version.

Answer 1

On the pc web site add meta tag that links to the mobile version like:

<link rel="alternate" media="only screen and (max-width: 640px)"
  href="http://m.example.com/page-1" >

On the mobile version add meta tag that links to the normal version:

<link rel="canonical" href="http://www.example.com/page-1" >

See https://developers.google.com/webmasters/smartphone-sites/details

Answer 2

In case you have two different CSS files, you can display required one in landscape or portrait mode using css media queries. You can also hide Elements not required in one orientation. eg:

For Landscape CSS, create css-landscape.css and use this media query:

@media screen and (orientation:landscape) { ... }

similarly for Portrait, create another CSS and use this media query inside:

@media screen and (orientation:portrait) { ... }

For detailed info about CSS Media queries, check here: http://css-tricks.com/css-media-queries/

Hope this helps.