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 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 would share a list of five common mistakes I see web developers make—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 the 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 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 for 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 the 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.
2) “It Works in My Browser…”
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.
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.
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 an email address! In addition to being specific, take advantage of data validation techniques available in today’s HTML. 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.
4) Bloated Responses
Mistake: The page is filled with many high-quality graphics and/or pictures, scaled down with use of the <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 taking 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. Images are a major offender on page bloat. To minimize the cost of images that slow down page loads, try these three tips:
- Ask yourself: “Are all my graphics absolutely necessary?” If not, remove unneeded images. You can scan your site here for suggestions on which images to compress.
- Preload images. This will not improve the cost on initial download but can make other pages on the site that use the images load much faster.
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 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!
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.
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!
Share
Share
Share
