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 misplacement 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 <frames> and <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
Front-end design relies heavily on JavaScript and client-side scripting. This is why the best practices is to test your code in all the major browsers. At a minimum, most people expect you will test your code in Chrome, Firefox and Internet Explorer (now Edge). You can determine what browsers you’d like to support by looking at your site’s browsing analytics data or using an external source to determine common browsers.
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
Servers and bandwidth are important for site speed, but it’s possible that your front-end can be too bloated even for the fastest server. Image size is a major factor, as is bloated JavaScript code that could be too slow. Always reduce image size and use a format that can be resized without losing much quality such as PNG.
Several site speed testers are available to help you identify what elements of your site design are slowing down your application. “Spaghetti” JavaScript code can slow down the client-side, and large images can slow page load performance. As with responsive design, search engines even take site speed into consideration for ranking, because slow sites frustrate users. A best practice is to always test your site and ensure its performance is fine tuned.
6. Using Outdated or Abandoned JavaScript Libraries
Expert tip: Stick to JavaScript libraries that have active support, documentation, and consistent updates by their developers. You don’t have to only stick with worldwide famous libraries, but you should ensure that the one you do choose will be maintained down the line. If the library is not supported or maintained years later, you might find yourself in a sticky situation with a dependency that is no longer functional if a developer abandons his or her project.
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 misplacement 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 <frames> and <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
Front-end design relies heavily on JavaScript and client-side scripting. This is why the best practices is to test your code in all the major browsers. At a minimum, most people expect you will test your code in Chrome, Firefox and Internet Explorer (now Edge). You can determine what browsers you’d like to support by looking at your site’s browsing analytics data or using an external source to determine common browsers.
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
Servers and bandwidth are important for site speed, but it’s possible that your front-end can be too bloated even for the fastest server. Image size is a major factor, as is bloated JavaScript code that could be too slow. Always reduce image size and use a format that can be resized without losing much quality such as PNG.
Several site speed testers are available to help you identify what elements of your site design are slowing down your application. “Spaghetti” JavaScript code can slow down the client-side, and large images can slow page load performance. As with responsive design, search engines even take site speed into consideration for ranking, because slow sites frustrate users. A best practice is to always test your site and ensure its performance is fine tuned.
6. Using Outdated or Abandoned JavaScript Libraries
Expert tip: Stick to JavaScript libraries that have active support, documentation, and consistent updates by their developers. You don’t have to only stick with worldwide famous libraries, but you should ensure that the one you do choose will be maintained down the line. If the library is not supported or maintained years later, you might find yourself in a sticky situation with a dependency that is no longer functional if a developer abandons his or her project.
No comments:
Post a Comment