3 Important Frontend Concepts that Make You a Professional

Frontend development seems to be perceived as the easiest part of software development. People often think it’s all about crafting a beautiful and easily maintained product.

But what makes you a professional frontend developer?

Likely, you would have heard advice like, “Learn HTML5, CSS3, CSS preprocessors, JavaScript, responsive design, a frontend framework like React/Vue/Angular, and one of the popular automated testing frameworks.”

This article highlights some other important but less common concepts that will make you a better and more professional frontend developer. Let’s dig in!

Making Your Website Accessible

Ensuring you have accessibility involves creating or adapting your product for use by people with disabilities or special needs. You should always be creating your product for ‘almost everyone’, if not ‘everyone’.

A product with good accessibility is built with input and output devices in mind. Input devices like mouse, keyboard, or touchscreen and output devices like speakers, monitors, or braille displays. Your product should be accessible through any of these devices.

It is also important to add no-javascript support to your products. It’s not possible for every use case but JavaScript doesn’t function under a large number of circumstances. For example, some people turn off JavaScript and all users are non-JS when they are downloading your JavaScript. You can check this visual guide for many more reasons why you should ensure your products work without JavaScript.

Using proper HTML semantics, as old as that may sound, is an important factor that makes a website more accessible. For example, this involves using tags like `h1` or `h3` which add semantic meaning to your headings, in addition to increasing the font size by default. Semantic usage makes it possible for screen readers to recognize and announce the semantic elements they encounter like `header`, `main`, and `footer` in addition to the `h` tags described above. That way the user can know exactly what part of the website they are accessing.

Sufficient color contrast between foreground and background also makes for good accessibility. It’s not enough to just choose a nice color combo, you must ensure there is sufficient contrast between an element’s `color` and its `background` color. You can use this contrast checker to validate your colors.

Page and Site Speed

These two concepts are very important for making your product more accessible and user friendly. Page speed describes the time it takes to completely load each page of your product. Site speed is the average time it takes to completely load any of these pages.

Faster pages are more efficient and make users happier. Imagine product A with a site speed of 30 secs and product B with a site speed of fewer than 3 secs. Product B will engage users better.

According to Kissmetrics, a one-second delay in page response can result in a 7% reduction in conversions and 40% of site visitors abandon a website that takes more than 3 seconds to load. Getting a paying customer can be tough on startups, imagine how many potential clients product A would be losing just because of their page or site speed.

Site or page speed largely depends on factors like the overall page size and the presence of unused code, be it CSS or JavaScript. The presence of unused code increases your bundle size, thereby affecting your page’s speed. You can reduce your bundle size through tree shaking, code splitting, or using bundle analyzers like webpack bundle analyzer.

Page speed is also quite important for SEO, search engine optimization. In 2018, Google announced that page speed would begin to play an important factor in Google search and ads.

Optimizing for Search Engines

It’s great to build a visually impressive website, and include carefully curated blog articles but what happens when all your articles are only seen when you share the links and not found organically? To properly market your product, you should definitely consider Search Engine Optimization (SEO).

SEO, in simple terms, means optimizing your website to show up in relevant keyword searches, in any search engine. The higher your chances of showing up in search results, the higher the number of potential clients.

To improve a website’s SEO, add a unique and accurate title for each page, block unwanted crawling (for sensitive pages) using robots.txt, implement a mobile-friendly webpage, ensure you have no HTML errors, and optimize your images. For more information, check the “more readings” section below.

In Conclusion

All of the above-mentioned concepts make your product easier to use by almost anyone. I think you will now agree that the success of a product depends on a lot more than just beautifully crafted pages, and that it takes a professional frontend developer to understand how vital all these things are to a product’s success.

Have you been adding the above concepts to your checklist when designing the frontend of your web products? I’d recommend you start if you haven’t already! Happy coding!‍