0

Is there an adverse effect of capturing screen size with JS and rendering different HTML contents via AJAX based on user's screen size, mainly from SEO perspective?

I'm working on an ecommerce app where the homepage can be too lengthy for mobile device. For instance, there is a tab content which displays several tab-headers and 8 products per tab. This is good on tablet/desktop, but too lengthy on mobile, leading to poor user experience. What our company decided is to display only the tab headers on mobile, and not render any product under the tab. However, hiding all the products with all the thumbnail images via CSS seems like a waste. This led me to load the contents via AJAX based on user's screen size. The drawback is of course, when the user resizes the browser, the web app will still display the tab headers unless a full refresh is done. This is not a problem for us.

So the main question is - is it a good practice to render different HTML contents from server-side based on screen size?

Also, we prefer not to separate the website into two versions (m.example.com and example.com) because there are just few scenarios where we feel that rendering different HTML contents are required for better performance.

Improve this question
2

1 Answer 1

Reset to default
2

is it a good practice to render different HTML contents from server-side based on screen size?...Also, we prefer not to separate the website into two versions...

No for a couple of reasons.

  1. As closetnoc pointed out, your website will then commit an act of "cloaking" which is serving different content from one URL based on a screen size. Cloaking is bad because people who find your site in the search engine results pages don't want to click on something only to find out that they accessed something completely irrelevant to what they clicked on.

  2. Processing speed might be slower. To make a site fast, its advisable to cache the HTML output, especially if the page requires several seconds to load when not-cached as a result of long loops (or similar) executed in a server script. If you're going after a third-party software for caching like w3 total cache, chances are there may not be an option to configure to cache based on advanced metrics such as screen size.

If you can't get away with responsive design, then I'd suggest using two versions of your site. You can even use a folder to designate versions. For example:

http://example.com/whatever  <--desktop site
http://example.com/mobile/whatever  <--mobile site

Simply replace "whatever" with your usual URI. That way, you can have two versions running on one domain.

And as for hiding assets with CSS being a waste, why not put all your assets (including company logo) into one image (make a CSS sprite), then when each page loads, load the company logo so that you won't feel that you're unnecessarily loading extra image files since all images are then in one file.

Improve this answer
1
  • Thanks for letting me know about cloaking, definitely an interesting read. This is what I found out - Cloaking refers to the practice of presenting different content or URLs to human users and search engines. And the video from support.google.com/webmasters/answer/66355 explains that what I'm doing is not considered cloaking? As for the images, I can't really combine the images since the products which will appear on the homepage is dynamic and the URL of each product is fetched from db.
    – kent-id
    Jun 20, 2016 at 5:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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