Silvestar Bistrović

Posted on Jun 7, 2018 • Edited on Mar 17, 2019

Let's make my website even better

#discuss #webdev

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 version: https://develop--silvestarcodes.netlify.com/

I would like to get feedback on SEO, performance, page speed optimizations, accessibility, and responsiveness. 💬

First, few notes:

I am not a designer; I don't have design skills at all, but I have made a prototype in InVision Studio: https://projects.invisionapp.com/prototype/sb-cjfc7amqt005awa01fl56n2s2;
I have used CSS Grid. Therefore the site looks ugly on any Internet Explorer;
The source code is available on GitHub, branch develop, feel free to look around or create a pull-request: https://github.com/maliMirkec/hexo-sb/tree/develop;
~~I am experiencing issues with Critical CSS~~.

Can you help me? Any feedback would be appreciated. 👍

Now, let's make my website even better! 🥇

EDIT, June 12: The design is updated. All issues, except privacy, have been resolved.

EDIT 2, June 20: Privacy issues resolved, pushed to production.

Top comments (42)

Dávid Szabó • Jun 7 '18

What's your reason to use CSS Grid? The layout looks pretty simple.
On every navigation I can see the font change. That's really annoying.
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/...)
Your CSS is 250KB, why?
You might inline your footer and header logo to save requests. But that's optional in HTTP/2 world.

Silvestar Bistrović • Jun 7 '18 • Edited

Thank you for the awesome feedback.

CSS Grid is very well supported. It should be used for layout, as I am doing here.
That texhnique is called FOFT.
I am considering changing this.
Inline fonts.
Great find, I will consider fixing this.

Dávid Szabó • Jun 7 '18

That's a good reason :D
Well, I just learned a new thing. Can you cache the font?
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.

Silvestar Bistrović • Jun 8 '18

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

David Young • Jun 9 '18

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/

Silvestar Bistrović • Jun 9 '18 • 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...

Silvestar Bistrović • Jun 11 '18

I fixed the font loading issues.

Ekim Kael • Jun 7 '18 • Edited

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

Andy Zhao (he/him) • Jun 7 '18 • Edited

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

Ekim Kael • Jun 7 '18 • Edited

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

Silvestar Bistrović • Jun 8 '18

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

Ekim Kael • Jun 8 '18 • 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😅

Silvestar Bistrović • Jun 8 '18 • Edited

pro bono means for free. :)

Ekim Kael • Jun 8 '18

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

Andre Vasconcelos • Jun 8 '18

You are a kind soul.

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

Ekim Kael • Jun 8 '18

Thanks

Silvestar Bistrović • Jun 12 '18

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

What do you think?

Meghan (she/her) • Jun 8 '18

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.

Silvestar Bistrović • Jun 10 '18

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

Meghan (she/her) • Jun 10 '18

Great job! 😄

Silvestar Bistrović • Jun 8 '18

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

Sethu Senthil • Jun 8 '18 • 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

Silvestar Bistrović • Jun 11 '18

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

Silvestar Bistrović • Jun 8 '18

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.

TMcSquared • Jun 8 '18

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 :)

Silvestar Bistrović • Jun 8 '18

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.

TMcSquared • Jun 8 '18

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.

Lynne Finnigan • Jun 9 '18 • 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...

Silvestar Bistrović • Jun 9 '18

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.

Lynne Finnigan • Jun 9 '18

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/

Silvestar Bistrović • Jun 9 '18

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

Oliver Tacke • Jun 8 '18

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.