: One website for desktops and one for mobile in the same domain I have two websites, one is served to desktops and the other is served to mobiles and tablets. I redirect users with a JS

@Cody1181609

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.

Vote Up Vote Down

@Miguel251

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: 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">

Vote Up Vote Down