Website Design Glossary

A

• A/B Testing: A method of comparing two versions of a webpage or web element to determine which one performs better in terms of user engagement or conversions.Accessibility: Ensuring that websites are usable by people of all abilities, including those with disabilities.
• Accessibility: The practice of making websites usable for as many people as possible, including those with disabilities. This includes considerations for screen readers, keyboard navigation, and more.
• Adaptive Design: A web design approach where the layout adapts to different screen sizes using fixed layouts that are optimized for specific devices.
• AJAX (Asynchronous JavaScript and XML): A technique for creating fast and dynamic web pages by allowing data to be exchanged with a server in the background.
• Alt Text (Alternative Text): Descriptive text for images on a website, helping with accessibility and SEO by providing context for users who cannot view the images.
• Anchor Text: The clickable text in a hyperlink that directs users to another webpage.
• API (Application Programming Interface): A set of rules, protocols, and tools for building software applications. APIs specify how software components should interact and are used when programming graphical user interface (GUI) components.
• Aspect Ratio: The ratio of width to height in a web page’s design or media element, affecting how visuals appear across different devices.

B

• Back-End Development: The part of web development focused on server-side logic, databases, and application functionality that users do not see but powers the website.
• Backlink: An incoming hyperlink from one web page to another website. Backlinks are significant for SEO because they represent a “vote of confidence” from one site to another, indicating the content’s credibility.
• Bandwidth: The amount of data that can be transmitted over an internet connection within a specific time period, influencing website load times and performance.
• Bitmap: A type of image format that stores pixel-by-pixel data, often resulting in larger file sizes but providing detailed images.
• Bootstrap: A popular open-source front-end framework for developing responsive and mobile-first websites.
• Bounce Rate: The percentage of visitors to a website who navigate away from the site after viewing only one page, indicating engagement levels.
• Box Model: In CSS, the box model is a design concept that includes the content, padding, border, and margin areas of a web element, influencing layout and spacing.
• Breadcrumbs: A type of navigation that shows the user’s location in a website hierarchy, typically found at the top of a webpage to improve usability.
• Broken Link: A hyperlink that points to a webpage that no longer exists or is unreachable, often leading to a 404 error.
• Browser Cache: Temporary storage on a user’s device that saves copies of web pages, images, and other content to speed up loading times during future visits.
• Browser Compatibility: The ability of a website to function correctly across different web browsers (e.g., Chrome, Firefox, Safari).

C

• Cache: Temporary storage that stores copies of web pages, media, and other content to improve load speeds and performance during repeat visits.
• Call to Action (CTA): A prompt or button that encourages users to take a specific action, such as signing up, buying, or downloading something.
• Canonical URL: A tag that helps search engines understand which version of a web page is the preferred or authoritative one when there are duplicate pages or content on different URLs.
• CSS (Cascading Style Sheets): A language used to describe the presentation of a document written in HTML or XML. CSS describes how elements should be rendered on screen, on paper, in speech, or on other media.
• Contrast Ratio: The difference in luminance between two colors, typically used in web design to ensure text is readable against its background, improving accessibility.
• Conversion Rate: The percentage of users who take a desired action on a website, such as making a purchase or filling out a contact form.
• Cookie: A small piece of data stored on a user’s browser that helps websites remember preferences, login information, or track user behavior for analytics.
• Cross-Browser Compatibility: The ability of a website or web application to function and display correctly across multiple web browsers (e.g., Chrome, Firefox, Edge).
• CSS Grid: A CSS layout system that allows designers to create complex web layouts more easily by defining rows and columns on the grid, offering more control over positioning elements.

D

