Web design definitions

There is so much "jargon" around web design, it's confusing for people who don't work in the field. That's why I've created this blog post with an A-Z of web design and development definitions.

A: AI

AI is one one of the biggest buzz words right now and likely to stick around for some time.  It stands for Artificial, which is all about using technology to perform tasks like humans, as if the technology has the ability to think and come up with the right output.

Some of the key characteristics of AI include learning, problem solving, decision making, creativity, reasoning, perception. 

Popular AI tools/applications include; ChatGPT, DALL-E, Microsoft Copilot, Zapier, Grammarly and Spline AI. 

AI has a lot of uses and the potential to increase productivity and handle mundane tasks without a human having to oversee the entire work.  However, some people are worried that AI  could get out of control and take over the world or put people our of jobs.

Also...

A is for Adobe

In the world of creative apps and services, Adobe is right up there.  Since taking over Macromedia, they have cornered the market in creative software and anyone involved with web design, graphic design and digital marketing will have used Adobe products at some point.  For most agencies, Adobe Creative Cloud is used daily and includes software such as Photoshop, Illustrator, Dreamweaver, Premier and InDesign.

Adobe Acrobat used to be the main way of viewing PDF's but many browsers now open PDF's by default.  Adobe XD is an excellent app for web design, however it has been discontinued following Adobe's failure to acquire Figma, which is widely considered to be superior.

A is for Ads

Ads or advertisements are a key revenue generator for a lot of websites and online services.  Google Ads (previously Adwords) is Google's main facilitator of revenue, expecting to reach $340 bn by 2027.

Done right, ads can drive huge business to companies with quick results.  However, advertising online requires understanding of hows ads work, who you want to show them to and how to optimise landing pages on your website effectively to convert visitors to enquiring potential customers.

A is for ASP.NET

ASP.NET is a microsoft technology for building software products and websites.  It is a free server-side web framework, allowing developers to use HTML, CSS and JavaScript and is compiled into dynamic web pages that can pull in data from a database.

Although it is well-established, it's market share is a mere 5.5% of all websites, probably owing to popular alternatives like WordPress which use PHP and MySQL instead.

B: Browser

To view websites, you need a web browser, or browser for short.  Browsers are applications that you install, which allow you to enter a URL (Uniform Resource Locator), and then the browser renders the page.

The most popular web browsers are Google Chrome, Mozilla Firefox, Safari and Edge.  In recent years, with users thinking more about their online privacy, more specialist browsers have been created to help users conceal their identity and prevent websites from looking at their browsing history.  These include Brave and Tor, which can be used for visiting dark web sites.

Also...

B is for Bug

In web and software development, when we say "bug" we are not talking about a spider or woodlouse!  We are actually referring to an error in our code which causes unexpected behaviour.

Bugs vary from minor glitches that are easy to ignore, to more serious issues that make it impossible to complete tasks (e.g edit your website, or for your users to click on a link).  Bug have to be "recreated" by the developer, so they can then find more specific reasons for the bug to occur. 

For example, does something just happen in Safari browser?  If so, perhaps we can start to find known issues for Safari and see if they relate to our bug.

B is for Backend

It sounds a little rude, but when we refer to a websites' "backend" we are talking about the magic that happens behind the scenes, which the user doesn't see.

The backend of the website typically deals with the processing of requests, getting and putting data into the database and the nuts and bolts that make the clever stuff happen such as user accounts, saving data, authenticating users etc.

B is for Bootstrap

Bootstrap is the most popular framework for HTML, CSS and JavaScript in the world.  It enables front end developers to save time, building reliable, responsive page layouts using Bootstraps provided classes and HTML.

On the JavaScript side, Bootstrap provides powerful and easy to use front-end features like modals, tabs, sliders and accordions.

Starting with a framework really reduces the amount of work we have to do and CMS platforms like Concrete CMS already have Bootstrap built in, which makes things even quicker and provides more functionality for clients to add and split columns on pages etc.

C: Cache

Modern websites are complex, dynamic things that pull in content from databases and assemble pages with many assets every time a page loads.  Except that, thanks cache, we can reduce the work that a web server does every single time a user navigates to a different page.

Without cache, most websites would be slow and use a lot of resources (memory and CPU) on the server it would be hard to scale up the traffic to thousands of visitors a day.  Thanks to caching, the server (and users browser) reduces that load by creating "snapshots" of pages or saving database calls so they are smaller and can be served to the browser much quicker.

Types of caching include:

• CMS caching: A cache built into your CMS like WordPress or Concrete CMS, which speeds up the website.
• OPcache: A "server side" cache that improves PHP performance by storing pre-compiled script bytecode in the shared memory, therefore removing the need for PHP to load and parse scripts each time.
• Browser cache: Browser caching stores web pages and assets, like images, locally so the next time a user loads a page, it appears to be faster.  This doesn't make the website faster for anyone else.
• CDN caching: A CDN is a Content Delivery Network and offers both performance and security enhancements for website owners.  CDNs can also cache website files on it's own servers, which then get served to the user instead of the end website, resulting in faster page loading times.

Also...

C is for Canva

Canva is a design application that has risen to be one of the most popular tools for creating content for website marketing. 

Canva is a great alternative for website owners who want a simple, quick approach to creating marketing assets, without all the added functionality and complexity of software like Adobe Creative Cloud.

With a drag and drop interface, thousands of customisable templates and photo and video editing features, Canva gives you everything you need to start producing those graphics and social media assets you need to help promote your website.

C is for Code

By code, we don't mean the secret messages used by spies to prevent enemies of the state learning our governments secrets, we actually mean the languages used to build websites.

Website code has evolved over the years with countless different languages being used to create interactive web pages.  HTML is still the widely-used foundation for websites.  CSS (Cascading Style Sheets) is used to make them look nice and JavaScript adds interactivity, effects and extra functionality.

We also now have frameworks, like Bootstrap, ASP.NET, React, designed to add more power-packed features to make things quicker and easier for developers and add enhance web and software projects.

C is for CSS

