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.
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:
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.
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.
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:
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.
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:
Here are some free online courses to learn more about user experience design:
Following Online Laws
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.
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).
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.
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:
While making a website there are lots of different elements you need to combine to produce a complete site. Remembering where you saw a particular font or animation can be difficult, this section can be a useful reference.
All of the below resources are free for commercial use:
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.
Once you finish developing your website and put it live, there are a few things you need to think about. Things like setting up DNS, sending out emails, ensuring that your website loads fast; these are all things that can only really be tested after your website has gone live.
So here are a few useful tools and processes that ensure your website is ready for your users.
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.
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.
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.
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!
The final step in developing a website is optimising it.
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.
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).
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.
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.
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!