DEV Community

Let's make my website even better

Silvestar Bistrović on June 07, 2018

I just finished redesigning my website. It isn't live just yet. I wanted to see what can I do to make it even better. 👌 The link to the current ve...
Collapse
 
davidszabo97 profile image
Dávid Szabó
  1. What's your reason to use CSS Grid? The layout looks pretty simple.
  2. On every navigation I can see the font change. That's really annoying.
  3. Colors are killing my eyes. Gray on white is difficult to read. You really should reconsider that gray. You are using that everywhere. (dequeuniversity.com/rules/axe/2.2/...)
  4. Your CSS is 250KB, why?
  5. You might inline your footer and header logo to save requests. But that's optional in HTTP/2 world.
Collapse
 
starbist profile image
Silvestar Bistrović • Edited

Thank you for the awesome feedback.

  1. CSS Grid is very well supported. It should be used for layout, as I am doing here.
  2. That texhnique is called FOFT.
  3. I am considering changing this.
  4. Inline fonts.
  5. Great find, I will consider fixing this.
Collapse
 
davidszabo97 profile image
Dávid Szabó
  1. That's a good reason :D
  2. Well, I just learned a new thing. Can you cache the font?
  3. Are you inlining fonts and loading them externally too? See image below I think it's a huge waste of bandwidth. I am downloading 433 KB, 289 KB of that is just fonts and css. (gzipped) Can you get away from these fonts and use the web safe fonts? Or get rid of the inline fonts atleast.
Thread Thread
 
starbist profile image
Silvestar Bistrović

It seems something is not working with font caching. I will notify you when I fix this.

Thread Thread
 
dayvidwhy profile image
David Young

For fonts I'd suggest linking through from google fonts, don't inline them, and lazy load them like this meowni.ca/posts/web-fonts/

Thread Thread
 
starbist profile image
Silvestar Bistrović • Edited

After reading this article, that dates from 2016, I decided to stick with the current font loading technique since it is recommended by Zach.

Learn more about ih here: zachleat.com/web/comprehensive-web...

Collapse
 
starbist profile image
Silvestar Bistrović

I fixed the font loading issues.

Collapse
 
ekimkael profile image
Ekim Kael • Edited

If you want i Can help you with the design.
I mean the prototype.
You Can check my Behance

Collapse
 
andy profile image
Andy Zhao (he/him) • Edited

Link's broken :( Gotta use the full link, no relative links, like so: https://behance.net/michkael

Collapse
 
ekimkael profile image
Ekim Kael • Edited

Ohh!!Okay!thanks
I just change it. It might work now

Collapse
 
starbist profile image
Silvestar Bistrović

I could send you the link with an Edit option if you would like to help me pro bono. 🙄

Collapse
 
ekimkael profile image
Ekim Kael • Edited

What means Bono please.i'm not an english native😅.
Ans i know i'll probably look stupid when you'll tell me what it is😅

Thread Thread
 
starbist profile image
Silvestar Bistrović • Edited

pro bono means for free. :)

Thread Thread
 
ekimkael profile image
Ekim Kael

I told you.now i'm feeling stupid😅.
If it's just for wireframing and design prototypes yeah.
You can hit my Twitter DM to tell me exactly what you want

Thread Thread
 
avasconcelos114 profile image
Andre Vasconcelos

You are a kind soul.

And honestly the designs you got there are pretty good! :)

Thread Thread
 
ekimkael profile image
Ekim Kael

Thanks

Collapse
 
starbist profile image
Silvestar Bistrović

I have updated the design, you could see it here: develop--silvestarbistrovic.netlif...

What do you think?

Collapse
 
nektro profile image
Meghan (she/her)

A lot of HTTP Headers are pretty insecure by default. Netlify makes changing them really easy to add which you can learn more about here. If you want a one and done list of great ones to add, I also use Netlify and add these. Learn more about them here.

Collapse
 
starbist profile image
Silvestar Bistrović

Sean, thank you.
I have added _headers file to my site, the score is A+:
securityheaders.com/?q=https%3A%2F...

Collapse
 
nektro profile image
Meghan (she/her)

Great job! 😄

Collapse
 
starbist profile image
Silvestar Bistrović

Wow, what a notable finding. I will learn more about HTTP Headers security and secure my website soon.

Collapse
 
otacke profile image
Oliver Tacke

Have you considered to optimize privacy, too?

