Issue 4912 - Update media coverage links on eyeo.com

includes/index/media.html

Index: includes/index/media.html
===================================================================
new file mode 100644
--- /dev/null
+++ b/includes/index/media.html
@@ -0,0 +1,30 @@
+<h1 class="heading centered">

[juliandoucette, 2017/07/31 20:00:27]

Should this be H1?

[juliandoucette, 2017/07/31 22:11:45]

(I see that you have converted the existing markdown as-is. As a result, please
consider this a NIT and address it here *or* in another issue.)

[ire, 2017/08/01 10:04:05]

Yes I did just convert the existing markdown. It shouldn't be an H1, but the
other headings on the page are also incorrect and would be better addressed as
one.

+  <span>Media coverage:</span>

[juliandoucette, 2017/07/31 20:00:27]

Why do we need a span here?

[juliandoucette, 2017/07/31 22:11:45]

(I see that you have converted the existing markdown as-is. As a result, please
consider this a NIT and address it here *or* in another issue.)

[ire, 2017/08/01 10:04:04]

See answer above

+</h1>
+
+<p id="media-links">

[juliandoucette, 2017/07/31 20:00:28]

NIT: I think an unordered list is more appropriate? (But a paragraph is also
fine?)

[ire, 2017/08/01 10:04:05]

I agree with you. Done.

+  <a href="http://www.mediapost.com/publications/article/289691/adblock-plus-comes-to-new-york.html" target="_blank">

[juliandoucette, 2017/07/31 20:00:27]

NIT: I think this is a good candidate for nofollow noreferrer?

[juliandoucette, 2017/07/31 22:11:45]

(I forgot that we will probably add nofollow noreferrer automatically via CMS
somehow.)

[ire, 2017/08/01 10:04:05]

Acknowledged.

+    <img alt="Media Post" src="/images/coverage/media-post-1x.png" srcset="/images/coverage/media-post-2x.png 2x">
+    <span class="sr-only">Opens in a new window</span>

[juliandoucette, 2017/07/31 20:00:27]

NIT: Is there a good reason to put this in an .sr-only span and not at the end
of the image title and alt?

[ire, 2017/08/01 10:04:04]

See my comment in the next patch

+  </a>
+
+  <a href="https://www.nytimes.com/2015/08/20/technology/personaltech/ad-blockers-and-the-nuisance-at-the-heart-of-the-modern-web.html" target="_blank">

[juliandoucette, 2017/07/31 20:00:27]

NIT: We have new window hints for desktops and screenreaders but not for touch
devices. I suggest we put a label above or below this ~list that displays on
touch devices only.

[juliandoucette, 2017/07/31 22:11:45]

(Or we could show a tooltip/button on hover state that says ~"open in new
window" on touch and open on second touch or double touch.)

[ire, 2017/08/01 10:04:05]

I’m not sure how to solve this:

We can’t accurately detect touch devices. See this article -
http://www.stucox.com/blog/you-cant-detect-a-touchscreen/

We can, however, change the style for smaller screens using regular media
queries, but I don’t know the best way to handle this either. The “double-tap”
behaviour doesn’t work well on mobile. Double tapping sometimes causes a zoom.
Displaying the icon above images might be a compromise, but I don’t think it
will look that good. 

The only solution I can think of now is adding a sentence below the icons (that
only show on smaller screens) that says “Links open in a new window“. What do
you think?

[juliandoucette, 2017/08/01 23:07:33]

Two things come to mind...

1. Could we detect a non-touch device by detecting a "hover" event?
2. I don't think that we should rely on the screen width of touch devices... But
the solution that you proposed above seems fine for now. 

We could address this in the simplest way possible in this review or separately.

[ire, 2017/08/02 10:35:57]

I don't think we can do so reliably, because the "hover" event can be triggered
when a user taps the screen. For example, on a touch device, if you press and
hold the logo you will see the external link icon displayed.
I agree it's not reliable. We could actually show the "Links open in a new
window" text no matter what screen size too.

+    <img alt="The New York Times" src="/images/coverage/new-york-times-1x.png" srcset="/images/coverage/new-york-times-2x.png 2x">
+    <span class="sr-only">Opens in a new window</span>
+  </a>
+
+  <a href="https://www.wsj.com/articles/adblock-plus-chief-till-faida-says-consumers-are-fed-up-with-current-online-ads-1462981668" target="_blank">

[juliandoucette, 2017/07/31 20:00:27]

NIT: I would have created a macro for this ~list-item and looped a data
structure instead. But I don't think it makes much of a difference.

[ire, 2017/08/01 10:04:04]

Done.

[ire, 2017/08/01 10:04:05]

I agree. I thought of doing that initially but didn't want to change too much.
Will change it.

+    <img alt="The Wall Street Journal" src="/images/coverage/wall-street-journal-1x.png" srcset="/images/coverage/wall-street-journal-2x.png 2x">
+    <span class="sr-only">Opens in a new window</span>
+  </a>
+
+  <a href="https://techcrunch.com/2016/05/09/adblock-plus-closes-in-on-a-billion-downloads/" target="_blank">
+    <img alt="TechCrunch" src="/images/coverage/techcrunch-1x.png" srcset="/images/coverage/techcrunch-2x.png 2x">
+    <span class="sr-only">Opens in a new window</span>
+  </a>
+
+  <a href="http://www.businessinsider.com/theres-nothing-wrong-about-the-way-adblock-plus-makes-money-2015-9" target="_blank">
+    <img alt="Business Insider" src="/images/coverage/business-insider-1x.png" srcset="/images/coverage/business-insider-2x.png 2x">
+    <span class="sr-only">Opens in a new window</span>
+  </a>
+</p>