# Tips for quality website design **URL:** https://forum.infinityfree.com/t/tips-for-quality-website-design/10891 **Category:** Informal **Created:** [January 14, 2019, 9:30pm UTC](https://forum.infinityfree.com/t/tips-for-quality-website-design/10891 "2019-01-14T21:30:28Z") **Posts on this page:** 1 **Showing post:** 16
### Author: ![Oxy](https://forum.infinityfree.com/user_avatar/forum.infinityfree.com/oxy/32/37989_2.png) [@Oxy](https://forum.infinityfree.com/u/Oxy) #### Post date: [January 20, 2019, 7:41pm UTC](https://forum.infinityfree.com/t/tips-for-quality-website-design/10891/16 "2019-01-20T19:41:45Z")
_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 @anon89694132 my site uses something called **grid system** the thing is complex but start here > **[All About Grid Systems | Envato Tuts+](https://webdesign.tutsplus.com/all-about-grid-systems--webdesign-14471a)** > > Now you know all about colour, typography and various things you should undertake before you start a design project, it’s time to start getting down and dirty with some of the basics of working... > **[W3Schools.com](https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp)** > > W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more. > **[W3Schools.com](https://www.w3schools.com/css/css_rwd_grid.asp)** > > W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more. 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-](https://support.cloudflare.com/hc/en-us/articles/200172256-How-do-I-cache-static-HTML-) ![Capture](https://infinityfree-forum-uploads.s3.dualstack.eu-central-1.amazonaws.com/original/1X/aa4d6b150ef5b7b7e60124c3aff035db4a3e4f07.jpeg) If you want to include also the `www variant` here (cache) then add `*` in front of the domain ![image](https://forum-cdn.infinityfree.net/original/3X/8/d/8d8eef4bc8f267381031eebea678dd00dcd6347d.png) also all my website code passes without error in the validator [https://validator.w3.org/](https://validator.w3.org/) CSS is v3 standard and also passes validator [The W3C CSS Validation Service](http://jigsaw.w3.org/css-validator/) I also use a rocket loader (cloudflare) > **[We have lift off - Rocket Loader GA is mobile!](https://blog.cloudflare.com/we-have-lift-off-rocket-loader-ga-is-mobile/)** > > Today we’re excited to announce the official GA of Rocket Loader, our JavaScript optimisation feature that will prioritise getting your content in front of your visitors faster than ever before with improved Mobile device support. for images - nothing special except that they are optimized with the service [https://tinypng.com/](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.](http://htmlcompressor.com/compressor/) CSS (adv. css3 rules) [https://csscompressor.com/](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 [Convert SVG Icons to Export as Icon Font, SVG, PNG, PDF, Sprite, etc. ❍ IcoMoon App](https://icomoon.io/app/#/select) (add icons at bottom) favicon [https://realfavicongenerator.net/](https://realfavicongenerator.net/) QR [Unitag | QR codes solutions for Enterprises | The free QR code generator](https://www.unitag.io/qrcode) my site uses jquery and lots of visuals rely on it also all JS plugins > **[jQuery](https://jquery.com/)** > > jQuery: The Write Less, Do More, JavaScript Library I also use jqueryUI but just tabs (custom build - small size) > **[Download Builder | jQuery UI](https://jqueryui.com/download/)** > > jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you're building highly interactive web applications or you just need to add a date picker to a form... USEFUL: > **[cdnjs - The #1 free and open source CDN built to make life easier for developers](https://cdnjs.com/libraries#)** > > Simple. Fast. Reliable. Content delivery at its finest. cdnjs is a free and open-source CDN service trusted by over 12.5% of all websites, serving over 200 billion requests each month, powered by Cloudflare. We make it faster and easier to load... [https://codebeautify.org/](https://codebeautify.org/) > **[GitHub - phanan/htaccess: ✂A collection of useful .htaccess snippets.](https://github.com/phanan/htaccess)** > > ✂A collection of useful .htaccess snippets. > [@anon89694132](#): > > mobile ready analysis reported my website has a weight of 1260kb. That doesn’t seem excessive, does it? no, it’s OK 🙂 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](https://www.webpagetest.org/lighthouse) test 2 [https://developers.google.com/speed/pagespeed/insights/](https://developers.google.com/speed/pagespeed/insights/) test 3 [https://varvy.com/](https://varvy.com/) LOL [https://www.crazyegg.com/blog/terrible-websites-you-should-copy/](https://www.crazyegg.com/blog/terrible-websites-you-should-copy/) --- _[View the full topic](https://forum.infinityfree.com/t/tips-for-quality-website-design/10891)._