Back to blog
Website Design Part 2: Building Blocks of a Website

Website Design Part 2: Building Blocks of a Website

Warning
This article contains language that may be offensive to some readers.


Ok, so before we get to much into the design side, it helps to have a basic understanding of how a website is built.

First you need to understand how a webpage gets to your computer. At a really basic level, when you load a page it goes something like this:

Your Browser goes to the server that hosts the website and says “Yo, I need this page.”

The server goes, “Ya, I have that. One sec, I gotta compile some shit first,” and runs any Server Side code in the file before sending it your browser which renders the Client Side code into a webpage.

The most basic websites are built using HTML and CSS which are both Client Side code.

HTML

HTML provides the structure and basic layout of a site. It tells the browser where everything is and what those elements are.

CSS

CSS provides the style. It tells the browser how everything should look. The colours, widths, heights, everything that makes a site not look like shit, comes from the CSS.

More complex sites will also include a few other things. While there are a lot of options when it come to coding you website, and new ones are being developed all the time, here are some common ones.

JavaScript

JavaScript is also client side code. It is executed either when the page loads or when the user interacts with a target element. This allows for more complex interactions with your site.

Let’s take a completely impractical example, and say you want a button that jumps to a new position on the screen whenever the cursor touches it. It would use JavaScript to detect when the cursor touches the button, randomly generate new page coordinates, and then update the button’s CSS to move it there.

If you think that an oddly specific example and are now wondering if it’s a real thing that I’ve made, you’re damn right I did. Why would anyone ever create such an affront to UX and God? Mostly just because I’m a bit of a terrible person.

Since JavaScript is client side code, it can only be run once the page has been delivered from the server to the user’s browser. It can, however, pull data dynamically from the server by working with PHP.

PHP

PHP is Server Side so it’s executed before the page is delivered to the browser. It’s used to manipulate the code based on data stored on the hosting server. Often it is used in conjunction with a database that stores information such as usernames, account data blog posts.

Databases

Obviously Databases aren’t a coding language but they can be accessed by Server Side code to utilize the information they store. An example of this would be a personalized welcome message using your name when you login to an account.

So those are the building blocks of your average website. There are tons of additional libraries based on these, and other code bases that we won’t get into, but the key thing to take away is that websites aren’t just made with one thing. They are built on the interactions of multiple systems which is why it might be easy to implement one aspect of your design and much more difficult to replicate others.

So why should you give fuck about any of this?

Well if you’re designing a site that will only be built using Client Side code, you can’t go adding shit that would require Server Side execution. Having a basic understanding of what happens client side vs what happens server side can help you avoid that pitfall.

It can also help you judge the level of complexity of a feature you’re adding in your design. Sure, you can just plop a carousel in there on paper, but does you client have the budget for the developer to build it?

CMSs and Templates

Before we get into design we should also mention CMSs and Templates. If the different components mentioned above were individual ingredients in a soup, a CMS or Template would be like a premade stock. You need to add a few things to it to make it good but most of the heavy lifting is done for you≥

CMS stands for Content Management System. Examples you may be familiar with are WordPress, Squarespace, and Wix. Theses, along with Templates, can be great for building sites quickly and making them easier for the end user to edit but they also impose their own, unique sets of limitations. If you know the site you’re designing is going to use a particular CMS and/or be built off of an existing template then chances are you can’t just do whatever the hell you want.

If you are working with a CMS, research how flexible it is and what kind of elements you can use. Some are fairly rigid and only allow users to make basic changes while other are very open ended and allow for considerable customization.

Templates are used with a CMS and, again, you ability to customize will vary based on the flexibility of the CMS. You also can just take a template made for one CMS and use it with another so it’s important to gain at least a basic understanding of the systems and tools the site will be built on before you start designing. Otherwise, you might waste your time making a beautiful site only to see it bastardized to fit the limitations of the platform and technology it’s built on. Then you’re unhappy because your design is ruined. The client in unhappy because it doesn’t look like what you promised them, and the developer is unhappy because they can’t make it work. Everyone hates it and nobody gets what they want.

  1. So what kind of things should you look for?
    Take a look at the user interface used to populate the. Site with design elements and content. You could also watch some video tutorials to get a sense of how it works.
  2. Find other sites built on the same system to see what other people have been able to do.
  3. Take a look at libraries of exiting templates for the CMS the site will be built on.
  4. If you are stating off from a particular template, think about what layout and functionality elements you might need and see if they are already available in that template or if they might require further development work to include.

Ultimately, working with a CMS or a template is about making things easier, not harder. If your design doesn’t fit within the inherent limitations, consider if you are using the right system for what you are trying to make, or if the design needs to adapt more to the systems.

Takeaway

You don’t need to really know all the ins and outs of this, just be aware that things aren’t always as easy to do as you might assume. Having a general understating will help you know when to reach out to your developer so that pitfalls like this can be addressed early on and before the design is finalized.

Share

Did you enjoy this article?
Show love by signing up for more.

Meet The Author
Heather Treadgold
Hiilite Web Design + Marketing + SEO
Contact Us
close slider
  • This field is for validation purposes and should be left unchanged.