Dominic
Member
- Local time
- 12:52
- Joined
- Oct 5, 2019
- Messages
- 130
home:
super cool and clean!
Videos:
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.
home:
super cool and clean!Videos:
Except of this jumpy-hover I only can recommend vimeo. They have an easier to adjust player that will better fit the page design.![]()
Klaus Estermann.webm
drive.google.com
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 tohttps://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.
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!
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.
Exactly! A good minimal design is gold! 🥇It's nice and minimal but not boring 👍
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. :)
Thanks for your feedback!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.
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 ...
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. :)
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 :)
That's exactly what I like about the design. 🙈 😂A person's portrait makes me concentrate on the right side too much.
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:
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.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>
andsrcset
.
Providing different resolutions, filetypes (jpg, webp, ...) will help to reduce the file size, for the important (mobile) clients even more.
I'm not talking about speed - it's the traffic on mobile devices.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.
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: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.
«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.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.
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
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).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
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.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).
I have the same process. 😅 The images change too less to put time into an automated process.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.
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! ☺️
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.