Could you review my website please?
I made this website, and I was wondering if something could be done better or different. The mobile or tablet versions off the website do not work. Links don't work yet either.
Here is the link: https://testing-300.netlify.app/
Am looking forward to any feedback! Be critical pls
22 Replies
personally, the 'free live chat' popup instantly makes me want to close the page. It's never useful for someone checking out a site
If this were a genuine commercial site, I'd want to see actual product information, not just broad categories of stuff.
Each section looks alright in itself, but from an information hierarchy perspective, if this is a site for selling products, put products front and centre. It's a waste of space dedicating the entire space above the fold to an (unfortunately) unattractive image of a truck and the outside of a shop, some generic copy and a button to 'contact', especially when the next section down is a scrolling banner of logos. Brand names mean nothing if you don't sell the component I want
this is horrible in terms of accessibility:
don't put buttons inside links: it doesn't help and it means that we have to press tab twice per link
also, if you try to tab through the website, you will see that it goes like this: menu > google maps > footer
you could try to add focus-only anchors, for example, so people who tab navigate can see your content
something you're also missing is a focus-only link to jump to the website content
I know, I don't like it either. But the client wants it
Well I agree with you again, the background image is the best image I got from the client (there were worse images lol). And the site is meant to be usefull for the user in the sense that he or she can get information they need from the side. It's not really meant to be a shop to look for specific components.
do I just use a 'a' tag instead off a button inside a 'a' tag?
yes, just an
<a> without any buttons inside<a> is for links to different pages, <button> is for actions on the same page. And neither allow other interactive element inside of them so nesting them means your site might display unpredictable behavior. It's also bad for accessibility
if you want the link to look like a button, then just use classes instead, and apply those to the link and buttons
thank you both!
you're welcome
are you still open to feedback?
yes ofcourse!
1. the margin from the first two social media icons in the navbar seem to different compared to those in the footer.
2. the size of the facebook icons are different(i could be trippin tho)
3. lastly, i guess u are aware of the absence of the website icon
otherwise it visually pleasing to look at the website
not sure if u want to add hover states to these buttons
@luca
thanks for the tag
1. do you mean the gap?
2. no they are the same hahhahh
3. oh yes am aware hahahha
great to hear!
@celine can i send you a dm?
yes
ye
the font-sizes paired with clamp could be inaccesible
https://fluid.style/ use a tool like this
Accessible fluid CSS type generator - Fluid Style
Generate fluid, responsive CSS font sizes that meet accessibility requirements.
use
text-transform: uppercase aswell instead of harcoding the values themselves inside the HTML. I've heard that some screen readers read uppercase words differently. like an acronymhttps://fedmentor.dev/posts/html-plan-product-preview/#card-title scroll down to capitalisation part
FED Mentor
Product Preview Card - FED Mentor
How to translate FrontEnd Mentor's Product Preview Card design into HTML that makes sense
send a repo aswell, its quite troublesome to use dev tools just to see the code
is flex-pack a real property or what???
thx will check it out!
i know, i was just being lazy hahah