10 Common Mistakes Web Developers Make

By Michael Palermo

This article is part of a web development series from Microsoft. Thank you for supporting the partners who make SitePoint possible.

There seems 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 design will be implemented, and what potential JavaScript libraries/frameworks to include. Once 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 would share a list I compiled of ten common mistakes I see web developers make – and how to avoid them.

The following list is in no particular order.

1) Writing Old School HTML

Mistake : The early days of the internet had much less options for markup than we do today. However, old habits die hard, and many still 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 <font>, or spacing items on a page with a large number of &nbsp; entities.

Impact : Writing 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 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 ( http://www.w3.org/Style/CSS/).

2) “It Works in My Browser…”

Mistake : A developer may be fond of a particular browser or really despise one, and might 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 & 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, site scanners. Sites such as http://browsershots.org/ or https://www.browserstack.com/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 specific 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:

While the above references explain a movement away from vendor prefixes and why, this site provides practical suggestions on how to work through this today.

3) Bad Form

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 be specific, take advantage of data validation techniques available in today’s HTML as seen at 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 the each field is the type of data it should be.

4) Bloated Responses

Mistake : The page is filled with many high quality graphics and/or pictures, scaled down with use of img element height and width attributes. Files linked from the page such as CSS and JavaScript are large. The source HTML markup may also be unnecessarily complex and extensive.

Impact: The time to have a page completely render becomes long enough for some users to give up or even impatiently re-request the whole page again. In some cases, errors will occur if page processing is waiting too long.

How to avoid : Don’t adopt the mindset that access to the internet is getting faster and faster – thus allowing for bloated scenarios. Instead, consider everything going back and forth from the browser to your site as a cost. A major offender in page bloat is images. To minimize the cost of images that slow down page loads, try these three tips:

  1. Ask yourself: “Are all my graphics absolutely necessary?” If not, remove unneeded images. You can scan your site here for suggestion on which images to compress.
  2. Minimize the file size of your images with tools such as Shrink O’Matic or RIOT.
  3. Preload images. This will not improve the cost on initial download, but can make other pages on site that use the images load much faster. For tips on this, see this article.

Another way to reduce cost is to minify linked CSS and JavaScript files. There are plenty of tools out there to assist in this endeavor such as Minify CSS and Minify JS.

Before we leave this topic, strive to be current with HTML (see mistake #1) and use good judgment when using <style> or <script> tags in HTML.

5) Creating Code That Should Work

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 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, 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 aid to help create solid code that can hold up well to future changes in code is unit testing (see this Wikipedia article).

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 (see this Wikipedia article).

6) Writing Forking Code

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 direction.

Impact : As new versions of browsers update, management of code files become 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 not only dramatically reduce the amount of code, it is much easier to read and manage. Consider using a library such as Modernizr which not only helps with feature detection, it also automatically helps provide fallback support for older browsers not up to speed with HTML5 or CSS3.

7) Designing Unresponsively

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

Impact : When viewing the site in 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 ( Wikipedia) or ( A List Apart article) in your sites. Here are some practical tutorials on it including responsive images. A very popular library ready to serve in this area is Bootstrap.

8) Making Meaningless Pages

Mistake : Producing public facing pages with content that might be very useful, but not providing 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 optimizations) and support accessibility in HTML. Regarding SEO, be sure to add 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.

9) Producing Sites That Are Too Refreshing

Mistake : Creating a site that requires full refreshes of a page for each interaction.

