DEV Community

Cover image for 13 Steps for building a website
Dhanush N
Dhanush N

Posted on

13 Steps for building a website

It is estimated in the Internet that there are about 1.18 billion websites in the world out of which 17% of them are active and 83% are inactive. The rise of technical trends has gathered in a way that in order to gain attraction of a product or service a website seems to be essential to gain traction and also to spread the news.

Build website

It is seen that an average person visits about 5 to 23 websites in a day. Every minute 400 to 500 websites are been created and the main fact of creating website is to either sell the product, offer any service or create traction on the content being put. So in order to achieve these there are some things to be followed when an individual or an organization develops a website.

1) Branding

Whenever we think of any social media site like twitter, instagram or any electronic items like laptop or mobiles we usually think of the logos, the color of it, taglines etc. This is what branding is all about. Branding helps you to create credibility and also to attain a long term attraction of your site to the potential customers who visit your site.

Branding

2) Choose Design Thinking Approach Before Implementation

Before beginning with a website it is better to create an observation on what the customer needs, what the website should contain, what is the objective of the design outcome. Collaborate, question, explore and experiment the implementation of the site you are going to build. Create a mock up or prototype discuss with potential users, refactor it and then start implementing which leads in the process of continuous improvement.

Design Thinking

3) Responsive Web design

Let it be shopping, socializing or googling any personal needs, viewing websites on mobile devices seems to be growing more. When we usually develop websites it would look good for desktop systems but sometimes we miss to look into the responsive part, if we start focusing on it from the very beginning then a lot of development time & to display on different devices would be handy as per the modern needs.

4) Cross Browser Compatibility

Cross browser usually deals with the ability to develop website components in order to deal with the different browsers. Some of the popular browsers used are Google Chrome, Apple's Safari, Microsoft Edge, Firefox, Brave etc. The ability of our website to function without any glitches or misalignment across various browsers helps in better retention rate.

The website caniuse helps to know about the browser support for modern web technologies

5) Competitors study

It involves identifying and evaluating competitors strength and weakness. Always the same site duplicated or look alike will not impact the users in the major run. Explore on the look alike sites offered by your competitors, analyse on the pros or cons, think what can be done better to make your site reach the potential customers. In this way you can showcase and market things in better ways and gain more traction to your site

6) Navigation handling

If a website has very well navigation it will make the user to search the site longer. Try to use minimal links and always when a particular action is completed in a site always suggest few follow up options to complete their browsing experience. It is also said that the navigation present should always be present in the same location of the site and the order of navigation followed is also essential. This will help in maximum engagement rates and better conversion.

7) Using different fonts

Selecting the desirable font for your website can significantly make a huge difference. It is said that it is not better to use more than 3 fonts in our websites. Try to keep things simple. Unify the fonts with the colors and styles used.

8) Multilingual website

If you can also alter your website to implement multilingual SEO to rank your site in the beginning & also detect visitors language and modify the website language accordingly it will make you more user friendly and also help you to connect with new audience.

9) Tech stack

The tech stack used primarily consists of front end, back end and server setup which the users use to interact with a website. It is usually dealt with the size and complexity of the project. When choosing to build a large scalable product the engineering team is the must to explore the various frameworks and languages used for your site. While deciding the tech stack we need to look into the sites functions, performance, load requirements, timeline, ecosystem of the techstack etc.

10) Quick time for loading

It is seen that 40% of the consumers will not wait more than 3 seconds if your site is not loading. There are many tools available online to check the website loading speed. There are many ways to improve the loading time like improving server response time, optimizing the images used, leverage browser catching etc. However the optimization usually differs based on the tech stack being used and also if this concern is handled from the beginning of the development of the website, especially on complex functions and dashboard data displayed over various databases it would help a lot in the longer path of improvisation of the site.

11) Relevant Images

There are various websites like Unsplash, Flickr etc that will help you use copyright free images. But it is also necessary not to load your site with a tons of images. Always choose high quality images that are relevant to your brand. Quality counts over quality. Always go with a principle of "less is more". People visiting your website shouldn't be confused or have a negative reaction on the content put. A significant blend of the images, the color being used and placing content over images helps to elevate your brand.

12) Security

To actually safeguard a website there are various things to be followed right from setting up password policy, encryption of api, backing up the website data, scanning for any spam content or hover links attached, server level certificates etc. Various security tools and security experts guidance is needed to build a secure website. Some website services platform by default provides the tools and help that you need to secure your website online.

13) Maintenance

On a static site with no much content evolved there wont be much maintenance other than hosting it on overtime basis. But for a website which involves rapid change in development the maintenance should be tackled. It evolves to make sure all the pages in the website are loaded without any errors, check for broken links etc. To handle these if websites are build with TDD (Test Driven Development) or Automation Testing it can leverage your maintenance.

Website Surfing

These are the steps to be followed to build sites and also you need to remember that practice and perseverance also will help you to build better websites. You will get better the more you practice. Keep learning and keep building better websites.

If you have any inputs, suggestions, feedback or any website for inspiration feel free to drop below.

Thanks for reading & lets connect via Twitter / Instagram

Buy Me A Coffee

Top comments (11)

Collapse
 
mrpaulishaili profile image
Paul C. Ishaili

So Lovely, man!

Collapse
 
dhanushnehru profile image
Dhanush N

Thank you ๐Ÿ™‚

Collapse
 
mrpaulishaili profile image
Paul C. Ishaili

I do have a draft article on: Content Marketing for Web Developer', aftter begining the series: Personal Branding.

Collapse
 
sheriffderek profile image
sheriffderek

So, when designing/building a website - the first thing to do is branding, and then the second thing to do is thinking?

Collapse
 
dhanushnehru profile image
Dhanush N

Not in any particular order

Collapse
 
tmchuynh profile image
Tina Huynh

Wow...this was incredibly insightful! I was not aware of the statistics regarding the creation and existing websites.
I absolutely love learning from everyone's posts on here. Thanks for sharing!

Collapse
 
dhanushnehru profile image
Dhanush N

Glad you liked it ๐Ÿ™‚

Collapse
 
vulcanwm profile image
Medea

Hey this is great! I will use this for future reference!

Collapse
 
dhanushnehru profile image
Dhanush N

Happy you liked it ๐Ÿ™‚๐Ÿ™

Collapse
 
marcomoscatelli profile image
Marco Moscatelli

Great article, Is very well written!

Collapse
 
dhanushnehru profile image
Dhanush N

Thank you