6 Do’s and Don'ts: Web Development

Whether you are developing a simple brochure website, or something more complex enabling further user-interaction, here are my do’s and don’ts that I wish I was told years ago.

Don’t: begin coding straight away

So you want to make a website? The first thing you should be nailing is your wireframe.

By this I don’t mean having a blueprint that’s down to the millimetre — simply grab a wad of paper, your favourite pencil and spend at least an hour sketching your key pages.

Do: your research!

Honestly, this is so important.

Spend a morning ideally, when you have most energy, watching Youtube clips and endlessly bombarding Google with your most pressing questions. Collate a list of web tools; these will save your life! Here are my favourites:



Do: Focus on structure first

Going back, this would have saved me hours in aimlessly changing CSS styles.

I still find it so easy to fall into the trap of immediately styling each piece of HTML in a way that meets my branding guideline, rather than affirming its positioning and size.

It will always be harder to visualise the completion of a website until you have the structure down – it’s all about being pragmatic. Changing colours and adding/removing borders should be the last styling lines you finalise in your CSS.

Your next priority should be content. This can be often the hardest and most time consuming element, depending on your aims.

If you’re hoping to rank highly in search engines then you should be investing time in content-havens such as your ‘about us’ page. Content is king when it comes to SEO, but make sure you’re using plenty of keywords. Even linking to other websites that get a lot of traffic where appropriate can greatly help, as Google will begin to re-index your site more frequently if it knows you are linking to already well established highly-engaging sites.

Don’t: worry about the little things

This one is related to not focusing on design, except I am mainly referring to file structure.

Don’t get caught up on deciding where you place styling or what you name your files.

I often begin coding by completing my HTML structure and then going straight to CSS, but I do it inline first. There is no point in the short term worrying about what to call a CSS file or where it should sit in the file structure. If you want to get going and get somewhere fast, then you need to think lean.

It’s important to only develop where you need in order to produce a minimally-viable design. Perhaps your with a client and they are unsure of what they really want, in this scenario thinking and coding pragmatically in the short term will be your friend.

Do: know your audience

This will have already influenced your wireframes/sketches, if you did indeed take the time out.

Knowing your audience can either simplify or complicate your website. If your audience is quite specific then you will need to things about things such as screen resolution.

An awful lot of time could be wasted if you design and develop a site through to completion that’s only best when visited from a 12 inch laptop with great resolution.

The vast majority of visitors in 2016 will be initially finding you via mobile phone search engines like Google, and the last thing they need to be greeted with is too much content, having to zoom in and scroll around just to find your opening hours.

When this is you, and for most people it will be, make use of media queries. You can alter the styling of your objects and the screen resolution changes. I would recommend bookmarking this GitHub repository:

Do: think about caching

There is nothing more painful when your client can’t see the latest version of your site because their browser has cached old images and styling files.

When we visit websites, our browsers normally cache required file resources such as images and stores them locally, so when you refresh it loads much faster. This behaviour is really important for sites like Flickr which will contain very large image files.

If you want to get around this, you can either force browsers to fully-download a website every time it’s visited.