97 terms
Web Design GlossaryWeb Design Terms A–Z
Core concepts of web design across interface, experience and implementation: responsive design, design systems, accessibility, the viewport and loading techniques that affect page performance.
The definitions bridge design and development: each explains how a concept reaches the user and how it technically works in the browser.
Searches term names and alternate names; on category pages also the short definitions.
A
- A/B TestingA/B testing is an experiment in which the current version of a page or element (A, the control) and a modified version (B, the variant) are shown at the same time to randomly assigned groups of visitors, to measure statistically which performs better on a predefined metric. To make sure a difference is not down to chance, the sample size is calculated before the test starts and the test runs until it is reached.Professional · Web Design · Performance & Analytics
- Above the FoldAbove the fold is the part of a web page a visitor can see on load without scrolling. The term comes from newspapers, where the top half of a folded front page was what passers-by saw. On the web there is no fixed pixel line: the fold depends on the device, screen size and browser window. The page's main message, and usually its LCP element, sit in this area.Core · Web Design
- Alt TextAlt text is the short text placed in an HTML image's alt attribute that stands in for the image when someone cannot see it. It is written first for screen reader users and for cases where the image fails to load; search engines also use it to understand what an image shows. Purely decorative images get an empty alt attribute (alt="") so assistive technology skips them.Core · SEO · Web Design
- ARIA (WAI-ARIA)ARIA (WAI-ARIA, Accessible Rich Internet Applications) is a W3C specification of roles, states and properties that can be added to HTML elements to tell assistive technologies such as screen readers what an element is and what condition it is in. ARIA changes semantics only; it adds no behaviour. WAI-ARIA 1.2 is the current W3C Recommendation, and the guiding rule is not to use ARIA where native HTML already does the job.Professional · Web Design
- Atomic DesignAtomic design is a design system methodology introduced by Brad Frost that builds interfaces through five levels: atoms, molecules, organisms, templates and pages. Borrowing from chemistry, it describes how the smallest pieces, such as labels, inputs and buttons, combine into progressively more complex components and finally into pages filled with real content. It is meant as a mental model, not a linear workflow.Professional · Web Design
- AVIFAVIF (AV1 Image File Format) is an image format that applies the intra-frame compression of the AV1 video codec, developed by the Alliance for Open Media, inside a HEIF container. It supports lossy and lossless compression, transparency, animation, HDR and wide colour gamut. For photographs it often produces smaller files than JPEG and WebP at similar visual quality, but encoding is slow and it does not support progressive rendering.Professional · Web Design · Performance & Analytics
B
- BreadcrumbA breadcrumb is a secondary navigation element that shows where the current page sits in a site's hierarchy as a chain of links, such as Home › Category › Page. The same trail can be marked up as structured data with schema.org's BreadcrumbList type, which Google can use on desktop search results to show the page's position as a readable path.Core · SEO · Web Design
- BreakpointA breakpoint is a width threshold in a responsive design at which the layout changes, for example from a single mobile column to two columns from 768 pixels upward. In CSS it is usually expressed as a media query, or as a container query at component level. Well-chosen breakpoints follow the content, placed where the current layout starts to look cramped or stretched, rather than the dimensions of particular devices.Core · Web Design
- Browser CacheThe browser cache is the private HTTP cache in which a web browser stores responses it has already downloaded, such as CSS, JavaScript, images, fonts and sometimes HTML, so it can reuse them on later requests. Headers like Cache-Control, ETag and Last-Modified decide how long a stored response counts as fresh and when it must be revalidated with the server. Configured well, it sharply reduces network traffic and load time on repeat visits.Professional · Web Design · Performance & Analytics
C
- CacheA cache is a storage layer that keeps temporary copies of frequently requested or expensive-to-produce data closer to where it is needed, so later requests can be served without going back to the original source, such as a database or origin server. On the web, caches exist in browsers, CDNs, servers and application code. Used well, caching cuts response times and server load; used carelessly, it serves stale data.Professional · Web Design · Software · Performance & Analytics
- Call to Action (CTA)A call to action (CTA) is a button, link or short prompt that directs visitors to the next step a page is designed for, such as requesting a quote, signing up, buying or getting in touch. An effective CTA needs a label that says exactly what will happen, a visual weight that sets it apart from everything else, and a position that matches the moment of decision. It is judged by completed conversions, not by clicks alone.Core · Web Design · Performance & Analytics
- CDN (Content Delivery Network)A CDN (Content Delivery Network) is a distributed network of servers that caches a website's content at edge locations around the world and serves each user from the nearest one. Requests reach the CDN first; if the edge cache holds a fresh copy, the response is returned without contacting the origin server. This cuts latency and origin load, and most CDNs also handle TLS termination, compression and DDoS protection.Core · Web Design · Performance & Analytics · Security & Infrastructure
- CLS (Cumulative Layout Shift)CLS (Cumulative Layout Shift) is a unitless score that measures how much visible content moves unexpectedly on a page, without the user causing it. It is the visual-stability metric of the Core Web Vitals. At the 75th percentile of visits, a CLS of 0.1 or less is considered good and anything above 0.25 poor.Professional · SEO · Web Design · Performance & Analytics
- Code SplittingCode splitting is the technique of breaking a web application's JavaScript into smaller pieces (chunks) that can be loaded independently, instead of shipping one large bundle. The browser downloads only the code needed right now, and other chunks load when the user reaches a route or uses a feature. Bundlers such as webpack, Rollup, esbuild, Vite and Turbopack perform the splitting.Professional · Web Design · Performance & Analytics
- Color ContrastColor contrast is the difference in luminance between text or an interface element and its background, usually measured on the web with the contrast ratio defined in WCAG. The ratio runs from 1:1 (no difference) to 21:1 (black on white). WCAG 2.2 Level AA requires at least 4.5:1 for normal text, and at least 3:1 for large text and for non-text elements such as input borders and icons.Core · Web Design
- Container QueryA container query is a CSS feature that styles an element based on the size (or, in some cases, the style) of its containing element instead of the browser viewport. You first turn an ancestor into a query container with container-type, then write conditions in an @container rule. The same component can then adapt its layout to the space it is given, whether that is a narrow sidebar or a wide content column.Advanced · Web Design
- Conversion Rate Optimization (CRO)Conversion rate optimization (CRO) is the systematic practice of increasing the share of website visitors who complete a target action such as buying, submitting a form or signing up. Problems are identified from analytics, user research and tools like heatmaps, turned into hypotheses, and validated, ideally with A/B tests. The aim is not more traffic but more results from the traffic a site already has.Professional · Web Design · Performance & Analytics
- Core Web VitalsCore Web Vitals are a set of three metrics Google defines to measure real-world user experience on a web page: Largest Contentful Paint (LCP) for loading, Interaction to Next Paint (INP) for responsiveness and Cumulative Layout Shift (CLS) for visual stability. A page meets the 'good' thresholds when, at the 75th percentile of visits, LCP is 2.5 seconds or less, INP is 200 milliseconds or less and CLS is 0.1 or less.Core · SEO · Web Design · Performance & Analytics
- Critical CSSCritical CSS is a technique that extracts the style rules needed to render the first visible part of a page, inlines them in the HTML, and loads the rest of the stylesheet in a way that does not block rendering. The goal is to let the browser paint initial content without waiting for an external CSS file. Its main trade-offs are that inlined styles cannot be cached separately and must be kept in sync with the design.Advanced · Web Design · Performance & Analytics
- Critical Rendering PathThe critical rendering path is the sequence of steps a browser goes through to turn HTML, CSS and JavaScript into the first pixels on screen: building the DOM from HTML and the CSSOM from CSS, combining them into a render tree, then computing layout and painting. Every resource that lengthens this chain delays the first render, so optimising it means reducing the number, size and ordering cost of critical resources.Advanced · Web Design · Performance & Analytics
- CSR (Client-Side Rendering)CSR (client-side rendering) is a rendering approach in which page content is built by JavaScript in the user's browser rather than on the server. The server typically sends a near-empty HTML shell plus JavaScript bundles; the browser runs that code, fetches data from APIs and writes the interface into the DOM. It enables fluid, app-like transitions but makes first paint, and what search engines can see, depend on JavaScript.Professional · SEO · Web Design · Software
- CSSCSS (Cascading Style Sheets) is the style language that defines how a web page structured with HTML is presented. It keeps presentation decisions such as colour, typography, spacing, layout, animation and adaptation to different screen sizes in a separate layer from the content. Rules target elements through selectors, and when several rules conflict, the cascade, specificity and inheritance decide which value applies.Core · Web Design
- CSS GridCSS Grid (CSS Grid Layout) is a two-dimensional CSS layout model for arranging elements in rows and columns at the same time. Setting display: grid on a container defines column and row tracks, and child elements are placed into them automatically or by line numbers and named areas. It suits page skeletons, card collections and any layout where items must align in both directions better than Flexbox does.Professional · Web Design
D
- Dark PatternA dark pattern is a user interface pattern designed to push people into decisions that work against their own interests. Pre-ticked consent boxes, fees revealed only at the final checkout step, fake countdown timers, subscriptions that are deliberately hard to cancel and cookie banners that hide the reject option are typical examples. The practice is now often called deceptive design, and consumer protection and data protection regulators in several jurisdictions have taken it up.Professional · Web Design · Security & Infrastructure
- Design SystemA design system is a shared, documented set of reusable components, design tokens and guidelines that a team uses to build a product's interfaces consistently. It typically combines a component library in code, matching design files, and rules for usage, accessibility and content, and is run as a living product with its own owners and versions.Professional · Web Design
- Design TokenA design token is a named value that stores one design decision, such as a colour, spacing step, font size, corner radius or animation duration, and is the smallest unit of a design system. Tokens live in a platform-neutral source, usually JSON, and are transformed into CSS custom properties, iOS and Android code. The same decision can then be managed in one place across design tools, the web and native apps.Professional · Web Design
- DOM (Document Object Model)The DOM (Document Object Model) is the tree structure a browser builds in memory after parsing an HTML document, representing elements, text and attributes as nested nodes. JavaScript reads and changes the page through this tree, and what you see on screen is drawn from the DOM's current state, not from the original HTML source. The DOM is defined as a living standard by WHATWG.Professional · Web Design · Software
F
- FaviconA favicon is the small icon that represents a website in browser tabs, bookmarks, history and next to the site name in Google search results. It is usually declared with a link rel="icon" element in the page head. To appear in Google, it must be square, at least 8×8 pixels, and both the icon file and the home page must be crawlable.Core · SEO · Web Design
- FlexboxFlexbox (CSS Flexible Box Layout) is a one-dimensional CSS layout model for arranging items along a single axis, either a row or a column, distributing space between them and aligning them. Setting display: flex on a container makes its children flexible, so they can grow or shrink according to their content and the space available. It is the typical tool for navigation bars, button groups and vertical centring.Professional · Web Design
- FrontendThe frontend is the part of a website or application that users see and interact with in the browser. HTML defines its structure, CSS its appearance and JavaScript its behaviour. Frontend development covers turning designs into code, adapting layouts to different screens, accessibility, loading performance, and presenting data from the backend correctly in every state.Core · Web Design · Software
G
H
- Heading Structure (H1–H6)Heading structure is the way a web page's content is divided into sections with the HTML heading elements h1 through h6, and the logical hierarchy those headings form. The h1 usually states the page's main topic, while lower levels mark sections and subsections. A clear heading structure helps readers scan, lets screen reader users navigate and helps search engines understand how the content is organized.Core · SEO · Web Design
- HeatmapA heatmap is a visualisation of visitor behaviour on a web page that uses colour intensity to show where activity concentrates. Areas that attract many clicks, mouse movement or scrolling appear in warm colours, while neglected areas appear cool. It shows where on the page the behaviour behind analytics numbers actually happens, and it is a standard input for conversion rate optimization work.Professional · Web Design · Performance & Analytics
- Hero SectionA hero section is the large introductory block at the very top of a web page, directly below the navigation, that tells visitors at a glance what the page offers. It usually holds the main heading (H1), a short value proposition, a primary call to action and a supporting image or video. Because it shapes the first impression and is often the largest visible element, it matters for both design and loading performance.Core · Web Design
- HTMLHTML (HyperText Markup Language) is the markup language that defines the content and structure of web pages. Pieces of content such as headings, paragraphs, links, images, tables and forms are marked up as elements, and attributes add behaviour or extra information to those elements. CSS handles presentation and JavaScript handles interactivity. Modern HTML is published by the WHATWG as the HTML Living Standard, which is updated continuously.Core · Web Design
- HTTP CookieAn HTTP cookie is a small name-value pair that a web server asks the browser to store using the Set-Cookie response header. The browser keeps it and sends it back in the Cookie header on later requests that match its scope. Cookies keep users signed in, remember carts and language choices, and support analytics; attributes such as Domain, Path, Expires, Max-Age and Secure control where a cookie is sent and how long it lives.Core · Web Design · Software · Security & Infrastructure
- HTTP Request and ResponseThe HTTP request and response are the basic exchange of the web: a client such as a browser, app or crawler sends a request to a server, and the server answers with a response. A request carries a method, a target URL, headers and an optional body. A response carries a status code, headers and usually a body such as HTML, JSON or an image. The data a message actually carries is called its payload.Core · Web Design · Software
- HydrationHydration is the process of making HTML that was generated on the server (SSR) or at build time (SSG) interactive in the browser with JavaScript. The framework re-runs the component code on the client, matches the result against the existing HTML and attaches event listeners, rather than redrawing the page from scratch. Frameworks such as React, Vue, Svelte and Angular use it for server-rendered pages.Advanced · Web Design · Software
I
- Image OptimizationImage optimization is the practice of delivering a page's images at the smallest file size that still looks right, at the dimensions the layout actually needs and at the right moment. The core levers are choosing a suitable format (AVIF, WebP, JPEG, PNG or SVG), serving device-appropriate sizes, tuning compression, lazy loading offscreen images and declaring width and height.Core · Web Design · Performance & Analytics
- Image SEOImage SEO is the work that helps a site's images be found, understood and shown for relevant queries on Google Images, as text-result thumbnails, in Discover and in visual search. It covers serving images in crawlable HTML, descriptive alt text and file names, the context of the page an image sits on, image sitemaps and metadata that signals a page's preferred preview image.Professional · SEO · Web Design
- Information ArchitectureInformation architecture (IA) is the structural design of a website or app: how its content is grouped, what those groups and pages are called, and how people move between them. It covers organisation schemes, labelling, navigation and search. Good IA lets users find what they need without thinking about it, and the same structure, expressed through internal links and URLs, shapes how search engines understand the site.Professional · SEO · Web Design
- INP (Interaction to Next Paint)INP (Interaction to Next Paint) is the Core Web Vitals metric for responsiveness. It measures the delay between a user's clicks, taps or key presses and the next visual update on screen, and reports one of the slowest interactions observed during the page's lifetime. 200 milliseconds or less is good and more than 500 milliseconds poor. INP replaced First Input Delay (FID) in March 2024.Professional · SEO · Web Design · Performance & Analytics
- Interaction DesignInteraction design (IxD) is the discipline of shaping how people act on an interface and how the system responds: what users can do, how they discover it, and what feedback they get. It covers the behaviour of buttons, forms, menus and animation, states such as loading, error and success, and the timing of responses, so that users always understand what is possible and what just happened.Professional · Web Design
- ISR (Incremental Static Regeneration)ISR (incremental static regeneration) is a Next.js technique that regenerates individual statically generated pages in the background, either after a set interval or when explicitly triggered, without rebuilding the whole site. Visitors get the cached page instantly, and the new version replaces it once it has been generated successfully. The Next.js documentation also refers to this process as revalidation.Advanced · Web Design · Software
J
- JavaScriptJavaScript is the programming language web browsers run natively, adding interactivity, dynamic content and application logic to pages. The language is standardised as ECMAScript (ECMA-262) by Ecma International's TC39 committee, which publishes a new edition every year. Runtimes such as Node.js also let developers use JavaScript for servers, command-line tools and build pipelines.Core · Web Design · Software
- JPEGJPEG, named after the Joint Photographic Experts Group that created the standard, is a lossy image compression format designed for photographs. It splits an image into 8×8 pixel blocks, converts them into frequency components with the discrete cosine transform (DCT) and discards detail the eye is unlikely to miss. It opens in every browser and device, but it has no transparency or animation and shows blocky, ringing artefacts at low quality.Core · Web Design
- JSONJSON (JavaScript Object Notation) is a plain-text data interchange format that represents data as key-value objects and ordered arrays, readable by people and easy for programs to parse. It grew out of JavaScript syntax but is language-independent: virtually every programming language can read and write it. JSON is the dominant format for web APIs, webhooks and configuration files, and is standardised in RFC 8259 and ECMA-404.Core · Web Design · Software
L
- Landing PageA landing page has two meanings: in analytics it is the first page of a session, and in marketing it is a page built specifically to turn traffic from an ad, email or campaign into one goal, such as a form submission, sign-up or purchase. A campaign landing page uses a headline that matches the message that brought the visitor, a single primary call to action, and a layout with fewer distractions.Core · Web Design · Performance & Analytics
- Lazy LoadingLazy loading is the technique of loading resources such as images, iframes or code only when they are actually needed, rather than all at once when the page opens; for images, that usually means when the user scrolls near them. The goal is to reduce how much data is downloaded on initial load. Browsers support it natively for images and iframes through the loading="lazy" attribute.Professional · SEO · Web Design · Performance & Analytics
- LCP (Largest Contentful Paint)LCP (Largest Contentful Paint) is the time from when a page starts loading until the largest image or text block visible in the viewport is rendered. It approximates when the user sees the page's main content and is one of the three Core Web Vitals. At the 75th percentile of visits, 2.5 seconds or less is considered good and more than 4 seconds poor.Professional · SEO · Web Design · Performance & Analytics
- LocaleA locale is an identifier that defines the language and regional conventions software uses for a user. On the web it is usually expressed as a BCP 47 language tag such as en-US or tr-TR. The locale determines the interface language as well as how dates, times, numbers and currencies are formatted, how text is sorted and how upper- and lowercase conversions work.Professional · SEO · Web Design · Software
M
- Media QueryA media query is a CSS condition that applies styles only when the device or browser environment matches it. Conditions can test viewport width and height, orientation, the type of pointer, or user settings such as reduced motion and a dark colour scheme. Media queries are the core tool of responsive design and work in @media rules, in the HTML media attribute and in JavaScript through matchMedia().Professional · Web Design
- Mobile-FirstMobile-first has two related meanings. As a design approach, it means designing and coding for the smallest screens first and then enhancing the layout for larger ones. In search, mobile-first indexing means Google crawls pages with its smartphone crawler and uses the mobile version of a site's content for indexing and ranking.Core · SEO · Web Design
N
O
P
- Page BuilderA page builder is a visual editing tool for designing web pages by dragging and dropping sections, columns and ready-made components instead of writing code. It is usually installed as a plugin for a content management system such as WordPress or built into a hosted site platform, and it manages layout, styling and content in one interface with a live preview.Core · Web Design · CMS & E-commerce
- PaginationPagination is the splitting of a long list, such as products, blog posts or search results, across several pages. Besides numbered pages it covers infinite scroll, which loads more items as the user scrolls, and "load more" buttons. For SEO the real question is whether items deep in the list can be discovered, which requires each page to have its own URL and real links.Professional · SEO · Web Design
- Partial HydrationPartial hydration is an approach in which only the components that need interactivity on a server-rendered or prebuilt page are hydrated with JavaScript, while the rest of the content stays as plain HTML. At the level of page architecture the idea is known as islands architecture: independent interactive islands within an otherwise static page. The goal is to cut the amount of JavaScript the browser downloads and executes.Advanced · Web Design
- PNGPNG (Portable Network Graphics) is a raster image format that compresses images losslessly, so no pixel data is discarded. It supports a full alpha channel for transparency, palette-based (indexed) colour and up to 16 bits per channel. PNG suits screenshots, interface graphics and images with few colours and hard edges; for photographs it produces much larger files than JPEG, WebP or AVIF.Core · Web Design
- PreconnectPreconnect is a resource hint, written as a link element with rel="preconnect", that tells the browser to set up a connection to another origin in advance: DNS lookup, TCP handshake and, for HTTPS, TLS negotiation. When the first request to that origin arrives, the handshake is already done. It only helps cross-origin requests and should be limited to a few critical origins, because unused connections are closed quickly.Professional · Web Design · Performance & Analytics
- PrefetchPrefetch is a resource hint, written as a link element with rel="prefetch", that suggests the browser download a resource the user is likely to need on the next navigation, at low priority, and keep it in the HTTP cache. It speeds up the following page rather than the current one. Browsers treat it as optional and may skip it depending on network and device conditions.Professional · Web Design · Performance & Analytics
- PreloadPreload is a declaration, made with a link element using rel="preload", that tells the browser to fetch a resource the current page will definitely need (a font, image, stylesheet or script) early and at high priority. The resource is downloaded and cached but not executed. It is meant for critical files the browser would otherwise discover late; unnecessary preloads compete with other requests for bandwidth.Professional · Web Design · Performance & Analytics
- Progressive EnhancementProgressive enhancement is a web development approach that starts with a meaningful HTML baseline that works in every browser, then layers CSS and JavaScript on top as enhancements that only take effect where they are supported. If a script fails to load, the connection is slow or the browser lacks a feature, the core content and functions remain usable. It reverses the habit of building for the most capable browser first.Professional · Web Design
- PrototypeA prototype is an interactive or simulated early model of an interface or product, built to try out how it will work before the real thing is developed. It can range from linked paper sketches to clickable screens in a design tool or a coded draft running on real data. Its purpose is to answer a specific question about flow or behaviour quickly and cheaply.Core · Web Design
- PWA (Progressive Web App)A PWA (progressive web app) is a web application built with standard web technologies that can also be installed on a device, open in its own window and gain app-like capabilities such as offline use through a service worker. The basic requirements for installability are being served over HTTPS and providing a web app manifest. Its main advantage is a single codebase that runs both in the browser and from the home screen or desktop.Professional · Web Design
R
- ReactReact is an open-source JavaScript library for building user interfaces out of reusable components. Each component is a function that describes what should appear on screen for a given state and set of inputs (props); when state changes, React updates the affected parts of the page itself. Originally developed at Meta and open-sourced in 2013, React is now owned by the React Foundation, hosted by the Linux Foundation.Professional · Web Design · Software
- React Server ComponentsReact Server Components (RSC) are React components that run only on the server or at build time and whose code is never sent to the browser. They can query a database or API directly, await data asynchronously and pass their output to the client in a special serialised format. Parts that need state, event handlers or browser APIs are written as client components, marked with the 'use client' directive, and both kinds work together in one component tree.Advanced · Web Design · Software
- RenderingRendering is the process in which a browser or a search engine executes a page's HTML, CSS and JavaScript to produce a displayable page and its final DOM. Google renders pages in a separate step after crawling, using its Web Rendering Service (WRS) built on an up-to-date version of Chromium, and generally indexes the rendered result rather than only the raw HTML.Professional · SEO · Web Design
- Responsive DesignResponsive design is an approach to building web pages whose layout, images and typography adapt automatically to the width of the screen. A single HTML document served at a single URL uses fluid grids, flexible media and CSS media queries, so the same page stays readable and usable on phones, tablets and desktops.Core · Web Design
- Responsive ImagesResponsive images are the set of HTML techniques for describing several versions of an image, at different widths, resolutions or crops, so the browser can pick the file that best fits the screen size, pixel density and layout. The core tools are the srcset and sizes attributes on img and the picture element. The aim is to avoid sending oversized files to small screens while keeping images sharp on high-density displays.Professional · SEO · Web Design · Performance & Analytics
S
- Semantic HTMLSemantic HTML is markup chosen for what content means rather than how it looks: nav for navigation, main for the primary content, h1 to h6 for headings, button for actions and an a element with an href for links. Because the structure and role of each part are stated in the code, browsers, screen readers, search engine crawlers and AI systems can understand the page without guessing from its visual styling.Core · SEO · GEO · Web Design
- Service WorkerA service worker is an event-driven JavaScript file that the browser runs on a separate thread, independent of any page, and that can intercept network requests made by pages within its scope. Because it can answer from Cache Storage, from the network or a combination of both, it underpins offline support, push notifications and background sync. Service workers only run over HTTPS (or localhost during development) and have no access to the DOM.Advanced · Web Design
- Site NavigationSite navigation is the set of structures, such as the main menu, submenus, mega menus, breadcrumbs and footer links, that lets visitors and search engine crawlers move between the pages of a website. Good navigation makes the site's information architecture visible and shows people where they are and where they can go. For SEO, it provides crawlable internal links that help important pages get discovered and understood as important.Core · SEO · Web Design
- Software FrameworkA software framework is reusable infrastructure that provides an application's skeleton, control flow and conventions, while developers plug their own code into defined extension points. Your code calls a library; a framework calls your code. This principle is known as inversion of control. Laravel, Django, Spring and Next.js are widely used examples.Core · Web Design · Software
- SPA (Single-Page Application)A SPA (single-page application) is a web app model that loads one HTML document into the browser and handles every later page change by rewriting that document's content with JavaScript instead of requesting a new one. Data usually comes from APIs, and the address bar is updated through the History API. Its counterpart is the multi-page application (MPA), which fetches a fresh HTML document from the server on every navigation.Professional · SEO · Web Design · Software
- SSG (Static Site Generation)SSG (static site generation) means producing a website's HTML files once, at build time, before any visitor requests them. The resulting HTML, CSS and JavaScript files are served as-is from any web server or CDN, with no database queries or rendering at request time. Tools that perform this step are called static site generators.Professional · Web Design · Software
- SSR (Server-Side Rendering)SSR (server-side rendering) means generating a web page's HTML on the server for each request and sending it to the browser with its content already in place. The browser can show text and links before any JavaScript runs, and search engines and other crawlers find the content directly in the HTML response. In modern frameworks SSR is usually paired with hydration, which makes the page interactive.Professional · SEO · Web Design · Software
- SVGSVG (Scalable Vector Graphics) is an XML-based W3C image format that describes two-dimensional graphics as shapes, paths and text rather than a grid of pixels. Because it is a set of drawing instructions, it stays sharp at any size and screen density, and for logos, icons, diagrams and simple illustrations it is usually smaller than raster formats. SVG can be embedded directly in HTML, styled with CSS and manipulated with JavaScript.Core · Web Design
T
- Trailing SlashA trailing slash is the / character at the end of a URL path, the difference between /services/ and /services. Google treats the two forms as separate URLs. Apart from the root of a domain, which form you choose does not matter for SEO; what matters is picking one, permanently redirecting the other to it and using it consistently in internal links.Professional · SEO · Web Design
- Tree ShakingTree shaking is a bundler optimisation that detects code exported from JavaScript modules but never used anywhere, and leaves it out of the final bundle; it is a cross-module form of dead code elimination. It relies on the static import and export structure of ES modules. The term was popularised by Rollup, and tools such as webpack, esbuild and Turbopack now apply it in production builds.Advanced · Web Design · Performance & Analytics
- TypeScriptTypeScript is an open-source programming language developed by Microsoft that adds a static type system to JavaScript. Its syntax is a superset of JavaScript; type annotations are removed during compilation or type stripping, so what runs in the browser or on the server is plain JavaScript. The aim is to catch a class of errors before code runs and to enable reliable autocompletion and refactoring in large codebases.Professional · Web Design · Software
- TypographyTypography is the craft of choosing and arranging typefaces, sizes, line length, line spacing and letter spacing so that text is legible, readable and suited to its purpose. On the web it also includes a size scale that adapts to different screen widths, respect for the reader's browser settings, and the performance cost of loading web fonts. Good typography lets people read without noticing the effort.Core · Web Design
U
- UI (User Interface)UI (user interface) is the part of a digital product people see and interact with: screens, layouts, buttons, forms, menus, icons, typography and colour. UI design is the discipline of shaping these elements so they are clear, consistent and responsive to every input, turning a product's structure and flows into a usable visual interface.Core · Web Design
- UI ComponentA UI component is a self-contained, reusable building block of an interface, such as a button, form field, card or menu, that bundles its markup, styling, behaviour and accessibility rules into one unit. It exposes a small interface of parameters (props), hides its internals and behaves the same wherever it is used. Components exist both in design files and in code written with frameworks like React.Core · Web Design · Software
- URL StructureURL structure is the set of conventions that determines how a site's addresses are built: the folder hierarchy, the slug that identifies each page, how parameters are used and how words are written. A good URL structure is readable, consistent and stable; it separates words with hyphens, avoids generating needless parameters and keeps the same content from appearing at several addresses.Core · SEO · Web Design
- User JourneyA user journey is the full sequence of steps a person goes through with a brand, website or product to reach a goal, from noticing a need through research and purchase to later support. It is also called the customer journey. Teams usually visualize it as a journey map: a timeline showing the phases, the actions, thoughts and emotions in each phase, the touchpoints involved, and the opportunities to improve the experience.Core · Web Design · Performance & Analytics
- User PersonaA user persona is a fictional but research-based profile that represents a typical or target user of a product or website. It describes that person's goals, the jobs they are trying to get done, how they decide, what worries them and the context they use the product in. Personas give design, content and development teams a shared, concrete picture of who they are building for; personas built on assumptions alone can steer a team in the wrong direction.Core · Web Design
- UX (User Experience)UX (user experience) is the sum of a person's perceptions and responses when using, or expecting to use, a product or service: can they find what they need, finish their task without friction and trust the outcome? UX design is the practice of researching users and shaping structure, flows and content so those tasks succeed.Core · Web Design
- UX ResearchUX research is the systematic study of a product's intended users: who they are, what they need and how they actually behave when using a website or app. It combines qualitative and quantitative methods such as interviews, usability tests, surveys and analytics so that design decisions rest on observation and measurement rather than assumption, and problems are found before they become expensive to fix.Professional · Web Design
V
- ViewportThe viewport is the rectangular area of a browser window in which a web page is currently visible. On desktop it follows the window size; on mobile it depends on the screen width and zoom level. CSS layout and units such as vw and vh are calculated against it. On mobile devices, the meta viewport tag in the HTML head tells the browser to lay the page out at the device's width.Core · Web Design
- Virtual DOMThe virtual DOM is a lightweight in-memory representation of what the user interface should look like, held as plain JavaScript objects. Libraries such as React build a new virtual tree when state changes, compare it with the previous one (reconciliation) and apply only the differences to the real DOM. It lets developers describe the end state of the UI instead of manipulating the DOM step by step, but it is not always faster than targeted hand-written DOM updates.Professional · Web Design
- Visual HierarchyVisual hierarchy is the arrangement of elements on a page so that their visual weight matches their importance, using size, colour, contrast, position, proximity and whitespace to lead the eye to the most important information first and the rest in order. Because most visitors scan rather than read, a clear hierarchy lets them grasp a page in seconds and find the main action without hunting for it.Core · Web Design
W
- Web Accessibility (WCAG)Web accessibility is the practice of designing and building websites so that people with disabilities can perceive, understand, navigate and interact with them, including people who use screen readers, keyboards, magnification or voice control. The main international reference is the W3C's Web Content Accessibility Guidelines (WCAG), currently version 2.2, which defines three conformance levels: A, AA and AAA.Core · Web Design
- Web FontA web font is a font file that a page downloads from a server through the CSS @font-face rule, so it does not need to be installed on the visitor's device; WOFF2 is the standard format today. Web fonts give consistent, on-brand typography, but each one is an extra download: a late font can leave text invisible for a while (FOIT) or cause a visible swap and layout shift (FOUT). font-display, preload and subsetting manage that cost.Professional · Web Design · Performance & Analytics
- WebPWebP is an image format for the web developed by Google and announced in 2010. It supports lossy and lossless compression, transparency (alpha channel) and animation in a single format. At comparable visual quality it usually produces smaller files than JPEG and PNG, which helps pages load with less data and more quickly. All modern browsers support WebP today.Core · Web Design
- Website DesignWebsite design is the process of planning and building a website, from defining its goals through information architecture, content, interface and interaction design to development, testing and launch. It covers more than visual appearance: whether visitors find what they came for, how fast the site loads, how accessible it is and how well search engines can crawl it. UI, UX and responsive design are parts of this whole.Core · Web Design
- WireframeA wireframe is a simplified, usually greyscale sketch of a page or screen that shows its structure: where content, navigation and actions go and in what order of priority, without final colours, imagery or styling. Teams use wireframes early in a project to agree on layout and content hierarchy before investing in visual design or code.Core · Web Design
Other categories
- SEO Glossary167 termsCanonical URL · Core Web Vitals · Crawling · Entity
- GEO Glossary63 termsAI Visibility · Entity · GEO · Structured Data
- AI Visibility Glossary45 termsAI Visibility · Entity · GEO · LLM
- Software Glossary138 termsAPI · LLM · API Endpoint · API Key
- Performance & Analytics Glossary71 termsCore Web Vitals · Abandoned Cart · Bounce Rate · Call to Action
- Security & Infrastructure Glossary82 termsAPI Key · Authentication · Authorization · Backup
- CMS & E-commerce Glossary27 termsAbandoned Cart · Checkout · CMS · CRM