Issue 4797 - Separate white box and text from eyeo.com homepage banner

pages/index.tmpl

Index: pages/index.tmpl
===================================================================
--- a/pages/index.tmpl
+++ b/pages/index.tmpl
@@ -9,17 +9,23 @@
       "@type": "Organization",
       "url": "{{ config.get("general", "siteurl") }}",
       "logo": "{{ config.get("general", "siteurl") }}/images/logo-3x.png"
     }
   </script>
 </head>
 
 <div id="home-image-container">
-  <img alt="eyeo office" src="/images/eyeo-home-1x.png" />
+  <div>

[juliandoucette, 2018/01/18 21:43:51]

NIT: This could be a header, heading, and subtitle

<header>
  <img>
  <div>
    <h1>
    <p>

[ire, 2018/01/19 09:16:27]

I considered this but I didn't really think that this was the page header. Seems
more like a tagline or something rather than an <h1>

[juliandoucette, 2018/01/22 16:06:01]

Seems like a header and tagline to me. Why does it not seem that way to you?

[ire, 2018/01/25 11:54:14]

To clarify, I said the text seems like a tagline rather than a heading (i.e.
<h1>..<h6>). 

I'm not necessarily arguing against the use of the <header> element. However,
the use of the <header> element typically implies than an actual heading (i.e.
<h1>..<h6>) will be within. My position is that I don't think the text "We want
to make the internet better for everyone. Purging bad ads is a good start" is
heading text. It seems to me to be a tagline, so a paragraph element that may go
beneath an actual heading. 

I think the heading (<h1>) of this page should be "About Us" or something
similar since it's the title of the document.

Also, this is probably an unconscious opinion I've had, but I don't think
headings (i.e. <h1>..<h6>) are generally sentences. But that might not be a real
requirement.

[juliandoucette, 2018/01/25 14:27:29]

I understood you. I was arguing against your interpretation of heading contents.


Although it's not spelled out in the standard, heading contents (especially h1 >
h2 > h3 ...) is one of the most important elements for search engine
optimization. A "good" heading is typically made up of a short sentence
containing as many keywords as possible without duplication or spam (AFAIK).

Example: bbc.com

- All of the article titles are h1s on their respective pages
- All of the article titles are short (optimized?) sentences

Of course, I will admit that "We want to make the internet better for everyone"
is not very "optimized". And that I think it really does make a better "tagline"
or "description" underneath a heading. But, perhaps, it is better than "About
Us" (the unfortunate title of this page and many others on the internet -
unfortunate because it's hard to compete over the keywords "about" and "us").

Therefore, I'm arguing that the proper implementation of this page consists of a
header containing the <h1> "We want to make the internet better for everyone."
and the subtitle <p> "Purging bad ads is a good start." 

- Acknowledging that we could make it all one h1 and <strong> the first part if
we wanted to optimize our SEO slightly at the expense of our accessibility
- Acknowledging that I would accept an sr-only h1 "eyeo" above the "tagline"
that we are arguing about as a compromise between both of our solutions
  - But that would still not be a "good" solution IMO because it would be a
wasted opportunity to put more searchable contents within the h1 on our homepage

[ire, 2018/01/26 10:11:00]

Okay. I'm going with making the whole phrase the <h1>.

Why do you think this is compromising the accessibility?

[juliandoucette, 2018/01/30 04:22:19]

I don't; on second thought. I think <strong> is a reasonable
implementation/compromise.

My first thought went something like this: W3 recommends that we do
sub-(titles/headings)/bylines like this[1]. These are clearly two sentences. One
seems header like and the other seems byline like to me. But, this byline is
more searchable than this header - so it would be nice to include it in the
header for the sake of SEO in-case bylines in <header> elements are not given as
much importance by search engines (I don't actually know). But I don't want to
risk making these less semantically distinguishable as separate and
title/subtitle like to screen readers.

[1]: https://www.w3.org/TR/html51/sections.html#the-header-element

[ire, 2018/01/30 07:20:03]

Acknowledged.

+    <img alt="eyeo office" src="/images/eyeo-home@1x.jpg" srcset="/images/eyeo-home@1,25x.jpg 1.25x, /images/eyeo-home@2x.jpg 2x" />

[juliandoucette, 2018/01/18 21:43:51]

You included more images than you linked to in srcset.

[ire, 2018/01/19 09:16:27]

Done.

[juliandoucette, 2018/01/22 16:06:01]

We have not used these conventions before:

1. "@Nx" (the @ sign)
2. "N,NN" (the comma)

I have used "-" instead of "@" and "." instead of ",". I am open to changing
these conventions and I think we should be consistent.

(I'm asking you to change it or request that we change the conventions.)

[ire, 2018/01/25 11:54:14]

If we were starting from scratch I would say that the @N,Nx format is cleaner,
particularly when there are decimals involved. However, in this case I'll go
with the -Nx format since 1) I'm not using decimals here so the advantage isn't
relevant 2) I don't think the @N,Nx format is *that* much more superior, if I
feel more strongly about it I'll bring it up to change it in the future

[juliandoucette, 2018/01/25 14:27:29]

RE: 2 - Feel free. If the "@" and "," don't have any negative side effects other
than being "different" then it seems like you can/are making a good case for
them (and we can change format across the board separately).

[ire, 2018/01/26 10:11:00]

Cool, agreed.

+    <p>
+      <strong>We want to make the internet better for everyone.</strong><br>

[juliandoucette, 2018/01/25 14:27:29]

- They wanted "better for everyone" on a separate line IIRC
- The position of the bounding box is changed
- The strong text is less strong

Will you please confirm/approve these things with Jeen (or Christiane)?

[ire, 2018/01/26 10:11:00]

I showed Jeen a demo of how it currently is and she have her approval of all 3
changes.

[juliandoucette, 2018/01/30 04:22:19]

NIT: Did you also happen to show her in-between sizes e.g. by demo and not
screenshots?

[ire, 2018/01/30 07:20:03]

I showed her a [screen
recording](https://drive.google.com/file/d/1WXXJb2Dj-YPXmjcCmMRnFdD6KlSJXPYy/view?usp=sharing)
of me resizing from desktop to mobile, so she saw all the in-between stages as
well

+      Purging bad ads is a good start.
+    </p>
+  </div>
 </div>
 
 <div id="who-we-are" class="content-block columns-container two-columns">
   <div class="column" markdown="1">
     <? include index/whoweare ?>
   </div>
 
   <div class="column">