Hiding Link Underlines On Desktop, Showing Underlines On Mobile

My design includes two ordinary links that go to different pages: "Zap Photoshare" and "Switch to List Gallery". They are both in the header of my app, as seen in this screenshot:
image
As they are ordinary links which go to different pages, they are not styled as buttons.

On desktops, the text is styled to be underlined on hover, and the mouse pointer changes to a hand. This subtle effect avoids breaking up the "header" aesthetic.

However, on mobile devices, there's no hover, and thus at present, no indication that these bits of text are, in fact, links.

Is there CSS which can add an underline, but only on devices which lack a mouse pointer?

Comments

  • I think it's hard to detect that case. I've seen a few solutions that try to do this by detecting touch events, but that doesn't tell you whether the browser *only* supports touch events. Desktop Chrome will support touch events on PCs with touch screens, for example.
  • enyo.platform.touch will tell you if we think that touch events are supported.
  • Thanks! There doesn't appear to be a pure CSS way, but CSS and JavaScript together can. I realized underline should be the default, and machines with mice should have to do extra work (as they are likely more powerful).
    CSS:
    
    a.hoverUnderline {
    	text-decoration: none;
    }
    a.hoverUnderline:hover {
    	text-decoration: underline;
    }
    
    JavaScript:
    
    	create: function () {
    		this.inherited(arguments);
    
    ...		
    		if (! enyo.platform.touch) {   // presumably has a mouse pointer
    			this.$.viaZap.addClass('hoverUnderline');
    			this.$.switchToList.addClass('hoverUnderline');
    		}
    	},
    
    If the machine has touch events and a mouse pointer, links will always be underlined, but that's good, as the user may not be using the mouse.
  • This may not solve your problem, but I want to share my thoughts with you:

    I think it is good to underline the links anyway if you want people to tap or click there (or find another way to indicate there is something clickable). On a desktop machine the user cannot realize that there are links in your header until he moves his mouse above those links triggering the hover effect. This problem is only more obvious on touch devices, but it exists on both.
  • It's true that there ought to be some cue to the user that these are links. "Switch to List Gallery" is in a different font, and it's placement suggests that it's different from the header text. On the other hand, "Zap Photoshare" has nothing to suggest it's a link, and users are unlikely to discover that except by randomly mousing over and noticing the cursor and underline that appear. So, I would agree that's a currently unsolved problem in my visual design.
  • reeder, put a button in your life.
Sign In or Register to comment.