Building a site nowadays is so much more than create a simple web page. The needs are limitless, making us rely on different tools that can help us validate the steps we take and the project’s quality. When you have many projects needing your attention and time, you need these tools to help you deliver an outstanding work in the less amount of time possible.

The main purpose of this article is not only name some essential features you need to know when creating a website, but also share some of that tools.

Essential Features

Accessibility

This feature is considered the basis of a good project but sometimes gets neglected.

The World Wide Web is nothing more than a huge data base that has to be accessible to all, even users who need Assistive technology to access digital content. When we make it right, we increase the project’s quality and relevance, and the platform’s reach.

To evaluate accessibility:

• Check the markup (HTML, XHTML) of the web documents:

http://validator.w3.org

• Check links and anchors in web pages or full web sites: 

http://validator.w3.org/checklink

 

Design

As noted here by Michael Nunes: “A good design is one that works”.

Once upon a time people used only their desktops to access the internet. Now we can’t seem to live without our mobile phones and tablets. So it’s important that all websites are responsive, able to adapt to all screen resolutions. A mandatory feature for what is considered a good design.

To test responsive web design:

• Online Media queries tester: http://beta.screenqueri.es/
• For test on Android devices in chrome app: https://goo.gl/2qfWhD
• For test on iOS devices in Safari app: https://developer.apple.com/safari/tools/

Performance

Today, a website’s performance is absolutely essential.

We don’t like to wait. We don’t want to wait. We’re not going to wait. That’s how users perceive their World Wide Web experience nowadays. So websites need to load faster, otherwise windows are going to be shut.

And that’s not only important for users, but also for search engines, as Google points out.

Advices to improve a website performance:

Optimize the images

• Remove metadata with an app like codeKit, reducing the image’s weight;
• Use the image in the right size for the purpose;
• Adapt the right type of image to the goal and always optimize based on quality vs. quantity.

Reduce the most HTTP requests you can:

• Combine CSS and JS file whenever possible;
• Make it mandatory to use sprite images.

Whenever is possible choose texts over images to decrease the number of HTTP requests.

Cluster and minify Scripts and CSS to remove unnecessary information. By getting them lighter you’ll be optimizing them and reducing the number of HTTP requests as well.

Use a cache system whenever possible to cut considerably the amount of requests made to the server, when someone’s accessing the website.

Validate the website’s quality response in terms of performance:

• Get a report about the quality of your website’s content: https://developers.google.com/speed/pagespeed/
• Optimize images for a best result: https://imageoptim.com/mac
• Group and minify JS/CSS files and optimize images: http://incident57.com/codekit/
• Task Runners: https://www.npmjs.com/package/gulp and http://gruntjs.com/

SEO

The right SEO helps the website getting more visibility on search engines which will increase the number of accesses. It’s important to verify SEO and get possible problems corrected before the website is launched.

With a tool like VARVY you can analyze the entire project and determine its quality. The tool will give you a report with all flaws pointing how to correct them. It evaluates all points herein and provides a list of best practices to improve a site’s quality.

There’s a Chrome extension to help validate all this points more quickly: https://chrome.google.com/webstore/detail/web-developer-checklist/iahamcpedabephpcgkeikbclmaljebjp.

The following website is also useful to use as a check list: http://webdevchecklist.com/

To build a great website there’s so much to pay attention to but, once you get your checklist organized, it will be easier for you to achieve optimal results. Pay attention to all the details to deliver a website that fulfills the briefing and exceed all expectations.

Thank you for reading

We really do want to hear from you! Get in touch

Monday is a full service digital and interactive agency based in Lisbon. Weʼre a team of designers, builders & thinkers who craft digital experiences. Clients include: Snickers, Red Bull, Twix, Philips, M&M’s