Demo website review

Design & UX
#1

Hi all,

Please could I have a review of my latest portfolio project? This was created to further my knowledge of both flex-box and CSS Grid, while also having a bit of fun with a fictional nightclub theme.

https://clubrepublic.andrewcourtney.co.uk/

I’m looking for feedback on the general design, UX and any coding mis-steps I’ve made.

Thanks in advance!

#2

I’m really sorry, but the flashing text and moving background made me feel so disorientated I had to leave the site after a few seconds without actually seeing anything. frown

Admittedly, I wouldn’t be in your target audience for a nightclub site.

1 Like
#3

Footer box background color can be removed. Instead of it, just display the footer text without background color.

#4

That’s fair enough TechnoBear, thanks for your honesty and genuine feedback.
Do you have any thoughts on how I could maybe tone it down to make it less “flashy”? :slight_smile:

1 Like
#5

Good observation, will add it to the list of fixes, thanks logan!
Oh and welcome back - I see a notification that you haven’t been on Sitepoint for a while (last post was 4 years ago) :slight_smile:

Any further thoughts on the UX or other improvements?

#6

You appear to have problems with your HTML <h1> – <h6> elements. :eek:

  • Heading information may be used by user agents, for example,
    to construct a table of contents for a document automatically.
  • Avoid using heading tags to resize text. Instead, use the
    CSS font-size property. Headings use size to indicate
    their relative importance, but CSS is preferred for general-
    purpose resizing.
  • Avoid skipping heading levels: always start from <h1> , next
    use <h2> and so on.
  • You should only use one <h1> per page. Using more than
    one will not result in an error, but using only one is seen as a
    best practice. It makes logical sense — <h1> is the most
    important heading, and tells you what the purpose of the overall
    page is. You wouldn’t have a book with more than one title, or a
    movie with more than one name! Having a single top-level title is
    also arguably better for screenreader users, and SEO

Source:-

MDN - <h1> – <h6> elements

coothead

2 Likes
#7

I can’t actually view the page long enough to make any real suggestions, apart from this:

Animation should almost always be user controlled or very short in duration . Images that continually animate can cause the rest of the page to be more difficult, or for users with very high levels of distractibility, totally inaccessible.

WCAG 2.0 Success Criterion 2.2.2 (Level A) requires that automatically moving, blinking, or scrolling content that lasts longer than 5 seconds can be paused, stopped, or hidden by the user.

https://webaim.org/techniques/images/

1 Like
#8

If this was a TV programme rather than a website, in some countries you would legally have to provide a warning saying: This programme contains flashing images

Just making the observation, I have no suggestions.

#9

The main banner… is an accessibility nightmare. You need to provide a way to turn off (pause the video). And as coot mentioned the use of headings for stylistic purposes is a no-no.

#10

Hi, I saw your website and here are a few suggestions that I hope will help you.

Your Homepage should be a bit more engaging and innovative. It is the first place where visitors will land and you have to make it attractive and eye-catching. But that doesn’t imply you have to use those flashy texts, that’s kind of distracting.

Also, try to make other pages clutter-free. Make them organized with precise information and neat images.

This was just my opinion as a website visitor or audience. Hope it helps.

1 Like
#11

Hi all,

Thanks for the suggestions about the video/animation on the Homepage, as well as the headings.
I’ve now corrected this and uploaded the latest version on the following:
https://clubrepublic.andrewcourtney.co.uk/

Any further thoughts please? :slight_smile:

#12

Hi, nice site - maybe I’m biased because I see you are a fellow .co.uk-er !

Just a personal observation and a trap I have fallen into before -
Your about page is nice - you have text and accompanying images. It looks great on large format. But when on a smaller device you have the first main image - then all text until you finally see all the other images at the bottom.
You have to think of overall appeal, especially first impression and retaining interest, on mobiles etc. It may be more attractive to have the text and images alternating. On a mobile you get a very dark, indistinct image followed by lots of text on a black background.
Just a personal take, but nice job
Kerry

#13

The Homepage without those flashy texts is much better.

I have a suggestion for your About Us page
If you plan to show your timeline, then go for timeline chart rather than those cluttered and big paragraphs. A precise and to-the-point timeline is more attractive and eye-catching than boring paragraphs.

I hope you find it useful.