1

Before

All new websites should follow the latest practices. This means taking into account mobile devices, desktops and laptops alike. A post by Retire@21 titled Website Ideas is a great read before starting on this guide. It highlights factors such as what benefit your website offers, is there competition in your field, and lots more.

Computer

Hosting

The first thing to consider before even thinging about things like layout and design, is what you're going to put your website on; and where. The speed of the server you're hosted on and it's location will have the single greatest impact on your users.

Here are the top website hosts we've found in order of how good they are, both require reasonable understanding of Linux:

1. Linode

2. Digital Ocean

When choosing the location for your server; always choose the location closest to your users.

If you'd like to know where an existing website is hosted, hostadvice has a useful tool that displays what company any website is hosted with.

Name Usage

When starting a website, something a lot of people don't think of is whether the name they choose is currently in use. Not only for the website itself, but also for things like social media.

So before choosing a name for your website, it's a good idea to see if the name is already a lot; a great tool for this is NameChk. This tool allows you to check 150+ websites ranging from things like Facebook to deviantART.

Fruit
Fruit

Layout

Deciding your layout is a crucial step before you start working on a website, or your layout will be disorganised and difficult to correct.

Your choices for layout are Adaptive, Responsive, Static and Liquid. Liquidapsive is a great resource showing exactly what the differences are between each of these through an easy to use sample website. Out of the options, the most widely used is responsive; Grid is a great beginners guide to responsive design.

As well as the standard layouts you get on websites, explained above, there are lots of ways to extend them to be much more creative and interactive.

A popular option for this is infinite scrolling websites, meaning that you scroll down the page either to load new content or as part of the layout itself. A useful plugin for this is Superscrollorama, and Parallax Done Right is a recommended read to make sure you do things right!

Responsive Design

Frameworks

Once you decide on what layout you want, a good next step is deciding whether to code everything yourself or to use a framework. Although coding things yourself allows you full control and originality, it also takes much more time.

A framework can be used as a stepping stone so to speak; so you can make a site using a framwork 100%, but then on your next site or on updating old ones you can then code things completely or partly yourself.

Here are a few of the best options for frameworks should you want to use one:

Bootstrap

Foundation

Bootflat

Framework7

Frameworks
App Platforms

Technologies

Now that you're ready to start, you need to decide what language you're going to use. A popular language like PHP is often a good bet, but in certain cases another languages like Java or Python may be more appropriate. What Code Should You Learn? is a great infographic showing the pros and cons of the most popular languages.

You may also want to consider using an app platform like Meteor. If you're writing an application rather than a website (a website with a single purpose) then an app platform may speed up development significantly.

Design Guidelines

Following the latest design practices is very important if you want to write good code that can be re-used or even read in the future.

Here are several links explaining the current best practice, all are recommended reads:

Code Guide

Getting The Details Right

Align and Guide Your Project

Outdated UX Patterns and Alternatives

CSS and Sass Styleguide

Why and How to avoid Hamburger Menus

Long Shadow Design - A New Trend?

Here are some free online courses to learn more about user experience design:

User Experience for the Web (WebUX)

User Experience Design

UX Design for Mobile Developers

Design Guidelines
Think Of Everything

Following Online Laws

When making a website, it's easy to get carried away with development and accidentally break online laws. In 2016 a European law was introduced requiring all websites to inform users if they use cookies of any type, so if you use cookies even through 3rd parties like Google Analytics you need to inform your users!

Google made a great resource called Cookie Choices, which allows you to easily display a consent message allowing users to agree on your usage of cookies.

Displaying Icons

There are several ways to display things like icons. Some of the newer approaches such as Iconic allow you to display icons in vector code form (SVG), so they scale to any screen-size and elements of them can be added or removed easily to display different states (e.g. mic or or off).

Another advantage to SVG icons is that they can be animated. Tympanus has a good example of this in action. Here are some animated Climacons that might also come in handy.

As the icons are loaded completely differently using methods like the above compared to standard png's, it's important to consider which approach you want to use before starting your website.

Cards
HTML5

HTML5 Support

HTML5 has lots of great features that make things like form validation, geolocation and media elements much easier to work with. The only issue is that older browsers don't support it.

