Webwide is the inclusive forum community for web designers, developers & makers.

Whether you're an enthusiast, in training, or a seasoned pro – you'll fit right in at Webwide. We understand that our community is one of creation which is why we, unlike many other discussion forums, encourage sharing of your own projects and content. Creating a forum account is fast, easy and completely free so you can start participating right away.

Read our Code of Conduct

Free Forum Membership Benefits

  • Participate in hundreds of interesting discussions
  • Network with industry peers and make new connections
  • Show off your own projects and relevant content
  • Get help and feedback for your coding and designs
  • Buy and sell services and resources in the marketplace
  • Participate in our friendly community challenges
  • Earn trophies and work your way up our leaderboards
  • Enjoy exclusive Webwide member discounts and offers
  • ...and so much more!

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

Gummibeer

Astroneer
Joined
Oct 5, 2019
Messages
926
Reaction score
788
Points
785
Age
27
Location
Hamburg, Germany
Local Time
Today, 07:25
Website
gummibeer.de
Credits
1,726
Real Name
Tom Witkowski
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.

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

Member
Joined
Oct 5, 2019
Messages
124
Reaction score
101
Points
265
Location
Zurich
Local Time
Today, 07:25
Website
dominiclooser.ch
Credits
188
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.

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

Sonic the developer
Gold Member
Joined
Oct 5, 2019
Messages
105
Reaction score
119
Points
460
Location
London, England
Local Time
Today, 06:25
Website
www.sfcgeorge.co.uk
Credits
404
Pronouns
He/Him
Real Name
Simon George
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.
 

Adam

Mr. Webwide
Administrator
Joined
Sep 24, 2019
Messages
1,034
Reaction score
1,070
Points
1,115
Location
United Kingdom
Local Time
Today, 06:25
Credits
9,657
Pronouns
he/him
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.


Screenshot 2020-05-20 at 21.07.48.png


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. :)
 
Last edited:
  • Like
Reactions: Gummibeer

Dominic

Member
Joined
Oct 5, 2019
Messages
124
Reaction score
101
Points
265
Location
Zurich
Local Time
Today, 07:25
Website
dominiclooser.ch
Credits
188
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

Member
Joined
Oct 5, 2019
Messages
124
Reaction score
101
Points
265
Location
Zurich
Local Time
Today, 07:25
Website
dominiclooser.ch
Credits
188
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

Member
Joined
Oct 25, 2019
Messages
29
Reaction score
17
Points
10
Location
Latvia
Local Time
Today, 08:25
Credits
68
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.
 
  • Like
Reactions: Dominic

Gummibeer

Astroneer
Joined
Oct 5, 2019
Messages
926
Reaction score
788
Points
785
Age
27
Location
Hamburg, Germany
Local Time
Today, 07:25
Website
gummibeer.de
Credits
1,726
Real Name
Tom Witkowski
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

Member
Joined
Oct 5, 2019
Messages
124
Reaction score
101
Points
265
Location
Zurich
Local Time
Today, 07:25
Website
dominiclooser.ch
Credits
188
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 ;)
 
  • Cheer
Reactions: Gummibeer and Adam

Gummibeer

Astroneer
Joined
Oct 5, 2019
Messages
926
Reaction score
788
Points
785
Age
27
Location
Hamburg, Germany
Local Time
Today, 07:25
Website
gummibeer.de
Credits
1,726
Real Name
Tom Witkowski
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.
 
  • Like
Reactions: Adam

Dominic

Member
Joined
Oct 5, 2019
Messages
124
Reaction score
101
Points
265
Location
Zurich
Local Time
Today, 07:25
Website
dominiclooser.ch
Credits
188
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

Astroneer
Joined
Oct 5, 2019
Messages
926
Reaction score
788
Points
785
Age
27
Location
Hamburg, Germany
Local Time
Today, 07:25
Website
gummibeer.de
Credits
1,726
Real Name
Tom Witkowski
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.
 
  • Like
Reactions: Adam

Dominic

Member
Joined
Oct 5, 2019
Messages
124
Reaction score
101
Points
265
Location
Zurich
Local Time
Today, 07:25
Website
dominiclooser.ch
Credits
188
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 programminghttps://en.wikiquote.org/wiki/Donald_Knuth

This website will mostly used in Switzerland. So I don't optimize for Africa.
 
  • Like
Reactions: Gummibeer

Adam

Mr. Webwide
Administrator
Joined
Sep 24, 2019
Messages
1,034
Reaction score
1,070
Points
1,115
Location
United Kingdom
Local Time
Today, 06:25
Credits
9,657
Pronouns
he/him
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 programminghttps://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).

Screenshot 2020-05-24 at 01.42.06.png


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
 

Attachments

Last edited:

Dominic

Member
Joined
Oct 5, 2019
Messages
124
Reaction score
101
Points
265
Location
Zurich
Local Time
Today, 07:25
Website
dominiclooser.ch
Credits
188
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).
 
  • Love
  • Hot
Reactions: Gummibeer and Adam

Adam

Mr. Webwide
Administrator
Joined
Sep 24, 2019
Messages
1,034
Reaction score
1,070
Points
1,115
Location
United Kingdom
Local Time
Today, 06:25
Credits
9,657
Pronouns
he/him
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.
Screenshot 2020-05-24 at 02.36.53.png

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.
 
Last edited:
  • Like
Reactions: Gummibeer

Gummibeer

Astroneer
Joined
Oct 5, 2019
Messages
926
Reaction score
788
Points
785
Age
27
Location
Hamburg, Germany
Local Time
Today, 07:25
Website
gummibeer.de
Credits
1,726
Real Name
Tom Witkowski
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! ☺
 
  • Love
Reactions: Adam
Top