What do you think about my newest client website (music and poetry)?

[Dominic]

Check it out here

It's close to be finished (there is some content missing, for example a page about his CD). My client Klaus is a Slam Poet and Musician (Guitar and singing).

Static Page Generator: Dada Static Page Generator (custom)
Typeface: Overpass
CMS: Netlify CMS

 

[Gummibeer]

home:
super cool and clean!

Videos:

Klaus Estermann.webm

drive.google.com

Except of this jumpy-hover I only can recommend vimeo. They have an easier to adjust player that will better fit the page design.

Auftritte:
For me this gradient text doesn't fir the design. I would use the blue from the home page.
And the "mehr" links direct to https://beta.klausestermann.ch/auftritte/www.keller62.ch.

Über mich:
the first image is toooooo large - 1.4MB 🤯 you can use https://images.weserv.nl/ for example to adjust the image on the fly with some simple URL params.

 

[Dominic]

home:
super cool and clean!

Videos:

Klaus Estermann.webm

drive.google.com

Except of this jumpy-hover I only can recommend vimeo. They have an easier to adjust player that will better fit the page design.

Auftritte:
For me this gradient text doesn't fir the design. I would use the blue from the home page.
And the "mehr" links direct to https://beta.klausestermann.ch/auftritte/www.keller62.ch.

Über mich:
the first image is toooooo large - 1.4MB 🤯 you can use https://images.weserv.nl/ for example to adjust the image on the fly with some simple URL params.

Thanks a lot for this very helpful feedback!

Vimeo: Good idea because I don't like the youtube-player very much. Otherwise: Youtube is the big player and I guess it's better for the client to share videos on Youtube. I will think about it.

Auftritte: yes, that's controversial ;). I wanted a little counter point to the very clean (boring?) design. Perhaps I overboarded a bit. I will have a look.

About: another good point. I implemented minifying and responsive images, but it did not seem to work properly. 1.4MB is much too big

Thanks again!

 

[sfcgeorge]

It's nice and minimal but not boring 👍

ÜBER MICH: The image looks squashed.

It's a little confusing having the navigation change place from the home page to the other pages. I do like the design of the home page though so perhaps don't change it.

 

[Gummibeer]

It's nice and minimal but not boring 👍

Exactly! A good minimal design is gold! 🥇

 

[Adam]

Nice work Dominic! I actually quite like the gradient text, something a bit different.

From a code perspective, you seem to use the 'font' tag quite a lot but this was deprecated many years ago. You should use a span if you are wanting to apply styles to a certain bit of text but only if there's not another more appropriate semantic tag.

I think this text (time and location) would benefit from being made slightly smaller, given slightly more breathing room and also accompanied by a clock and map marker icon to make this a bit more clear and interesting.

The two columns of text on the about page could likely be made to be more balanced if that is final content.

Why are there two phone numbers on the contact page? Perhaps they should be labelled for clarity or one removed entirely.

@Gummibeer identified some image optimisation opportunities, the home image and about image would benefit from being compressed a bit. This can be done without any perceivable loss of quality to at least half the size: https://tinyjpg.com/.

Overall I love the minimal aesthetic! Often minimal and boring can get mixed up but you did a good job of keeping it visually interesting still. :)

 

[Dominic]

It's nice and minimal but not boring 👍

ÜBER MICH: The image looks squashed.

It's a little confusing having the navigation change place from the home page to the other pages. I do like the design of the home page though so perhaps don't change it.

Thanks for your feedback!

yes, the image looks also a bit weird to me, but I can't put my finger on it why. Perhaps it would look better smaller, but I like the layout like this ... ah, you mean on mobile?

good point with the navigation. the reason is that i don't want the name two times on the home page. i think i leave it like that, but i will think about it ...

 

[Dominic]

Nice work Dominic! I actually quite like the gradient text, something a bit different.

From a code perspective, you seem to use the 'font' tag quite a lot but this was deprecated many years ago. You should use a span if you are wanting to apply styles to a certain bit of text but only if there's not another more appropriate semantic tag.

I think this text (time and location) would benefit from being made slightly smaller, given slightly more breathing room and also accompanied by a clock and map marker icon to make this a bit more clear and interesting.

View attachment 164

The two columns of text on the about page could likely be made to be more balanced if that is final content.

Why are there two phone numbers on the contact page? Perhaps they should be labelled for clarity or one removed entirely.