• Database: A structured collection of data stored electronically, often used in web design to store user information, content, and other dynamic elements of a website.
• DDoS (Distributed Denial of Service): A type of cyberattack where multiple compromised systems flood a website’s server with traffic, overwhelming it and making the site unavailable to users.
• Debugging: The process of identifying and fixing errors or bugs in the code of a website or application to ensure proper functionality.
• DNS (Domain Name System): The system that translates human-readable domain names (like www.example.com) into IP addresses that computers use to identify servers on the internet.
• Doctype: A declaration at the beginning of an HTML document that defines the document type and version of HTML used, ensuring proper rendering by browsers.
• Domain Name: The unique address where a website can be found on the internet, such as www.example.com.
• DPI (Dots Per Inch): A measure of image resolution, indicating the number of individual dots or pixels in a linear inch of a digital image. High DPI is critical for high-quality images, especially in responsive design.
• Drag-and-Drop Builder: A web design tool or feature that allows users to create and organize web elements visually by dragging and dropping them into place, without needing to write code.
• Dropdown Menu: A user interface element that reveals a list of options when clicked or hovered over, often used in navigation bars or forms.
• Dynamic Content: Web content that changes based on user interactions, preferences, or data, often powered by server-side technologies like PHP or JavaScript.

E

• E-commerce: The process of buying and selling goods or services over the internet, often involving online stores and payment gateways.
• Elastic Layout: A web design layout that uses relative units like percentages or ems to allow content to resize in relation to the user’s screen size or browser window.
• Em (Unit): A relative measurement unit in CSS used for sizing text and spacing. One em is equal to the current font size of the element’s parent.
• Email Marketing: The act of sending commercial messages, typically to a group of people, using email to promote products or services, or to nurture leads.
• Embedded Media: Media, such as videos or images, that are integrated into a web page using external sources, like YouTube videos embedded within an article.
• Engagement: The interaction between users and brands on online platforms. Engagement can be measured in likes, shares, comments, and other forms of user interaction.
• Error 404: A common HTTP status code that indicates a webpage could not be found on the server. It usually appears when a user tries to visit a broken or non-existent link.
• Etag (Entity Tag): A component of HTTP headers used for web cache validation. It helps browsers identify if the version of a file they have cached is still current, reducing load times and server requests.
• Event Handler: A function or block of code in JavaScript that triggers when a specific event occurs, such as a user clicking a button or submitting a form.
• Extensible Markup Language (XML): A markup language used for storing and transporting data in a structured way, often used in web applications for data exchange.
• External Link: A hyperlink on a webpage that points to another website or domain, rather than an internal page within the same site.
• Eye-Tracking: A user testing method that tracks where users look when interacting with a webpage, helping designers understand how users engage with different elements.

F

• Favicon: A small, iconic image that represents your website in a browser tab, bookmarks, and other shortcuts.
• Fixed Layout: A web design layout that has a fixed width, meaning it does not change based on the size of the user’s screen or device, making it less responsive.
• Fluid Layout: A layout that uses percentage-based widths, allowing the design to adjust and fill the available space based on the user’s screen size.
• Fold: The point on a webpage where content becomes hidden due to the screen size, often referred to as “above the fold” (visible without scrolling) or “below the fold” (requires scrolling).
• Font-Family: A CSS property that specifies the typeface to be used in the text of a webpage, allowing designers to choose fonts like Arial, Helvetica, or custom web fonts.
• Footer: The section at the bottom of a webpage, typically containing navigation links, contact information, copyright notices, or other important site-related details.
• Form: A web interface element that allows users to input data, such as text fields, checkboxes, and buttons, often used for login, search, or contact forms.
• Framework: A pre-built structure or code library that simplifies web development by providing reusable components and best practices (e.g., Bootstrap, Angular, React).
• Front-End: The part of a website that users interact with directly. It includes everything that users experience directly: text, images and videos, navigation, and interaction.
• Front-End Development: The part of web development focused on the visual aspects and user interface of a website, involving HTML, CSS, and JavaScript.
• FTP (File Transfer Protocol): A standard network protocol used to transfer files between a client and server on a computer network, commonly used to upload website files to a hosting server.

G

