Front-end designers and programmers are responsible for developing everything that users of a site or app see and interact with. This includes coding and bringing interfaces to life that are engaging and aesthetically pleasing to viewers. Just because a customer-facing interface functions well doesn’t mean it will be a success. The wrong design can destroy a site’s user base and cause a dramatic drop in revenue, and getting that design right is the role of a front-end developer.
In front-end development, it’s very important to understand users and their behaviors to build a beautifully functioning front end, but there are also a few common coding mistakes to avoid. Here are a few to keep an eye out for when developing a site or application as well as some tips and best practices that can help you keep your projects on track:
1. Using Tables Instead of Div Containers
Tables were the de facto way of HTML element placement years ago. They almost seem easier to work with than using div containers and CSS when you’re starting a front-end design career. However, tables can be pretty messy and can cause design flaws and misplacements in different browsers.
Table designs have been replaced more and more by CSS and div containers as a more optimal way to place elements and create a layout. Tables are still useful when displaying charts of information, but they’re rarely used to create layouts. Try to opt for “table-less” layouts when designing your front-end HTML code.
2. Coding with Old HTML Elements
HTML5 is the newest form of the HTML coding language, and it’s provided a lot of changes to standard page design. HTML5 replaces elements such as Adobe Flash with the <canvas> tag. The new standards also deprecated some tags such as
<center> for CSS design.
It’s usually best to avoid coding with older HTML standards. Front-end design depends heavily on browser support. Older HTML support is not always available in some browsers, and it’s bad practice that can put your site at a disadvantage in the long run. (Not to mention, HTML5 has many awesome advantages that will make a site more modern and secure.) The code can be harder to support and in some cases, it can leave your site more vulnerable to security attacks.
3. Forgetting to Test for Each Major Browser
You should also determine the oldest browser version you’ll support. Many users stick with the same older browsers as their computer ages, so you should weigh the pros and cons of possibly alienating these users with the effort it takes to maintain code for both older and newer browsers. Decide the oldest browser version you’ll support and then test on these older versions.
4. Forgetting Responsive Mobile Design
Mobile is the new generation web browsing. Tablets and smartphones are the most popular ways for browsing the web, increasingly replacing desktop browsing. Your front-end design should always be responsive and support mobile devices, or you’ll risk penalties in search results. You can also create a separate site for mobile (also called “m sites”) on a subdomain, but responsive design should be the default in modern front-end coding.
After you make your design responsive, you’ll want to test it as well—with all browsers and browser versions. Remember that mobile devices have several different screen sizes, so ensure that your code supports all possible breakpoints. You can use emulators that help you test so that you don’t need to have several devices on-hand to test.
5. Not Prioritizing Site Speed
It’s difficult to predict what a developer will do with a project years from now, but you can view its popularity by searching the number of support communities online. For instance, you can’t go wrong with AngularJS or KnockoutJs libraries—they’re popular and supported by big brands.