How To: Avoid Front End-Development Mistakes

How To: Avoid Front End-Development Mistakes

Business 2 Community has posted a great article about the mistakes a front-end web development might make and how to avoid them. We’ve recapped their points and added a few of our own.

A front-end designer / developer is responsible for making your website look and feel great. Anything you see when you visit a website is thanks to your front-end designer. They layout different items and code them to make them look – and work – correct.

First and foremost front-end development is about understanding users and what they do and use that to build functioning websites that work well and look good. With that there are some obstacles, one being the ever changing nature of the web. Below are some mistakes that Business 2 Community mentioned in their article plus a few of our own!

1. The Use of Tables vs. Divs

This is a classic example of the ever changing web. Back in the day tables were the “go to” when designing layout. These days tables can cause quite the commotion. Even though they were once used for layout purposes, they can cause flaws in design as well as shake up elements in different browsers – not to mention the code is very messy to work with.

Divs are preferred now as, when combined with the correct CSS, they are completely customizable. Tables are very helpful when displaying charts and information, but when it comes to laying out your website, divs are the way to go.

2. Using Old HTML Elements

Again, the web is constantly changing. Keeping up with the latest code and advancements is essential when designing a website. HTML5 is the latest version in the HTML language. It has new tags to make it easier to code and can make your website more secure.

It’s important to keep up with the latest code advancements. Older HTML codes are being deprecated and may cause issues in different browsers. Keeping the code up to date will help keep your users happy when they visit your website.

3. Cross Browser Testing

This is a must when designing websites. It is important to realize that many of your users will be using different different browsers (and devices) to view your site. Many elements that work in Chrome may not work in Internet Explorer. One of our favorite resources is IE NetRenderer for Internet Explorer testing. BrowserStack is also an amazing resource. It is important to look at your website in all of these browsers to ensure that your users are all seeing the same thing.

4. Responsive Design

Google is currently mobile-crazed. A little bit ago they released an update that penalized your website if it was not mobile friendly. They are currently working with something called AMP that prioritizes websites that load super fast on mobile devices – this is currently limited to news articles but we expect it to grow shortly.

5. Ignoring Site Speed

Site Speed is an issue we have been working with for a lot of our clients recently. With all the changes Google has been making recently mobile-wise (see AMP), we want to make sure our clients’ websites are ready to change with the times. We believe the quicker the website loads the better it ranks in search engines. It takes a while to recover from a Google update if you’re website isn’t completely compliant so we like to make sure there are no issues when the Google Grump decides to rear its ugly head.

6. Utilizing Old Javascript Libraries

It is always important to make sure you are using up to date code. Using outdated javascript libraries can lead you down a very dark path (this is also true of WordPress plugins – which we will discuess later on). Old javascript libraries can cause major malfunctions on your website and may even cause security risks. It’s important to keep your website up to date so there are no errors or security issues.

7. Setting and Forgetting WordPress

WordPress is updated. A lot. It is very important to perform regular maintenance on your website. As mentioned above, updating code is very important – and the same goes for WordPress and its plugins. Outdated WordPress versions and plugins can cause major problems, including security issues. We use Wordfence on all of our sites. In an article, Wordfence says that abandoned plugins likely have a vunerability so it is important to find plugins that are up to date and to update them frequently.

8. Not Choosing the Right Typography

Getting back into the design of a website, typography is a very important factor. Not only do you want to make sure that your website looks nice but you want to make sure people are able to read everything easily. The key is finding a balance between finding the typography that looks nice and is user friendly. Stay away from script style fonts and try to find a font that everyone has access to.

9. Focusing on the Small

Websites are huge. When designing one, you have to make sure you look at the big picture and not get caught up in a little design aspect. As long as the site functions correctly when finished you will always have time to go back and make the small changes. Chances are, if you’re designing a site for a client, you will be make a lot of changes when the core is finished. Built that basic core 100% and then you can sweat the small stuff.

10. Ignoring (or Foregoing) Feedback

In order to improve you must listen to the feedback of others. Take all the free advice you can get! The people who give you feedback may see something you have missed. Take into consideration everything your audience says, they are the ones using the site in the end.