@Gummibeer identified some image optimisation opportunities, the home image and about image would benefit from being compressed a bit. This can be done without any perceivable loss of quality to at least half the size: https://tinyjpg.com/.

Overall I love the minimal aesthetic! Often minimal and boring can get mixed up but you did a good job of keeping it visually interesting still. :)

Thanks a lot for your valuable inputs!

Hm, I can't remember ever using the font tag.... 🤔. where did u see it?

I like the idea with the icons. Here it seems a bit too crowded to me. I will look at it.

One phone number is mobile, one is home (he is not 20 anymore ;)). Icons are a good idea.

«Overall I love the minimal aesthetic! Often minimal and boring can get mixed up but you did a good job of keeping it visually interesting still. :) » I like to hear that :)

 

[ReinissB]

It's very clean and I like that! But this huge white space in the middle is a bit confusing. A person's portrait makes me concentrate on the right side too much. Maybe a vertically centered navigation and title would change that.

 

[Gummibeer]

A person's portrait makes me concentrate on the right side too much.

That's exactly what I like about the design. 🙈 😂
I like the outside the box - but that's how different personal opinions are. :D

 

[Dominic]

I wanted to say that it was a really good experience to share a nearly complete client website here. I got really helpful feedback! Thanks a lot, guys!

What I learned/changed:

• I included image compression in my build process. Using mozjpeg for jpgs and pngquant for pngs. Didn't experiment at all, but the important image got from 1.4mb to 800kb. There is surely much more possible. But for the moment it is enough.
• i consider using icons in the next design
• my designs are minimal, clean and cool ;)

 

[Gummibeer]

Hey, cool that it helped!
But regarding your compression I have to say that 800kb is still too much. 😕
Because it's about two large images I would recommend you to use <picture> and srcset.
Providing different resolutions, filetypes (jpg, webp, ...) will help to reduce the file size, for the important (mobile) clients even more.

 

[Dominic]

Hey, cool that it helped!
But regarding your compression I have to say that 800kb is still too much. 😕
Because it's about two large images I would recommend you to use <picture> and srcset.
Providing different resolutions, filetypes (jpg, webp, ...) will help to reduce the file size, for the important (mobile) clients even more.

I use img with scrset and use three different resolution. So its much smaller on mobile. I find it fast enough now on desktop, but yeah a little reduction could not hurt.

 

[Gummibeer]

I use img with scrset and use three different resolution. So its much smaller on mobile. I find it fast enough now on desktop, but yeah a little reduction could not hurt.

I'm not talking about speed - it's the traffic on mobile devices.
My mom for example still has a plan with 500MB/month only.
So by visiting this page she would use ~1/250 of her monthly data usage volume.

And that's in Germany - there are parts in the world with limits like this on desktop. Or they simply have such unreliable connection that 800kb could never pass in a single request.

I've once optimized a page for a school in south africa. Because of the shitty internet we've started to use single letter CSS classes and dropped most HTML container tags to save bandwidth on the initial/real page. CSS and everything else had a damn long cache rule.

Will check if I can find the article again, during this time I've read an article about how we only design the internet for the top x% of the world.

 

[Dominic]

I'm not talking about speed - it's the traffic on mobile devices.
My mom for example still has a plan with 500MB/month only.
So by visiting this page she would use ~1/250 of her monthly data usage volume.

And that's in Germany - there are parts in the world with limits like this on desktop. Or they simply have such unreliable connection that 800kb could never pass in a single request.

I've once optimized a page for a school in south africa. Because of the shitty internet we've started to use single letter CSS classes and dropped most HTML container tags to save bandwidth on the initial/real page. CSS and everything else had a damn long cache rule.

Will check if I can find the article again, during this time I've read an article about how we only design the internet for the top x% of the world.

Good points. I'm focusing mostly on my own hardware/connections and those of the people i know. In switzerland a lot of people have very good internet connections and also limitless mobile internet. So yeah, I understand that it makes sense to consider also other circumstances. Otherwise, I don't want to do premature optimization:

«The real problem is that programmers have spent far too much time worrying about efficiency in the wrong places and at the wrong times; premature optimization is the root of all evil (or at least most of it) in programming.» https://en.wikiquote.org/wiki/Donald_Knuth

This website will mostly used in Switzerland. So I don't optimize for Africa.

 

[Adam]

Good points. I'm focusing mostly on my own hardware/connections and those of the people i know. In switzerland a lot of people have very good internet connections and also limitless mobile internet. So yeah, I understand that it makes sense to consider also other circumstances. Otherwise, I don't want to do premature optimization:

