Web Design Terminology You Should Know

Web Design Terminology You Should Know

ALT TAGS
It is the biggest part of what web design incorporates. It means, no matter who your users are, they can access your site and it is not just about making it user friendly, it means the hearing or visually impaired can use your site using small things such as alt tags on images to help them along. For the visually or hearing fit user, alt tags (alt = alternative) aren’t something we use, but for a visually impaired user, they use a tool on their phone, laptop or tablet that reads your website, and as it moves through the content, it lets them know what each graphic, object, photo, button etc is. For example, if you have a beautiful picture of Ballybunnion beach on your homepage, the alt tag reads aloud telling the user ‘this is a picture of Ballybunnion beach at sunset”. HEXADECIMAL VALUES Also known as a HEX, they relate to colors and are based on a three or six digit value. For example, White is #ffffff and Black is #000000. To the naked eye, the user doesn’t know that the on-screen colours are any different from those on a word document, but to a designer who has been handed a colour palette to work from, they can find the matching colour using tools such as Photoshop to capture the hex code and implement it on your site.

SCROLLING

Generally, we have two types, infinite and parallax.

INFINITE

This is when the content loads as you scroll. It gives that ‘never ending story’ feeling. This is the basis on which Facebook, Instagram, Pinterest etc.

PARALLAX

This is a more smooth method of viewing content. As the user moves down the page, items react. For example, as you move down to a display of shop categories, the buttons may have a shadow behind them, or change colour as you hover over them, giving a sense of depth and distance and taking away that ‘forever’ feeling.

RESOLUTION

Unlike New Years Day, resolution means something more worthwhile. Resolution refers to the number of pixels displayed on a screen. It is the standard method used to specify the size of images and refers to the quality of the image displayed. The higher the resolution the better quality the image is. PIXELS A pixel (pix = picture, el = element), is the smallest adjustable point of an image. Each pixel can take on properties in excess of one million different colours and when grouped together, they portray an unlimited spectrum of colours. Most design measures are created using pixels including the size of objects on-screen, and are again relevant in graphic design, particularly Photoshop. SEO (Search Engine Optimization) From 2020 greater than half of web traffic is captured using mobile devices. This means, mobile friendly is a must and also refers to how that site is ‘found’ online. Optimising for Search Engines isn’t a one click, abracadabra fix, it is a number of steps and every designer will have their own methods. SEO helps sites barter against 1.13 billion other websites on the world wide web with the end goal being page one!

RESPONSIVE

Responsive design refers to the reaction of your site when moving between desktop, laptop, tablet and smartphone. Think of this as an elastic band. When stretched for a desktop or laptop, it is pulled to its maximum width, on tablet that elastic band has a smaller and slightly relaxed circumference, but all the data is within it, on mobile typically the elastic band is completely relaxed and within that space all the information will still display, but in a more vertical manner.

USER EXPERIENCE VS USER INTERFACE You may have come across these as UI and UX, so let me tell you a little about them. User Experience – UX Also known as User Research involves all aspects of user interaction. From the second your site loads, to the time the user exists your site. The goal is to improve the interaction and the quality of what is presented between the user and your site. User Interface – UI Focuses heavily on the visual and interactive elements on our site for example buttons, roll overs, hover over effects, icons, typeface with the end goal being the look and function of your site. WEBSITE

TAXONOMY

Is the structure used for organising content on a screen. Taxonomy allows the user to organise content in an order suited to them, for example if you are selling products based in an alphabetical order, taxonomy can allow you to drag and drop them to the order you require.

BREADCRUMB TRAIL

Remember Hansel and Gretel? The same theory applies here. Breadcrumb trails allow the user know where they are on a site for example home > shop > product category > product by name.

FAVICON

Is a tiny icon sitting near the site’s name on the tab of your browser. It is 512x512px in width and height.

LANDING PAGE

Otherwise known as the homepage of your website. It is your website’s first impression. Often a landing page can be used to elicit something from the visitor. For example it may be used to get you to sign up for an electronic newsletter, promotion or upcoming events.

NAVIGATION AND SUB NAVIGATION

Main navigation and sub navigation are two key elements. Main navigation is the main menu displayed on your site. Sub navigation contains the ‘extra’ elements of your navigation for example on on the IKEA site when you click on the main menu and click on shop by room, a list of ‘sub navigation’ items display.

CMS

Content Management System. A CMS has become the more widely used form of web development with wordpress being the market leader. In general, it means a form by which you can add, edit and delete from with ease as opposed to a site that requires on-screen code editing to place one line of text in a particular position.

HTTP VS HTTPS

HyperText Transfer Protocol vs HyperText Transfer Protocol Secure HTTP Is the system on which data is exchanged between browsers, servers and web apps. In-turn it defines how the data your require is packaged and sent.

HTTPS

Has one distinct difference in that, the S means the site you are looking at has a SSL or Secure Socket Layer installed. This is widely used on sites that require encryption such as e-commerce sites.

CACHE

A Cache is a collection of data saved by your browser regardless of which device you are using. This means that for every time you visit a site, it loads a little bit faster. You can clear your cache at anytime.

DNS

Domain Name Server. Is the system through which your browser looks up web pages. When you type in a domain name i.e. facebook.com your browser will look at the DNS table and convert the findings into a friendly address for humans. It also keeps track of where web pages are in the world, so you can find them.

DOMAIN NAME

A domain name is the name which you purchase and pay for every year. this domain name once live and working becomes known as a url.

FTP

File Transfer Protocol. It is like a gateway to the code that runs your website. Instead of going into the dashboard of your CMS (Content Management System) website and editing pages, ftp allows you to view the code that runs your site, and add, edit and delete as required. URL The address that specifies where your website is located. For example, the url for facebook is facebook.com. There is a slight distinction between a url and a domain name.

WEB HOSTING

and who we recommend A web host is a company dedicated to running websites. The can vary widely (but we recommend Blacknight solutions), and are able to assure your site will be accessible 99.9% of the time.

WEB SERVER

Is a bit like a computer on which your site is stored. A web server is likely located within the company your domain name is registered with. It is possible to own and run your own server. CSS Known as Cascading Style Sheets works along with HTML. These are a fundamental part of any website and attribute to how the site looks and feels. Colors, font sizes and families are just some of the things defined within these style sheets.

HTML

HyperText Markup Language is the standard language used for web pages. With HTML you can create a website and it is relatively easy to learn. It is a very rewarding language and their are thousands of online tutorials covering the topic.

PHP

Or Hypertext Preprocessor is a widely used, and open source language. The scripts are executed on the server. It is a widely used and powerful tool for creating and executing dynamic and interactive web pages.

XML

Also known as Extensible Markup Language. It is a fundamental part of web design and acts as a meta language, that means, pages may be build using a variety of languages which communicate via xml.

SQL

Also known as Structured Query Language. In general, it is the push and pull from a database to a screen. For example when you are on the IKEA website and you enter the search term ‘single bed frame’ the site pushes to the database using SQL and pulls all the results to your screen that have the term ‘single bed frame’ within the title or description.

IFRAMES

These are a very useful piece of code to know about. Have you ever gone to someones website and clicked on a video to play. Nine times out of ten, that video has been embedded from youtube using an iFrame. It is also possible with a variety of media www.CodeStack.ie ChatGPT

Leave a Reply