Now that web design has been around for a while, a sophisticated jargon has emerged. You’ll be bombarded with questions like, “What content management system do you want to use?” “Do you want that above the fold or below the fold?” “Do you want a fixed layout?” and “What web hosting do you want to use?” the moment you set foot in the world of web design. leaving you to ponder its significance. When you’re first getting started in the field of web design, it can be difficult to decipher all the lingo and terms that are used.
The term “web design” encompasses a wide range of professions, from coders to interface designers to artists who craft the visual style of your site. In today’s world, many people work in web design.
If you take the time to familiarise yourself with even a small subset of the acronyms and jargon words used in web design, you’ll find it much easier to communicate with your designer and developer and to grasp the inner workings of your own website. Knowing the most common, and often misunderstood, terms in web design and development can help whether you’re hiring help or doing it yourself.
- Web design definitions
- Front end website anatomy
- Back end website anatomy
- Technical web and internet terms
- Web development terminology
Web design definitions
Accessibility
Today, usability and accessibility are paramount when creating a website. It refers to how easy it is for people with disabilities, such as hearing or vision loss, to use your website. That should be kept in mind before and during the website’s development. If you aren’t sure where to begin when it comes to creating an accessible web design, consider these six guidelines.
Below the fold (and above the fold)
Newspapers are where we first hear the phrases “below the fold” and “above the fold.” Where the newspaper is folded is called the “fold.” The terms “above” and “below” indicate whether or not the content in question appears above or below the fold, respectively. Information that is above the fold (ATF) is more accessible and visible than that which is below the fold (BTF), which is typically defined as the point at which scrolling becomes necessary (BTF).
Elastic (layout)
Elastic layouts are a method of designing websites in which the distances and sizes between elements and their placement on the page are described in terms of percentages rather than fixed values. This means that websites are more flexible, both in terms of accommodating individual users’ preferences for things like font size and line spacing and in terms of tailoring their presentation to the screen sizes of various mobile devices.
Elastic layouts are now an integral part of responsive design strategies, but long before responsive design was even conceived of, they provided a straightforward method of making websites flexible.
Ex
The lowercase letter “x” in a font is the basis for the Ex, a standardised unit of measurement.
Fixed width (layout)
With a fixed width layout, the designer chooses the exact dimensions of the page and the precise placement of its components. This provides greater creative freedom for designers but reduces responsiveness to different screen sizes compared to an elastic layout.
Hexadecimal
Hexadecimal numbers, also referred to simply as “hex,” are a color-coding system that uses a numeric value expressed in the form of a string of 16 characters to specify hues. You can create a hexadecimal number by combining the digits 0 through 9 with the letters A through F. Three sets of hexadecimal numbers are used to define each colour. The first set of digits or letters represents the colour red, the second set the colour green, and the third set the colour blue.
Infinite scrolling
Infinite scrolling is when the new content loads as you continue to scroll. This creates a “infinite,” never-ending scroll. Social media platforms such as Facebook, Pinterest, and Twitter are prime examples of such content.
Parallax scrolling
The use of this scrolling technique adds a sense of depth to the overall layout of the website. The website’s components will appear to be at varying distances and to be moving at varying speeds as the user scrolls through the page. As a result, a flat website can give the impression of having depth and distance.
Resolution
The resolution of a screen is defined by the total number of visible pixels. As far as web design goes, this is the accepted means of determining how big an image should be. Higher pixel densities indicate higher image quality and are typically expressed in terms of pixels per inch.
Responsive / mobile-friendly / mobile optimized
In 2020, mobile devices will account for more than half of all internet usage. As a result, it’s more crucial than ever before for a site to render properly across all devices, not just desktop computers. When a website is designed and developed with mobile devices in mind, it is said to be responsive, mobile-friendly, or mobile-optimized.
Usability
When talking about websites, usability refers to how easy it is for your target audience to use your site. Your site’s first-time visitors should be able to navigate it without hitting any major roadblocks or becoming frustrated enough to seek assistance. A great website can’t be built without first understanding the principles of usability.
UX (user research) / UI (user interface)
Work in user interface and user experience design is done to make things easier for the user. To understand how UX and UI complement one another, it’s helpful to have a firm grasp on their respective nuances.
User experience, or UX, research considers the entire user journey through a website. The purpose is to make it easier for users to accomplish their goals while interacting with the site.
The term “user interface” (or “UI”) refers to the layout and design of a website’s navigational and informational elements, such as its buttons, icons, and typography. The point is to upgrade the website’s aesthetics and performance.
Front end website anatomy
Breadcrumb
Breadcrumbs are used to show users where they’ve been in a website, how they got there, and how to get back to the homepage. It typically looks like this: Home > Category > Year > Month > Post.
Favicon
A favicon is a small icon used to represent a website in a browser’s tab bar. They are typically saved as an.ico,.gif, or.png file, and have a resolution of 16 by 16 pixels (extremely small). If the image is the right size and format, you can use it as a favicon.
Focal point
The part of a web page that captures the viewer’s attention immediately upon loading the page is called the focal point. In order to draw the reader’s attention to the most crucial element on the page, designers will spend considerable time crafting a focal point that is both visually appealing and effective. This guarantees that as many people as possible will see it.
Front end
Everything a user encounters upon landing on your website, including images, text, and pages. It’s the main reason visitors stick around a website.
Hamburger icon
The menu button in most modern software looks like three parallel lines (or “hamburgers”). The conventional menu bars have been replaced by a single icon and represented by three horizontal bars (hence the name “hamburger”).
Landing page
In most cases, this will be the very first page that new site visitors encounter. In order to get the visitor to do something, many websites use a “landing page” (sharing their email address, or a page specialised for a product for instance). If you want to increase conversions, you need to put in some serious effort into optimising your landing page.
Navigation
One of the most crucial aspects of any website is its navigation system, which allows users to easily navigate between its various components. That’s why it’s crucial to understand the fundamentals of how to move around a website. The menus on most websites are the most glaring example of navigation in action. However, you should also pay close attention to the structure of the website and the interlinking of its pages. The addition of these features can also greatly aid site visitors in getting around the site.
Back end website anatomy
Back end
This is the behind-the-scenes machinery that keeps your website running smoothly, despite the fact that no one ever sees it. While there are a variety of back ends to choose from, they all share the same core components: applications, data architecture, and your content management system.
CMS
A Content Management System (CMS) is a back-end tool for administering your website’s content, including creating and managing users, comments, and more. You have used a content management system, or CMS, if you have ever created a website with WordPress. Because it abstracts away so much of the underlying HTML and CSS, a CMS simplifies both the design and development of a website.
Ecommerce
Similarly to how “email” refers to “electronic mail,” “ecommerce” means “electronic commerce.” Adding an online store to your website is the standard practise, as it centralises product listings, sales, and information about your customers.
HTTP / HTTPS
This infrastructure manages the flow of information among clients, servers, and web applications. It specifies the required format for transmitting data.
In order to establish secure connections over Secure Sockets Layer (SSL), HTTP has been extended with the “S” protocol, or “HT (Secure Socket Layer). Data exchange in this manner is significantly safer than using email. Numerous up-to-date browsers will display a warning if you try to access a website via plain HTTP rather than the more secure HTTPS.
SSL certificates, which are required for HTTPS, can be purchased by website owners from a variety of vendors. Your site’s security and your customers’ confidence in you will both increase once you implement this.
Plug-in
A supplementary programme that runs in addition to your primary site and adds features and security. You can automate your blog posts and even your customer lead management with the help of plugins for the most popular content management systems.
Template
Like with documents and images, web designers can use templates to ensure all of their pages look the same. Web page layout and design can be maintained with relative ease by using the templates provided by the majority of CMS platforms.
Technical web and internet terms
Anchor text
The text that contains a hyperlink is called “anchor text,” and it can be a phrase or just a few words. Take a look at this one: The Meaning of Anchor Text. A page’s performance in search engine results can be greatly improved by using appropriate anchor text.
Backlink
These are links that bring people to your site from elsewhere online. A backlink occurs when another website uses yours as a resource link. Having multiple backlinks from reputable sites will increase your site’s visibility, which is why they are so crucial to improving your search rankings.
Bandwidth
The amount of data that can be transmitted or received in a given time frame is known as bandwidth, a term with a wide range of applications. As an example, it can be used to describe your internet speed, which is typically expressed in kilobits per second (kbs). However, it is sometimes used to refer to the monthly data allowance included in a web hosting plan.
Cache
What is stored in a web browser’s cache is temporary information. Because the page is being loaded from the user’s local memory, it will load much more quickly on the next visit.
DNS
The abbreviation “DNS” means “Domain Name System.” To determine the location of a website, browsers use this addressing system. When you type 99designs.com into a browser, it consults a “DNS table” to determine the proper numerical representation of this human-readable address for the computer’s purposes (i.e. made of numbers). The Domain Name System (DNS) is a database that stores the locations of all the websites on the internet so that your web browser can access them.
Domain
You’ve got a website with the following name. Domains can be purchased from a wide variety of vendors. They have a maximum length of 63 characters. In this regard, our domain name is 99designs.com.
FTP
The term “file transfer protocol” (or “FTP”) refers to a method by which information can be moved between local storage (such as on your computer) and a web server. One must instal a small programme known as an FTP client in order to use FTP.
Permalink
You can change the structure of your site around a permanent link, but the address you give it will always lead to the same blog post or page. Blog posts are a great way to increase traffic to your site, but if you ever redesign your site or switch domain names, you’ll be glad to know that you won’t have to go through the trouble of updating the links individually.
URL
A location identifier that leads to a specific webpage or file.
Web hosting
To put it simply, a web host is the business whose servers host your website. It’s important to shop around for a web host because their service quality can vary greatly, as we discuss in our article on the definition of web hosting. A reliable web host will not only guarantee 99.9 percent uptime, but also provide you with security and performance optimization tools.
Web Server
Your website will not exist apart from a web server. Your web host probably has it installed on one of their servers, though you could also set up your own.
Web development terminology
CSS
Cascading Style Sheets (CSS) are as fundamental to a website as the hypertext markup language (HTML). About a decade ago, the HTML code itself determined how a webpage looked, down to the smallest detail, such as the size of its titles and whether or not its images had borders. As a result, updating the style required going through each page element and manually altering the code.
The use of CSS makes everything much simpler. One or more CSS files define the visual aspects of a page, such as the appearance of titles and the presentation of images. These instruct a web browser on how to display a page from a particular domain. Thus, the layout of entire websites can be modified by altering a single line of code.
DHTML
DHTML refers to the Dynamic HyperText Markup Language. The term refers to a language that combines several web design languages (such as HTML, JavaScript, and CSS) into a single, powerful language for web development. The majority of today’s web developers will use this method to build your site.
Doctype
What kind of HTML and what version is being used by a web page is described by its “doctype” in HTML. Incorrect values cause browsers to report security issues with the page.
EM
The font’s size in relation to the “parent” font on the page is expressed in em. Using the em unit, you can specify the relative size of a font (or other element) relative to its parent element: 1em means the same size as the parent element, 2em means twice as large, and so on.
Embedded style
Even though Cascading Style Sheets (CSS; see above) can be used to describe the format of multiple pages all at once, there are times when you need to change a style on a single page. When this occurs, an embedded style is employed. Embedded styles are snippets of CSS code placed in a page’s header to modify the look of specific elements rather than the entire site’s layout.
Font family / style / weight
Due to inconsistencies between browsers, it is not uncommon for web designers and developers to avoid using certain fonts. As a result, rather than specifying a single font for use, CSS documents typically define the font to be employed in terms of the font family to which it belongs. In addition to this definition, the CSS document will also specify the font style (italic, underlined, etc.) and the font weight (bold, light, etc.).
HTML
HTML, or HyperText Markup Language, is the language used to create web pages. HTML, which was designed to be as simple to write as possible, is used to create all web pages. The internet is rife with HTML coding tutorials; you might be surprised at how much you can accomplish with just a few hours of practise.
MetaData
The header information of a website is called “MetaData.” The information is accessible to your browser, but it is hidden from view until you view the page’s source code.
Open Source
Free and easily customizable, open source software is maintained by its user community. Software that is owned and maintained by a single company is known as proprietary software. Open source software is used by most web developers at least occasionally because it is cheaper and, in some cases, more secure. Most modern web developers use containers written in open source languages to reduce the risk of security leaks.
Staging
Creating a nearly-final copy of a website for testing purposes before releasing the live version is known as “staging.” Before a website goes live, most developers will put it through its paces in a staging environment to make sure everything is in order. Furthermore, the staging site is typically used for making significant changes to a website before they are implemented on the live site.
Valid
A valid web page is one that does not have any errors in its coding. This generally refers to websites that use HTML that is in line with the guidelines published by the World Wide Web Consortium (W3C).
XML
Extensible Markup Language is the acronym for this format. Because of its role as a “meta language” that translates the building blocks of one language into another, XML is an integral part of web design. In other words, XML allows for a wide variety of languages to work together in the creation of a single website.
A final word
You don’t have to be an expert in all of these web design terms and definitions before you begin designing a website, on your own or with assistance. Learning to design a website is an ongoing process, and the best websites are iterative works of art that are refined over time.
However, if you’re just starting out in the field of web design, it can be extremely beneficial to have a guide to help you navigate the sometimes convoluted landscape. We have expert web designers on staff who can show you the ropes.
