Web pages aren’t made of paper, you don’t have control over:

• how your web page is displayed
• whether the browser can display images at all
• whether scripts are executed
• what the browser settings are.

Many web designers make the mistake of making their web pages look good alone. But the good looks are not everything, especially in the development of contemporary websites.

In this artice, I’ll cover the the structure and anatomy, as well as the 4 basic pillars of a website. You should be familiar with these concepts, because they say a lot about the quality of a good website

The layers

An important aspect is a (preferably) consistent separation of structure, design and functionality. The separation of content and design means that websites have layers.

Structure

• The core, the innermost layer of a web page, is the content, the structure, the text.
• This core is made of HTML, is flexible and adapts to circumstances.
• See the basic html structure of a website in this article

Design

• Around this core there is a design layer with CSS, which gives the web pages the desired styling for screen, printer and possibly other devices.

Functionality

• In another, optional layer, the author can control the behavior of the web page with JavaScript, for example, to make it easier to use.

The anatomy

The anatomy of a modern website typically includes the following components. Additionally I listed some points that a web designer should care about when working on each element.

Header

• This is the top section of the website and usually contains the logo, navigation menu, and contact information.
  • Make sure the logo is prominent and easily recognizable
  • Navigation menu should be intuitive and easy to use
  • Contact information should be clearly visible and easily accessible
  • Consider using a sticky header that stays fixed to the top of the screen as the user scrolls down the page

Body

• This is where the main content of the website is located, such as text, images, and videos.
  • Use clear and concise language to convey the main message of the website
  • Use high-quality images and videos that are relevant to the content
  • Use headings and subheadings to break up the content and make it easier to read
  • Consider using a grid-based layout to create a sense of balance and consistency

Sidebar

• This is an optional area often used for additional navigation, calls to action, or more content.
  • Use the sidebar sparingly and only include elements that are relevant to the content
  • Consider using a collapsible sidebar that expands when the user clicks on it
  • Use clear headings and subheadings to organize the content in the sidebar

Footer

• This is the bottom section of the website and typically includes contact information, copyright notice, and links to privacy policy and terms of use.
  • Include important links such as contact information, privacy policy, and terms of use
  • Consider including a sitemap in the footer that provides an overview of the website’s content
  • Use a consistent design that matches the rest of the website

Navigation

• A modern website usually has a clear and intuitive navigation system that helps users find what they’re looking for quickly and easily.
  • Use clear and concise labels for navigation links
  • Group related links together and consider using drop-down menus for sublinks
  • Make sure the navigation menu is easily accessible from any page on the website

CTA a.k.a. “Call to action”

• A call to action is a button or link that encourages users to take a specific action, such as signing up for a newsletter or making a purchase.
  • Use a clear and concise call to action that encourages users to take a specific action
  • Make sure the call to action is prominently displayed and easily accessible
  • Use contrasting colors and design elements to make the call to action stand out

Responsive design

• A modern website is designed to be responsive, meaning it adjusts to different screen sizes and devices, such as smartphones and tablets.
  • Use a responsive design that adjusts to different screen sizes and devices
  • Make sure the website is optimized for mobile devices with smaller screens
  • Test the website on different devices to ensure it looks and functions properly

Sitespeed

• A modern website should have a fast loading speed to ensure a positive user experience and good search engine ranking.
  • Optimize the website’s images and videos to minimize loading times
  • Use a content delivery network (CDN) to deliver the website’s content more quickly
  • Minimize the use of unnecessary design elements that can slow down the website’s loading speed

Overall, the anatomy of modern websites is designed to provide a user-friendly experience that is optimized for both users and search engines.

The 4 basic pillars

When developing a new website, it is important to consider about ccessibility, usability, design, and search engine optimization (SEO). These concepts are interrelated and can have a significant impact on the success of a website. In the following are some key points to keep in mind.

Accessibility

• Accessibility refers to the design of websites, tools, and technologies that are usable by individuals with disabilities.
• It is important to ensure that your website is accessible to everyone, regardless of their abilities or disabilities.
• This includes adding alt text to images, using descriptive headings, and providing captions for videos.

Usability

• Usability refers to the ease with which users can interact with a website.
• It is important to design websites that are intuitive and easy to navigate, with clear and concise content and a consistent design.
• This includes organizing content logically, ensuring that links and buttons are easy to find and navigate, and testing the website with real users to identify any usability issues.

Design

• Design refers to the visual and aesthetic elements of a website.
• It is important to design websites that are visually appealing and engaging, with a clear and consistent design that reflects the brand’s identity.
• This includes choosing colors and fonts that are easy to read, using high-quality images and videos, and creating a layout that is visually balanced and easy to follow.

SEO a.k.a. “Search engine optimization”

• SEO refers to the process of improving a website’s visibility in search engine results pages.
• It is important to design websites that are optimized for search engines, with keyword-rich content, meta descriptions, and title tags.
• This includes creating content that is relevant and useful to the target audience, using descriptive URLs, and ensuring that the website loads quickly.

Overall, considering these four concepts when developing a new website can help ensure that the website is accessible, user-friendly, visually appealing, and optimized for search engines. This, in turn, can help attract and retain users and improve the overall success of the website.