Web design terms written in chalk on a blackboard
Web design terms written in chalk on a blackboard

The cornerstone of a great website design is communication. But the web design industry is rife with jargon, which can be a bit of a barrier between the designer and client. Without knowledge of basic web design terminology, it can be a challenge for business owners to clarify how they want their site to look and work—or to understand exactly what their designer is talking about.

To make the design process as productive as possible, it helps if everyone involved speaks the same language! Here are 40 important terms to know (in alphabetical order) when discussing your redesign with your web designer. How many do you already know?

Accessibility – Refers to web content that is accessible to people with disabilities. All websites should align with accessibility standards as outlined by the Americans with Disabilities Act (ADA).

ALT tag (ALT text) – Text alternative for images. The ALT tag is displayed as an image placeholder if the image cannot be loaded. ALT tags are also read by search engines and screen-reading software, and are important for SEO (search engine optimization) and ADA compliance.

Backend – The backend of a website is a very technical concept. However, when a designer refers to the backend of a site with a client, they simply mean the administration area of the website where various settings can be changed and content (like blog posts) can be updated. This admin area is typically accessed via a content management system (see below).

Booking engine integration – Adding your booking engine to your website so that your guests can make direct reservations online. Using HTML code generated by your booking engine software, your booking engine can be added to your website in a variety of formats, for example, via a book now button, a booking widget, an interactive availability calendar, or a combination of formats.

Browser Testing – Before your website goes live, it should be tested on a number of different browsers to ensure that it displays nicely on various browser versions and operating systems and on all devices. This is called browser testing.

Call to Action (CTA) – A button, link, banner or graphic that prompts website visitors to take action by clicking on it. For example, “Book Now,” “Sign Up” and “Read More” links/buttons.

Color scheme – The combination of two or more colors from the color wheel, for example complementary or triadic color schemes. The color scheme of your website design should reflect your brand’s personality and align with color theory principals.

 

Website Color Scheme

Content Management System – A program that is used to manage the content on your website. A content management system (CMS) allows users with little or no knowledge of coding to easily update content on their website, such as blog posts, other written copy and images.

Dashboard – The dashboard is the first screen you see when you log into the administration area (or content management system) of your WordPress site. The dashboard gives you a general overview of your website, from the theme you are using and the number of pages your website has, to recently published blog posts and visitor comments. From the dashboard, you can easily manage your site’s content and features, such as adding blog posts, plugins and widgets and even changing the theme.

Domain Name – The name of a website that people type into the browser, typically ending in .com, .net or .ca, for example. A domain name represents a physical point on the internet where a website is located.

Domain Name image

Favicon – A small icon, sometimes a company logo, used to identify your website on the browser tab, browser address bar, and in bookmarks. Favicons add legitimacy to your site, support your online branding, and help visitors identify which tab your website is open in when they have a bunch of tabs open.

Frontend – The face of your website; what people see and interact with when they visit your website on a computer or mobile device. When your designer talks about frontend design, they are talking about the graphic design and layout of your site, as well as the user experience.

Google Analytics – A widely-used platform to automatically track website visitors and behavior on your website, including the number of people that visit your website, where they are visiting from, which pages are the most popular, conversions, and a whole lot more. Analyzing your website traffic is important for measuring your website’s performance and identifying areas that can be improved.

Hero image – The banner image at the top of a webpage spanning the entire width of the page. A visually powerful, high-res image, the hero image is the first thing visitors see when they land on your homepage. Often incorporating text overlay and a call to action, the hero image should convey the essence of your brand and compel visitors to explore your website further. Full-screen hero images are a popular choice for hotel websites.

Hosting – A website is stored on a web server—a computer that is connected to the internet 24/7 and from which your site is available on the World Wide Web. Hosting refers to the service of providing storage (and accessibility) of your website on such a server.

Infinite/Parallax Scrolling – Infinite scrolling and parallax scrolling are technically two different concepts but are often used together. Infinite scrolling refers to a popular design trend where all website content is presented on a single scrolling page, rather than a collection of separate pages. Parallax scrolling is a design technique where foreground images move faster than background images during scrolling, creating the illusion of depth.

Image compression – Reducing the size of image files to increase page load speed. The longer your website takes to load, the more visitors you’ll lose. Image compression reduces the amount of data stored within the website, resulting in a faster website.

Infinite/Parallax scrolling – Infinite scrolling and parallax scrolling are technically two different concepts but are often used together. Infinite scrolling refers to a design trend where all website content is presented on a single scrolling page, rather than a collection of separate pages. Parallax scrolling is a design technique where foreground images move faster than background images during scrolling, creating the illusion of depth.

Interactivity – Refers to features of a website that respond to a user’s action, including forms, buttons, Google map embeds, click/swipe-through photo galleries, videos, chat widgets, and micro-animations that are triggered by scrolling or hovering. Interactivity is a crucial element of an engaging website that drives conversions.

JPEG – A digital image format saved using a lossy compression method. JPEG files are one of the most common formats for digital photos. They are easy to share online because images can be compressed into a much smaller file size. However, be aware that every time the image is made smaller or edited and saved, data from the image is deleted, resulting in a loss of image quality.

Lazy loading – A page-loading technique that delays the loading of images and video until needed by the user, i.e., as the user scrolls, instead of all at once, for a more efficient website.

Navigation – Navigational elements that direct visitors through your site. Navigation primarily refers to the navigation menu located in the header of the website or along one side (or a “hamburger” menu on mobile), but it also includes navigational links in the footer of the page and even CTA buttons and links.

Mark's Reef Navigation

Negative space / white space – The empty space around and between elements on a web page. Negative space, also known as white space, is not always white—it can be any color and can include background patterns and gradients. Negative space reduces visual clutter and helps bring attention to core design features, resulting in a more visually appealing and user-friendly experience.