Cascading Style Sheets (or CSS for short) is a language for defining the appearance of elements on a web page, in "stylesheets". It allows developers to add margin, padding, style fonts, create micro-interactions and much much more.

CSS "rules" target elements in the HTML page and style those elements to look nicer.  Without CSS, web pages would just be black text on a white background and look really boring!

What does it mean by "cascading"?  Well, imagine we defined a style at the top of the CSS file for our heading 1 tags with the colour of red.  If we then defined that again further down the stylesheet, it would override the definition at the top.  This becomes really important when you have long stylesheets and allows developers to organise their CSS.  However, it also depends how "relevant" a style is and the level of "specificity" we use on our elements.

D: Design

In the term "web design", the "design" part is very important!  We are designing for the web.  Well, we're actually designing for users really.

Web design is not just about creating something that looks nice, it goes way beyond that.  We need to consider how our website needs to work, what will our users be looking for and how will the site render at various screen sizes and on different devices.

Web design is a huge topic and affected by so many sub-topics like user experience (UX), user interface design (UI), responsive design, accessibility etc.

Also...

D is for Development

By development, we mean web development which is the building of our web site after the design work is finished.  Web development can also be broken down into sub-disciplines of front-end and back-end.

Front-end development is working on the visual part of the site, making sure that it matches the design and works smoothly for website visitors.  A front-end developer will work mostly with HTML, CSS and JavaScript and be responsible for the site working across all devices and browsers.

Back-end developers do all the magic in the background, sending and receiving data from the database and APIs and developing functionality that heavily involves the web server.  They will typically build user areas and interactive parts of the application that store and fetch data.  Back-end developers will provide front-end developers with code to show various elements on the page, and leave it to the front-end developer to make it look great.

D is for Database

Typically, websites are made up of two main elements:  The files and the database. A database exists on the server and is a organised collection of tables, that store the websites' data that is set and used by systems like a Content Management System (CMS).

Databases are modified by a special language called SQL which stands for Structured Query Language.  Developers and systems will use SQL to update the database with new data.

The most widely used database systems currently are: Oracle, MySQL and Microsoft SQL Server.

D is for Domain

A domain (domain name) is the name of your website.  By entering your domain into their browser, users will reach your website.  In reality there is a more complex process, whereby they go via something called DNS, which then tells the browser the IP address of the server, thus routing them to your site.

A top-level domain (TLD), is the rightmost part of the domain name, e.g. .com, .co.uk, .org etc. When choosing a domain name, you must decide what TLD is acceptable to your organisation and then see what domains are available on that TLD.  For example, bluebooks.co.uk might be available, but bluebooks.com might not be.

F: Front-end

Front-end development, involves coding in HTML, CSS and JavaScript to build the visual "front-end" of a website.  It differs from back-end, which is more involved in the functionality "behind the scenes".

Front-end development has become more complex over the years, as users demand a more exciting and impressive experience from websites and software.

Also...

F is for Full Stack

Full-stack development is the task of building and maintaining both the front-end and back-end of a website.  Full stack developers have the skills required to do both and will split their time between both areas of the project.

Popular "stacks" include LAMP which includes JavaScript, Apache, MySQL and PHP and Ruby on Rails which includes JavaScript, Ruby, SQLite and Rails.

F is for Framework

Frameworks help developers do more, in less time.  They can also introduce more functionality and add more consistent ways of building aspects of websites and software products.

Frameworks contain templates, features and reusable components to add power-packed features more easily and with less development time.

Popular frameworks include Boostrap for front-end development and Laravel for PHP development.

F is for Figma

Figma is a software product that is ideal for modern web design.  It uses cloud based storage, so it's easy to share designs and there is less risk of losing your work, because it automatically saves and you don't have to backup your local files.

Figma allows real-time collaboration between team members with the ability to add comments and feedback.

It supports true vector graphics and makes it really easy to import and export images, including SVG files which can be used in your website for icons or logos.

Figma is quite light weight so hardware can handle it easily, using less resources than Photoshop.

There is quite a bit to learn in Figma, but it is considered a better choice for web designers than Adobe XD, which has now been discontinued.

F is for Fold

Above "the fold" is the top part of the page that is on screen when users land on it.  It is best to put the pages most important elements above fold.

It is also good practice to try and encourage users to scroll past the fold, especially if your websites hero image or video is 100% of the viewports height.

Over time, user behaviour has changed and the relevance of the fold is now more debatable thanks to responsive websites and prioritising mobile design.   Users are more used to scrolling down and viewing long pages.

However, what goes above and below the fold is still a really important aspect of web design.

G: Git

Git is a widely used version control system, which helps web developers track versions of files.  This makes it easier to see what changes were made, roll back versions and work more collaboratively with other developers.

Git can also deploy code to a live website without needing to use FTP.  It's potentially less prone to accidents and human error.

Collaborative coding using git works by using "branches".  When a developer works on a project they can create their own branch and then Git will safely merge everything together.

It's especially handy on larger projects, where a team might need to work on things at the same time. Code is stored in a repository and backed up to github site, where teams or companies can login and check it.

Git is much more complex than FTP, so requires more set up and understanding on a per project basis, so is not always used over FTP.

Also...

G is for Google

Everyone knows Google, they are the search giant with huge market share!  However, they are a very important supplier for website designers and business owners.

Google My Business, is an essential tool for listing your local business and getting more traffic to your website.

Other essential tools from Google include Google Places and Maps, where you can search for local businesses.  Even the main Google Search page lists the "map pack" at the top, containing Google Maps results, however it's worth trying the "Maps" tab too.

Google also provides marketing options for website owners via Google Ads (formerly known as Adwords) and the organic search results.  Search Engine Optimisation (SEO) is the art of improving a websites' ranking in the organic search results (SERPS).

Search Console is an essential one for website owners and markers, allowing us to monitor site health and traffic and submit our XML sitemap to help Google index our website quickly.

Google Analytics provides in-depth data on the number of daily visitors, where they are based, what pages they view and what device or browser they are using.

G is for Grid

