If you were tasked with explaining what a website is to an alien who had never seen the internet before, you’d probably have as much trouble doing so as you would explaining the color red or the way that water tastes. It’s something that just about everyone understands, but it’s tough to put it into words.
But, before we can jump into explaining the web design process, it’s critical to know all the components and how they interact with each other, just as you have to understand cells before you can appreciate tissues, organs, organ systems, and eventually, the whole body.
Searching the term online, you get a dictionary definition of “a connected group of pages on the World Wide Web regarded as a single entity, usually maintained by one person or organization and devoted to a single topic or several closely related topics.”
In reality, it’s a little more complicated than that.
Let’s step back into the biology metaphor. It’s better to think of websites as an entire human body. It’s complicated, interconnected, and has to have all parts in tip-top shape to function the way it’s supposed to.
Like our bodies, the website itself acts as a hub for all inner workings, housing each sophisticated process while showcasing a more pleasing outward appearance that your visitors stop by to see.
Website Anatomy 101
Tons of bits and bobbles go into a website, both seen and unseen by your visitors.
Like the brain, a web server works as the holding place for all of the data, files, code, and images that make up a website. Its main job is communicating with the website, directing how the information stored on the server is used and presented. When a visitor visits your website, the page communicates with the server which files are needed (like all the images, text, and code for your homepage). Then it’s the server’s job to process and fulfill that request.
The web address is like an ID or driver’s license. It tells visitors and search engines where your website lives and the basic idea of what we can expect when we see it.
There are five parts of a web address, and each one serves a distinct purpose:
- The scheme lets servers know which protocol to use. The most commonly used protocol is “HTTPS://,” which stands for Hypertext Transfer Protocol Secure. It’s used for encrypting webpage information to keep things like passwords or financial data secure. Other standard protocols are “mailto://,” which you’ve seen if you hyperlink someone’s email address, and “FTP://” for transferring files between client and server on the same network.
- Next is the subdomain. It tells which main directory page of the website you are viewing, like “home,” “blog,” or “shop.”
- The second-level domain is the name of the website.
- Next comes the top-level domain, which serves as a marker of the type of website the visitor is on– “.com” for commercial sites, “.edu” for educational institutions, “.org” for organizations, “.net” for internet, email, and network service providers.
- Finally is the subdirectory. It directs to a particular section of a page. For a website with a blog, that might look like an archive of a specific tagged topic, such as “digital marketing” or “web design.”
Your website will have an overall structure, much like a skeletal system. It supports the movement through the site, creating a smooth process in traveling from homepage to subpage to specific sections of that subpage. Website owners utilize various navigation interfaces, like hamburger menus or sidebars, to create a site structure map for visitors to use.
Each page on your site will have a layout of how the content and graphics are arranged. There are best practices for arrangements, which help visitors see the critical information quickly, without feeling overwhelmed by images, text, and other visual elements.
Any text on your site is considered the content. Website text has to be optimized and stylized to meet specific criteria, called SEO, that allows Google and other search engines to determine your ranking on a search results page, as well as whether browsers can trust your site.
Like the cosmetics and clothes your body wears, web design includes the color palettes, decorative elements, logos, typography, graphics, and the overall layout that gives your website the “feel” you’re looking for. Design is the piece that your visitors base their first impressions on, and it can be defining factor in winning over a future customer.
Content Management System
We’ll take a deep dive into the CMS next week, but for now, know that it’s platforms like WordPress, Wix, and SquareSpace that allow you to edit a site without completely rewriting the code.
Keep Your Website Healthy and Happy
With so many elements making up a website, it’s easy to miss something. Codes break, content management systems need updates, and public opinion on design changes. That’s why many website owners outsource the work to web development and design agencies like NATIV3. The expert touch gives your site more longevity and creates an evergreen home base for your audience to access your company, campaign, or cause.