<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=224324177992593&amp;ev=PageView&amp;noscript=1">
Menu

Let's Talk

Call us on 01920 444797 or fill in your details on the right to arrange a chat.

The Modern Front-End Development Process

Digital Results

front-end-dev-process.jpg

Your website is the biggest piece of branding your business will ever do. No doubt you’ve dealt with digital agencies, and you’ve probably heard the phrase ‘front-end’ being thrown around. But what does it actually mean?

The front-end of a website is the part a website that visitors see - including web pages and other content. It encompasses the way a web page is layed out, how it looks and what the page does.

It’s the role of front-end developers to take a flat design and build interactive web experiences from them. Using 3 core languages, Hypertext Markup Language (HTML), Cascading Stylesheets (CSS) and JavaScript (JS) web standards, developers create distinct web pages that elevate your brand - but what do these languages do?

Front-End Web Development - It's A Lot Like Building a House!

Developing the front-end of a website is actually quite similar to building a house: the structure and foundations (HTML) organise items and rooms, determining their purpose and layout.

blog-post-house-01.png

Once the foundations are set, it’s time to start putting together the decor of the house, that could be a lick of paint, wallpaper or flooring - whatever takes your fancy. The CSS of a website does the same thing: it gives web pages a distinctive look and feel through fonts, colours and patterns.

blog-post-house-02.png

So you’ve got a newly constructed house with solid foundations, and it’s looking great inside. But when it comes to living it in, you want entertainment and a bit of spice. You could sit in a dimly lit room by a candle, or if you had electricity you could kick-back and watch a film on a big-screen TV. JavaScript gives developers the ability to add special effects like animations and hover-over effects that could really make your website stand out.

blog-post_house-03.gif

These three core languages are fundamental to any front-end website development, but with any construction or DIY project, there are a variety of methods and tools that can help complete a job.

Selecting the right tools

Selecting the right tools for the job is fundamental to any kind of project. Front-end developers have a range of tools and frameworks (methods) to help them complete projects.

Due to the size and scope of modern websites, it’s unusual that just one front-end developer will work on a project - so managing code in terms of who wrote it, what it does, when was it added, why was it added, and which files changed is a common headache for developers.

Modern version control systems ease these headaches. We use Git as it provides a timeline of all changes made to code. It helps developers collaborate, find errors and check the quality of the code.

Initial Stages

In layout and appearance, the web isn’t too dissimilar to the pages of a magazine - and you wouldn’t expect to read a magazine that looks like a teenager’s rushed homework. Wireframes and designs serve as the blueprints that can be worked from, and then front-end developers build these designs into interactive pages with a great user experience (UX).

Like when architects pass over a blueprint to a builder, developers will plan and consider the technical reality of a project, and what tools they will select for the job. Front-end developers also need dimensions, specifications and assets (materials) to work from.

Build

This is the stage where a front-end developer uses a design for reference and begins to lay the bricks of a website. The time this takes can vary, depending on the scope and size of the project, so the more functions, unique pages, and other features, the longer it is likely to take.

We use the following tools to make our workflows as efficient and high-quality as possible:

Task runners - like Gulp - that automate repetitive code tasks and reduce the risk of human error

blog-post-tools-01.png

CSS preproccessors - like Sass - speed up the styling of HTML, it's the code equivalent of using a roller over a bristle paintbrush!

blog-post-tools-02.png

And various frameworks, particularly for JavaScript, depending on what is needed for the job. We use: jQuery, Node.js, Angular and even React.

Refine & Review

Even the best front-end developer in the world needs to take the time to refine their work and review what they’ve already coded. This is especially important in responsive web design, and testing is required to review code when it’s rendered on different devices.

Another reason to review is to support legacy internet browsers (such as Internet Explorer 9) where modern web technologies aren’t as well supported. Using a process called graceful degradation, front-end developers make pages look as good as they can on these older browsers. We use Browserstack to test our work on a whole range of browsers, operating systems and mobile devices.

Linting also helps us review code. Linters highlight sections of code that may need refactoring to work more effectively, like many things there’s no ‘right’ and ‘wrong’ when formatting code, but it’s important that it is consistent. We prefer to use Airbnb’s linter, which outlines best practice for JS, but there are a wide variety of linters available. 

Conclusion

In the digital world, your website is the central hub of your customer-facing business. It’s vital that it not only makes your brand stand out, but that it elevates it. The quality of the code not only helps you look great, but can also attract more business.

Using the latest tools, techniques and web technologies can help elevate your brand beyond your look. It’s also great for search engines, as Google recently announced their preference to pages that are ‘light’ and quick to load, high-quality code enables pages to do just that.

Not all digital agencies keep innovating their process, and it’s vital for your results that you can call on a team of front-end developers that not only do great work, but write code using the newest standards.

7-sins-download.png

Let's talk

© Copyright 2017 Digital Results Ltd.

Company No. 06759854. Office Address: 12 Rosebery Avenue, London, EC1R 4TD, United Kingdom.