Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

I have a dropdown menu and I'm a trying to make it function more logically on touch devices, it currently following the link.

On desktops the dropdown menu is displayed onmousehover and when the menu item is clicked, you are taken to a page. I've added a piece of code to this so it doesnt follow the link on touch devicesc.

function(e) {
    if (isTouch) return false;
    showMenu();

}

I'm a little concerned with the SEO implications of this, will it have any impact?

share|improve this question
    
Touch device isn't a useful classification. Each individual input can be touch or mouse based (or even keyboard based). –  CodesInChaos Dec 5 '13 at 16:13

2 Answers 2

up vote 8 down vote accepted

This will not hurt you. Having your site do different things depending on environmental factors (such as the type of device) is common and ok to do. You only have an issue when you intentionally serve different content to search engines than to users and that clearly is not the case here.

share|improve this answer
1  
I'd like to reiterate that it is the intent that matters. If the href shows a page with the same links as what would be in the menu, it is fine. Using the technique for taking search engine spiders to a keyword rich page that is never accessed by visitors that have JavaScript enabled could incur the wrath of search engines. –  Stephen Ostermiller Dec 5 '13 at 14:14

Google and other search engines understand a great deal of JavaScripts these days and the code you displayed search engines will have no trouble understanding it. Most responsive frameworks if not all use a similar method to render the menus, bootstrap, zurb foundation etc on Mobile devices.

If you would like to use a non-js method then you could use a form using options and then rendering the form only on the mobile device using a media query.

Form Example

@media (max-width: 640px) {header form{display:none;}}
@media (min-width: 641px) {header nav{display:none;}}

The benefits of this also would mean that anyone on a mobile device that has disabled JS for one reason or another then the page would still render and be usable, while with the current version you have it will be not-usable for people with no js on touch devices.

NO JS

I've seen many devices these days like tablets and large led screens with touch screen espiecally laptops with Windows 8 so its likely these will become more common so it might be even better to have a no-js rather than just a min-width, like so:

.no-js {header nav{display:none;}

Then of course you just need a JavaScript to remove the no-js from the html when JS is present.

Summary

If maximum compatibly is importance then go with NO-JS. if you believe that user experience and not many people will be disabling JS then go with the CSS/JS solution as thats much easier ;)

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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