This helpful list of web design terms is excerpted from The Designer’s Web Handbook by Patrick McNeil (MyDesignShop.com). Before you dig deeper, it’s important to start by understanding these web design basics. When you’re ready to take your knowledge to the next level, visit HOWInteractiveDesign.com.
Accessibility: Accessibility is the consideration of a website’s usability for those with disabilities, whether they have visual, hearing or physical impairments. Special consideration must often be made to ensure a website can be used by the entirety of its audience.
Affiliate program: An affiliate program is an Internet marketing tool in which an e-commerce website offers a commission to people who refer customers. Most often an affiliate gets a percentage of sales based on traffic referred to the site. Tracking is most often done using specialized software where affiliates use links containing extra data for tracking purposes.
Alpha transparency: This is when an image supports partial transparency (as in the PNG file format). Each pixel of the image is assigned an alpha value, which represents its percentage of transparency. This percentage is multiplied by the color value of the pixel to determine its final color. This is incredibly important for placing images that require transparency over backgrounds.
Anchor: In a web page you can have links that point to other locations, or anchors, inside the current page. These are denoted by a pound symbol (#) in the link—a link such as http://yourdomain.com/page.html#chapter2 would point to the anchor named “chapter2” in the page.html file.
Application Programming Interface (API): An API is a way for programs to talk to each other. For example, Facebook has an API. It enables programmers to write code on their own website that can interact with Facebook directly.
ASP: ASP is an out-of-date server-side programming language created by Microsoft.
ASP.net: ASP.net is the modern version of ASP. It’s also a server-side programming language.
Bandwidth: The term bandwidth is often used in two ways. It can refer to the amount of information that can be transmitted at one time. For example, your home Internet access speed is restricted by the amount of bandwidth you purchase—a 1MB data line can transfer 1MB of data per second. Or bandwidth can refer to the total amount of data transfer your web host provides for your website per month. For example, your host might limit you to 4GB per month. This means if your website exceeds a total of 4GB of data sent out over the course of a month, your site might go down or you might incur additional charges.
Below the fold: Below the fold refers the part of a web page that appears below the initially viewable area on a user’s screen. So if a user’s screen is 1024 × 768, they will see about 600 pixels above the fold. It’s not the full 768p because you have to assume that part of the browser’s framework and menus occupy part of the screen. What’s above the fold is not a fixed number and can only be estimated. Common estimates for above-the-fold spaces include:
- 800 × 600: about 425 pixels above the fold
- 1024 × 768: about 600 pixels
- 1200 × 1024: about 850 pixels
- 1600 × 1200: about 1025 pixels
The terms above the fold and below the fold come from the newspaper industry—it refers to what’s visible to the reader when a newspaper is folded.
Black hat SEO: This is the practice of engaging in search engine optimization tactics that seek to trick search engines into ranking pages highly. These tactics often backfire, as search engines will flag pages they suspect as using black hat SEO and bury them in the results.
Bounce rate: The bounce rate of a site is the percentage of visitors that view only a single page on your site before leaving. Single-view visitors are often considered an indicator of a problem. After all, the goal is typically to get people to stay on your site a while, not get out as fast as they can.
Breadcrumb: Breadcrumbs are a navigational tool that show where the current page of a website falls within its overall hierarchy. The breadcrumb usually links to each page in the trail so users can easily jump to the pages. A breadcrumb might look like: Home > Print Publications > The Web Designer’s Idea Books > Volume 1.
Browser: A browser is the software you use to view web pages. On a desktop computer, this includes programs such as Internet Explorer, Firefox, Chrome and Safari. You even use a browser on your mobile device, even though it’s usually not as clear that it’s a separate piece of software.
Browser reset: Browsers render all website elements with predefined styles as set up by the browser manufacturers. Browser reset, a set of CSS codes within a website, undoes all of these styles so all browsers start from the same point. Web developers are split on the idea: Some see browser resets as an extra step that bloats the code, and others view it is a critical element.
CAPTCHA: CAPTCHA stands for Completely Automated Public Turing tests to tell Computers and Humans Apart. (That probably isn’t much help, but you’ll be a hit at parties.) In more practical terms, a CAPTCHA is a device used to detect if a human is completing an online form—like when you have to type a few bits of text from a scrambled image before you can submit a form. These little devices, despite how annoying they are, are incredibly important. Spammers love to target web forms and can use automated programs to fill out simple forms like a contact form over and over. A CAPTCHA can help protect you from getting hundreds or thousands of junk responses a day.
Cloud hosting: Cloud hosting is when multiple computers work together to create a single virtual computer. The advantage of this is that losing a single computer won’t take down the whole system. Enormous applications such as Google operate on a cloud-like structure. But any website can be hosted on the cloud and enjoy the flexibility to endure huge traffic spikes.
Content Management System (CMS): A CMS allows multiple users to collaborate and publish content with ease. Such systems make it possible for content creators, editors and managers to update the content of a site without having to go through a developer.
Conversion: A conversion is when a user completes the tasks that the website was created to lead to. Most frequently this refers to an online purchase, but it could also include things such as completing a form, watching a video, visiting a specific page, signing up for a newsletter or any other goal.
Conversion funnel: The conversion funnel is the process a user must go through in order to complete a conversion. For example, on an e-commerce site, a user must:
- View a product
- Add it to their cart and view the shopping cart page
- Go to the checkout page
- Land on the confirmation page
A user that does all these things will have completed the conversion funnel. (It’s referred to as a funnel because more people start it than finish it.)
Conversion rate: The conversion rate of a site is the percentage of visitors that complete a conversion as compared to the total number of site visitors. The higher the conversion rate, the better.
CSS (Cascading Style Sheets): CSS is used to define the presentation of HTML, such as color, fonts and layout. With targeted CSS, the same HTML can be styled differently based on the output method (such as desktop computers, mobile or tablets).
CSS3: CSS3 is the third set of revisions to the CSS standards.
CSS framework: A CSS framework is a collection of pre-written CSS intended to speed up the development process. Frameworks often include pre-defined styles for things such as layout structures, grid systems, typography and browser resets.
Database: A database is used to organize data so it can be searched using server-side programming. Dynamic sites, such as e-commerce websites, store content in a database and then output the data as HTML.
Dedicated server: A dedicated server is a computer that’s 100 percent dedicated to running your website(s). Large websites can pay for a full server to accommodate large amounts of traffic or specific components that must be installed on the server.
Deprecated: Software features or standards that are deprecated are no longer a part of the current specifications. For example, certain HTML tags have been deprecated as they are replaced with different tags. Deprecated HTML tags typically still work but are no longer the preferred tags.
DNS (Domain Name System): DNS is a naming system for computers and servers used to translate domain names into IP addresses. Just as a GPS unit must translate an address into latitude and longitude, on the Internet, a computer uses DNS to look up the website’s IP address.
Doctype: Doctype is short for Document Type Declaration and it tells a user’s web browser what type of document it’s viewing. More specifically, it associates the page with a specific Document Type Definition that should be used to render the page.
Domain name: Domain names are used to define the location of a website on the Internet: www.examplesite.com. Domain names point to IP addresses, which specify the location of a server on the Internet. Domain names are the virtual-world equivalent to mailing addresses, which can be translated to latitude and longitude. Domain names make Internet addresses readable by humans.
DPI (Dots Per Inch): DPI refers to the number of dots per inch—it applies to printed mediums, not the web. (See also Pixel.)
Drupal: This is a free, open-source content management system and framework.
Dynamic web page: Websites once had to be coded page by page (these are referred to as “static” pages). Dynamic websites automatically update content within the page structure.
Elastic design: A layout using elastic design bases its size on a relative unit rather than pixels.
Embedded styles: Embedded styles are CSS style definitions embedded in an individual web page instead of being stored in a separate and global file.
Entry page: The entry page of a site is the first one a user views. While the home page is a common entry point, users may enter anywhere in the site. The term entry page is most frequently used in site analytics.
Exit page: The exit page is the last page a user views on your site. Using analytics to determine exit pages tells you which pages of your site are losing visitors.
Extensible Markup Language: See XML.
External style sheet: An external style sheet file, which contains nothing but CSS, is typically used to create the styles for an entire website. This way the same file can be included in every page, allowing the styles to universally apply to the site.
Favicon: A favicon is a small image, usually 16 × 16 pixels, associated with a website. These images are displayed in many browsers’ tabs or bars, and are often connected to bookmarks as well.
Fixed-width layout: A fixed-width layout stays the same regardless of the size of a user’s browser. If users’ screens or browsers are too small, they’ll have to scroll to see the whole site. For many designs, fixed-width layouts are necessary in order to maintain control over the layout of the page in a browser.
FTP (File Transfer Protocol): This is a way to transfer files over a network.
GIF (Graphics Interchange Format): This type of image is ideal for files that have few colors. A GIF file cannot have more than 256 colors in it, which makes it ideal for structural images that are based on solid colors. This format doesn’t serve gradients and photographs well—see JPEG instead. GIFs can also contain multiple frames to create animations, a feature that has been used for both good and evil.
Graceful degradation: Also called fault-tolerant design, graceful degradation allows users with older browsers or operating systems to still access content.
Hexadecimal: Hex numbers are a base-16 number used for representing colors in web pages.
HTML (Hyper Text Markup Language): HTML is a language used to describe content. Tags—denoted by < and > symbols—wrap around content to establish its purpose.
HTML5: HTML5 is the fifth major revision to the HTML specification. It’s built on the previous versions by deprecating some tags and adding others.
HTTP (Hypertext Transfer Protocol): HTTP is the protocol used to transfer data online. HTTP tells the user’s browser how it’s going to transfer information.
HTTPS (Hypertext Transfer Protocol over SSL): HTTPS is a secure, encrypted version of basic HTTP. For example, the credit card information you enter on an e-commerce site using HTTPS is encrypted before being transferred.
Image map: When an image on the web is designated as a hyperlink, you can click anywhere on the entire image to go to a single URL. But with an image map, you can point different areas of the image to different URLs.
Impression: An impression is an advertising term that refers to each time an ad unit (such as an image or a hyperlink) is displayed for a user to see (or “served”).
Inbound link: An inbound link is any link from an external website pointing to your site.
Inline styles: Inline styles are placed in the HTML of a file directly on the elements as they appear in the page. It doesn’t allow for any global changes to be made.
IP address: An IP address is a series of numbers separated by periods—such as 188.8.131.52—that’s used to identify a computer on the Internet. Domain names are directed to IP addresses through DNS.
JPEG/JPG: JPEG is a file format suited for photographs. JPEGs can contain a range of compression values, an optimal way to compress images for display online.
LAMP (Linux, Apache, MySQL and PHP): LAMP is a web development setup that accounts for the operating system (Linux), web server (Apache), database (MySQL) and scripting language (PHP), all the elements required to run a website. There are numerous options that can replace each of these individual elements, but the LAMP combination is pretty common and can run WordPress sites.
Liquid layout: A liquid layout is one that sizes automatically to fill the entire browser space. Such layouts require a great deal of flexibility, as things shift and move based on the width of the user’s screen.
Metadata: Metadata is data used to describe other data. On the web, it most often refers to data in the header of a web page (an invisible part of the page structure), which is used to describe the contents of the web page. Search engines and other programs use metadata to identify the contents of a page. Google has publicly stated metadata is no longer used to rank pages, so it’s now marginally important for SEO purposes.
Meta tag: A meta tag is the HTML tag used to store metadata in a web page.
MIME type (Multipurpose Internet Mail Extensions): The MIME type for a file tells the user’s browser what application type should be used to display a file being transferred, such as an audio file or video file.
MySQL: MySQL is a relational database management system that runs on web servers and stores numerous databases. MySQL (pronounced “my sequel”) is necessary to run CMS tools such as WordPress and Drupal.
Natural search: A natural search (or organic search) is a search that produces results ranked based on the content they contain, in contrast to paid searches, which contain paid results.
Non-breaking space: A non-breaking space is a blank space character used in HTML to occupy space.
Open-source software: This is freely distributed software whose code is open to the public.
Organic search: See Natural search.
Outbound link: An outbound link is a hyperlink that takes users away from your site. (See also Inbound link.)
Pageview: Analytics tracks the number of times a specific web page was viewed. A pageview is registered each time a user loads the page in their browser.
Permalink: Permalink is short for permanent link. The permalink provides a permanent URL that can be used to find a blog post or web page.
PHP: PHP is a common server-side programming language. It is commonly associated with open-source software, such as WordPress and Drupal.
Pixel: A pixel is the smallest individual dot on a computer screen. The resolution of a screen is measured in PPI, or pixels per inch.
PNG (Portable Network Graphics): The PNG is very similar to the GIF, but it supports far more colors. Its most important feature in terms of web development is its support for alpha transparency.
Progressive enhancement: Progressive enhancement is a way of building web pages where the web page uses more and more features as the user’s browser supports it. The most modern browser will use features that are simply ignored in older ones. Progressive enhancement is the reverse perspective of graceful degradation.
Quirks mode: Your web browser, in quirks mode, attempts to provide the most backwards-compatible environment for displaying websites. It doesn’t strictly adhere to the most current specifications and instead accommodates for as many coding approaches as possible.
Registrar: A domain registrar is a company authorized to sell domain names.
Responsive web design: Responsive web design is an approach to building websites in which the page is built to adapt to or respond to the user’s environment. A responsive site will render differently depending on the user’s browser size and if they are using a tablet or smartphone.
RGB (Red, Green & Blue): RGB is a color model used on digital screens where red, green and blue dots are combined to create any color required.
RSS (Really Simple Syndication): RSS is data structured as XML and is used to transmit web content across the Internet. Programs use RSS to update and display data from external sources.
Search Engine Optimization (SEO): SEO is the process of optimizing web pages so that their appeal to search engines is maximized.
Selector: In CSS, selectors are used to identify the target of the styles being written. For example, you could use the selector “p” to target all paragraph elements. Very complex rules are available for targeting various HTML elements in a page.
Semantic markup: Semantic markup is HTML that’s been written so the tags accurately describe the data they contain.
Server-side code: Server-side code is run on the server before the HTML is sent to the user’s computer. Server-side code is used to render HTML dynamically: When the user requests a web page, a program on the server that stores the web files runs and generates the HTML before sending it to the user. Common server-side languages include PHP, Ruby, Java and ASP.net.
Shared hosting: Shared hosting is a web hosting option where many sites are stored on a single server. Most discount hosting plans are based on shared hosting.
SOAP (Simple Object Access Protocol): SOAP is an XML-based protocol used by computer programs to interface with other programs across the Internet.
SSL (Secure Socket Layer): SSL is a protocol used for transferring data and it’s a critical component for securing web content as it’s transmitted. Combined with HTTP, you get HTTPS.
Subdomain: A subdomain is an extension of a domain name that can respond to a distinct IP address. For example, if your domain name is your domain.com, a possible subdomain would be extra.yourdomain.com. This allows you to set up multiple sites from a single domain name.
TLD (Top Level Domain): A TLD is the last part of a domain name. This includes .com, .edu and .org, for example. Each country also has a TLD, such as .us for the United States, and .uk for the United Kingdom.
URL (Uniform Resource Locator): A URL is the address of a document on the Internet. For example, http://www.yourdomain.com/some-file.html.
Usability: Usability is the process of making a website easy to use by its visitors. Usability can be measured by analyzing conversion rates.
User agent: The term user agent most commonly refers to web browsers. It can also refer to other applications that retrieve content from web servers, such as screen readers and spiders.
Validate: Validating code (such as HTML, CSS and XML) is to check it against a standard to confirm it follows the rules established for the language.
W3C (World Wide Web Consortium): This organization sets the standards used online, such as HTML and CSS.
White hat SEO: White hat SEO is the legitimate and honest use of targeted content to achieve natural search engine results.
WYSIWYG (What You See Is What You Get): Any interface or system that allows you to edit content while previewing it is described as wysiwyg.
XHTML (Extensible HTML): XHTML is essentially HTML version 4.0. It can also be described as the XML version of HTML.
XML (Extensible Markup Language): XML is a way to store data in which you can custom define any tags that you need. XML looks a lot like HTML, but it’s meant to store and transfer data that is ultimately translated into HTML for display online.
|For more resources about web desgin, visit My Design Shop.
The Designer’s Web Handbook
In The Designer’s Web Handbook, web guru Patrick McNeil teaches you the fundamentals of great web design. He explains how to make a website not only look good, but work as well. Too many designer’s are unaware of the differences they’ll face when designing for the web. Things like efficient navigation and building for easy updates or changes may be neglected in the planning process. This book will help you avoid making those costly mistakes so that your designs work the way you want them to.