Webshim is a polyfill library that allows you to use all HTML5 features across all browsers, even those that don't natively support it! So definitely worth considering when starting a new website.

Inspiration

Sometimes it's difficult to come up with a good design when starting a new website, so here are a few resources to help you along:

GraphicBurger

Dribbble

CodePen

CodeCanyon

PixelKit

Inspired Ideas

Inspiration

Below are a few great websites which are also useful for reference:

2

During

All of the below resources are free for commercial use:

Readable Content

When adding text content to a website, it's imporant to make sure that everything is easy to read both in terms of font and size; but more importantly in terms of its content.

Hemmingway is a useful tool that allows you to check content in real time against recommended best practices.

Fruit
3

After

So here are a few useful tools and processes that ensure your website is ready for your users.

World Location

DNS

One of the first things you need to setup when your website goes live is DNS. This points your users towards the server your website is running on.

When setting this up, steps are often missed which result in either your website not working at all or cause issues later on. intoDNS is a tool that checks all DNS related information for your website and tells you if anything is missing.

Empty States

On a more practical note, something important to consider is your websites empty states. This refers to situations such as when a user has just registered and has no content on their profile/timeline. e.g. your user is staring at a blank screen.

This provides a chance for you to fill in this space with alternative content, something like a graphic or a 'how to' might be a good idea. The TNW Blog has a great article on this which we recommend reading.

First Time UX has lots of examples of good and bad empty states for a variety of websites and apps. Empty States also has some great examples.

Monitor
Price Tag

Conditional Ads

Ads are a common source of revenue on websites, but can be tricky to implement. Using something like Google Ads, you're able to display content appropriate to individual users; but generally these come in specific sizes.

Lazy Ads is a tool that allows you to load ads based on criteria such as the dimentions of the ad container or media queries. This allows you to use static ads in a responsive website easily.

Email Design

A notoriously difficult aspect of web development is designing HTML emails that work in any email client. Tuts + have a great article showing you how to create a responsive HTML email that will work in any email client.

A useful resource alongside this guide is Really Good Emails, which gives you loads of great email designs sorted by common categories. So you can get a good idea of what's possible with the guide above!

A more complex option is to use the Grunt Email Design Workflow. This is essentially an all-in-one designing/creating/testing system for HTML emails, although recommended for more advanced developers.

Newspaper
4

Optimising

Simply put, optimising a website means decreasing the amount of time it takes to load for your users as much as possible. We're going to explore several ways of doing this.

By using one of the hosts we recommended at the start of this guide, you can eliminate one of the biggest load-time issues a web developer can have; host speed and latency issues!

A lot of the methods we'll mention below are based on Treehouse's article on speeding up page load times.

Strawberry

Image Size

Relative to things like text, images are hundreds of times larger. So it's very important to keep them as small as possible.

We recommend always using PNG's, as generally they're smaller than the equivalent JPEG (or other image types).

TinyPNG is a tool that allows you to compress PNG's to less than 70% of their original size wihout compromising quality or opacity. It does this by grouping similar colours and removing unnecessary metadata.

Links

Before clicking a link on your website to navigate to another page, users normally hover on that link for 200-300ms. InstantClick is a useful tool that takes advantage of this delay.

It does this by preloading the page using pjax when you initially hover your mouse on the link, so when you click it you have a 300ms headstart. On a decent internet connection this essentially loads all pages instantly!

Links
Links

Slow Connections

Something that can be difficult to test for websites is its performance on a very poor connection. Factors like bandwidth, latency and packet loss all need to be taken into account.

Slowy is an application that allows you to simulate a poor connection very accurately, so things like load times and AJAX can be tested thoroughly.

Website Analytics

The last step in optimising your website is setting up a system to monitor it in real-time.

Google Analytics is the most widely used tool for this. It provides you detailed statistics on all aspects of your website in real time. So you can see the number of visitors you're getting, where they're from, which pages they're viewing and even which parts of those pages they're looking at!

Using all of these statistics you're then able to work out which aspects of your website your users are viewing, so you can work on improving parts that are less popular.

Graph

By following all of these steps, you're on track to make a great modern website.