Tips for quality website design

warning to other readers !
what I’m going to say here and especially the cloudflare stuff is just about my website
wrong use of page rules, etc. especially in dynamic pages will make you trouble

Hi @swagler

my site uses something called grid system
the thing is complex but start here

and then if it is a mobile device i just display certain elements in a particular grids (CSS and %for scaling)

my site is 10+ years old
much of the knowledge I gathered during those years and of course website was polished for years
so you do not have to wonder or compare your website with it.

I made page rules in cloudflare and cache ALL (even html)
https://support.cloudflare.com/hc/en-us/articles/200172256-How-do-I-cache-static-HTML-



Capture

If you want to include also the www variant here (cache) then add * in front of the domain

also all my website code passes without error in the validator https://validator.w3.org/
CSS is v3 standard and also passes validator The W3C CSS Validation Service

I also use a rocket loader (cloudflare)

for images - nothing special except that they are optimized with the service https://tinypng.com/

most of the JS is inside one file except in the case of specific things when I could not do it (quiz and animated woman)

all CSS and JS is compressed

JS HTML Compressor - Reduce the size of HTML, CSS, JavaScript, PHP and Smarty code.
CSS (adv. css3 rules) https://csscompressor.com/

all Fonts and icons is woff2 standard and optimized
I do not use huge packs like Font Awesome because there is no purpose to load 300+ icons and I use only 10 in my website
so i use this service and pick just what I need IcoMoon App - Icon Font, SVG, PDF & PNG Generator (add icons at bottom)

favicon https://realfavicongenerator.net/

QR Unitag | Home of QR | The free QR code generator

my site uses jquery and lots of visuals rely on it also all JS plugins

I also use jqueryUI but just tabs (custom build - small size)

USEFUL:

https://codebeautify.org/



no, it’s OK :slight_smile:
btw. you can make a logo with some online service

TEST:
you use Firefox like me so we need use this test (from chrome) https://www.webpagetest.org/lighthouse
test 2 https://developers.google.com/speed/pagespeed/insights/
test 3 https://varvy.com/

LOL 5 Terrible Websites You Should Copy

4 Likes