A Comprehensive Guide on Building a Modern Website
If you are someone who is brainstorming about building a website for your business, brand, or personal project, this article is for you. After working in the web design and development field for almost ten years and having hands-on experience with sites with different purposes and scales, I wanted to put together a comprehensive guide for those who are venturing into this ever-changing space. There is a lot more to know before the first line of code or content is written.
Measure seven times – cut once
Assess the following even before purchasing that domain name that you think will become viral in the market or simply establish a presence. Some of the following are not specific to website development, they can be applied to similar technologies. Get answers to these 3 questions.
A. What is the goal of the website?
A website or any project without a goal will not help the customer or your organization. Simplify your goal to a high level. Some example goals:
- Reach more audiences with your content
- Increase revenue on goods or services
- Establish a presence
- Get more customers to your shop
Every step should be towards reaching the goal. It is the primary driver for the entire lifecycle of the site. You can have multiple goals on a single website, but there has to be a primary.
B. What are the requirements?
Now that you have nailed down the goal(s), it is time to plan the requirements for the project. This includes,
B.1. Technology
There are several technologies to choose from for your project. It can be as simple as a combination of HTML/CSS/JS or a framework/CMS that includes a full suite of tools to build. When deciding on technology think about the following:
- Accessibility
- Intuitiveness
- Responsiveness
- Scalability
- Productivity
- Security
- Extensibility
- Availability
- Measurability
B.1.1 Accessibility
A website is considered accessible when it can serve every user equally including users with auditory, cognitive, and visual disabilities. An accessible website performs well with small screen devices, slow internet connection, bright sunlight on screen, etc., Refer to W3.org for more details about accessibility. It is one of the important technology requirements to consider when building a site for content publishing for readers such as news, blogs, and video publishing platforms.
Imagine trying to read content on an unresponsive website on a mobile phone. Imagine reading text imprinted on a complex background image. Imagine trying to click a URL hidden in the text. The quicker your user gets what they are looking for, the happier they will be. These are some of the cases that cause great inconvenience to your audience. Avoid them at all costs.
B.1.2 Intuitiveness
A website is considered intuitive when users do not need to spend significant time trying to find what they are looking for. It can get overwhelming to the users when the site is disorganized. To avoid this situation,
- Understand various UI components
- Organize your content well with the correct UI components
- Place your CTA (Call to Actions) in relevant locations
- Simplify top-level navigation
- Provide breadcrumbs for deeper pages
- Provide search filters
These are small decisions, but collectively they can make a huge impact on the overall user experience. 'Don't make me think' is a helpful book for knowing more about interesting human-computer interactions.
B.1.3 Responsiveness
A website is considered responsive when the content fits well on all screen sizes. It can be a smartphone or a large monitor, your website should display content without truncating information on smaller screens or stretching on larger screens. Responsiveness has taken a high priority due to the shift in the usage of devices. More and more users tend to use smartphones than desktops to access a website. Build according to your user base. Read more about responsiveness
Responsiveness can be achieved by making all components such as Navigation, Content Boxes, Sidebars, Tables, etc., fit perfectly at all screen sizes.
B.1.4 Scalability
A website is considered scalable when it has the ability to handle a large number of users concurrently. Select a technology that has the potential to scale according to the demand of the users. You can get started small initially, but if the technology cannot be scaled to grow along with your growing business needs, it is a huge downside.
There are many modern technologies such as Serverless app Headless CMS Kubernetes that can facilitate scaling your site based on demand. Make sure to talk to your developers about this technology requirement. Scalability may not apply to all business needs, but if it applies to your goal, make sure to explore this requirement.
B.1.5 Productivity
A website is considered productive when the maintenance is streamlined. If day-to-day duties such as updating, organizing, and improving the site become a hassle, it can cost you time and money. Quick changes should not have to go through a technology pipeline. Content managers should have the freedom and flexibility to produce content, submit it for review and get changes approved on the fly. This requirement can also vary based on team sizes. If you have a small team, automate as much as you can to eliminate unnecessary manual review processes to deliver fresh content while still maintaining proper protocols in place.
B.1.6 Security
A website is considered secured when the information stored and used during transactions cannot be tampered with or stolen. When your website is placed on the internet the chances of threats will begin to increase along with its reputation. The higher the site traffic the higher the threats you may receive. The minimum criteria to make sure that the website is secured is when you can assure that the privacy, confidentiality, and integrity of the data are not breached. Assess the vulnerabilities of the technology that you are choosing. Evaluate the complete technology stack such as Server OS, Storage, Network rules, Firewall rules, etc, and Web server configurations. Anyone unaddressed vulnerability can potentially cause outages which can hurt revenue. Implement measures to identify and prevent threats before they reach the site.
B.1.7 Extensibility
A website is considered extensible when the data can be exchanged with third-party service providers. Almost all categories of websites provide one way or another to integrate with third-party services such as authentication using social media accounts, and consuming REST APIs to display social feeds. Extensibility is an important technology recommendation to consider if your users would like to choose services from other websites via your website. The ability to extend your website using REST API endpoints will make your website future-proof. This will also make sure that your website does not become a data silo over time and become complex to retrieve data for business reports or other purposes.
B.1.8 Availability
A website is considered available when it can be reached at all times from all means. When your website is a major source of income, you cannot afford to become unavailable for even a short period of time. Imagine the number of transactions Amazon.com could lose if its site is unavailable for a short period of time. Availability directly impacts the experience of the end-user as well as internal business operations. There are many possible ways an outage can occur. A highly available website has redundant architecture. Simply called HA architecture. Implement HA at all technology levels. Some HA recommendations are below Redundant databases (primary, secondary) Load balanced web servers Implementing caching layers Distributed file storage Hosting and Sync with multiple data centers With the above architecture in place, you can achieve 99% uptime of your website even during an outage of one or more services.
B.1.9 Measurability
A website is considered measurable when its metrics can be logged and used for feedback and analysis. Log as many metrics as possible such as load times, response times, page not found errors, redirect loops, form submissions, referral website of the users, etc, and so on. Without logging information, you cannot identify room for improvements using data. Data-driven decisions will steer you towards your goals quicker than your own intuition. Set up Key Performance Indicators (KPI) on certain aspects of your website which are critical for your business as well as the website itself. Deriving timely insights will propel you in the right direction saving you additional costs in marketing and increasing the engagement rate of your users.
B.2. People
A small website is typically completed by a short team of developers and designers. Sometimes developers are not even involved when designers can use pre-built templates in newer cloud platforms for content publishing. However, for a large-scale website such as an e-commerce site, there will be several teams working on specific tasks. Know about the following roles.
- UX/UI Researcher: Someone who focuses on understanding and improving the user's experience with the website that is being developed.
- Frontend Developer: Someone who builds the visual aspects of the website based on the UX/UI recommendations.
- Backend Developer: Someone who builds the necessary architecture to run the dynamics behind the website. This means programming to collect and retrieve data, hosting the website, and building the business logic.
- Full-stack Developer: Someone who can build both the front end and the backend.
- DevOps Engineer: Someone who makes sure that the development and testing process for continuous improvements is streamlined such that those integrations will not cause any downtime to the services.
- Data Analyst: Someone who collects the data generated from the website continuously and provides meaningful insights to the business owners, UX team, and developers for improving the business and the product.
- Content Manager: Works on developing the content for publishing on the website such as news, blogs, product info, etc., Content managers are also responsible for SEO(search engine optimization) for the website which drives search rankings for your website in a search engine. A poorly-developed content will rank low in search results impacting your audience reachability.
- SEM (Search Engine Marketing) Manager: Works on the digital marketing aspects of your website. This includes creating paid advertisements for the website, bidding search rankings, and monitoring various costs, and rates such as CPI(Cost Per Impression), CPC(Cost Per Click), CPL(Cost Per Lead), and Conversion Rate, and CTR(Click Through Rate).
B.3. Processes
Certain processes have to be established to streamline operations, maximize efficiencies and minimize risks. The content publishing process is the most basic one. It requires content managers to get approval to draft, publish or redact content from the website. This is strictly followed in content-based websites such as news and magazines. The DevOps process establishes a continuous integration and continuous development (CI/CD) pipeline for those who are working with the technologies including front and backend. These processes dictate the best and safe practices for collaboration during the development, testing, and deployment of technologies. The data collection and distribution process is required to meet regulatory compliances as well as establish best practices to handle access to sensitive or restricted business insights with business owners and 3rd party resources.
C. What is the ROI(Return on Investment)
To better understand the return on investment, know the underlying costs of a modern website. No business owner would want to spend a big sum of money and expect no returns from a product. These are the basic areas where investments are made heavily. Based on your requirements some may not apply to you. Costs may include but are not limited to:
- UX/UI Research
- Technology Infrastructure
- Designing
- Development
- Digital Marketing
And the following areas may be used to measure returns:
- No. of products sold on-site
- Generated ad revenue
- Generated Subscriptions
- Audience Reach
- Commission on affiliate marketing or referrals
If you have carefully read through this document so far, you are now in a better informed position to be able to assess your own website project. I hope this guide has provided some helpful information that is suited to your business needs.
