3

I have two websites, one is served to desktops and the other is served to mobiles and tablets.

I redirect users with a JS script. I know redirection isn't a good practise for Google. What is the best way to do in except for responsive design? The main site is build on Hype and it's full of animation so it cannot be only one responsive site.

4

It's called adaptive web development. You need to detect the user-agent and serve different markup based on the device.

In PHP, you can use $_SERVER['HTTP_USER_AGENT'].

You'll want to include this code in order to let Google know what you're up to:

<?php
Header('Vary: User-Agent');
?>

Here's some more info: https://developers.google.com/webmasters/mobile-sites/mobile-seo/dynamic-serving


Alternatively, you could do a mobile version of the site on a subdomain

On the desktop page (http://www.example.com/page-1), add:

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

and on the mobile page (http://m.example.com/page-1), the required annotation should be:

<link rel="canonical" href="http://www.example.com/page-1">
| improve this answer | |
  • Both the m.example.com and the www.example.com should have both canonical and alternate links, no? – grg Feb 2 '16 at 16:20
  • I don't think you want to include rel="alternate" on the mobile page. – NickWebman Feb 2 '16 at 19:02
  • Definitely don’t detect the user agent. Use media queries. Definitely don’t split one page into separate desktop and mobile pages, because those are 2 different pages, both with half the Google juice and other issues. Doing an “m.domain.tld” page is a temporary hack for 2005–2010 while you get rid of the Flash on your “desktop site.” All of this is just 100x more complicated than just building a responsive site the right way: create a single page for mobile and enhance it for desktop with media queries via CSS and JavaScript. – Simon White Feb 4 '16 at 19:02
  • Simon, that's not exactly correct. While I agree responsive is better than the m.dot approach, the OP specifically stated he does not want to go the responsive route. Furthermore, the juice will not be split because of the canonical tags. Juice will be affected, but certainly not split in 2. Also, detecting the user agent and using an adaptive approach does NOT split juice because it simply changes markup, not urls (it's still all on the TLD). – NickWebman Feb 5 '16 at 16:34
0

The main site is build on Hype and it's full of animation so it cannot be only one responsive site.

That is not true at all.

Hype has responsive design features, so you can can update your animation so that it is runs one way on desktops and another way on mobiles while being served within the same page of the same website. Hype itself is literally a responsive design tool. That is the best approach.

But if you don’t want to do that, you setup each page for mobile and then rewrite your JavaScript so that instead of detecting desktops and redirecting them to an entirely different page, you detect desktops and you replace the current page content with the Hype animation within the same page at the same URL.

A key thing to understand is that a URL is the page. One page, one URL, one entry in Google’s database, one bookmark in every browser, and the URL never changes and it never disappears from the Internet. That is literally how the architecture of the WorldWideWeb works. The site might be shuttered, the content removed, but every URL you create should still be there, at least advising the reader that the site is shuttered and the content removed.

So fundamentally, writing your site map out in a list is the first and most important task when creating a Web document:

/about
/bar
/foo
/privacy
/products
/terms

… and you spend a lot of time and effort on this because those URL’s are never, ever going to go away once you create them. (You can choose to break them later, but you cannot remove them from Google and your reader’s bookmarks and other places.)

Then secondarily you put all the about stuff at /about and all the bar stuff goes at /bar and so on, in a single column way that works on every screen, from the tiniest mobile to biggest desktop or TV.

Then after that, you use responsive design techniques to enhance the website for larger screens. Primarily by reflowing the single column into 2 or 3 columns, putting in larger backgrounds for desktops, but also that includes things like Hype animations that only large screens will see. But you don’t mess with the URL’s. Every reader will see your about page at /about but it will look different on an iPhone 5 as compared to a MacBook Pro. If you have a page “/about2” where you are sending desktops, that is an entirely different page in every way. Google may not even see that page, but if they do, they will consider it a different page. The URL is the unique identifier that enables us to tell one page from the other. If you split what you think of as one page onto 2 URL’s, you have made 2 pages. There are complicated ways to workaround this in some instances, but they are not perfect and they are more complicated than just doing it the right way.

If you are new to responsive design, you might want to take a look at Skeleton, which is boilerplate CSS that will enable you to turn your mobile site into a responsive website in about 10 minutes. It makes it easy to assign any element in your page to a grid, and that grid collapses as the screen gets smaller.

Responsive design is not going to go away. It is actually going to need to become more responsive. Watches will get their own 4G and you may want to show a very minimal view of your pages to watch users with your logo as a background and 2 or 3 important links. If your website is responsive, that is 30–60 minutes of CSS coding. There are 4KTV’s and 5K iMacs that you may want to support, which means generating some really high-res images and then 30–60 minutes of CSS coding. A responsive site is doing all the hard stuff in CSS, where it is easy.

| improve this answer | |
  • First of all, you are right about Hype. The main reason i dont want to make the Hype site responsive is because it loads the broswer with much JS. So i want something lighter for small devices. I understand that the URL is the unique identifier of a page but i is the m.example.com amd www.example.com concerned as different pages? – stathisg Feb 5 '16 at 9:03
  • They are considered different pages, but the canonical and rel="alternate" alleviate the issue to some degree. That said, m.dot is your last resort. Adaptive (which I detailed in my first example) or responsive, which do not utilize a separate m.dot domain, are the preferred approach. – NickWebman Feb 5 '16 at 16:45

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.