I think you’ve already received a lot of great feedback.
One thing that would highly increase the user experience is separating the different sections on each site.
Example:
When you go to https://slack.com and navigate the site with your space bar, this feels like a slideshow. The first two “slides” have a purple background. The next two slides make this hard cut by using a light grey background. The next two slide use a dark blue background.
Another, more simple example is on https://stripe.com. The first part of the site (business stuff) has a light grey background. The next part (talking about developer stuff) has a dark blue background. This alternating pattern goes on and on.
On both sites you don’t have to read the actual content to know where a new section starts.
I think your website it’s really good in terms of usability. I just see potential improvements in UI design. I think you should use diffrent layout system for display than in mobile with Css gird, Flexbox and css keyframe rules. I think it looks better in mobile. But in a 31 inch monitor everything is so big.
Hi @jwilkins.oboe, congrats on your website. The subject matter is very interesting as well.
Your site is very responsive at narrow view ports. I narrowed my browser as far as it could go and went through every page and did not hit one horizontal scroll bar. It is also formatted very nicely, taking advantage of all the horizontal space available, nothing feels crowded. The one suggestion I would give for the narrow view port is to make the footer links bigger. They are only 10px font size and getting pretty hard to read (for these old eyes at least). I think you have plenty of room down there to leave them bigger.
At wider view ports I would suggest you put a max-width on the content so that the line length doesn’t get too long, such as for the content on the About page, or the Composer pages. While there is no strict rule as to what a max-width should be, I think anything in the high 40s to low 50s em would be reasonable.
A few semantic issues. You’ve got a <footer> embedded in a <footer> and a <nav> embedded in a <nav>. While this does appear to validate I have my doubts this would be considered a best practice. Also, MDN says that you can’t embed a <footer>. Regardless, I don’t think you need the extra tags, you can get away with just one of each. And I just noticed that a few of the pages don’t have a <main> (e.g. About, Listen, Contact).
A few minor accessibility issues. I’m going to get pretty picky here because overall the accessibility is very good.
On the Contacts page, the social media links need a text label. The easiest way to do this is to add text to each link and visually hide it.
For the alt text on the game image on the Home page, get rid of the word “image” at the end. Generally you don’t want to include words like “image”, “pic”, etc… in alt text since it is implied.
Also on the Home page, you have two links, one right after the other, to nina-simone.html. This type of redundancy is considered bothersome to screen reader users. In order to avoid this, you can hide one of the links from screen readers using the attribute aria-hidden="true". I think in this case I would hide the second <a> that is around the <img>. Screen reader users don’t need to know that the image is there since it doesn’t provide any extra content.
The <iframe>s on the Listen page should have a title attribute describing each video.
And finally, and I always bring this up because I don’t think most of the browser defaults are adequate, I would suggest you customize the keyboard focus indicator to make it more prominent. I usually make the outline at least 2px wide and coordinate the color with the style of the page. This will ensure that it looks nice on all browsers. Also, you can now hide the focus outline from mouse users using the :focus-visible pseudo-class (all Chrome-based browsers and Firefox now implement this). Use this backwards compatible :focus-visibe hack so that browsers who don’t support it yet will still get a keyboard focus.
Overall, very nicely done and I can tell you paid a lot of attention to detail. For instance, every page I validated passed with flying colors.
That isn’t a problem, you can wrap them in a <div>. But I don’t think you even need to do that. I think you just need one <nav> (not wrapped in anything) with the links inside as you have them and one <footer> (the one with class=“footer-container”), again, not wrapped with anything, with the links inside as you have them.
You can mix both webp and jpg/png to increase the speed even more. There are several online tools that converts jpg/png to webp. Note that this will be needed as the webp format is not supported in all browsers.
Sorry for the late answer. I should be more specific. I was saying that for me the layout is too simple in desktop. I would go with a multi column complex layout system in desktop and I would display 1 column system on mobile. But this is just my personal opinion.
I think your website is cool and has a good purpose!
I like that it has well elaborated games and I like the style of the navigation bar.
In my opinion it would be better to have a different content layout. I think it is harder to read full width containers in large screens, anyway the large font compensates that very well. I also think that the style of the footer should match the style of the whole site.
When I was designing this I kind of forgot about larger screens because I was more concerned with mobile and tablets. But when I start making style changes in the future I will definitely keep that in mind
Hi @jwilkins.oboe I have looked over your project. I hope I am not mentioning the same things that others are saying. This is only my opinion on what you can do to make improvements on your project.
Consider putting the .home-title and .home para text closer together because in mobile view the .home-para text in not in the viewport. It would be nice to see the title of the website with the description.