Websites are designed on a grid, ensuring elements are aligned which leads to a more pleasing layout.  These days it is most commonly a 12 column grid.

We then build websites using the popular Bootstrap framework, that matches the width of our design and has the same size margins/gutters.

G is for GUI (Graphical User Interface)

A GUI, is a graphic user interface as displayed on a devices' screen.  GUI design covers all aspects of a user interface including icons, toolbars, modals etc.

It differs slightly form a UI (User Interface) in that a GUI is not such a broad concept, it doesn't include all ways to interact with a device. 

A GUI uses an array of different technologies to provided a platform that users can interact with via keyboard, mouse, trackpad, stylus etc.

H: HTML / XHTML

HTML (HyperText Markup Language) is the basic mark-up language for web pages.  It isn't really a programming language with logic etc, but a "mark-up" language, with tags that specify particular elements on a page.

XHTML (Extensible HyperText Markup Language) which is similar to HTML, but designed to be more extensible and strict.  That means developers need to make their pages "well-formed".

There are some important differences, see W3 Schools for more information.

Also...

H is for HTTP/HTTPS
HTTP stands for Hypertext Transfer Protocol which is a protocol for transmitting data over a web connection and is used to load web pages.  HTTPS, is the secure version of HTTP and is now used for most sites.

When sending personal or other sensitive data, HTTPS should be used so that it is sent securely.  In recent years, browsers have started to block or show warnings when web pages are served with assets set to use HTTP because if a site is using HTTPS, all the links in the page should also use HTTPS.

H is for Hosting
By hosting, we are referring to web hosting, which relates to a company, it's staff and infrastructure, who provide services hosting websites and online applications.  Web hosting varies hugely in price, performance and quality.  There are different types of hosting, ranging from shared servers, dedicated servers and cloud solutions.  The software available on different hosting platforms also varies and the level of support from the hosting company can range from excellent to, basically non-existent.  Therefore website owners should choose be very careful when choosing a hosting provider.

H is for Hero
The "Hero" is the main banner section, "above the fold", that a user immediately sees when they visit a web page.  We use an important message and video or image to grab the users attention.  This welcomes users to the site and should immediately inform the user what the website is about. Hero images or videos can impress users and help boost the conversion rate of a website.

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<div class="center_div">
  <h1>Hello World!</h1>
  <p>This is your first HTML page, with a simple "Hello World" message!</p>
</div>

</body>
</html>

Example HTML page.

J: JavaScript

JavaScript is one of the most important languages in modern website development.  It is used to make pages more exciting, interactive and informative.  Modern JavaScript frameworks like ReactJS or Vue are incredibly powerful and Developers can specialise just in JavaScript, working for large companies earning excellent salaries.

JavaScript can be used for simple functions like grabbing the current date and time to display on a page or for creating fancy effects and image sliders.  It can also be used for Ajax, to load server-side PHP to grab information from the database. It is a client-side language, so is not processed on the server, but instead runs in a users browser. 

Also...

J is for Java

Wait, that's the same thing as JavaScript right? Wrong!  Java is a totally different language to JavaScript. 

Owned by Oracle, Java has been a popular programming language which has existed since 1995 and is similar to C# and C++.
Java was designed to have as few dependencies as possible.

Java is cross-platform and used for web applications, mobile apps, enterprise-level software and games.  

J is for jQuery

Yep, you guessed, it's another programming language, well actually it's a framework of JavaScript.   jQuery makes writing JavaScript much faster and easier by simplifying the syntax.  To get started, all you have to do is load the jQuery library into your websites pages and then you can use it.

Here is an example of how jQuery simplifies code:

var myElement = $("#id01"); // jQuery

var myElement = document.getElementById("id01"); // JavaScript

Source: https://www.w3schools.com/js/js_jquery_selectors.asp

J is for JPEG (JPG)

JPG (pronounced /ˈdʒeɪpɛɡ/ JAY-peg) is the most common image format for full colour images, e.g. photographs.  It uses compression to reduce file sizes, making it suitable for showing full colour images on websites.

JPGs use lossy compression, which can result in visible artifacts in the image, but if used carefully can achieve 10:1 compression with acceptable loss of quality.  Often the loss is only visible if zooming into certain areas in the image.

Whilst JPG is a great format for full-colour images, it is not ideal for logos or simple graphics with limited colour, instead GIF or PNG should be used.

L: Lighthouse

Lighthouse is a tool for testing your websites performance so you can improve the quality of your web pages.

You can run Lighthouse in the Chrome browser, by opening your console (DevTools).

When you run Lighthouse, you'll get a score for desktop and for mobile and a list of things to improve.  Red items are most important, then amber.

These suggestions will tell you how to improve page speed and usability of your website.  It takes into account modern metrics like Cumulative Layout Shift (CLS), which also affects SEO, i.e. how well your website ranks in Googles search results.

Also...

L is for Landing Page

A landing page is a website page designed to convert visitors to customers.  It is normally linked to from a Google Ad, or from social media or an email campaign.

Featuring a strong call to action (CTA), the page is designed to get users to do something like sign up or apply for an offer code etc.

Landing pages can be created by a web developer or added in the websites' CMS by the website owner or marketer.

L is for Library

Software developers don't start each project from scratch, they will start with a code library, of multiple libraries containing collections of pre-written code that can be used to preform specific tasks or functions.

Code libraries can be dynamic, where they are loaded at run time (when a page loads) or static, meaning they are compiled into a programs' executable code.

In web development, examples of code libraries are vue.js, Angular and Django.

L is for Language (Programming)

There are so many different programming languages, it's mind boggling!  It all started years ago with very simple languages like Fortran and COBOL, but as requirements and computing power evolved, many more languages have been devised since.

A programming language is a way of telling computers to do things.  They don't really think like humans, although that's arguable with AI, but essentially we give computers a set of instructions to execute.

Most programming languages fall under one or more of the following types

• Procedural programming languages
• Functional programming languages
• Object-oriented programming languages (OOP)
• Scripting languages
• Logic programming languages

