8 Common Web Developer Mistakes

There seem to be endless choices regarding how to accomplish the same task: to develop a website that works in today’s modern web. Web developers have to choose a web hosting platform and underlying data storage, which tools to write HTML, CSS, and JavaScript in, how the design will be implemented, and what potential JavaScript libraries/frameworks to include.

Once the choices are narrowed down, the online world is filled with articles, forums, and samples that provide tips for making a better web experience. Yet no matter which path is taken, all developers are susceptible to mistakes. Although some mistakes will be related to a specific approach, there are challenges shared among all web developers.  So through research, experience, and recent observations, I thought I can share a list I compiled of ten common mistakes I see web developers make (including myself) and how to avoid them.

1. Writing Old School HTML
Mistake

The early days of the internet offered much fewer options for markup than we have today. However, old habits die hard, and many people write their HTML as if we were still in the 20th century. Examples here are using <table> elements for layout, <span> or <div> elements when other semantic-specific tags would be more appropriate, or using tags that are not supported in current HTML standard, such as <center> or spacing items on a page with numerous &nbsp; entities.

 

Impact

Writing the last decade’s HTML can result in over-complicated markup that will behave inconsistently across multiple browsers. And it’s not necessary in more recent modern browsers like Microsoft Edge and even past versions of Internet Explorer (11, 10, 9).

 

How to avoid

Stop using the <table> element for layout of content, and limit usage for it to displaying tabular data. Get acquainted with the current markup options available, such as those seen at whatwg.org. Use HTML to describe what the content is, not how it will be displayed. To display your content correctly, use CSS.

Mistake

A developer may be fond of a particular browser or really despise one, and may primarily test web pages with that bias in view. It is also possible that code samples found online may be written without factoring how it would render in other browsers. Also, some browsers have different default values for styles.

 

Impact

Writing a browser-centric site will likely result in very poor quality when displayed in other browsers.

 

How to avoid

It would not be practical to test web pages in every browser and version during development. However, having a regular interval of checking how your site will appear in multiple browsers is a good approach. Nowadays, free tools to help are readily available, regardless of your preferred platform: free VMs, or site scanners. Sites such as Browsershots or BrowserStack show snapshots of how a given page would render over multiple browsers/versions/platforms. Tools such as Visual Studio can also invoke multiple browsers to display a single page you are working on. When designing with CSS, consider “resetting” all the defaults as shown at meyerweb.com.

 

If your site is using any CSS features created specifically for a browser, be cautious as to how you will approach vendor prefixes such as -webkit-,  -moz-, or -ms-. For guidance on industry trends in this regard, it would be worth your time to examine the following references:

Mistake

Prompting a user to provide any information (especially when entered into a text field) and assuming the data will be received as intended.

 

Impact

Many things can (and likely will) go wrong when user entry is trusted. Pages may fail if required data is not provided, or data received is not compatible with an underlying data scheme. Even more serious is the intentional violation of the site’s database, perhaps through Injection attacks (see OWASP: Top 10 2013-A1-Injections).

 

How to avoid

The first bit of advice here is to make sure it is clear to the user what type of data you are looking for. These days, asking for an address could result in either a business, home, or even email address! In addition to being specific, take advantage of data validation techniques available in today’s HTML as seen in this article. No matter how data is validated on the browser side, be sure it is always validated on the server side as well. Never allow a concatenated T-SQL statement to use data from user entry without confirmation that each field is the type of data it should be.

Mistake

Whether it is JavaScript or code running on the server, a developer has tested and confirmed that it works, thereby concluding it should still work once deployed. The code executes without error trapping, because it worked when it was tested by the developer.

 

Impact

Sites without proper error checking may reveal the errors to the end users in an ugly way. Not only can the user experience be dramatically impacted, but also the type of error message content could provide clues to a hacker as to how to infiltrate a site.

 

How to avoid

To err is human, so bring that philosophy to coding. With JavaScript, be sure to implement good techniques to prevent errors as well as catch them. Although this article addresses JavaScript coding for Windows Apps, the majority of the topics apply to web development too, and it is full of good tips! Another way to help create solid code that can hold up well to future changes in code is unit testing. Failures in server-side code should be caught without the user seeing any of the nerdy details. Reveal only what is necessary, and be sure to set up friendly error pages for things like HTTP 404s.

Mistake

With the noble notion of supporting all browsers and versions, a developer creates code to respond to each possible scenario. The code becomes a heap of if statements, forking in all sorts of directions.

 

Impact

As new versions of browsers update, management of code files becomes bulky and difficult to manage. And as mentioned in #1, it’s increasingly unnecessary.

 

How to avoid

Implement feature detection in code versus browser/version detection. Feature detection techniques dramatically reduce the amount of code, and are much easier to read and manage. Consider using a library such as Modernizr which not only helps with feature detection, but also automatically helps provide fallback support for older browsers that are not up to speed with HTML5 or CSS3.

Mistake

Site development assumes viewing in the same size monitor as the developer/designer.

 

Impact

When viewing the site on mobile devices or very large screens, the user experience suffers with either not being able to see important aspects of the page or even preventing navigation to other pages.

 

How to avoid

Think responsively. Use responsive design in your sites. Here are some practical tutorials on the subject, including responsive images. A very popular library ready to serve in this area is Bootstrap.

Mistake

Producing public-facing pages with content that might be very useful, but doesn’t provide any hints to search engines. Accessibility features are not implemented.

 

Impact

Pages are not as discoverable through search engines, and therefore may receive little or no visits. The page content may be very cryptic to users with impaired vision.

 

How to avoid

Use SEO (search engine optimization) and support accessibility in HTML. Regarding SEO, be sure to add <meta> tags to provide meaning to a page with keywords and description. A good write-up on that is found at About Tech. To enable a better accessibility experience, be determined to provide an alt= your image description attribute in each of your <img> or <area> tags. Of course, there is more to do, and further suggestions can be investigated at About Tech. You can also test a public web page at Cynthia Says to see if it is compliant with Section 508.

Mistake

A developer spends a long time creating web content. Time might be spent doing repetitive tasks, or simply typing a lot.

 

Impact

Time for initial website launch or subsequent updates is too lengthy. Value of the developer diminishes when it appears other developers are doing comparable work in less time and with less effort. Manual labor is prone to mistakes, and troubleshooting mistakes takes even more time.

 

How to avoid

Explore your options. Consider using new tools or new process techniques for every stage of development. For example, how does your current code editor compare to Sublime Text or Visual Studio? Regardless of which code editor you are using, have you recently dived into its features? Perhaps a small investment of your time perusing the documentation could unveil a new way to do something that could save hours and hours of time later. For example, note how an extension to Visual Studio can increase productivity for web developers. Don’t miss out on tools available on the web to help! For example, check out the tools at dev.modern.ie to simplify testing (across multiple platforms and devices) and troubleshooting. You can also help reduce time and mistakes by automating processes. An example of this is using a tool like Grunt that can automate things such as the minifying of files. Another example is Bower which can help manage libraries/frameworks. How about the web server itself? With the help of services such as Microsoft Azure Web Apps, you can quickly create a site for virtually any development scenario that can easily scale with your business!

By identifying common mistakes, web developers can eliminate much frustration that others have already endured. Not only is it important to acknowledge, but when we understand the impact of a mistake and take measures to avoid it, we can create a development process catered to our preferences—and do so with confidence!

Privacy Preferences
When you visit our website, it may store information through your browser from specific services, usually in form of cookies. Here you can change your privacy preferences. Please note that blocking some types of cookies may impact your experience on our website and the services we offer.