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.
Latest comments (42)
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
Finally, I managed to update the privacy, too.
Check my score now: webbkoll.dataskydd.net/en/results?...
👍 💯
Thank you once again!
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
Could you clarify last two suggestions?
I am not sure why do you think that navigation is not optimized for mobile.
Thank you for your feedback.
I would say that my website is remarkable performance wise, would you agree? 💯
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...
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.
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/
Now that I see this colors, I think I could introduce more colors after all.
Great advice, thank you for your help.
Eeeejj ša ima mi smo jedini hrvati vamo :D
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 :)
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.
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.
I am considering it now. Thanks!
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
I just learned that I already serve WebP images, thanks to excellent Cloudinary service:
prntscr.com/jtl1ym
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.
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.
Sean, thank you.
I have added
_headersfile to my site, the score is A+:securityheaders.com/?q=https%3A%2F...
Great job! 😄
Wow, what a notable finding. I will learn more about HTTP Headers security and secure my website soon.