0

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.

2

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

| improve this answer | |
0

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.

| improve this answer | |
  • If there a way to serve different website depending on device orientation? Media queries work on the same website by applying different CSS, but I have 2 different websites since there are very little similarities between them. webmasters.stackexchange.com/questions/65528/… – Jake Jul 1 '14 at 4:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.