Mobile devices cannot render image maps. Image maps require exact pixels widths which cause havoc on mobile phones.
May I suggest that an image map when rendered is also tied to a fallback set of links to the pages it links to and is only revealed at a certain threshold (768px correspond with most tablet sizes)?
Suggested code below:
imagemap {
display: none;
}
@media all and (min-width: 768px) {
imagemap { display: block; }
imagemap .fallback {
display: none;
}
}This will hide the image map on all browsers which are too old to understand responsive media rules.
Anyway, given that image maps are typically used for navigation, is it a good idea to hide them on mobile? Surely, having to scroll the screen would be less broken than not being able to find the links at all...
IMO it would make more sense to use Javascript to make the maps responsive.
Correct @Tgr this is the basis of mobile first development and completely why it should be done the way i am suggesting.
"The absence of support for media queries is in fact the first media query." -Bryan Rieger
As long as the content is still accessible it is irrelevant if the imagemap does not display in an older browser. The important thing is making content accessible not how it is presented. People should upgrade if they can.
Most desktop browsers upgrade these days and are more modern. The same cannot be said for mobile. Many mobile devices do not run javascript or are blacklisted by our code.
Media queries are available since IE 9 so essentially older IE browsers would be effected by such a change and these if so desired can use conditional CSS if so desired (although IMO not worth the effort).
I'm skeptical though that a set of links is a meaningful fallback for e.g. something like this.
I wonder if the extension shouldn't be just changed to use a normal image and transparent overlays instead of an <imagemap> element. That would make using responsive CSS possible. It wouldn't work with poly/circle of course, but I would expect those are rarely used.
Agreed. It's not the best fallback but right now the experience is broken so it's better than that :)
Ideally this should be redone using SVGs on the long term but right now I'm just interested in rectifying the short term - that it's severely broken.
@Tgr I'm in the office today if you want to grab a coffee and brainstorm some ideas and a strategy to feedback to this thread.