webbkoll.dataskydd.net/en/results?...

The developer console of Chrome is pretty nice and has an audit tab. There you can get some hints on performance and accessibility, although it doesn't replace some human pairs of eyes.

Collapse
 
starbist profile image
Silvestar Bistrović

Finally, I managed to update the privacy, too.

Check my score now: webbkoll.dataskydd.net/en/results?...

👍 💯

Thank you once again!

Collapse
 
otacke profile image
Oliver Tacke

Nice! Glad I could help.

Collapse
 
starbist profile image
Silvestar Bistrović

I am considering it now. Thanks!

Collapse
 
tmcsquared profile image
TMcSquared

In my opinion, the color scheme is a little bit un-tamed, the colors go together, but they're not working alongside each other.

The font color makes it hard to read against the glaring white background.
Also, the top and bottom headers look nice, but there's not much color in between to link them to each other.

But overall, the design looks nice :)

Collapse
 
starbist profile image
Silvestar Bistrović

Thank you for your feedback.

I didn't want to use too much color in the central part of the website because I wanted to make it more professional. But I am not considering changing the color of all headings. That could connect header and footer, possibly.

Collapse
 
tmcsquared profile image
TMcSquared

Your welcome! I will admit, I was not under the impression that lack of color implies professionality. I like to think that well-placed colors give a professional feel to it.

Collapse
 
sethusenthil profile image
Sethu Senthil • Edited

Try using WebP images, its a new format that allows images to load a crap ton faster, this might also help get better SEO rating on Google. Check this out to learn more. Since this is new not many browsers support this feature, so you can use this technique

gist.github.com/SethuSenthil/e76b0...

This will load and render the webP image if supported by the browser and if it dosent it will render the png encodeding of the image. You can see this live at my website

Collapse
 
starbist profile image
Silvestar Bistrović

I just learned that I already serve WebP images, thanks to excellent Cloudinary service:
prntscr.com/jtl1ym

Collapse
 
starbist profile image
Silvestar Bistrović

Great advice. I read about WebP earlier but never used it in a project before.

Also, I am serving images from Cloudinary. I will investigate how to convert to WebP.

Collapse
 
lynnewritescode profile image
Lynne Finnigan • Edited

I'd work on reducing the padding / spacing a little bit, and maybe add a bit more colour to the list items at the beginning. You could maybe even play with css transitions or animations to fade each one in nicely.

I'm not a designer either, but using a bit more colour in the text catches your eye more!

Screenshot from playing with it in the dev tools:
thepracticaldev.s3.amazonaws.com/i...

Collapse
 
starbist profile image
Silvestar Bistrović

Thank you, Lynne.

I am not sure if I want to introduce more colors to the website at this point. Maybe I will use different shades of current colors to provide more eye-catching experience.

Stayed tuned.

Collapse
 
lynnewritescode profile image
Lynne Finnigan

No problem, there are some sites like this one where you can generate a colour palette. If you're worried about professionalism, that might help give you a feel for what colours work:

coolors.co/

Thread Thread
 
starbist profile image
Silvestar Bistrović

Now that I see this colors, I think I could introduce more colors after all.
Great advice, thank you for your help.

Collapse
 
deweydell profile image
Nicola B. • Edited

You can use webaim.org/resources/contrastchecker/ to check background/text colors to see if the contrast ratio meets accessibility guidelines.

Collapse
 
starbist profile image
Silvestar Bistrović

I will fix the contrast ratio since it is mentioned more than once. Thank you for your feedback.

Collapse
 
josipbartulovic profile image
JosipBartulovic

Eeeejj ša ima mi smo jedini hrvati vamo :D

Collapse
 
noncototient profile image
Bo

Text is too small on mobile.

Navigation is not optimised for mobile.

The body of the site looks great, featured/top section need some improvements in terms of colors

Collapse
 
starbist profile image
Silvestar Bistrović

Could you clarify last two suggestions?

I am not sure why do you think that navigation is not optimized for mobile.

Collapse
 
abbhishek971 profile image
abbhishek971 • Edited

I have attached a screenshot to this comment. Just put your Logo besides the "Home" button. It's positioned below currently.

Also try decreasing the padding in elements on the homepage. Everything looks good but at least one section should fit in on the screen completely.

The Screenshot

Collapse
 
starbist profile image
Silvestar Bistrović

Thank you for your feedback.
I would say that my website is remarkable performance wise, would you agree? 💯