‹ 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.

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.

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.

WAI is Web Accessibility Initiative was an effort by the World Wide Web Consortium (W3C) to develop a set of guidelines and standards for Web site developers to follow that is intended to make accessibility more universal for people with disabilities. may encounter difficulties when using computers generally, but also on the Web. Since people with disabilities often require non-standard devices and browsers, making websites more accessible also benefits a wide range of user agents and devices, including mobile devices, which have limited resources.

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.