• Gestalt Principles: Design principles based on psychology that explain how humans perceive visual elements as a whole rather than as individual parts (e.g., proximity, similarity, closure).
• Ghosting: In digital marketing, ghosting refers to the practice where ads or content unexpectedly disappear or are not displayed to the audience, often due to being blocked or filtered by ad blockers, or when platforms restrict visibility due to policy violations or quality issues. It can also refer to the abrupt end of communication with no explanation in the context of professional relationships or online interactions.
• GIF (Graphics Interchange Format): An image format commonly used for animations or simple images with limited colors, often seen in web design as decorative or engaging media.
• Git: A version control system that tracks changes in code during web development, allowing developers to collaborate and manage updates efficiently.
• Glyph: A visual representation of a character or symbol in a typeface, often used in icons or custom fonts within web design.
• Google Analytics: A web analytics service offered by Google that tracks and reports website traffic, providing insights into user behavior and website performance.
• Graceful Degradation: A design philosophy that ensures a website can still function with reduced features or older browsers while enhancing the experience in more modern environments.
• Gradient: A gradual transition between two or more colors in design, often used as backgrounds or overlays in modern web design.
• Grid System: A layout system used in web design that divides the page into columns and rows to structure content in a balanced, consistent way.
• GUI (Graphical User Interface): A user interface that allows interaction through graphical elements like buttons, icons, and menus, as opposed to text-based interfaces.
• Gutter: The space between columns in a grid layout, which helps separate content for better readability and structure.

H

