The art of front-end development

What is front-end development?

Front-end development focuses on building a website using HTML, CSS and JavaScript – the elements of a website a user interacts with in their browser, be that on their phone, tablet or desktop computer.

The HTML, CSS and JavaScript is downloaded from a server to a user’s computer when they connect to a website and run ‘locally’ on their computer.

• The HTML contains the text or content of the page. This is in effect a document, much like a Word document. You can see this if you turn off CSS and JavaScript in your browser.
• The CSS or ‘styles’ are used to style the document and change its layout and presentation.
• Javascript adds the zing and brings the page to life. It works by manipulating the document after it has loaded and as the user interacts with it.

A brief history

When I started building websites back in the late 90s, there was no concept of a ‘front-end developer’. The specialised role we see today simply didn’t exist in the industry back then. As the internet has grown up, so have the number of specialisations, but back then I was the UXer, the designer, the front-end developer and the back-end developer!  This might have had something to do with how terrible websites looked in the nineties!

Back in the 90s, the World Wide Web was relatively unsophisticated with some serious limitations on the part of technology, and it was easy to be a jack-of-all-trades. Tables were used for page layout and it wasn’t till the year 2000 that style sheets came out.
 
Over time, as the technology matured, it started to become difficult for one person to perform all the different roles, so web design and development split into two different disciplines.
 
As technology marched on, it became more and more challenging to keep up with the advance of both front-end and back-end technologies, thus heralding the emergence of front-end developers who were focused specifically on the front-end technology stack.
 
These days, front-end development is an extremely complicated business with change taking place at an incredible pace - there are a myriad of new tools and techniques continually being added into the mix.
 
It is a multi-faceted discipline, and our front-end developers at True must consider a multitude of different things at the same time. Because we’re not just about building websites – we’re about building websites that push the boundaries of technology and offer exceptional user experience and, by extension, a great return on investment for our clients.

The different facets of front-end development

1. Responsive web design

Responsive web design (RWD) entails building a website that works fluidly across all devices including desktop, mobile and tablet. The site has to flex to fit the available screen size.
 
Developing responsively means our sites not only have to be tested across a range of different browsers and devices, but also in both landscape and portrait screen orientations.
 
Google have said that they will use the mobile-friendliness of sites as a ranking signal on mobile searches, so it’s important that sites are mobile optimised. RWD isn’t the only way to deliver a mobile-friendly site, but it is the method that Google recommend.

2. Keeping up with technology

There is a myriad of new techniques and frameworks adding new possibilities to what you can do in front-end on a daily basis. The speed of change is staggering. Our developers have to stay on the cutting-edge of all these advances, and are constantly learning and exploring new techniques and technologies.
 
They also work closely with the design team to explore how we can apply these cutting-edge techniques to new projects.

3. Prototyping

Prototyping means getting into the browser as early as possible, initially with a simple text prototype that has no styles. This allows the team to start testing how the site works in the browser and means we can validate our creative ideas every step of the way. If there are any usability issues we can fix them straight away, rather than later on when making changes can be prohibitively expensive.
 
Over time, we add fidelity by adding styles and interactions to the prototype as we progress through the build. Prototyping helps to ensure the quality of the build is second to none, something our Design Director Mark has previously touched on.

4. Performance

Performance is key. Users are impatient - they aren’t going to wait around for your website to load on their device. They expect it to be there, instantly, and they expect it to be snappy. If it isn’t they will go and find another site that doesn’t suffer from lag.
 
Google use page speed as a ranking signal, so if your site is slow, you will be penalised and fall down the search rankings.
 
This makes it important to put performance at the heart of our front-end development. We use a number of tools and techniques to ensure the user interfaces we build are optimised for speed:

• All JavaScript and CSS files get bundled and minified to limit the number and size of http calls
• Our images are all optimised and we serve relevant sized images to different devices using source sets
• We load the critical above the fold markup and CSS inline to ensure the visible part of the page is rendered quickly
• We cache everything we can to make sure the browser isn’t having to do any unnecessary work
• We use tools such as Pingdom, Google PageSpeed Analyzer and YSlow to monitor and improve

5. Accessibility

Accessibility is about ensuring a website can be used by people of all abilities and disabilities.
It is a legal requirement for companies in the UK to ensure their sites are accessible (as part of the Disability Discrimination Act 2011).
 
People with disabilities may have special needs when it comes to using a site in a normal browser such as Chrome or Firefox. For example, they may not be able to see very well, or they may find it difficult to use a mouse. Alternatively, they may use a completely different tool for accessing the website, such as a screen reader.
 
There are many techniques that must be baked into a front-end build to ensure the site is usable by people with different needs:

• Ensuring there is sufficient contrast between foreground and background colours to ensure visually impaired users are able to read the text
• Writing semantic ‘clean’ markup where the proper HTML constructs are used and the HTML document is separated from the CSS and JavaScript
• Ensuring the site is readable and makes sense when style sheets are turned off
• Providing alternative content for rich media, especially alt tags for images
• Ensuring forms can be used with just a keyboard
• Using ARIA to make interactive/dynamic elements of site accessible

6. Search Engine Optimisation (SEO)

It’s imperative that users can find your site. SEO is a much wider field, but there are some key things that must be thought about from a build perspective to ensure the site can be optimised for search:

• Markup must be clean and semantic
• Heading tags must be used appropriately
• Meta information such as page titles and descriptions must be set on a page by page basis
• Link text must be meaningful
• Search engines must be able to crawl all pages so ensure all content is discoverable when JavaScript isn’t turned on
• URL structure needs to be thought about upfront and duplicate URLs avoided

Standing still is going backwards

Front-end development has evolved rapidly over the last two decades. It has matured to such a degree that it requires specialists who are passionate about what they do to deliver excellent work that ticks all the boxes.
 
Passion is imperative because without it you wouldn’t be able to keep abreast of the constant flux and evolution of the industry, and standing still in the world of front-end development essentially means you’re going backwards.
 
I’m proud of what the front-end team at True have achieved over the last few years. How they’ve ridden this wave of advancement and continually pushed the boundaries in a relentless bid to build better things and do it more efficiently.
 
To get a taste for the talent we have at True, browse our agency website, check out some of the awards we’ve won, or explore the team’s github page to see the cutting edge thinking that goes on in our team.