How Pixel Perfection Led Me To Code

A responsive alternative to blurred elements at large display resolutions on your website.

Image background from Pixels

While redesigning my portfolio landing page, I came across some issues. Minimal issues which get overlooked far too often.

It is a tag you see on many portfolios, but some are distorted on larger displays. It sends shivers up my spine imagining of comments from my previous mentors about anti-alias.

I recently read a post by Ohans Emmanuel about how he recreated the Medium clap. Which is why I thought “I should give his techniques a go!” Thank you, Ohans, for the inspiration.

Sketch

First I designed the tag on Sketch and copied the the SVG code (which makes the process super simple)

Code Pen

Secondary I copied the SVG code onto Code Pen and then made changes to the code.

Having difficulty changing the size of the tag on Code Pen was difficult, so I found an article with the answer. The answer was to delete a small snippet of code on the top line of code. With the help of the blog, a super crisp HTML tag was born into the digital world, which you can use here. If you want to see the results click here.

Conclusion

No matter how many times you export large PNGs, sometimes using programs such as Sketch and using code can be much more benefiting then bodging designs which have no responsive functions. It also reduces on page file size which in the next coming months AMP may be a focus.

Thank you for reading : )

If you enjoyed this, please hit ♡ and Follow below. You can also reach out to me on twitter @Hjflaherty.