Websites, writers – a glossary of terms

For your pleasure, and in true fantasy writer’s form, here is a glossary of terms to help writers figure out the web. If I missed anything let me know in the comments!

Adaptive layout

An adaptive layout is a term to describe how the grid of your webpage changes as the viewport width gets smaller. This could be through devices like a tablet, phone or simply one of the many hundreds of screen sizes out there, and it uses media queries and breakpoints to do it. Here’s an example:

@media screen and (max-width: 1024px) {
  body {
    margin: 0;
  }
}

---

Analytics

Analytical tools like Google Analytics used to watch how many visitors you visit your website, paths they take, and metrics on who they are and where they are based.

---

API

An API or Application Program Interface is a bridge between two systems that otherwise could not talk to each other. An API maps the data points from one system to the data point of another, like colour variables from a design system mapped to a front end interface like this:

$system1hexcode12 = #3229b3 //System 1 colour variable from hex code 12 is this colour
$system2blue = $system1hexcode12 //System 2 blue is the same as system 1 hex code 12

In the above example our design system (or system 1) is automatically generating a variable based on a colour in hexadecimal format. Our front end (or system 2) is mapping its own variable to it so it can make use of the the colour in a variable of its own.

---

Bootstrap

A boilerplate template used over and over. In design Bootstrap is a templating system used for building a webpage. It is typically built from a 12 column grid.

---

Client-side

An action performed in the browser (like CSS or Javascript)

---

CMS

Content Management System, a shiny interface for you to to be able to create and control your content, usually saved to a database. Popular CMSs are WordPress and Drupal.

---

CSS

Cascading Style Sheets – Code that styles HTML to make things usable and pretty. The code looks like this:

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

---

Database

A series of tables that can be accessed by a CMS to load and store data.

---

DNS

Domain Name System. How to hook up your domain name to the IP address of your server.

---

Domain

Your web address name that your type into your address bar. You can purchase it from places like 123 Reg. Extensions are the bit at the end, like the .com or .co.uk, and they are largely based on country. Each country having their own, however you can access loads of extensions even if you don’t live in that country. In fact you can be properly creative with them like this:

• goog.le
• bit.ly
• mist.ja

---

Embedding

Usually refers to media or social media posts, and is the act of including a snippet of code that recreates the media on your webpage. Lots of places offer this now under the “Share” button. Try it on this Youtube video. Often inside an iframe.

<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

---

FTP

File Transfer Protocol – is how you get your files onto a server. It can be used for a many other things, but primarily you’ll need for pushing your website files (like a self-hosted WordPress blog) to a server. A great example is Filezilla.

---

Git

A version controlling system designed for file management. Working in branches means files can be updated yet never lost. A really worthwhile thing to learn if you are considering learning web design / code. Popular Git systems are GitHub and GitLab (Free for Private repos).

---

Git Repository (Repo)

A repo is a project, that is a set of files related to one project, and stored within Git.

---

Grid

In design a grid is the make-up of your webpage. Much like a table it breaks down the design into a series of columns and rows, that are used as a responsive containers for your content. A great example is Pintsize which is particularly lightweight and uses SASS variables to great effect.

---

Gutenberg

A WYSIWYG editor in WordPress for making posts and page content and uploading media. Uses blocks to make content production much much easier.

---

Handle

A nickname that you can use online which can be used as your username. Finding a unique handled these days is very difficult, especially if you name is not unique. (talking from experience here). However if you can be clever with it you can use it to help build a profile for yourself across multiple channels and social media sites.

My handle is mikestepjack which is built from my three names. Michael Stephen Jackson. It does not exist anywhere else, and it’s discovery made me much happier than it should have.

---

Hosting provider

A service provider who owns a server or virtual server upon which your website files will sit. Good examples are GoDaddy or Digital Ocean. However there are literally thousands of them out there.

---

htaccess

htaccess is a file that runs before your site loads. It tells the browser the rules you have lain out for your website. If you have an SSL certificate (which you should have) then you can put redirection rules in here, so that if anyone does visit the non-secure HTTP version of your site, it will redirect them automatically to the HTTPS version. It can also be used to password protect your site as well a whole host of other useful things.

---

HTML

Hyper Text Markup Language – is the real stuff off the internet. It is the unstyled code that provides the scaffolding and content areas for web pages. Without HTML we would all be lost. Here’s an example:

<div class="feature">I am some content</div>

---

HTTP

Hyper Text Transfer Protocol – is the web’s way of translating your IP requests into a domain.

---

HTTPS

Hyper Text Transfer Protocol Secure – is the same as HTTP but with end-to-end encryption to stop your data being intercepted.

---

iframe

An iframe is a frame that sits on your website that allows you to include data from other websites. It’s not particularly effective these days, as APIs offer better manipulation of data. But used correctly they can provide a powerful way of hooking together two websites that otherwise do not talk to each other. Here’s an example:

