seo Question posted in
Some basic information to get you started with this can be found here.

Duplicate HTML or move elements with JS for responsive site – SEO

There’s site I’m working at and design for tablet/mobile devices require me to move elements (from left sidebar to right, change order, etc.). These elements include simple text and images (pretty small, logos).

My question is, what would be the best way to go about this? So far I have only two ways.

1) Duplicate HTML content and then show/hide with CSS media queries. My concern here is that it’s not SEO friendly, and content / images still gets rendered, even if hidden. Could that leave me with a performance problem?

2) Move elements using JS. My concern here is that people with JS disabled will still see the content in old places, and maybe this JS solution could impact performance even more?

Would really appreciate some input on best practices in a situation like this.

Here’s what I’m trying to achieve:
layout

Tags:

2

Answers


  1. 0

    You mentioned that you were reluctant to use display: hidden because something about them being rendered. If I’m understanding correctly, then you can use display: none on the right side for example. Then in your media queries, you can set content on the left to display: none and content on the right to display: initial. That should work just fine, if I understood you correctly. Then no space will be allocated for the hidden elements.

    For example:

    .leftDiv {
   display: initial;
}

.rightDiv {
   display: none;
}

@media screen only and (max-width: 1000px) {

.leftDiv {
   display: none;
}

.rightDiv {
   display: initial;
}
    Login or Signup to reply.
  2. 0

    The questions are contradicting a bit 🙂

    First of all, it’s 2016 in the WEB, if you are speaking about having responsive layout, support of mobiles, tablets, desktops – they will have JavaScript support, so you shouldn’t worry. – it is answer on your question number #2. The percentage of people not having JS is extremely low, it’s below <1%.

    CSS media queries are enough to make good responsiveness. Sometimes you need to add helper methods with JS to manipulate DOM and to make it even more advanced.
    You may check how they do responsiveness with classes in Twitter Bootstrap.

    Sometimes content will be duplicated in HTML, but as soon as it’s not visible simultaneously on the screen because of visibility rules from CSS media queries – it will not do any harm on SEO.

    There’s the way to over-complicate things a bit, RESS: Responsive Web Design + Server-Side Components, and to serve different HTML layouts depending on the detected User Agent.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search