Page speed – The amount of time it takes to load all content on a web page. If your website doesn’t load quickly (within 3 seconds), you risk high rates of abandonment. Fast-loading pages are key to a good user experience and SEO.

Plugins – Small programs that can be added to a website to expand functionality of the site. There are literally thousands of free and premium WordPress plugins that allow users to enhance their website in all sorts of ways (customer facing and administrative), for example, for adding photo galleries, contact forms and social icons, monitoring web visitor statistics, automating SEO, and automatically backing up site data. The list is endless; there’s a plugin for everything!

PNG – Like JPEG files, PNG files are a compressible, pixel-based digital image format. But unlike JPEGs, PNGs use lossless compression, which means no data is lost when the image file is edited and saved. No matter how many times a PNG file is resized, it won’t become blurry. But this also means PNG files are usually larger (data-wise) than JPEGs. PNG files support transparent backgrounds, which makes them a better choice for logos and other graphic design features.

Resolution – A measurement of the level of detail in an image, typically expressed as a horizontal x vertical measurement. A higher resolution indicates a larger file size, representing the amount of data—pixels or dots—within the image. DPI (dots per inch) is sometimes used to define the resolution of an image or monitor/screen, but is technically a printing term. PPI (pixels per inch) refers to the resolution of digital/web images and monitors. The higher the PPI/DPI, the higher the resolution or quality of the image.

Responsive Web Design – The technique of designing a website for optimal viewing on all screens, from desktops to smartphones. A responsive website features coding that allows it to automatically detect the device it is being viewed on and adapt layout and touchscreen functionality accordingly for an optimal user experience on all devices.

SEO – SEO stands for Search Engine Optimization and is the very important process of improving the organic (unpaid) ranking of your website on search engine result pages (SERPs) through the likes of Google, Yahoo and Bing. The higher your website ranks on SERPs, the more traffic it will receive. Various SEO tactics are used in the design of a website, including consistent domain names, keywords, quality backlinks, mobile friendliness and page speed.

Serif font & sans serif font – Serif fonts feature a small line (“serif”) at the end of the strokes that make up a letter, for example, Times New Roman font. San-serif refers to fonts that don’t have this line, for example, Helvetica. Serif fonts have a classical, old-fashioned quality about them, while sans-serif fonts are considered more modern. Fonts contribute to the feel of a website and are an important element of visual design.

Serif Font Examples

Sitemap – A sitemap is a kind of interactive table of contents for your website. A visual map or list of your website’s pages, typically organized in a hierarchical fashion, the sitemap helps website visitors find content on your site, and helps search engines to quickly index new and difficult-to-find pages. A sitemap is also an important planning tool when designing your website.

Slider – Sometimes called carousels or slideshows, sliders present images or other content, such as interactive marketing banners, in a slide show format that often spans the top of the homepage. Images can change automatically, like a slideshow, or users can navigate through them as they please. For hotel websites, sliders are effective at conveying the stay experience and are a popular alternative to a static hero image.

SSL certificate – SSL (Secure Sockets Layer) is a standard security protocol that creates a secure, encrypted connection between the website and the user’s web browser. If a website has an SSL certificate, it will display HTTPS or a padlock icon (depending on the browser) in the URL, signifying to users that the site is safe. HTTPS stands for Hyper Text Transfer Protocol Secure and is the secure version of HTTP.

Sticky navigation (sticky menu) – A navigation menu that stays visible and fixed to the same position on the screen as the user scrolls. Sticky menus are convenient for users because they don’t have to scroll back to the top of the page to view the menu.

Text overlay – Text that is superimposed over an image or video. Text overlays are popular for hero images, conveying the brand voice and compelling visitors to explore the website. They can even include a call to action like a “book now” button. Text overlays help a design stand out, as long as the words are easy to read.

Breezy Palms Text Overlay example

Theme – A customizable template for the presentation or style of a website, including colors, font styles, page layouts and blog style. Users can choose from different themes to find one that aligns with the desired look of their site. Themes can also be changed without altering the content or backend of the site. There are free themes and premium themes. Web designers can tweak or even create their own themes for further customization.

UX (User Experience) – The usability design of a website—including the likes of intuitive navigation, quality graphics and copywriting, and clear calls to action—for maximum user satisfaction.

Vector image – Unlike JPEG and PNG files, which use pixels to represent images, vector images use mathematical formulas that establish points on a grid (in other words, lines and shapes). This means that vector images can be scaled infinitely without a reduction in image clarity and quality.

Widget – Widgets allows you to add blocks of content and features to the sidebar, header and footer of your site. Different themes and plugins allow you to add different widgets—for listing recent blog posts, displaying your social media follower count, showing the current date, time, and weather, and adding search bars, etc.

WYSIWYG – Stands for “What You See Is What You Get.” The WYSIWYG editor in your CMS (content management system) allows you to edit and format website content without any knowledge of HTML. Using a visual editing menu (much like Microsoft Office or Google Docs), you can apply font styles, graphics, spacing, alignment, etc., to your content, which will be displayed in the same format on your website as it is in the WYSIWYG editor.

Zip file – ZIP is a file format that’s used to compress one or more files together into a single folder to reduce file size and make it easier and faster to send. Recipients can then extract the ZIP file and use the file(s) in the original format. If you have a bunch of files to send to your designer, they may ask you to send a ZIP file instead.

Here at World Web Technologies Inc.,  our focus on clear communication results in successful designs based on the wants and needs of the client, the right technology and our extensive experience designing for the hospitality industry. We welcome you to contact us for a free, no-obligation quote for your website design.