Impact : Similar to bloated pages (see mistake #4), performance of page loading time is affected. The user experience lacks fluidity, and each interaction could cause a brief (or long) resetting of the page.

How to avoid : One quick way to avoid this is by determining if posting back to the server is truly required. For example, client-side script can be used to provide immediate results when there is no dependency for server-side resources. You can also embrace AJAX techniques ( Wikipedia) or go further with a single-page application “SPA” ( Wikipedia) approach. Popular JavaScript libraries/frameworks are available to make adoption of these methods much easier, such as JQuery, KnockoutJS, and AngularJS.

10) Working Too Much

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 web site 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 what 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 & hours of time later. For example, note how an extension to Visual Studio can increase productivity for web developers as seen in this post.

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 (see mistake #4). Another example is Bower which can help manage libraries/frameworks (see mistake #9).

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!

Summary

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!

More Hands-on with JavaScript

This article is part of the web development series from Microsoft tech evangelists on practical JavaScript learning, open source projects, and interoperability best practices including Microsoft Edge browser and the new EdgeHTML rendering engine.

We encourage you to test across browsers and devices including Microsoft Edge – the default browser for Windows 10 – with free tools on dev.modern.IE:

In-depth tech learning on Microsoft Edge and the Web Platform from our engineers and evangelists:

More free cross-platform tools and resources for the Web Platform:

  • Dom

    Great article, but #9 would lower the SEO quality no ? As this would mean having only 1 indexable page, title, etc.

    • bebraw

      There are a couple of ways to work around that. When developing a classic SPA you can render spider friendly snapshots of each page and serve those especially for them. Alternatively you can use isomorphic rendering for your site. This means the backend provides an initial data and HTML payload. Once the frontend JavaScript has loaded, it will pick up from there. React, Ember and such implement this.

    • https://laurielias.wordpress.com/ MidnightRaver

      Google can deal with async content, who really cares if Bing and Baidu can too? : ) Ok ok, it may be important to be indexable by as many crawlers as possible.

      If you can’t refresh quick your page probably has too much crap in it. Breaking URLs, history etc. and then re-implementing them with JS is typical these days, but I’m still very much in the Progressive Enhancement camp.

  • Admiral Ackbar

    So you’re a technical evangelist at Microsoft and you’re telling developers to stop using div’s? Maybe we’ll stop using them once IE8 can recognise modern HTML5 elements, or we dont have to support IE8 anymore, until that time we dont have that luxury since IE8 has a lovely habit of treating new elements such as as divs/ignoring them all together/only picking up their first class

    • http://palermo4.com J. Michael Palermo IV

      @disqus_KMZT2cKd2e:disqus It was never stated in the article to stop using div tags. The article highlighted new alternatives to old ways of doing things. Mistake #6 references means by which older browsers can adapt to new tags. Hope that helps.

      • Admiral Ackbar

        Yes it’s stated in point 1: “many still write their HTML as if we were still in the 20th century. Examples here are using elements for layout, or elements when other semantic-specific tags would be more appropriate”

  • http://architect4wp.com Chris Howard

    Great article, Michael.

    My own philosophy: “The smart thing to do is write dumb code”

    Not dumb as in stupid but as in “dumb terminal”. i.e. It’s about code that is as generic as possible and therefore the most reusable.

    An extremely simple example: Instead of writing “A^2”, write “A^B” so you can reuse the same function for any values of A or B.

    However, I still fail to follow this myself, being in a rush to get the job done. So am continually trying to remind myself.

    It’s very easy when coding, to make the quickest fix that solves the specific problem at hand albeit too specifically, thus creating a piece of less-reusable code – that will probably come back to bite you later, or worse, the next developer who is maintaining it.

    It’s even more of a risk in maintenance. When you’re coding a new project, it’s easier to be committed to the mantra because you do have more time than when it’s live and the user is screaming that their system is down.

    “Dumb” code is easier to re-use, read and maintain. But it does require a little bit more work in the “now”.

  • George

    This is a joke, right? MICROSOFT, the bane of every web developer, telling us how to code web sites? To use new HTML, when we constantly have to dumb down anything cutting edge to work in their IE? Having to still support IE because the IT depts of way too many companies, corporations and governments are Microsoft fanboys and lock out any other browsers? And then to plug their tools within the article? That’s gone too far. Sitepoint is officially sold-out.

    • http://viii.in/ Vinay Raghu

      There is always scope for improvement. I, for one, am glad that Microsoft is taking the open source and the open web seriously. IE was a mistake but it’s wrong to penalize anything that comes out of Microsoft for that reason. The new edge browser is compatible with most new technologies and there is a dev site where you can see what are the new features they are working on. This sort of open development is what we wanted and when browsers and browser manufacturers correct their past mistakes, we should encourage them. They are embracing what we, the public think are good practices. Let’s not make this personal or about how IE6 or IE8 sucks.

      • http://careersreport.com Sally Freeman

        I will show excellent online# job opportunity… 3-5 hours of work /day… Weekly paycheck… Bonuses…Payment of $6000-$9000 /month… Merely several hours of free time, any kind of computer, elementary knowing of internet and dependable web-connection is what is required…Click on my disqus~~~~page to learn more

      • http://careersreport.com Jamieburton

        This is how it is possible to make sixty-five dollars /an hour… After being without work for six months , I @ started freelancing over this web-site and now I could not be happier . 3 months have passed since being on my new job and my income is around 5000 dollarsmonth -Check Link on MY~DISQUS~PROFILE for more information

  • http://webdevron.com/ M. B. Parvez

    Great article as well as great resources..

  • Bucetão

    Principal mistake: Using PHP + jQuery

  • brianm101

    To be honest the use of tables allows easy wysiwyg especial if used with the right tools with just about every browser out there. Use more ‘modern’ techniques then nothing is guarenteed. Some times the old ways are best ( and quickest) and the user doesn’t care provided they get the information!

  • brianm101

    Amazing comments considering the article comes from Microsoft, a company that clearly doesn’t take its own advise! The most annoying one is ‘don’t take the mindset that the Internet is getting faster and faster’, so true, but Microsoft is a real offender here with Windows 10 and how it has to be installed and updated. As for their Browser technology,think we all know how bad it is, Edge is better but with a user interface that a 5 year could design better!

Recommended

Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!

Get the latest in Front-end, once a week, for free.