Four awesome tools to help front end developers

Front end development isn’t easy. Combining programming skills with aesthetic sensitivity presents a unique set of challenges. When you consider the wide range of screen sizes and different browsers used to view websites, it has never been more important to write well-structured, responsive front-end code.

Good front-end code will make sure your website provides a positive user experience. It is also an essential part of SEO. Well written semantic HTML will make your website easier for search engines to understand - which will lead to higher and more relevant SERP rankings.

Here are 4 tools we use at Hallway Studios to help us make awesome websites.

A CSS Pre-processor

CSS pre-processors have been around for a while now, if you haven’t jumped on the bandwagon yet I would highly recommend doing so! There are so many reasons to start using a CSS pre-processor. Adding a pre-processor to your workflow will make your CSS code much more manageable. Features such as mixins and variables make CSS more like a real programming language, allowing you to write CSS code that is DRY and easier to maintain.

There are a host of CSS pre-processors available, two of the most popular being LESS and SASS. Both of these pre-processors offer fundamental features such as variables, mixins and selector nesting. If you choose to go the SASS route be sure to check out Compass. Compass is a SASS framework providing some really powerful mixins and functions that will speed up your front-end development process even more!

HTML 5 Shiv

Have you ever spent your time carefully building a pixel perfect web page with all the latest semantic HTML5 tags and CSS3 niceness – only to find when you open it up in an old version of internet explorer it falls flat on its face? It happens to the best of us. Don’t worry though – there is an easy solution. Simply download HTML5 shiv and add it to your webpage. This will add full support for your fancy new HTML5 tags in older browsers such as Internet Explorer 8. Simple but effective!

Retina.js

Mobile phones now account for 17% of global web usage. This figure continues to rise year on year as smartphones become more widely adopted. Retina displays are quickly becoming the standard on smartphone devices, so it is essential to make sure your responsive website looks good on retina screens.

You may have noticed images on your website that look good on a desktop monitor can appear blurry when viewed on a retina device. This is due to the nature of retina screens - retina screens use 2 hardware pixels to represent every 1 pixel shown on a non-retina screen. If you have sized your images to be the minimum required size for desktop viewing, this can cause them to look pixelated on retina screens.

Retina.js provides an elegant solution for this problem. Retina.js checks to see if your page is being viewed on a retina screen - if so, it replaces all of your standard images with high resolution variants, provided they exist. This requires you to create a standard-res and high-res version of each image used on your site. If you are using CSS background images and the LESS pre-processor there is also a handy mixin to replace your background image with a retina optimised version.

Web Developer Toolbar

Web developer toolbar is an excellent browser extension that gives you a wide array of useful tools for front-end development. A few of its features include the ability to quickly validate your pages, check responsive designs and view cookie information. Providing all of this functionality and much more, in an easy to access bar in your browser, saves a lot of time during the development process. I really can’t recommend this extension enough, if you haven’t already got it - you should!

These tools help us to write better front-end code, so we can deliver stunning responsive websites for our clients. 

Interested in hearing more about how we work? Get to know us further by reading our About page or get in touch and say hi!