They are intended to do different things, but there is a lot of overlap.

Check out this list of programming languges.

M: Mockup

A mockup is another term for a website design, but it is a static design, created prior to building the site.  Therefore, in a mockup, you can't normally click links or interact with it.  However, if the mockup has been turned into a prototype using Figma or XD, then you may be able to click through pages and have some limited interactions in order to test the user journey.

A mockup could also be applied to a wireframe, although I personally would not use the term that way.  "Mockup" in general is a bit of a slang term and I'd rather refer to initial sketches as wireframes and then the next stage would be high-fidelity designs.

Also...

M is for Mobile First

As smart phones have become more popular, so has browsing websites on mobile devices.  Phones have also become powerful, with full colour, high resolution screens and an array of browsers such as Chrome, Safari and Firefox.  This has meant a shift from designing websites just for desktop computers and laptops, to include mobile.

However, mobile use has grown even more than this, with some websites seeing 9 our of 10 visitors using mobiles, rather than computers or tablets.  It doesn't apply to all industries, but this shift has been the enabler for "mobile first design".

But what is mobile first design?  It's all about designing and optimising websites on mobile, as a priority.  First we recognise the importance of mobile visitors and create websites that work really well for them.

How do we go about this?  We optimise for smaller screens, that are used in portrait mode primarily.  We also consider that mobile devices have less processing power and potentially a slower internet connection.  Paragraphs of text appear much longer, so we need to bear that in mind too.  We need to optimise images and video even more and take design cues from popular apps that work really well on mobiles.

M is for Menu

Here we are talking about a websites' menu rather than one in a restaurant.  The menu will contain the websites primary navigation to the most important "top-level" pages and may also include sub-menus to "sub pages".

A lot of effort is put into the design and build of website menu's and rightly so.  The menu is a very important aspect of a website, after all, if users can't find what they want, they will soon leave your website and go elsewhere.

The most common menu designs are a line of separated page link on desktop and a "hamburger" button that opens a list of page links on mobiles (where screen space is more limited).

M is for Minification

Minification is when we remove "white-space" from a CSS or JavaScript file (or even HTML) to reduce it's size, meaning it will load quicker in your browser.  This is done to optimise websites for speed, which is important for user experience and also for search engine optimisation (SEO).

We will typically take a file with hundreds or thousands of lines, add it into some sort of minification tool and then add the new minified file back into the site.  The new file will usually be one or just a few lines.  The removal of the white-space makes it smaller and quicker to load in users browsers.

M is for Margin

Margins are very important in web design and make up a key element in the "box model".  We add margins to typographical elements such as headings, lists and paragraphs to space them out.  We also add margins on other elements such as images, navigation menus, sections etc to provide spacing.

Margins that are the same will "collapse", meaning two 20px margins will not add 40px of spacing between paragraphs, but collapse down to 20px.  This gives us more natural looking breaks between our paragraphs, like in a printed book.

M is for Meta Tags

Meta Tags are special tags in the HTML of a web page that store more information about the page, such as Title, Description, Keywords and other information such as the pages author and content-type.

Meta Tags are important, but not as critical for adding keywords as they used to me.  You should use interesting descriptions for users and a natural balance of keywords / non-keywords in your pages' meta tags.

M is for MySQL

MySQL is the open-source database management software used with PHP website platforms like Concrete CMS and WordPress.

Developed by Oracle, MySQL was created in the 90's but that doesn't mean it's a legacy system, it is actively maintained and contains modern database features.  It is also used for high-traffic applications such as Facebook, Netflix and Uber.

Desktop and mobile menus

N: Navigation

Navigation is what happens when a user clicks on a link in a website and goes from one page to another.  To navigate a website, you need a "browser" like Chrome, Edge, Safari or Firefox.

A websites' menu contains the main page links that users will click on to navigate through it, but users can also navigate websites by following buttons and other page links within the body or footer of the site.

Also...

N is for Network

A network is a group of systems that are connected to eachother, so they can share data.  Most betworks are private, but the internet is public.

The internet is the largest network on earth and made up of billions of websites. According to Reboot there are 1.13 Billion websites in existance as of 2024!

N is for Null

A word that describes a value that is empty, or without value.  You will normally see this if there is a problem with the data being processed by the code of a website or software system .

O: Open Source

Open Source is a type of software developed in collaboration, with it's code available for developers to use, modify and share freely.  Open Source is fantastic for the web development community because it allows us to build websites with no upfront or subscription costs for the platform, and to test, share and improve the codebase for the good of everyone.

Linux, Apache WordPress and Concrete CMS are all examples of Open Source software.

Also...

O is for Optimise

Optimise means to make something as effective, efficient and functional as we possibly can.  In web design, we optimise our images by making them the right physical size to occupy their space on the screen and reduce their file size with compression tools so they load as fast as possible.

A great tool for optimising image file size is Tiny PNG, which works for not just PNG images, but for JPGs and AVIF/WEBP images too.

To optimise delivery of CSS and JavaScript files quickly, we minify them.  The files are then optimised for "production" which is our live version of the website.

O is for Opacity

By changing opacity in CSS, we can alter how opaque/transparent an element is on the page. Elements begin as opacity: 1 which means it is fully opaque, so not at all transparent.  We can reduce the value of the opacity to make it more transparent, on a range from 1 to 0.  For example this style could be added to apply 50% transparency to an element:

opacity: 0.5

O is for Open Graph Protocol

A type of structured data (code) that is used to help Facebook and other social media platforms to understand what a page is about.  Open Graph (or OG) tags, typically contain titles, images and descriptions.

P: PHP

PHP is an open source programming language, which is ideal for web development.  Many popular website platforms are based on PHP, including WordPress, Concrete CMS and Joomla.

PHP powers everything from small blogs, to business websites and huge applications.  The PHP Foundation are a collection of people and organisations dedicated to the long-term success of PHP.  The PHP Foundation contributes in many ways for example by writing documentation, fixing bugs and implementing features.

Also...

P is for PNG

