{"id":153,"date":"2010-04-05T23:34:15","date_gmt":"2010-04-06T04:34:15","guid":{"rendered":"https:\/\/billhiggins.us\/blog\/?p=153"},"modified":"2010-04-11T15:00:05","modified_gmt":"2010-04-11T20:00:05","slug":"the-ipad-and-onmouseover","status":"publish","type":"post","link":"https:\/\/billhiggins.us\/blog\/2010\/04\/05\/the-ipad-and-onmouseover\/","title":{"rendered":"the iPad and onmouseover"},"content":{"rendered":"<p><span style=\"color: #ff0000;\">Update<\/span><span style=\"color: #ff0000;\">: I&#8217;ve created <\/span><a href=\"https:\/\/billhiggins.us\/tests\/link-mouseover.html\"><span style=\"color: #ff0000;\">a test page<\/span><\/a><span style=\"color: #ff0000;\"> for this scenario, but I haven&#8217;t had a chance to test it yet on my iPad.<\/span><\/p>\n<p>In our <a href=\"http:\/\/jazz.net\/\">Jazz<\/a> UIs, we tend to use &#8220;hover previews&#8221; quite a bit. That is, if you hover over a link, after a second or so it will show a small preview of the resource at the other end [1]. <a href=\"https:\/\/jazz.net\/wiki\/bin\/view\/Main\/WebUIPatternAndStyleGuide\">Jazz style guide<\/a> example below (copyright <a href=\"http:\/\/ibm.com\/\">IBM<\/a>).<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-154\" title=\"Jazz Rich Hover\" src=\"https:\/\/billhiggins.us\/blog\/wp-content\/uploads\/2010\/04\/hyperlink-rich-resource-examp.png\" alt=\"\" width=\"539\" height=\"291\" srcset=\"https:\/\/billhiggins.us\/blog\/wp-content\/uploads\/2010\/04\/hyperlink-rich-resource-examp.png 539w, https:\/\/billhiggins.us\/blog\/wp-content\/uploads\/2010\/04\/hyperlink-rich-resource-examp-300x161.png 300w\" sizes=\"auto, (max-width: 539px) 100vw, 539px\" \/><\/p>\n<p>This was always broken on the <a href=\"http:\/\/www.apple.com\/iphone\/iphone-3gs\/safari.html\">iPhone&#8217;s Mobile Safari browser<\/a> because I couldn&#8217;t figure out how to perform a mouseover action on a mouse-less interface.<\/p>\n<p>I just noticed that the <a href=\"http:\/\/www.apple.com\/ipad\/\">iPad<\/a> seems to support <a href=\"http:\/\/www.w3schools.com\/jsref\/event_onmouseover.asp\">onmouseover<\/a>. I <em>believe<\/em> I&#8217;ve observed the following behavior:<\/p>\n<ul>\n<li>If a link has no &#8220;on mouseover&#8221; actions (e.g. hovers), a tap follows to the link.<\/li>\n<li>If a link has an &#8220;onmouseover&#8221; action, a tap activates the onmouseover action and a double-tap follows the link.<\/li>\n<\/ul>\n<p>Obviously this implies that you should provide visual indications to your user whether the links provide onmouseover actions or not. For the Jazz links with hover previews we immediately decorate the link on mouseover (different color, double-underline, with a small chevron) and if the user remains over the link for a second or two we then show the preview.<\/p>\n<p>[1] I realize that onmouseover actions attached to links represent a <a href=\"http:\/\/en.wikipedia.org\/wiki\/User_experience_design\">UX<\/a> minefield. A page with too many \/ too aggressive hover actions can feel like an actual minefield!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Update: I&#8217;ve created a test page for this scenario, but I haven&#8217;t had a chance to test it yet on my iPad. In our Jazz UIs, we tend to use &#8220;hover previews&#8221; quite a bit. That is, if you hover over a link, after a second or so it will show a small preview of [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[73,34,33,22],"class_list":["post-153","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-design","tag-ipad","tag-ux","tag-web"],"_links":{"self":[{"href":"https:\/\/billhiggins.us\/blog\/wp-json\/wp\/v2\/posts\/153","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/billhiggins.us\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/billhiggins.us\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/billhiggins.us\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/billhiggins.us\/blog\/wp-json\/wp\/v2\/comments?post=153"}],"version-history":[{"count":13,"href":"https:\/\/billhiggins.us\/blog\/wp-json\/wp\/v2\/posts\/153\/revisions"}],"predecessor-version":[{"id":167,"href":"https:\/\/billhiggins.us\/blog\/wp-json\/wp\/v2\/posts\/153\/revisions\/167"}],"wp:attachment":[{"href":"https:\/\/billhiggins.us\/blog\/wp-json\/wp\/v2\/media?parent=153"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/billhiggins.us\/blog\/wp-json\/wp\/v2\/categories?post=153"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/billhiggins.us\/blog\/wp-json\/wp\/v2\/tags?post=153"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}