Development

The Do’s & Don’ts of Web Development

Written by - 04/08/2017

There are many different things to remember as a web developer. You must always be on your toes and on the lookout for anything that may come up whilst building a website. There are always new techniques and features that may arise in the world of web development, which makes it an exciting occupation to be in.

Responsive Web Design

The current trend for websites is responsive web design. This is where a website adjusts itself to the user’s device whether it is a desktop, tablet or mobile phone. To see this in action, try loading WDL’s website on your mobile phone, and compare it to how it looks on your computer. The content adjusts itself against how wide your device is.

In the past there were two other methods used for catering for different devices. These were…

  • Having a separate website for mobile phones.
  • Having the website look different on desktops and mobiles on load.

There are obvious pros and cons for these methods. Having a separate mobile website would mean you would require a lot of extra work and time to create it, test it and launch it. This would end up costing you a lot more money. Having a website change on load (as per the second option) is an acceptable option, but if you make your browser window smaller without reloading the page, you will see a broken desktop website. Having a responsive website means that the site adjusts itself to the user’s device without reloading the page and without the need for an extra mobile website.

In October 2016, a research company called “Statcounter” that tracks internet usage across 2.5m websites found that 51.3% of websites were loaded on mobile devices. This was the first time that mobile usage surpassed desktop usage. This highlights the need to have a responsive website in order to cater to a wider audience.

Don’t Ignore Older Browsers

It is quite easy to build a website in a modern browser and forget about older browsers. New techniques such as CSS transitions will not work in older browsers. Transitions don’t work at all and are ignored in IE9. For example – you might have a blue button that when hovered over, the background changes smoothly to a darker shade of blue. However in an older browser like IE9, when the button is hovered over, it will change suddenly to the new background colour rather than smoothly. Unfortunately, without JavaScript, there is no way to overcome this. Therefore as a web developer, you must consider how new techniques work in older browsers.

However, you can’t then not use these new techniques because of older browsers. If this was the case then no one would invent any more new techniques! The best thing to do is to consider how a new technique may be presented in older browsers. You should ensure that new techniques degrade nicely in older browsers. For example, the technique “border-radius” turns corners rounded will fail in older browsers. You should test your website to see if in older browsers the corners look acceptable as plain square corners.

Without these checks, your website will fall apart in older browsers. Although the amount of users for versions of IE11 and below is now quite low compared to other browsers, you shouldn’t just ditch support for these browsers. The ideal solution is to have your website work as effectively as possible in every browser.

 

Use CSS Font Smoothing Techniques

A CSS technique that always makes a website look 100% better with minimal effort is font smoothing. In modern versions of browsers such as Mozilla Firefox and Google Chrome, you can make fonts look a lot clearer. Without these techniques in place, a website can look fuzzy and unreadable in places.

One of the first things I do when creating a website is to add some font smoothing to the body. Adding these styles to the body will ensure that they are used by all elements on the site. This can vastly improve the readability of your website. The code to use is shown below.

 

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

 

However, these techniques are currently only supported in Firefox on Mac, Chrome, Safari and Opera. Depending on the font you are using, it is often the case that you won’t have a big need for font smoothing in browsers that don’t support these techniques. Hopefully, as CSS progresses, we might see font smoothing become used across more browsers in the future!

 

Never Build a Website Using Tables!

Back in the time before the wonders of CSS, websites used to be built using tables. Websites would literally be built in one big table with more tables inside. These days we now have HTML5 and CSS3 which allow for more flexibility when building websites. Instead of tables we have headers, footers, divs, sections and much more to define content on a page.

As mentioned earlier, the most important trend for websites nowadays is responsive web design. It can be difficult to make tables responsive without excessive CSS and JavaScript. This adds to the many different reasons to avoid using tables when building websites.

However, there are still some uses for tables in modern web development. They are particularly useful when displaying large sets of data such as sales data or timetables. Additionally, tables are still the basis for building an e-mail template. But in terms of web development, these should be the only cases for using tables.

 

Make Sure You Fully Test a Website Before it Goes Live

 

In the world of web development, there is not a lot worse than finding a problem with your website when it goes live. No matter how big the problem is, it is there and you have to sort it out. To avoid this kind of nightmare, you should ensure that you thoroughly test each and every website that you create.

There are numerous parts of a website you should be testing. This includes…

  • Testing it on desktops, tablets and phones
  • Testing it in as many browsers as possible (test it in as many versions of IE as possible)
  • Test the speed of the site
  • If it is an e-commerce site, test the checkout process
  • Perform some usability testing
  • Check for form validation and error messaging
  • Check for extra features such as a 404 page and Google Analytics

At WDL we have numerous checklists for building sites which we use on every project. Every website we build also goes through an internal quality assurance process, where every other person on the project (usually three people or more) will check the website against the specifications. They will then let you know if they see anything wrong with the website that should be amended before it goes live. This streamlined process ensures that our websites are produced with the highest quality. This is a great example of where testing a website is very effective.