PNG is an image file format that is very important for web design and development.  There are typically PNG 8 and PNG 24 versions depending on how many colours are required in the image.  PNGs are superior to GIFs, allowing for smaller file sizes.

PNGs also support transparency within the image.  Full colour images won't have the lossy compression of JPGs, however JPGs are more suitable on websites due to much smaller file sizes.

P is for Plugin

Plugins and addons are extensions to a websites' default code and functionality.  Various website CMS's will have certain functionality "out of the box".  What that means is they can do certain things like allow you to add transitions or images but if you want to add a full gallery of images, with the ability to zoom in, then you may need a plugin for it.

Some plugins will have a cost associated with it, which goes to the developer so they get paid for their work.  Others may be free.

Because plugins are developed by a third-party developer, it is worth bearing in mind that security and compatibility with your site is not always guaranteed.  This is why I always like to test plugins and addons on a development site first, before going live.

P is for Page Type / Template

A page type, is a page with a certain layout and elements that can be reused time and time again.  For example, a Blog Post is a reusable page type for new blog articles.  Other uses of page types might be for Service pages, Product pages or Landing pages.

In Concrete CMS, we can set up certain page types to make it really easy for clients to add new pages and just amend only what they need to change.  They then have everything they need on the page when they add it, and sometimes deleting "default content" from a page is easier than adding it.

P is for Pixel

Screens are made up of pixels, which is important to bear in mind for web design and development.  We will design the website to look a certain way for "desktop" devices, which will be screens with a minimum of 1200 pixels (px) wide. We will also design it for mobile devices which may be a maximum of around 400px wide and then tablets which will be in between.

We then add "break points" to tell the website how to adapt at each screen size.  In reality, screens can be any size, so we ensure that no matter what width they are in pixels, the website will still look good and be easy to use.

Modern screens are high-resolution, you can barely see individual pixels, which leads to a sharp looking website and nice clear text.  

P is for Pay per Click (PPC)

Pay per click (PPC), is a type of advertising where you don't pay to place an advert for a period of time, you pay only when a user clicks on it.

Google Ads is the most widely used PPC option for website owners .  You can research your products or services and your target area to see how many clicks you can get and the cost.

Google Ads is a very complex subject, with a lot of potential for success and disaster! Some marketers who are really good at Google Ads will choose just to specialise in that area.

If you are thinking of using Google Ads to market your business, you will need to do significant research first or find an agency who can handle it for you.

<!DOCTYPE html>
<html>
<head>
<title>PHP Test</title>
</head>
<body>
<?php echo '<p>Hello World</p>'; ?>
</body>
</html>

An HTML document with some PHP code to print "Hello World" to the screen.

R: Responsive

"Responsive" is a type of website that adapts to the viewport size of the users browser.  This means, it will always fit, no matter what device a user has, be it a mobile, tablet or huge desktop screen!

Over the past 15-20 years website developers have gone from building fixed-width websites to ones that are responsive.  This works by using "breakpoints" to change the layout at certain resolutions.

Frameworks such as Bootstrap, Tailwind and Semantic UI help developers build flexible, reliable, layouts that respond to users devices, using particular HTML tags and CSS classes.

How might a web page "respond" to it's viewport size?  So, on mobile you may have two elements that sit one on top of the other, but on desktop devices they may sit left and right on the page.  The main navigation will most likely have a hamburger button to open it on mobile, whereas on desktop it may list all the page links in a horizontal layout.

Also...

R is for Resolution

Resolution is the number of pixels on a display when measured both horizontally and vertically.  It can also be interpreted as the number of pixels per inch (PPI).  This is important for web designers because high resolution screens, i.e. retina screens or 4k screens, can affect how things appear on a website.  On these high resolution screens, it is very important to add logos as vector format images (SVG) or as a raster format graphic (e.g. PNG) at twice the size they occupy, to ensure they don't appear blurry.

R is for Render

We often think of 3d-modelling and how it is rendered, however web browsers actually "render" websites by receving information and building a picture for the viewer to see.

To render a site, web browsers load the HTML and hunt for assets like CSS, JavaScript, fonts and images, and then render the result based on their understanding on all the code.

Issues with the code, or bugs in the browser can result in the web page being rendered incorrectly.  It is a web developers responsibility to fix bugs or find workarounds to get websites rendering correctly.  In old browsers, it may not be possible to render a site 100% correctly, but it should still be usable for website visitors.

R is for Redirect

Redirects are when a user is automatically sent from one URL (the path in your browser) to another.  When a website is redesigned, it is necessary to check old URL's and make sure they are redirected to new web pages, to avoid users seeing a "404: Not Found" page.  This is really important for maintaining a websites level of "SEO" and avoiding a high bounce rate upon going live with the new website.

There are different types of redirect, a 301 redirect is a permanent one that tells search engines that a page has been moved to a new URL.  Redirects can sometimes be added in your websites CMS, or coded into your .htaccess file directly.

R is for RSS

RSS stands for Really Simple Syndication. It is a "web feed", in a standardised format, that allows websites to update with information, such as latest news articles.

Feeds can be read by news aggregators or RSS Readers which can be built into browsers or installed as desktop applications.

R is for Retargeting

Retargeting or Remarketing is a digital marketing technique that involves showing ads to users who have already had interactions with your website.

One example is Facebook ads, where you can show users an ad to remind them of your brand. It works by adding a code snippet to your websites code.  When they visit your website, this code is activated, so that if they are also logged into Facebook, it can show the ads, knowing that they are a website visitor.

R is for React

React or ReactJS is a powerful JavaScript library for building user interfaces, specifically single page applications.  It was developed and maintained by Meta (formerly Facebook).  Developers use React to create "components" which can be used and reused and the DOM is refreshed automatically when changes are detected. 

Responsive website design

S: SEO

SEO stands for Search Engine Optimisation.  It is the practice of undertaking work on a website in order for it to rank higher in a search engines results, for certain keywords.

A website will be designed and built with SEO in mind, but normally when SEO is referred to it will be in reference to an SEO Consultant undertaking work on a monthly basis.