«The real problem is that programmers have spent far too much time worrying about efficiency in the wrong places and at the wrong times; premature optimization is the root of all evil (or at least most of it) in programming.» https://en.wikiquote.org/wiki/Donald_Knuth

This website will mostly used in Switzerland. So I don't optimize for Africa.

I do partly agree with spending time on too much premature optimisation in general but will side with @Gummibeer on this one that an almost 1MB image is too big. I see it visibly load on my 100Mbps connection.

Especially when in about 5 seconds I can optimise it down, keeping the same 1500x1500 dimensions but at 90% quality (I can't personally tell the difference! Can you?). It is now just under 80% smaller from ~800kb -> ~170kb. (attached).

It is not just internet speeds that we have to worry about with large images. But many cheap devices simply do not handle the processing of large images very well from a device performance perspective.

I think you've done a great job of using srcset on the homepage to solve these issues.

If you're on a Mac, I'd highly recommend the ImageOptim app. It does drag and drop optimisations. https://imageoptim.com/mac

 

[Dominic]

I do partly agree with spending time on too much premature optimisation in general but will side with @Gummibeer on this one that an almost 1MB image is too big. I see it visibly load on my 100Mbps connection.

Especially when in about 5 seconds I can optimise it down, keeping the same 1500x1500 dimensions but at 90% quality (I can't personally tell the difference! Can you?). It is now just under 80% smaller from ~800kb -> ~170kb. (attached).

View attachment 175

It is not just internet speeds that we have to worry about with large images. But many cheap devices simply do not handle the processing of large images very well from a device performance perspective.

I think you've done a great job of using srcset on the homepage to solve these issues.

If you're on a Mac, I'd highly recommend the ImageOptim app. It does drag and drop optimisations. https://imageoptim.com/mac

Convinced! :) I'm looking again into image optimization. I will try to come up with a general solution (including in build process), then next website I don't have to think about it anymore (or just tweak it a bit).

 

[Adam]

Convinced! :) I'm looking again into image optimization. I will try to come up with a general solution (including in build process), then next website I don't have to think about it anymore (or just tweak it a bit).

That's great! Honestly my build process for a lot of stuff is grab the media folder and drop in to ImageOptim before deploying. Just configure and drop on to the app. It goes through all images and overwrites them in place so you don't even have to worry about resaving. It does move the originals in to Trash just incase you're unhappy with the optimisations. You can always save an original media folder yourself for posterity.

Feel free to use the attached optimised image in the post above. Honestly, open it in browser and flick between that and the one on there currently. I can not see a single pixel difference and it's 80% smaller.

 

[Gummibeer]

That's great! Honestly my build process for a lot of stuff is grab the media folder and drop in to ImageOptim before deploying. Just configure and drop on to the app. It goes through all images and overwrites them in place so you don't even have to worry about resaving. It does move the originals in to Trash just incase you're unhappy with the optimisations. You can always save an original media folder yourself for posterity.
View attachment 176
Feel free to use the attached optimised image in the post above. Honestly, open it in browser and flick between that and the one on there currently. I can not see a single pixel difference and it's 80% smaller.

I have the same process. 😅 The images change too less to put time into an automated process.

And I haven't said that you have to make the website work on an african bad 3G connection. 😉
Therefore the example of my mother in DACH region. And like Adam described the easy way to save another 80%.
As long as not required I'm not a fan of optimizing for the possibility. But it should also not require a 1Gbps LAN connection. 😉

Like a colleague said last time: we need better hardware because software gets more crappy.

Not saying that the page is crappy! But it's easier to hide issues/errors/problems behind good hardware sometimes.

And as a last argument, every transfered byte requires somehow energy which is produced somewhere and releases CO2 in this process.
So every optimization in storage and traffic also helps the environment. 🌳💚

---

PS: before you possibly something too serious/personal - in opposite to useless optimization I'm a big fan of theoretical and long discussions. 😅
And to save time and move on faster I most times don't spend too much in time in making my sentences 100% not provoking, aggressive or whatever - but I never attack you in person! ☺️

 

[Mike Rees]

On the subject of image optimisation, in this case you're using a greyscale image so you could potentially reduce the colour depth to 8 bit and not lose noticable quality. I can't tell if you've done that already because for some reason my machine fails to complete download of the image xD

I really like the minimal design, by the way. White BG with as little content as you can feasibly get away with is my idea of heaven.