Image Ribon Useful Advice & Tips

The Do’s & Don’ts of Web Development

Full Width Image

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…

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

 

Old But Cool

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!!

 

Table Drag
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 with 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

 

Explosion

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…

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.

 


 

Jim
4th August 2017 | By Jim | in Development, Web Development
Jim’s background of web development both at University and in the workplace have allowed him to get stuck in quickly and efficiently here at WDL.

Jim is driven by his unique passion for developing websites and has an ever growing eagerness to learn and improve his skills.
4th August 2017
By Jim
in
Development, Web Development
Jim’s background of web development both at University and in the workplace have allowed him to get stuck in quickly and efficiently here at WDL.

Jim is driven by his unique passion for developing websites and has an ever growing eagerness to learn and improve his skills.

Book a Free Consultation

Looking to gain more customers through your website?

calendar

Book a 20 minute call with one of our expert web consultants.
This is our chance to understand your business, your needs and your goals. We’re currently taking calls for 25th October onwards. If you’d like to book your consultation, fill out the form below and someone will be in touch to arrange a time.

  • This field is for validation purposes and should be left unchanged.