SEO can take time to see results, but unlike paid ads, the effect of SEO work on a website will normally last longer if work is paused.  However, this depends on how much SEO work competitors are undertaking on their sites too.

Typical monthly SEO tasks include, building more inbound links to the site (link building), creating content (blogs, service pages and cluster pages and technical optimisations on the website (internal links, heading tag order, meta tags etc).

Also...

S is for SVG

SVGs (Scalable Vector Graphics) are a type of image format, which is a "vector" based format.  This means you can enlarge the image as much as you want and it still stays sharp.  It also means the resolution of the image is not defined in set pixels, so SVGs remain sharp, regardless of the resolution of the users screen.

Another interesting thing about SVGs is that they can be opened in a text editor and you will see that the code is an XML style format that can be edited.  It is very easy to change colours this way, without needing to re-open them in a graphics application such as Adobe Illustrator and edit them that way.

S is for Search Console

Search Console (previously known as Webmaster Tools) is a Google product for monitoring site health and optimisation of websites.  Using Search Console, you can submit your websites XML sitemap to encourage Google to index the site. You can also inspect URLs and it'll tell you if a page is indexed or not.

Search Console allows you to view Search Results, which is the impressions and clicks to your pages.  You can see which pages get the most clicks and use the Removals tool to temporarily block pages from Googles Search Results (SERPS).  If you need to quickly remove something from Google's index, this is the way to do it.

Search Console also looks at site health, such as Core web vitals and non-HTTPS urls.  It will also email you useful updated when it finds with urls such as 500 errors, 404's and other indexing issues.

S is for Syntax

Syntax is the arrangement of words and phrases to create well-formed sentences in a language.  In a programming languages, it has a similar meaning.  If your code is not written correctly, then you will experience syntax errors.

Here is a simple example in JavaScript:

console.log('Hello'

This will result in the error: SyntaxError: missing ) after the argument list

The correct code should be:

console.log('Hello')

S is for Sitemap

When talking about web design and development, sitemaps have a few different meanings:

1. Page Sitemap
   A visual plan of all pages that a new website will have, showing how they relate to eachother.
    
2. Sitemap web page
   A page on a website containing links to all the pages in the site, to help users find what they want.
    
3. XML Sitemap
   A special file containing all pages in the site that we want Google (and other search engines) to visit.  The file lists pages in XML format, which can be understood by the search engine reading it.

S is for SSL

SSL stands for Secure Sockets Layer and it is a protocol that websites use to encrypt data between a users browser and the web server.

Thanks to SSL, websites are more secure, however they require an SSL certificate which is a digital certificate, unique to that particular website, that is hosted on it's server and contains information relating to that site.

The SSL certificate makes SSL/TLS encryption possible, verifies that the client (a users browser) is talking to the correct server and facilitates the website being able to use HTTPS.

S is for SAAS

Software as a service (SaaS) is the primary model for businesses to offer their internet-based applications to users.  There is normally nothing to download, users log in and start using the product.

Usually SaaS products are sold on a monthly fee, with an up-front annual option at a discount.  This also suits the software developer compared to a one-off upfront payment, because they continue to get paid by users for updates and bug fixes.

It is hard to predict the demand for cloud-based SaaS products up-front, which can cause downtime if there is a huge spike in usage.  Whereas desktop software tends to mainly run on a typical users system in isolation.

However, SaaS products have become very popular and there has been a huge shift away from software products sold off the shelf to browser-based SaaS solutions.

S is for Server-side

Server-side code runs on the server, rather than within the users browser.  Examples of server-side code are PHP, Python or C#, whereas client-side would be JavaScript and HTML.

This has various implications, it has been easy to accept user input and process it server-side in the past.  Source code is not revealed to the client so it can be seen as more secure.  However, it can place more demand on the server, limiting scalability of the project.  Server side scripts also require a refresh of the browser in order to re-render any data.

In recent years, with web applications, a lot of typical server-side functions are being handled client-side to create a richer experience, but there will always be a server-side element to any dynamic website or web application.

S is for SERPs

The SERPs (Search Engine Results Pages) are Google's list of web pages that you see when you enter a search term into Google. 

The SERPs contain many features, not just organic search results.  We also see Paid Search results (Google Ads), and other things like the Map Pack (local search results in a small Google Map) and sitelinks under a specific result.

Google is now also showing an "AI Overview" and text and images taken from the top result on Google. It may also show dropdowns like a FAQ with related questions.

The SERPs continue to evolve to try and give users the best answers and choice to their questions on Google.

S is for Slider

A slider is a website element that slides across the screen.  It typically has images or slides containing information. Slides are good for adding more information to a page, without making it longer.

A slider used as a "hero", can give 5-10 important pieces of information about the website, or it's products for users to see as soon as they land on the page.

Sliders are also useful for featuring a series of images or testimonials on a website.  If users want to go through them, they can click a navigation or arrow buttons that activate the slider and make it move to the desired slide.

 

T: TTFB (Time to First Byte)

TTFB (Time to First Byte), is a very important metric when measuring the speed of a website.  It is actually the time it takes, for a users browser to receive the first byte of data, before it can render the web page.  It is also known as the "server response time".

Why is it so important?  We've all sat there looking at a white screen wondering if a website is loading.  That's the result of a slow TTFB.  Even if it is only a second or two, it feels like an age, especially if you want to view multiple pages on a website. 

This is why we try to reduce the TTFB as much as we possibly can.  Also, once the TTFB is over, the browser still needs to load all other page assets and assemble the page.  So even if the TTFB was instantaneous, there is a lot more work to do before the user sees the finished page.

Therefore a long TTFB is really bad and Google has recommended the TTFB should be under 200ms.  If the TTFB is too long then Lighthouse actually fails the audit.  Using Litespeed cache, we see around 30-40ms TTFB times, so it is an excellent way of getting dynamic pages well under Google's recommendation.

Also...

T is for Text Editor

A text editor is one of the main pieces of software a developer will use to work on websites.  They range vastly in terms of complexity from simple editors like Notepad++ (or even Windows Notepad!) through to more complex pieces of software like Visual Studio Code, Netbeans and PHPStorm.

Developers always have a favourite text editor and might be reluctant to change, but as long as it does the job then that is the main thing.  

Text editor features include:

• Code/syntax highlighting
• Code suggestions
• Error warning
• Bracket/brace matching/highlighting
• Diff compare (compare two files to find the differences)
• Git support for version control
• FTP/SFTP
• Line numbers
• Jump to line
• Whitespace operations
• Find and Replace
• Indent
• Undo/redo
• Cut and paste
• Word wrap

T is for Typeface

A typeface is the design of letters, numbers and special characters than is used in a certain style or font.  In web design there are three basic typefaces: Serif, sans-serif and monospace.

However, we can obviously use a lot more typefaces than this, by specifying fonts and a fallback, if the first one could not be found.  To do this, our CSS would look a little like this:

h1 {
    font-family: "Lato", Arial, sans-serif;
}

So, our desired font is Lato, then if the files for Lato are not found, we fall back to Arial and if that is not found we then fall back to the generic sans-serif font available on our system.

It used to be, that users would need the Lato font installed on their computer in order for the website to use it.  So it would load the font locally, to use on the remote website!  However, thanks to Google Fonts, we can now use a huge variety of different typefaces that are loaded from Google, so they will always work on any device regardless of the fonts that are installed on it.

T is for TypeScript

TypeScript takes JavaScript further. It adds additional syntax that developers can use to support a tighter integration with their editors.  However, browsers do not understand it out of the box, so TypeScript needs to be complied into JavaScript so it can be loaded.

T is for Typography

Typography is the arrangement of text to make it more visually appealing or clearer.  We can be a bit more restricted with websites compared to print work, but actually technology has come a long way in recent years and allows you to use more typefaces with more control over them.

Nice typography can really set apart a great design from and "ok" design when it comes to websites.  The old say goes "the devil is in the details" and it really applies here.  The size, weight and colour of type, even just paragraph text, makes a huge difference to the end result.

T is for Template

Template can refer to a re-usable website design which can be applied to a new website, or to a "page template", which is a style of page which we can add to the site, that can be reused in the site.

Templated websites tend to be lower cost, but they are not unique to you and your brand.  This may work well for start ups, but for established businesses creating a unique and memorable brand is more important.

Page templates are what page types are based on.  They are the code pages, containing the correct HTML and from these we can build page types such as product, blog article, service page etc.

U: UX Design

UX stands for User Experience.  A UX Designer is someone who will design apps and websites that are fun and easy to use.  They will think about how the user interacts with things and what they want to do, and design the site for that.

UX Designers will know the "personas" of their audiences. They will consider the entire user journey, from first interaction with the product to the final one, which will hopefully be some sort of conversion.

UX Design is based on seven key principles:

• Usefulness
• Desirability
• Accessibility
• Credibility
• Findability
• Usability,
• Value-impact.

UX Designers need a range of skills to do their job including:

• Problem-solving skills
• Analytical thinking skills
• Design skills / knowledge
• Attention to detail
• Initiative
• Verbal communication skills
• Client / stakeholder facing skills
• Understanding of applications and websites

Also...

U is for UI Design

UI Design is User Interface Design.  UI Designers focus on the look and feel or an application or website.  Like UX Design, the designer will create an interface that is easy to use and pleasurable, however they will likely not conduct user research as much as a UX Designer and focus on visual aspects such as icons, colours, typography, layout etc more.

U is for URL

A URL is the "web address" in your browsers address bar.  It stands for "Uniform Resource Locator" and is made up of multiple parts, namely scheme, subdomain, domain, top level domain and page path and any query string/parameters too.

https://developer.mysite.com/html/?search=URL

U is for Usability

When defining the usability of a website, we need to think about how easy it is for a user to achieve their goals. A design's usability is measured on how well its features accommodate users’ needs and contexts.

Imagine a user lands on your website for the first time, do they see what they need to see, and can they do what they want to do?

According to the Interaction Design Foundation, a design with excellent usability should have:

1. Effectiveness—It supports users in completing actions accurately.
2. Efficiency—Users can perform tasks quickly through the easiest process.
3. Engagement—Users find it pleasant to use and appropriate for its industry/topic.
4. Error Tolerance—It supports a range of user actions and only shows an error in genuine erroneous situations. You achieve this by finding out the number, type and severity of common errors users make, as well as how easily users can recover from those errors.
5. Ease of Learning—New users can accomplish goals easily and even more easily on future visits.

U is for User

A user is a human who interacts with our website.  At the most basic level, we don't know anything about them, so the term "user" is reasonable.

To further refine who a user is, we need to know more about their demographics.  Are they male or female, where do they live, what is their age group etc.

Social media platforms try to learn all these demographics, whereas basic websites may not try to discover anything more about our user.  However, using tools like Google Analytics can learn more about users such as their location, device or browser.

Users can be "guests", which means they are not registered users, who have their own account.  Guest users will have permissions to view public-facing pages on a site, whereas registered users will also have permissions to view their own account.  An example of this is an ecommerce website where registered users can login and view their order history, favourite products etc.  Another example is a website built on a CMS, the website admin will have an account so they can logina and make changes to the site, whereas the public will be guests, so they cannot make changes.

V: Viewport

The viewport of a browser, is the window in which websites are viewable.  So it doesn't contain the browsers UI, i.e. menu, toolbars etc. So it is subtly different from a browser "window", which would typically include all the browser UI.

In responsive webdesign, we tell the website to "adapt" to the users viewport, so that it will change width depending on screen size.  This means the site will shrink for mobile devices and expand for desktop ones.  We do this using the meta viewport tag like this:

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />

Also...

V is for VPS

A VPS (virtual private server) is a virtual machine that is used as a web server, to host websites.  They can be upgraded without physically changing hardware, so a VPS differs to a dedicated server.

VPS's are very fast, offering benefits over shared hosting. They are also more expensive, but once multiple websites are added to a VPS, this brings the cost per site down.

As with all hosting, do not compare solely on price, check the features and support level you will receive before choosing a hosting provider.

V is for Version Control

Version control is a software development process that tracks every change in every file in a project.  This helps teams work collaboratively and in a smarter, faster way.  It also protects source code, which on large software projects, is a huge investment.

Using version control like git, means there are less likely to be conflicts when developers are working in a team on the same project.  

V is for Validation

Validation is when we check the validity and accuracy of our code or a users input.  So on forms we add "form validation" to check each field has been completed (if it is mandatory) and to ensure that users enter a valid email address etc.

Code validation checks the code we write to make sure it is well-formed and there are no obvious mistakes.  Online code validators can check HTML, CSS and JavaScript in addition to specialist checkers like rich snippets and schema markup.

V is for Vector Graphics

Vector Graphics are computer-generated image files that can be scaled up without any loss of quality.  Rather than being made from pixels, they are actually based on geometric shapes, defined by mathematical commands.

Vector file types include .svg, .ai, .eps, .dxf and .cdr.  Logos and flat graphics are suited to vector formats, rather than photographs, which are more suited to raster file formats.

W: Wireframes

In web design, wireframes are sketches or low-fidelity drawings of potential website layouts. These can be hand-drawn or mocked up using computer software.

At the wireframe stage, we start to explore where different page elements can sit.  The client gets consulted on this stage and can add their input on which features should be where on each page.  Wireframes mean we have a layout ready for design work, so when it is time to create the high-fidelity designs, it is easier because we have these layouts to base them on.

Also...

W is for Web App

A web app is software that runs in your web browser, like a SaaS product.  Web applications don't typically need to be installed on a users machine, so it is very quick and easy to get started.  Web apps are very useful for most tasks and can scale and be updated very easily.

Web apps are used by teams to collaborate on projects, for example email, project management and banking.  Social media sites are also web apps, offering a range of different functionality.

Although it's easy to get started with web apps, due to the range of web browsers and versions on offer, there can sometimes be issues or bugs using them.

W is for WYSIWYG

WYSIWYG stands for What You See Is What You Get.   This relates to an interface or software product that shows you how things will appear as you work on it. 

An HTML editor is great for working on code, but it doesn't really show you what the output will look like to the user.  Years ago, Macromedia released Dreamweaver which was a WYSIWYG editor, as you coded the site, it would show you the output.

Some CMS systems that websites can be built on, allow for more of a WYSIWYG editing experience.  This is very valuable for content creators, because they can see how their work will look before they publish it.  The CMS that does this especially well is Concrete CMS.

Email marketing platforms like MailChimp and MailerLite are also really good at this, allowing users to design an email visually on screen.

W is for White Space

White space (also known as negative space) is the empty areas between elements in a design or layout.  It is not necessarily "white".  White space is very important in web design.  Without it, we pages would be messy and ugly and difficult for users to understand.  Too much white space can be equally an issue, promoting too much scrolling and a general feeling that the website is too "big" for a screen.

So using white space is a delicate art that a web designer will be experienced at.  White space will separate page sections, and elements like text, images, graphics, forms, sidebars etc.

White space is used to improve the readability of a web page, creating balance and focus.  It also helps make website designs more elegant and attractive.

Website wireframes

X: XD (Adobe)

XD is Adobe's design tool that can be used for websites, user interfaces and software design.  Unlike Photoshop, it is vector based, allowing easy export of vector based SVG graphics as well as images, text, colours etc.

XD also features prototyping, so users can click buttons or links in page designs to progress throughout a project, so it is great for getting a feel of the user journey.

A great feature of XD is that it can import files from other Adobe products, namely Illustrator, Photoshop, Sketch and After Effects.  It is relatively simple to use and lightweight, allowing many designs to be loaded quite quickly.

As of 2024, XD is being phased out.  Figma is the more popular alterntive now and tends to be more advanced and less buggy.

Also...

X is for XML

XML (Extensible Markup Language) is a markup languge, fairly similar to HTML, to the casual observer.  It uses tags like HTML, which can be nested to define a parent/child relationship.

XML has a standardised syntax that is widely understood, making it easy for developers to read and save data across different platforms.  It can also be opened in most browsers and edited using standard text editors like Notepad.

An example of XML:

<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>

Source: https://www.w3schools.com/xml/note.xml

X is for X-Frame-Options

X-Frame-Options protect your content by stopping the use of iframes on other sites to show your websites page content.  Your website host.  By specifying DENY, you will block other websites from loading your content in a frame.

X is for XSS (Cross-Site Scripting)

Cross-site scripting allows attackers to inject malicious code into a website or application.  It works when a user runs some code, sent to them by the attacker, which can impersonate users and take control of their accounts.

XSS can spread malware or add junk on websites and more.  They are prevented by the Same Origin Policy (SOP) on the server, which prevents scripts from other websites interacting with eachother.

Abobe XD being used for web design work

Z: Zapier

Zapier is a software company that specialise in workflow automation, saving their customers hours per week.  With over 7000+ app integrations, it works by connecting these web apps and services to automate tasks.

It does this without the need to write code, by using a trigger.  Once the trigger is defined, you can add an action to complete your automated workflow.

An example could be, Add new HubSpot contacts to Mailchimp lists.

Also....

Z is for z-index

The z-index property is a CSS property that defines the "level" at which an element appears on the page.  The element with the z-index property has to have a position set, e.g. relative, absolute or fixed.

z-index values can be positive or negative.  The following will move an element "below" the page:

.hide-me {
  position: relative;
  z-index: -1
}

A more common use would be to position a modal with a z-index number, so that it is above everything else on the page:

.modal {
  position: absolute;
  left: 50%;
  top: 50%;
  transform(translate(-50%,-50%);
  z-index: 9999
}

Wrapping up

I hope this article helps explain some of the technical jargon behind various website terminology you have come across. If you need technical help with your website, please don't hesitate to get in touch with us and we'll be happy to help.

Join the discussion

Want to have your say on this topic? Start by posting your comment below...