‹ Blog / FL1

The Web Design Jargon Buster

Sep 15th 2016

Ever wanted to know the difference between a Widget and a Wireframe, a CTA from a CSS? With our Web Design Jargon Buster, your wait is finally over...

FL1 Digital – Web Design Jargon Buster

There are lots of different types of Accessibility in the Web Design world including WAI, mobile accessibility and browser Accessibility. Typically Accessibility refers to the process of ensuring your site is accessible and usable as possible by different users with different needs, using different browsers and devices.

Banner Images
Banners are typically the large introduction images found as the heading of the home page of a website. Typically, most modern website will have Banner Images (or Hero Images) that scroll to present different messages or key selling points.

Burger Menu
Don’t worry, you’re not about to order a Big Mac and fries, a burger menu, also known as a hamburger menu, is a compact and often icon-based navigation element commonly used on websites and mobile apps. It consists of three horizontal lines stacked on top of each other, resembling a hamburger. When clicked or tapped, the burger menu expands to reveal a hidden navigation menu, offering links to various sections or pages of the website. This design approach is frequently employed to save screen space on smaller devices or to declutter the interface of a web page, providing users with easy access to navigation options without overwhelming the visual layout.

Call to Action (CTA)
The Call to Action is often the ultimate goal of a web page. For example, on a shop, the Call to Action is “Buy Now”, on many other sites “Contact Us” or “Quick Enquiry”. The Call to Action can often take the form of a prominent button or form to be completed.

Cascading Style Sheets or (CSS) as are set of rules that handle the positioning, behavioural and aesthetic elements of a Web Page. Modern web pages separate content (words and pictures) from fonts, styles and colours, using CSS to apply the common rule set over all web pages to present a consistent look and feel throughout the site. This is by comparison to older web pages where styles, fonts and colours had to be written in explicitly to every single page individually on a website.

Ever looked to left the of the web address in your browser to see a little custom icon?
When you save that page to your Favourites, that icon is used too? Well that’s a favicon. This is a small 32 x 32 pixel graphic that web pages can optionally have that apply your branding to the site.

A term often used by Web Designers to describe a flat graphic or graphical representation of a web page. Flats are often used when creating conceptual designs of pages before the actual page is built.

Font Icons
Font icons could be described as a modern version of the Wingdings Font but for the web. Fonticons are pre-designed iconised graphics that can used within web pages. For example of a Fonticon framework visit: http://ionicons.com/

Footer Menus
Traditionally many websites had a main menu or navigation at the top of the page, occasionally at the left-hand side, and sometimes a single navigation at the bottom of the page.

These days with mobile optimised websites, it’s common to have several menus at the bottom (or Footer) of the website. These are referred to as Footer Menus.

Hero image
See Banner Images

The basic principle of Web hosting, is simple; it’s a place where your web pages reside that’s accessible over the internet.

Do you need it, in short, yes, if you’d like your website to be accessed globally and reliably?

For more information, visit: The Beginners Guide to Web Hosting

HTML (Hyper Text Mark-up Language) is a semantic language comprising of commands (or Tags) that instruct the interpreting Web Browser how to present or render a web page.

HTML is used within most Microsoft Office applications, web pages, emails and is widely acknowledged as the Language of the Web.

Typical variants of HTML are HTML4.0 and more modern HTML 5.0 that have native support for numerous animation features and video.

Other variations are XHTML which is the most common standard for web pages.

Javascript (of JScript) is a light weight programming language that in this context is used within web pages to add dynamic functionality. Examples of where Javascript is used are: scrolling elements within web pages, calculators, field data validators, pop-up message boxes and scrollable menus.

Mega Menu
Rather than use a simple navigation structure, many more complex use a Mega Menu where a menu can comprise categories or departments with several series of links beneath them.
http://www.johnlewis.com/ offers an excellent example of a complex Mega Menu.

