: Responsive design, injecting code via Javascript: Is it bad practice? Is the below code problematic in respect to SEO and Google? This is a small sample of how I intend to change my non-mobile
Is the below code problematic in respect to SEO and Google?
This is a small sample of how I intend to change my non-mobile friendly website into mobile friendly using CSS media queries and javascript.
The reason why I want to opt for this type of code is to of course avoid duplicate content in respect to both HTML and code maintenance. The code for the mobile version of the website will be "extracted" from the desktop version, injected in placeholders.
This will allow me to keep the desktop version untouched, add a number of placeholders for the mobile version and populate them in the below way.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style> @media (max-width: 360px)
{
#ul -desktop
{
display: none;
}
}
</style>
<html>
<ul id="ul-desktop">
<li>Bullet #1 </li>
<li>Bullet #2 </li>
<li>Bullet #3</li>
<li>Bullet #4</li>
</ul>
<ul id="ul-mobile"></ul>
<script type="text/javascript">
if($(window).width()<=360)
{
$("#ul-desktop li").each
(
function (index)
{
$("#ul-mobile").append("<li>" + $(this).html() + "</li>");
}
);
}
</script>
</html>
Edit
Of course I might as well decide to have two different versions of the page, one for desktop and one for mobile with a big advantage being that mobile users will not have to download my big CSS/JS files used by desktop, they will download a much, much lighter version of my pages.
But I have server restrictions, such as that I cannot implement user-agent redirections on the server side. So I need some help:
Is there any difference between mobile.mydomain.com compared to mydomain.com/mobile, again, in respect to SEO? Due to server restrictions, I'm afraid I can only opt for the latter.
Would a window.location redirection work in my case? I was thinking about using the matchMedia() JavaScript function, hide all content and show a small indicator with "Loading mobile version" and do the redirection. But wouldn't this solution download two versions of the pages, the desktop and the mobile one after the redirection is complete?
More posts by @Lee4591628
3 Comments
Sorted by latest first Latest Oldest Best
Maybe it's just your simplified example, but your example can be rewritten to use just CSS and media queries only, no JavaScript is required here and no change to the source.
You are "half" using a media query to hide the desktop HTML and using JavaScript to copy the contents of the desktop HTML (in its entirety) into a mobile container - which is presumably styled for mobile. Unless you are actually going to change the HTML markup of the mobile version (in some radical way) then you can simply use CSS and media queries to style it...
<style> #ul -desktop
{
/* Default style for desktop */
} @media (max-width: 360px)
{
#ul -desktop
{
/* Override style for mobile */
}
}
</style>
<html>
<ul id="ul-desktop">
<li>Bullet #1 </li>
<li>Bullet #2</li>
<li>Bullet #3</li>
<li>Bullet #4</li>
</ul>
</html>
But maybe your actual code is not actually like your example and too involved to be manipulated with CSS?
Likewise, your example code is probably going to be OK SEO-wise since the desktop and mobile content is the same. That statement was perhaps a bit hasty / oversimplified. If search engines simply look at the HTML source (as they used to and some still do) then the desktop and mobile content would be seen as the same - the source HTML is the same. However, some will attempt to interpret the CSS and "maybe" JavaScript (to some extent) and this is where problems could arise in your original example.
In your example, if a SE bot was able to process your CSS media queries (which hides the desktop content) but failed to process your JavaScript (either because it simply doesn't process JS, or because the JS is too complex for it to process completely) then you are in danger of having no content at all on your mobile site.
This is an answer to WPRookie82's second question above:
I have two versions of my site as separate pages, but I generate them using PHP so that I don't need separate html pages. But if the content is yours, then paraphrase it somewhat, but most importantly, change the title tag and meta description tags to show that its the mobile version.
Below is an example of what I mean. I made it ridiculously simple for people to understand.
Desktop site HTML code:
<html>
<head>
<title>Sports site</title>
<meta name="description" content="This sports site for your desktop computer is cool">
</head>
<body>
Welcome to the special sports site designed perfectly for your desktop computer. bla bla bla .....
</body>
</html>
Mobile site HTML code:
<html>
<head>
<title>Sports site - Mobile Edition</title>
<meta name="description" content="This sports site for your mobile device is cool">
</head>
<body>
Welcome to the special sports site designed perfectly for your cell phone or smartphone. bla bla bla .....
</body>
</html>
The idea to make a site mobile friendly is excellent, but I don't think your method is best, especially if later you decide to monetize your website with adsense for these reasons:
You're scripting your site so that text is hidden if a screen resolution is under a specific value. Google may think you're playing games when you use this technique and might make your site lower in its index as a result.
The number of bytes required to process the page will include too many unnecessary ones because the client has to download everything including the hidden text in order for the page load to be complete. If the hidden text becomes huge, then mobile users might have a big bill to pay depending on their plan.
There are two ways to solve your situation.
Either create a separate page for desktop users and a separate page for mobile users and send the users to the appropriate page via web browser detection techniques. (There are scripts for this on the net).
Or. 2. Follow your method but only change object properties instead of user readable text. For example, display the same text for both mobile and desktop users, and set an image so the source of it is different for mobile in comparison to desktop. You could do the same with the size of the image too if you want.
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.