How I built a responsive & semantic "Contact Me" page in under 16KB

Recently, I've become obsessed with the speed and efficiency of my web sites. I'm in the middle of slimming down this blog - but I thought I'd take a first attempt at my contact site - https://edent.tel/

A few weeks ago, the .tel registry released their domain restrictions - users can now host their site anywhere. I'd already experimented with about.me/edent as a contact site - but even that seemed too weighty for my needs.

Here's how I used CSS to craft a beautiful homepage, HTML5 to give it a sprinkling of syntactic sugar, and SVG to make it as tiny as possible.

The entire site is less that 16 KB when gzipped for transport - and only 36KB uncompressed.

All CSS and Images are inline - that reduces the number of requests which need to be made to the server.

Depending on your hardware, the entire page should load and render in under 0.3 seconds.

Oh, and there's no JavaScript to slow things down either!

SVG

For the touch screen icons, I used SVG. I've long been fascinated with the magic of vector graphics - I love how they obliterate file sizes while looking fantastic when shrunk or enlarged.

As an example, the regular Twitter logo when optimised as a PNG is around 16KB. The SVG is only 436 Bytes. Yes, that's right, just 3% of the size!

In total, those 25 SVGs added up to less than 20KB. They are so small, web browsers spend longer connecting to the server than the time taken to download them. So I placed them inline to the HTML - that saved a heap of downloading and rendering time.

I didn't skimp on accessibility either! Léonie Watson's brilliant blog post on accessible SVGs gave me everything I needed to add alt-text to the images. I was even able to mung the HTML enough that the site works on the text-only Lynx browser!

Browser support for SVG is thorough. Because of their small size, mobile browsers have always had good support for them - and that support has filtered up the chain to desktop. It was only when going back as far as IE8 that I experienced any real problems.

Ultimately, there are too few people using those old browsers for me to bother with fall-back PNGs.

CSS

In keeping with the .tel theme, I decided to make the site look like a modern touch screen phone.

I found the Marvel Pure CSS Phones - a collection of fairly tight and responsive CSS classes which simulate the look of a phone. I trimmed down the files and made the "screen" portion resize depending on the number of elements inside it.

As with all moderately complex CSS projects - there's a tension between relative and absolute sizing. I managed to bash enough % signs into the existing code to make the phone scale with the size of the screen. On absolutely tiny screens, the font does get rather cramped - I should probably use some media queries to sort that out!

HTML5 - the semantic web

The site has three main pieces of semantic markup.

1. Schema.org Person - a way of structuring data on the web. This allows me to define facts about myself in a predictable manner, including how the linked sites are related to me.
2. hCard microformat - to me this seems identical to the above, but my even nerdier friends complained that I'd left it out.
3. OpenGraph Tags - when the page gets shared on services like Facebook and Twitter, the sites are able to pull in metadata about the page.

Hopefully, that will have a positive effect on SEO as well.

I also considered WebFinger, but that seems like dead standard - no-one is using it.

All the chat app links should open up your messaging app - if you have one. I've got a long rant about URI Schemes coming up.

Security

Finally, I used Let's Encrypt to generate a security certificate. I considered making it mandatory to use https when connecting - but there are still too many browsers out there which can't cope with modern security requirements. For now, I'm giving people the option of accessing it in the clear.

Further Reading

The site is entirely Open Source and shared on GitHub.

I've released all the logos as Super Tiny Social Icons on GitHub. I used svgo to optimise them.

Take a look at Marvel Pure CSS Phones.

Finally, if you'd like to get in touch - you know where to find me!