Feature #15114
Avoid styling headers like buttons
0%
Description
See attachment. “News” and “Security” are headers while “Windows” and “macOS” are buttons.
- One way would be to use a consistent color on buttons (maybe green like we do for links).
- Another way would be to avoid a plain dark background.
Subtasks
Related issues
|
Related to Tails - |
Resolved | 2018-05-08 | |
|
Blocks Tails - |
Resolved | 2018-03-09 |
History
#2 Updated by sajolida 2018-04-07 07:13:07
- blocks
Feature #15392: Core work 2018Q2 → 2018Q3: User experience added
#3 Updated by sajolida 2018-04-17 12:17:31
- Assignee deleted (
None) - Target version set to Tails_3.7
- QA Check set to Ready for QA
- Feature Branch set to feature/15114-remove-purple-rectangles
Here is a branch.
I think this work qualifies as “important improvement to our core pages”, see https://tails.boum.org/contribute/working_together/roles/ux/.
It also comes from the expert review done last summer Feature #14548.
I’m not super convinced by the aesthetics of 9db8b487c7 but black on green is reported as really having a much better contrast.
Ulrike: Do you want to review my branch? If so, then clock your time and it will go in my UX budget.
I’m changing and cleaning up stuff in many places but I did small commits. My branch also touches on some work that you did recently (color scheme).
#4 Updated by Anonymous 2018-04-18 08:42:28
I will review this either this or next week.
#5 Updated by Anonymous 2018-04-24 13:26:49
Looked at your branch. I like the fact that you are removing some unnecessary divs. However, I wonder if using a
for what was and still is in fact a title is a good idea. Maybe it would be better (for SEO and screen readers) to re-use a h3 with the class “panel-body” instead.
I pushed one change in 428ada88e7ee11cfde8ada28718331fad2af1891, see https://www.w3.org/TR/CSS21/fonts.html#value-def-generic-family “Generic font family names MUST NOT be quoted.”.
#6 Updated by Anonymous 2018-04-24 13:28:12
- Assignee set to sajolida
- QA Check changed from Ready for QA to Dev Needed
Reassigning to you to make the h3 change happen if you agree. Everything else LGTM.
#7 Updated by sajolida 2018-05-04 16:26:48
> However, I wonder if using a
for what was and still is in fact a title is a good idea. Maybe it would be better (for SEO and screen readers) to re-use a h3 with the class “panel-body” instead.
All the
that I removed were in the purple buttons and I don’t think
that these buttons qualify as titles. Maybe you got confused because on
/install/debian for example, there is now:
* 1
labeled “Install from another Tails”
- 1 button (.panel-body) labeled “Install from another Tails” as well
But the title is still using
.
Similarly, I wouldn’t say that “Let’s start the journey!” on /install or
the OS button on /install/os are titles but rather calls to actions.
Or did I miss something?
> “Generic font family names MUST NOT be quoted.”
Thanks!
#8 Updated by sajolida 2018-05-04 16:27:27
- Assignee deleted (
sajolida) - QA Check changed from Dev Needed to Ready for QA
#9 Updated by Anonymous 2018-05-05 14:04:20
sajolida wrote:
> All the
that I removed were in the purple buttons and I don’t think
> that these buttons qualify as titles. Maybe you got confused because on
> /install/debian for example, there is now:
>
> * 1
labeled “Install from another Tails”
> * 1 button (.panel-body) labeled “Install from another Tails” as well
>
> But the title is still using
.
Really?
I see in the usb-overview:
- <div class="panel-heading">
- <h3 class="panel-title">Install from another Tails</h3>
- </div>
+ <div class="panel-body">Install from another Tails</div>
- <div class="panel-heading">
- <h3 class="panel-title">Install from Debian, Ubuntu, or Mint</h3>
- </div>
+ <div class="panel-body">Install from Debian, Ubuntu, or Mint</div>
- <div class="panel-heading">
- <h3 class="panel-title two-lines"><small>Install from Debian, Ubuntu, or Mint using<br />the</small> command line <small>and</small> GnuPG</h3>
- </div>
+ <div class="panel-body two-lines"><small>Install from Debian, Ubuntu, or Mint using<br />the</small> command line <small>and</small> GnuPG</div>
> Similarly, I wouldn’t say that “Let’s start the journey!” on /install or
> the OS button on /install/os are titles but rather calls to actions.
Sure.
> Or did I miss something?
#10 Updated by Anonymous 2018-05-05 14:06:30
Let me rephrase this a bit. I agree that some buttons are not titles. But in SEO, titles, strongs and emphasized text are being marked as important parts of the text, and I think we should mark some of them as such. You could also use a strong or em instead (and style it so it looks like you want).
#11 Updated by Anonymous 2018-05-05 14:07:37
- Assignee set to sajolida
But in the end you decide what you want to do, this is just a remark from my side after all and maybe we think it is sufficient to have the title use a h3 on the corresponding installation page.
#12 Updated by sajolida 2018-05-07 18:02:22
- Status changed from Confirmed to Resolved
- Assignee deleted (
sajolida) - QA Check deleted (
Ready for QA)
Ok! I understand better now I think.
I had yet another look at the actually content that is being modified and which
on fake titles I’m removing.
Here is a list:
- /install: Let’s start the journey!
- /install/*/*-overview: Let’s go!
I don’t think these two deserve SEO optimization. So it’s actually an improvement.
- /install/*: Install from another Tails
- /install/*: Install from $OS
The ones you are referencing in your comment. We have real
titles on top of these pages with the same strings. So we’re not loosing anything.
- /install/os: Windows, Linux, etc.
I prefer having search engine point to /install/win than to /install/os when people search for installing Tails on Windows. So I think this is actually an improvement.
I’ll merge my branch.
#13 Updated by sajolida 2018-05-14 18:43:25
- related to
Bug #15597: Fix color scheme of buttons in /upgrade added