Responsive Web Design - Build a Tribute Page

Hi,

This is my second time doing the Responsive Web Design tutorial. Here is my revised submission: fCC Tribute Page - Gioachino Greco (codepen.io)

Some background:

My first time through the Responsive Web Design course I merely tried to pass the submission tests because I was anxious to get to the JavaScript tutorials, not fancying myself as much of a visual designer. Here’s my original submission: A Pen by Earthrise (codepen.io)

While I did complete everything, I hardly felt like my projects were anything worth sharing and I didn’t feel like I actually learned CSS to a meaningful degree.

So I went back through everything and drafted my own notes in the form of technical documentation pages. That is, I wrote my notes in a text editor and formatted them as HTML pages. That gave me a lot more practice with both CSS and HTML.

Now back at the projects portion, I decided to look at other submissions on the forums and do a closer analysis of the example Tribute Page provided by fCC.

I’m open to any manner of feedback on this, and there are some areas I’d like to hear people’s thoughts on:

  • With what little I know about the “mobile-first” approach, I made an effort at this. Did I hit the mark?
  • I didn’t like how things looked when I tried to add background colors, so opted to keep things simple. Perhaps there are were some ways for me to inject color?
  • I wasn’t too sure how I should handle typography. I gathered that I could set a “base” font size in the root element (html), and opted to change that size from 16pt to 10pt. I see that people prefer to declare font-size variables, but it felt like I was just declaring tons of variables and unnecessarily complicating my code. Perhaps there are some conventions I should follow here?
  • I had footnotes originally before switching to a tooltip approach. It was a little tough for me to implement, and what I have is a Frankenstein of w3schools and Stack Overflow solutions. It took a lot of trial and error for these to appear correctly. Could this have been implemented in a neater way? Could they look better? Will these be picked up by screen readers?

Thanks for your attention.

I clicked the link to your codepen and there’s no CSS appearing to me, is there something you missed?
image_2022-04-09_174627

This is how your website looks like on mobile:


The paragraph under the image is too small for mobile users to read, the paragraph under the Who was il Calabrese, as well.

I really hope you linked us to the wrong codepen, though. I was expecting to see media queries, which is supposedly done in CSS.

You can try this website to get yourself some idea about what colors to use: coolors.co

1 Like

Yeah, I guess, but what you’re doing here is a very “top to bottom” page so mobile isn’t going to be much of an issue. You don’t have any horizontally arranged elements or images that span the width of the page, so you aren’t going to have too many issues.

  • I didn’t like how things looked when I tried to add background colors, so opted to keep things simple. Perhaps there are were some ways for me to inject color?

I don’t know. I don’t think you should inject color just for the sake of color. Sure, you have have color themes, but you don’t have a lot of different things you could color here. You don’t have buttons or banners or headers or logos, etc. I wouldn’t worry about it.

I wasn’t too sure how I should handle typography. …but it felt like I was just declaring tons of variables and unnecessarily complicating my code …

The need will become more clear as you work on large projects. If you have a project with 83 UI pages and the designer sends you an email saying that all the subtitles should now be 23px instead of 22px, then changing that variable in one place is suddenly a life saver.

I’m not sure about tooltips. But I find it odd that you’re worried about screenreaders but you didn’t give your images and alt.

And this:

<a href="https://www.chessgames.com/perl/chessplayer?pid=72111" target=_"blank">

What is that target?

You should run your code through an HTML validator - you have some other minor errors. Check out this one. You’ll need to move your style section into your head for it to be able to parse your page properly.

1 Like

Thank you, xynoan.

Yeah, I did everything in a text editor and just dropped it all into the HTML section. I’ve just moved everything over to the CSS window, now, where you’ll see one @media query.

Yup, I agree with that. Is there perhaps a standard font-size we should be aiming for for mobile? I also felt like my h1 tag wasn’t much bigger than h2, but didn’t want to leave it up to guesswork or my artistic sensibilities.

Should image captions be smaller than paragraph text?

This is great, I’ll definitely play around with this. Thanks again.

Thank you, Kevin.

All the above answers make perfect sense to me.