<iframe src="https://mjackson.co.uk" title="Mike Jackson's Web Tutorials" width="600" height="600":></iframe>

---

IP

Internet Protocol, a set of 4 numbers that denote a digital location on the Internet. Often looks like this

82.120.125.121

It comes in 2 varieties: IPv4 and IPv6 with IPv6 being the newer version with lots more number spaces.

---

ISP

Internet Service Provider (the guys who get the Internet to your house). Companies like BT, Plusnet, Sky…

---

Javascript

A front end language that runs client-side, that is, on the browser often after the page has finished loading. Looks like this:

document.getElementById("header").classList.add('slide--up');

---

Javascript Framework

A framework built from Javascript (Like Vue, Angular or React) that includes some really neat new functionalities to make building web applications easier. Often used for passing data seamlessly between browser and server without the need to reload the page.

---

Lazy-loading

The loading of assets as they are needed rather than all at once to save bandwidth. You’ll see it as media fading in as you scroll down a webpage.

---

Media

Images, audio and video.

---

Nameserver

Custom addresses that allow you to change which server your domain points to (useful if you change hosting provider).

---

PHP

Hypertext Preprocessor is just a web development language that runs on the server, and is the native language of WordPress.

<?php
$NeverGunnaGiveYouUp = true;

if (isset($NeverGunnaGiveYouUp)) :
    $LetYouDown = false;
    $RunAround = false; 
    $DesertYou = false;
else :
    $MakeYouCry = false;
    $TellALie = false;
    $HurtYou = false;
endif();

require('dance');
 ?>

---

Plugin

A 3rd party tool that can be imported or uploaded to a site to provide extra website functions like contact forms, eCommerce, Payment gateways and a million other things. Potentially dangerous if not managed properly due to 3rd party code on your website.

---

Responsive layout

A responsive layout is a truly fluid layout that changes to suit any width. They’re beautiful when they work well but hard to achieve with larger more complicated sites. They often use percentage and ratio based sizing to control widths when things get tight.

---

SASS

Syntactically Awesome Style Sheets – CSS with preprocessing to allow nesting of CSS selectors. The best thing to happen to the web since its inception. Very similar to SCSS but without the punctuation.

nav
  ul
    margin: 0
    padding: 0
    list-style: none

  li
    display: inline-block

  a
    display: block
    padding: 6px 12px
    text-decoration: none

---

SCSS

Sassy Cascading Style Sheets – More CSS preprocessing to which allows CSS nesting, variables and mixins. Very powerful. Like SASS it requires a CSS preprocessor like Gulp or Grunt.

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

---

Server

Another computer where you can upload your website files to be accessed via a domain name.

---

Server-side

An action performed on the server (PHP, Perl)

---

Shared Hosting

A piece of a virtual server usually shared with lots of other people. Better for people with low traffic.

---

Site recordings

Automatic and anonymous site recordings that allow the owner of a website to show users moving through a website, recording the cursor as it moves around the page. It gives valuable insight into what users are actually doing as people often think with their cursors, moving it to where they are reading/watching etc. Very interesting. Check out Hotjar (free), Optimizely or VWO to try it yourself.

---

SSL

Secure Sockets Layer – comes in the form of a security certificate that is now mandatory for all websites. If you see a “Not Secure” message next your web address in the browser it means you do not have one. An SSL encrypts all data that moves between your website and the server so that it might not be intercepted. If it’s working correctly you’ll be able to use HTTPS instead of HTTP in front of your domain name.

---

Testing

The act of using tests to discover how users act when on your website. It is possible to create two versions of a webpage, to test a feature or concept, and then split the traffic between them. Analysing the results should show whether the control page (the normal webpage) or the test variant (the new feature) received more traffic, clicks or engagements. Often used with Analytics/Site recordings.

---

Theme

Usually present on a CMS, themes allow you to change the look and feel of the website quickly and easily. Not just a skin, they can and do include functions related to that theme. A new theme is essentially a completely new website. You can download themes for free, pay for them or even build your own. Some developer themes come with lots of style changing options and are very powerful, but ultimately building or commissioning your own gives you the most control. It’s also a lot easier than people think.

---

Traffic

A stream of visitors to your website.

---

Virtual server

A partition on a real server that acts like a stand-alone server itself.

---

Website

A collection of files that may or may not include a database and is usually hosted on a server.

---

WordPress

A CMS platform for writing your own posts and pages. Comes in the self-hosted version, which you upload yourself to a server, or the hosted version which is controlled and hosted by WordPress.

---

WYSIWYG

What You See Is What You Get — Usually refers to text editors that allow you to format the text within, hinting at what the final format will look like. I say “hint” because often there is a fair amount of work involved to have an editor mimic the final styling.