• Hamburger Menu: A menu icon with three horizontal lines, typically used to represent a navigation menu on mobile devices or responsive websites.
• Hero Image: A large, prominent image at the top of a webpage, often used to grab attention or convey the main message.
• Hero Section: The large, visually engaging section of a webpage located at the top, usually featuring a headline, CTA, and striking visuals to captivate users.
• Hex Code: A six-digit alphanumeric code that represents colors in web design, used in CSS for specifying color values (e.g., #FF5733).
• Hosting: A service that stores website files on a server, making them accessible over the internet.
• Hover State: A CSS style that changes the appearance of an element when a user hovers over it with their cursor.
• HSL (Hue, Saturation, Lightness): A color model used in CSS to define colors based on hue, saturation, and lightness, offering an alternative to hex and RGB values.
• HTML (HyperText Markup Language): The standard markup language used for creating web pages. It provides the basic structure of sites, which is enhanced and modified by other technologies like CSS and JavaScript.
• HTTPS (HyperText Transfer Protocol Secure): An extension of HTTP that is used for secure communication over a computer network, widely used on the Internet. In HTTPS, the communication protocol is encrypted using Transport Layer Security (TLS).
• Hyperlink: A clickable link that directs users to another webpage or resource.

I

• Iconography: The use of icons in web design to convey information or actions visually, often enhancing usability and user experience.
• Iframe (Inline Frame): An HTML element that allows embedding another HTML document or website within a webpage.
• Index Page: The default or main page of a website, typically the homepage, which is usually served when a user visits the root URL.
• Infographic: A visual representation of information or data, used on websites to present complex information in an engaging and easily digestible format.
• Information Architecture: The structure and organization of information on a website. It involves the categorization of information into a coherent structure, preferably one that most people can understand quickly.
• Input Field: A form element where users can enter data, such as text fields, checkboxes, and dropdown menus.
• Inline Elements: HTML elements that do not start on a new line and only take up as much width as necessary, such as or tags.
• Interaction Design: A field of web design focused on creating engaging interfaces where users can interact with elements, ensuring a smooth, intuitive user experience.
• Interstitial: A web page that appears before or between content, often used for advertisements or user consent forms.
• IP Address: A unique string of numbers identifying each device connected to the internet, allowing data to be routed correctly between servers and users.
• Image Optimization: The process of reducing the file size of an image without compromising quality to improve website loading speed and performance.

J

• JavaScript: A programming language used to create dynamic content on websites, including animations, interactive maps, and more. It runs on the user’s web browser without the need for server-side processing.
• JavaScript Framework: A collection of pre-written JavaScript code that provides developers with tools and structure for building web applications (e.g., Angular, React, Vue).
• JPEG (Joint Photographic Experts Group): A popular image format that uses lossy compression to reduce file size, often used for photographs on websites.
• jQuery: A fast, lightweight JavaScript library that simplifies tasks like event handling, animation, and Ajax interactions in web development.
• JSON (JavaScript Object Notation): A lightweight data format used for exchanging information between a web server and a client, often used in APIs.

K

• Kerning: The adjustment of space between individual characters in typography, used to improve the readability and appearance of text on a website.
• Keyframe: A specific point in an animation that defines the start or end of a particular action, used in CSS or JavaScript animations.
• Keyword: Words or phrases used in digital content to improve search engine rankings. Keywords are used in SEO and SEM strategies to attract and drive targeted traffic to websites.
• KPI (Key Performance Indicator): A measurable value used to evaluate the success of a website or campaign, such as conversion rates or bounce rates.

L

• Landing Page: A single web page that appears in response to clicking on a search engine optimized search result or an online advertisement. The landing page will usually display directed sales copy that is a logical extension of the advertisement or link.
• Lazy Loading: A technique that defers the loading of non-critical resources, like images, until they are needed, improving page load times.
• Lightbox: A feature that displays images or videos in an overlay on the current page, dimming the background content.
• Linting: The process of checking code for errors or coding standard violations, helping to improve code quality and performance.
• Loader (Loading Indicator): An animation or icon that informs users a process or content is loading, enhancing user experience during wait times.

M

• Markup Language: A system for annotating a document in a way that is syntactically distinguishable from the text, like HTML.
• Media Query: A CSS technique used to apply styles based on device characteristics like screen size or resolution, essential for responsive design.
• Mega Menu: A large, expandable menu that displays multiple links or categories at once, often used in e-commerce or content-heavy websites.
• Meta Tags: Snippets of text that describe a page’s content; they don’t appear on the page itself, but only in the page’s code. Common uses of meta tags are to include information for search engines, like keywords and descriptions.
• Microinteractions: Small, subtle design features or animations that provide feedback or guide users during interactions, like button hovers or loading spinners.
• Minification: The process of removing unnecessary characters from code (like spaces or comments) to reduce file size and improve load times.
• Mobile-First Design: A design approach that prioritizes mobile devices during the design process and then scales up for larger screens.
• Mockup: A static design representation of a webpage, often used to visualize the final design before development begins.
• Modal Window: A pop-up window that appears on top of a webpage, often used for dialogs, notifications, or forms, requiring user interaction before continuing
• Multilingual Website: A website that offers content in multiple languages to cater to a diverse user base.

N

• Namespace: A system used to organize and avoid naming conflicts in code, especially in HTML, CSS, and JavaScript.
• Navigation Bar (Navbar): A user interface element that contains links to different sections of a website, helping users navigate easily.
• Nesting: The practice of placing one element inside another in HTML or CSS, creating hierarchical relationships.
• Node.js: A JavaScript runtime environment that allows developers to run server-side code using JavaScript.
• NoFollow Link: A link that tells search engines not to pass SEO value to the target page.
• Normalization: The process of organizing a database to reduce redundancy and improve data integrity.

O

• Open Source: Software or tools with source code that anyone can inspect, modify, and enhance, commonly used in web development.
• Object-Oriented Programming (OOP): A programming paradigm that uses objects and classes to structure and organize code, commonly applied in web development.
• Offset: A CSS or HTML property used to adjust the positioning of an element relative to its normal location within the layout.
• Opacity: A CSS property that controls the transparency of an element, allowing designers to make elements partially or fully transparent.
• Open Graph Tags: Metadata that helps control how web pages are displayed when shared on social media platforms, improving engagement and visibility.
• Optimization: The process of improving a website’s performance, including speed, user experience, and SEO.
• On-Page SEO: Techniques applied to individual web pages to improve search engine rankings, like optimizing meta tags, content, and keywords.
• Organic Search: The process of gaining traffic to your website without the use of paid advertising, often through SEO practices.
• Orphan Pages: Web pages that are not linked to by any other pages on the website, making them difficult for users and search engines to find.
• Outsourcing: The practice of hiring external resources or agencies to handle web design or development tasks, often to save time or costs.
• Overlay: A layer or element that sits on top of a webpage, often used for modals, pop-ups, or menus.

P

• Page Load Time: The time it takes for a web page to fully load and display its content.
• Pagination: A navigation method that divides content across multiple pages for better readability or organization.
• Padding: The space between the content of an element and its border in CSS.
• Parallax Scrolling: A design effect where background content moves slower than foreground content, creating a sense of depth.
• Pixels: The smallest unit of a digital image or screen, used to measure dimensions in web design.
• PHP (Hypertext Preprocessor): A server-side scripting language used to develop dynamic web pages.
• Placeholder: Temporary content in forms or UI elements to guide users.
• Plugin: A software add-on that adds specific functionality to a website or CMS.
• Progressive Web App (PWA): A web application that behaves like a native mobile app but is built using web technologies.
• Prototyping: The process of creating an incomplete model of a website or web application. Prototypes are used for user testing and to refine and validate the design before moving into development.

R

• Raster Graphics: Images created from pixels, typically used for detailed graphics, but can lose quality when resized
• Rendering: The process of generating the final output of a webpage or graphic on a user’s screen.
• Resolution: The measure of the number of pixels displayed on a screen, often impacting image clarity and design quality.
• Responsive Design: An approach to web design that makes web pages render well on a variety of devices and window or screen sizes, from desktop computers to mobile phones.
• Responsive Grid System: A framework of columns and rows that aids in creating responsive website layout
• Retina Display: A screen technology by Apple with a high resolution that makes images and text appear sharper.
• Rich Media: Interactive multimedia content like videos, animations, or interactive ads used to enhance user engagement.
• Row: A horizontal container in web layouts often used for structuring elements like text or images.
• Rollovers: Interactive design elements that change appearance (e.g., color or image) when the user hovers over them.
• Responsive Design: An approach to web design that makes web pages render well on a variety of devices and window or screen sizes, from desktop computers to mobile phones.

S

• SEO (Search Engine Optimization): The practice of increasing the quantity and quality of traffic to your website through organic search engine results. It involves making changes to your website design and content that make your site more attractive to a search engine.
• SSL Certificate (Secure Sockets Layer Certificate): A digital certificate that provides authentication for a website and enables an encrypted connection. It’s a security protocol that creates a secure link between a website and a visitor’s browser.

T

• Target Audience: A specific group of consumers most likely to respond positively to your marketing campaigns. This group is defined by similar characteristics, such as demographic and psychographic traits.

U

• UI (User Interface): The point of interaction between the user and a digital device or product, like the touchscreen on your smartphone or the navigation on a website.
• User Persona: A semi-fictional character based on your target audience’s research and data, which represents the needs, goals, and observed behavior patterns of your target audience.
• UX (User Experience): Encompasses all aspects of the end-user’s interaction with the company, its services, and its products. The goal of UX design in business is to improve customer satisfaction and loyalty through the utility, ease of use, and pleasure provided in the interaction with a product.

V

• Viral Marketing: A business strategy that uses existing social networks to promote a product. Its name refers to how consumers spread information about a product with other people, much in the same way that a virus spreads from one person to another.

W

• Web Analytics: The measurement, collection, analysis, and reporting of web data for purposes of understanding and optimizing web usage.
• Web Hosting: A service that allows organizations and individuals to post a website or web page onto the Internet. A web host, or web hosting service provider, is a business that provides the technologies and services needed for the website or webpage to be viewed in the Internet.
• Web Standards: Guidelines established by the World Wide Web Consortium (W3C) for building and rendering web pages. They promote consistency in the design code that makes up a web page and ensure that it can be accessed by as many devices and browsers as possible.
• Wireframe: A visual guide that represents the skeletal framework of a website. It is used for planning a site’s structure and functionality.