Great, I was hoping for clarity on this – I was under the impression that if a figcaption element is used, there isn’t a need for alt text. I can’t find immediately find the guidelines I was using, but this Stack Exchange answer is the same sentiment: html - Accessibility - Difference between and - Stack Overflow

But as I look further, I now see there are notions of functional descriptions (alt text) and illustrative descriptions (figcaption) and, even with a caption, I could have written different alt text for both images (source: Alt vs Figcaption (thoughtbot.com)). I’ll fix this now.

This was helpful, thank you.

Nope, there’s no general font-size for us to use for mobile. The fun thing about these stuff is you can play with it. If you feel comfortable - or in a sense, if you feel like it’s readable for mobile users, that’s pretty much what matters the most.

I like what you’ve done with the page so far. The font styles you chose suit the topic nicely.
Some additional touches you may want to make are:

  • Changing the font of the h1, this will help distinguish it better from the rest of the headers in the page (or conversely changing the font style of the h2s)
  • Adding a border around the pictures and blockquotes, this will help separate it from the text above and below
  • The 2 links that have very thin lines under them, I feel they may be quite difficult to see for some people. So perhaps making the line thicker or changing the background color behind the text would help it to stand out better
  • Lastly, have a go adding hover effects to any text or links that get hovered. It could be as simple as changing the text color on hover.

Other than that, keep up the good work!

1 Like

Thank you for these suggestions, Brajesh.

I used a heavier font-weight for the h1-tags and I think this offers more contrast. I also switched “Courier New” out for “Cormorant Garamond”, using standard Garamond everywhere else.

I added a border around the figures, this does help separate them from the remainder of the content. I didn’t quite like how borders looked around the blockquotes, though.

I made the lines thicker for the tooltips and added hover effects to these, as well as to the links.

I changed the font-size for captions to 16pt and set body font-size to 18pt (in response to previous feedback).

Altogether I like these additional touches, thanks.

1 Like

Awesome job! It’s come along very nicely in my opinion.
I wouldn’t fret too much more about how this page looks. You’ll learn so much more, you’ll be able to come back and see just how much more you know and how much better you can apply that knowledge.

I’m looking forward to seeing your future projects and your overall progression on your coding journey, keep it up! :slight_smile:

1 Like

The answer is “it depends” (You’ll get that answer a lot when it comes to accessibility). :smiley:

If the <figcaption> adequately describes the information the image provides to a sighted user then you don’t need additional alt text on the image but must instead set it to alt="". It is very important to set alt to an empty string (no spaces in there) in this case so that screen readers know your intention is to hide the image from them.

For your particular page, I see you have added alt text describing the image. I think this is appropriate as the figcaption doesn’t reference what the image actually looks like but does reference the image itself.

Writing alt text is an art. There is no one correct way. The alt text should convey what the intended meaning or purpose of the image is. In this case, I think it is to show what he may have looked like, and thus you have done a good job of providing that information.

1 Like

While I’m at it, just a few more accessibility related things for you.

  • The color of your links is just a little too light to have the minimum necessary contrast with the background. There are a ton of tools to help you test for contrast accessibility. One of my favorites is the WebAIM Contrast Checker. They’ve got to have a contrast of at least 4.5 to 1.

  • The tooltips are definitely failing some accessibility requirements (for example, you can only see them if you hover with a mouse, keyboard users can’t get to them at all). Surprisingly, something that seems so simple is actually very very complicated to implement accessibly. In fact, the ARIA Authoring Practices doesn’t even have a working example for tooltips yet because people are still arguing over how to best implement them. Sarah Higley provides one of the best overviews on making tooltips accessible and you will see that it is quite long and requires quite a bit of work (and JS). She does have a working codepen example though, so you could give it a shot if you want. Bottom line, most accessibility professionals will tell you to avoid tooltips unless absolutely necessary, which is what I would advise you to do here. Make these footnotes instead, which are easier to implement accessibly. There is an article by Kitty Giraudel that can give you the gist of it (with codepen implementation included).

1 Like

I’ll get acquainted with the contrast checker, that should be a big help.

Yes, I was reading about footnotes and accessibility and did come across that article by Kitty. Decided that I liked tooltips here more. That article by Sarah looks fairly definitive, I’ll certainly read that. Wish I had come across it sooner!

Thank you @bbsmooth!