Meta Tags
Meta tags are hidden HTML tags that sit at the top of a web page’s HTML source code.
These are not seen by the website’s user, but describe the page’s content to any service wishing to read and store the contents of the page, the most common being a Search Engine. Meta tags define information such as:

  • A description of the page
  • The age rating and certification of the page
  • Whether the page is allowed to be stored (indexed) by a Search Engine
  • How often a page can be visited by a Search Engine
  • The owner of the web page
  • Key words that the page should be ranked under (not used by most Search Engines)

Parallax Scrolling
Parallax is very fashionable currently, giving the effect of having the page built with several layers all which scroll at different speeds.

A plug-in is an extension for website platforms such as WordPress. Plug-ins alter or add functionality to the site. Examples of plug-ins for WordPress extend from Akismet which will filter fake website comments, through to BuddyPress which will extend your site to be a feature-rich Social Network like Facebook.

Progress Web Application (PWA)
A Progressive Web App (PWA) is a type of web application that combines the best features of both websites and native mobile apps. PWAs are built using web technologies like HTML, CSS, and JavaScript, but they offer a more app-like experience to users. They are designed to be fast, responsive, and able to work offline or with limited connectivity. PWAs use service workers, which are background scripts, to cache content and enable functionalities like offline access and push notifications. This technology allows PWAs to provide a seamless user experience across various devices and platforms, resembling the performance and functionality of traditional native apps. PWAs can be accessed through web browsers, and they can be installed on a user’s device, appearing on the home screen, making them an attractive option for businesses looking to engage users across different channels while maintaining a consistent experience.

A Responsive site responds to the screen size or device that’s requesting the web page. Responsive sites are desirable in order for a site to render on both traditional browsers, tablets and mobiles.

For more information visit Your Website and Mobile Phones, what you need to know

SEO Friendly
Search Engines such as Google expect to be able to read, understand and ultimately rank your site’s pages based on what it finds and the context it derives from what it finds.

Building web pages with understanding of how search engines read and need to interpret a site is ensuring a site is SEO Friendly.

Templates are pre-written web pages that have elements dynamically replaced. With modern websites, Templates are used to define the functionality of a type of page, and to display the web page using that template in a uniform manner.

Online shops use templates extensively where thousands of products are displayed in a uniform manger through the use of Templates.

The Fold
Since the growth of modern websites designed for Tablets and Mobiles, “The Fold” has lost its relevance as a key design consideration.

Dating back to its origins in the print world, the Fold in the Web world often referred to the first visible screen area of a web page. For example, when the home page is first loaded, anything below the initial visible area of the screen, would be considered “Below the fold”.

With modern website publishing platforms, A Theme is a collection of Web Page Templates, CSS, Javascript and HTML combined in to one overall Theme. The Theme is the entire look, feel and functionality. Themes have become more notable with modern web page publishing packages, where pre-designed Themes can be used.

Terms used to describe User eXperience (UX) and User Interface.

While User Experience is a conglomeration of tasks focused on optimisation of a product for effective and enjoyable use; User Interface Design is its compliment, the look and feel, the presentation and interactivity of a product.

The Web Accessibility Initiative (WAI) and the Web Content Accessibility Guidelines (WCAG) are crucial frameworks developed to ensure digital inclusivity for people with disabilities. Led by the World Wide Web Consortium (W3C), WAI focuses on promoting accessibility in web technologies by establishing guidelines and resources for developers, designers, and content creators. WCAG, a key component of WAI, outlines specific recommendations for creating web content that is perceivable, operable, understandable, and robust for all users, regardless of their abilities. These guidelines encompass various aspects such as text alternatives for non-text content, keyboard navigability, color contrast, and compatibility with assistive technologies. WCAG’s four principles – Perceivable, Operable, Understandable, and Robust (POUR) – guide the creation of accessible digital content, ensuring that websites and applications are usable by a wide range of individuals, including those with visual, auditory, cognitive, and motor impairments. Adhering to WAI and WCAG principles fosters a more inclusive online environment and helps organizations meet legal and ethical obligations regarding accessibility.

A Wireframe can either mean a rough structure, framework or plan for a web page or a static web page in its production form used for demonstrative purposes but with little or no functionality.