Every website has a frontend; it’s everything about the service a user will actually see. Because it’s what users interact with, the frontend has to be accessible, well-designed, intuitive for the user, and it has to perform well.
What is frontend development?
Frontend development is a specialism of software development. In simple terms, the frontend of a website is the part users actually see and interact with, what’s known as the user interface (UI). Every website has a UI in some form.
Where frontend development’s focus is on the UI, another area of web development is on the backend. Backend development focuses on the databases, scripting and the underlying technical architecture of a website. Developers who focus on frontend and backend development are known as full stack developers.
Frontend developers often work with 3 core technologies: Hypertext Markup Language (HTML), Cascading Style Sheets (CSS), and JavaScript.
HTML is the foundation of a website. It essentially involves wrapping content in tags (or markup) to give it semantic meaning. By doing this, both users and machines have a better understanding of the content (such as this is a paragraph, this is an ordered list).
CSS is the presentation layer that sits above HTML. It’s a set of instructions that tell a browser how to present the HTML to a user. It controls things like font size, font colour and the typeface used. CSS can also control page layout across devices, change colours, and even animate elements.
JavaScript is the final layer that sits above HTML and CSS. JavaScript adds interactivity to pages. It’s a set of instructions to tell the browser to do something when an event happens.
There’s much more to frontend development than HTML, CSS, and JavaScript.
Accessibility
The implementation of accessibility best practices is a problem frontend development can solve. It’s easy to create a website that can be viewed by the majority of users. But creating one that can be accessed by all users, no matter what their circumstances (such as visual, hearing, motor or cognitive disabilities), is difficult.
A frontend developer is the best person to champion accessibility best practices in product teams, as they are the people writing the code that all users interact with.
Web performance
There are many architecture decisions that a frontend developer makes that impact a website’s performance. As web performance expert Steve Souders says in the Performance Golden Rule, “80-90% of the end-user response time is spent on the frontend.”
Or, in other words, only 10-20% of a website’s performance relies on the server (backend). The rest is reliant on how the frontend developer has built the UI. This means there’s potential for huge performance gains in this area, if it’s prioritised.
We know that if a government service performs badly, users get frustrated and abandon the service. Usually, this means the service will fail.
A user that cannot get the information they need from a government service will struggle to find it elsewhere, since we have no competitors. That’s why web performance in our sector is so important.
Design
A frontend developer bridges the gap between technology and design. They are a cross between an interaction designer and a software developer. A frontend developer has the ability to take a page design and transform it into a working HTML page that considers areas like:
- accessibility
- web performance
- future maintenance
- cross-device testing
- responsive web design
Although a frontend developer is not expected to be a designer, they should be able to examine the design from the perspective of a user, and raise potential issues they spot that could create a barrier. A frontend developer takes pressure off interaction designers who do not want their prototype code to go into production, as doing so could endanger the accessibility, performance, and overall maintainability of the frontend code.
Users first
All frontend development work should be focused on putting user needs first. A frontend developer is the person that all the team's work flows through. They will ultimately collaborate with and communicate the work of a whole agile team to the user. This includes:
- product managers
- service owners
- delivery managers
- user researchers
- content designers and technical writers
- interaction designers
- backend developers
If you do not have a frontend developer there is a high risk that the good work the rest of the team does will not be presented to users in the best way.
Frontend development at GDS
There are currently 16 frontend developers working at Government Digital Service (GDS). One of the community's main priorities is to make sure that all GDS services are fast, easy to use and accessible to everyone who needs to use them. These services include GOV.UK, GOV.UK Pay, GOV.UK Verify and more.
Recently the frontend community implemented HTTP/2 on GOV.UK to improve its speed. The community also maintains a list of browsers and devices service teams across government should test with. This helps service teams to provide a service that works for all users, regardless of their device or browser.
Helping every user
Frontend development involves showing empathy and understanding that every user has different needs. Not every user has a high specification handset or laptop. Not every user has a fast internet connection. Not every user is able-bodied.
To quote frontend developer Charlie Owen:
Ultimately the job of a frontend developer is to make people’s lives better, or at least not make it worse.
And that’s why you should hire a frontend developer. To present your team’s work in the best way possible, and make people's lives better.
Keep an eye on the Government Digital Service careers page for frontend development jobs. Find out more about the cross-government frontend development community, get in touch via our cross-government Slack channel, or leave a comment below.
3 comments
Comment by Gwyn Jones posted on
Thanks Matt. This is a really helpful post. Much appreciated.
Comment by jodie posted on
as a front end developer, I can confirm that all of the "full stack" devs I've worked with needed my help
Comment by Studio 36 Digital posted on
Thanks Matt, interesting read. For us, it's often a compromise. Presenting a great front-end experience, while limiting JS and keeping page speed acceptable for client server capabilities. Our own website http://www.studio36digital.com has such limitations as it was originally and currently created around a weighty WP theme. Thanks for sharing.