Welcome to WebmasterWorld Guest from 34.229.194.198

Forum Moderators: Robert Charlton & goodroi

New site Design - SEO Question about a Design Principle used

     
4:01 pm on Jan 26, 2019 (gmt 0)

Preferred Member from US 

5+ Year Member

joined:June 14, 2010
posts: 612
votes: 8


Hi All - A longtime client hired another company to handle a complete business rebranding. Everything from graphics, to banners, business cards, etc. Included, was also a new website design (UX mainly - no new content other than graphics, but also changing domain - yeah, ouch) I have been involved 100% of the way to minimize the negative seo hit as much as possible.

Leaving everything else thats being changed off the table - the new design has a feature that I'm not sure how it will be viewed in SEO terms as it relates to mobile/desktop.

Desktop / Standard view - There are a series of horizontal tabs/divs that show/hide teaser product content based on click. Almost slider like functionality. Product 1 is shown automatically on page load, when you click on "Product 2", the div slides away and shows the next product. Rinse an repeat for the 8 products they sell. It works great and as expected and displays as follows on desktop:

[Product 1] [Product 2] [Product 3] [Product 4] [Product 5] [Product 6] [Product 7] [Product 8]

[Overview content displays here, based on the product tab you click - with a link to the product landing page]

Mobile / Responsive - I brought to their attention that on mobile devices, the UX was poor since the tabs stack up on top of each other. If a user on a phone for example clicked on "Product 2", they'd never actually see the content since it was hundreds of pixels below the viewport, as the other "Product" tabs, seen below:

[Product 1]
[Product 2]
[Product 3]
[Product 4]
[Product 5]
[Product 6]
[Product 7]
[Product 8]

[Overview content displays here, based on the product tab you click - with a link to the product landing page]

My suggestion to them was to either minimize the icon sizes so they fit better on mobile with 4 or all 8 on a single row, or to use a mobile jump-menu of sorts, allowing the user to choose and view. OR, to jump down to the anchor section of the div.

What they decided to do was replace the entire section with a link menu, that once below a specific screen size, css takes over and the tabbed divs go away completely (display:none), and instead of show/hiding the teaser content, the images are linked directly to the product pages.

[Link to Product 1] [Link to Product 2] [Link to Product 3] [Link to Product 4]
[Link to Product 5] [Link to Product 6] [Link to Product 7] [Link to Product 8]

What, if any, kind of effect is this going to have on SEO? It seems that losing several hundred words is going to have an effect, and I need to be able to put this into words if so.

Will it be viewed as a type of manipulation?

Thanks in advance for any suggestions or opinion.
4:41 pm on Jan 26, 2019 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:4159
votes: 262


Just a general observation because the desktop view is no longer considered to be the "standard" view - code it optimally for mobile and enable desktop viewing of the same content. The 'slider' behavior described for desktop viewing is fairly common on mobile, it sounds like it only needs to be adapted to allow navigation between views, but within the view rather than on a separate menu/tab setup.
4:47 pm on Jan 26, 2019 (gmt 0)

Senior Member

WebmasterWorld Senior Member Top Contributors Of The Month

joined:Apr 1, 2016
posts:2354
votes: 625


In my opinion the SEO implication is mostly determined by technical issue, as in how the links appear in the code, if at all (inserted after the fact with js/fetch). In this case, it would be hard to say without more information.

Don't loose sight of the fact that Google now crawl nearly all sites using the mobile-first index. Whatever your implementation ends up being be sure that the mobile version is the primary one, where everything appears as it should.

My go to solution for dealing with the narrowness of the mobile layout is the carousel. Place each tab in a horizontally swipeable div. Like Google use in the SERPS for images and videos.
4:48 pm on Jan 26, 2019 (gmt 0)

Preferred Member from US 

5+ Year Member

joined:June 14, 2010
posts: 612
votes: 8


@not2easy -

Thanks for the observation, and I agree. One of my key points to the design team was for "mobile first", so that is what they worked toward. It was a poor choice or wording on my part to list desktop as "standard" view.

I also agree on both views and the ability to show the same content, though slightly different based on device.

Thanks.
4:50 pm on Jan 26, 2019 (gmt 0)

Preferred Member from US 

5+ Year Member

joined:June 14, 2010
posts: 612
votes: 8


@NickMNS - Thanks for the carousel suggestion.

The links are simply hardcoded links from the images and no injected. They've used show:none on the desktop version to hide the content tabs, and just replaced them with a link menu. All via css.

Thanks
5:39 am on Jan 27, 2019 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member tangor is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Nov 29, 2005
posts:9038
votes: 752


In most cases one codes for the user first, then device ... mobile has overtaken desktop. Obvious statements, but SEO is not about the user or the device, it is about gaming a system that is doing all it can to work against you.

Code for the user, then the device, and avoid dumb stuff. The "seo" will then follow in a natural and repeatable way.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members