There is a very interesting web design contest going on online, called 10k Apart. It puts emphasis on creating a website, "optimizing every little byte like your life depends on it and ensuring your site can work, no matter what". The challenge is to build such an optimized site that your pages load under 10 KB size limit.
You can enter the contest till September 30th. (Visit their website for more information.)
I have also participated in the contest, and my entry is just as "random" as it gets - it is about randomness! It is a minimal site made with HTML5, CSS3 and some JavaScript and shows that a pretty site can be built with pretty simple code! It's got some optimization hacks too, like the optimized URLs, and using character entities as icons etc. Minimal amount of JS is used with fallback options. Total cost: 7.02 KB :)
Some noteworthy optimizations:
1. URLs
7. Indentation with 2 spaces, not 4
You can enter the contest till September 30th. (Visit their website for more information.)
I have also participated in the contest, and my entry is just as "random" as it gets - it is about randomness! It is a minimal site made with HTML5, CSS3 and some JavaScript and shows that a pretty site can be built with pretty simple code! It's got some optimization hacks too, like the optimized URLs, and using character entities as icons etc. Minimal amount of JS is used with fallback options. Total cost: 7.02 KB :)
Some noteworthy optimizations:
1. URLs
- Used <a href=""> for current page/directory link instead of the complete <a href= "http://anirudhkhanna.github.io/10k-apart-2016">
- Omitted the protocol name for external sites. For example, //github.com instead of the complete URL http://github.com
- Used ../ instead of giving a full URL to the previous directory (i.e. anirudhkhanna.github.io).
- URL shorteners were not used because although they could reduce the number of characters, they are not always considered safe.
- The formatting is a bit compact.
- Especially in CSS, where the code format is like this:
nav ul {margin:5px 0 0 0;} nav ul li {display:inline; padding-right:50px;} ...
- It was tried that unnecessary tags were cut down. For example,
<span id="titlelink"> <a>...</a> </span>
becomes:
<a id="titlelink">...</a>
- Images were avoided mostly. The images used (like the favicon) were really small and optimized.
- Only character entities (like ✎, ✉ etc.) were used as icons on the site wherever required.
7. Indentation with 2 spaces, not 4