30 Web Terminologies You Wished Your Web Designer Explained To You

30 Web Terminologies You Wished Your Web Designer Explained To You

Have you ever wanted to hire a web designer and when you meet one, he starts blabbering words that are too technical? Do you find yourself bleeding from your nose? Well you are not the only one who did. All clients and even web designers and developers have gone through the same terms that had them dumb founded. So don’t be embarrassed to ask them about those techie terms they just spilled out. On this article you are going to learn 30 Terminologies You Wished Your Web Designer Explained To You and I will give you some bonus helpful tips! Enjoy!

1.) Hosting service and Domain name

These are two words that go together in web design but at the same time are different from each other. Most developers would regard them as Host and Domain just to make them short.

A Hosting Service – is an internet hosting service that allows websites accessible via the World Wide Web. In lay-man’s term this is the space where all your files and codes that run your website live in.

A Domain name – is basically the identification of your website. So the .com’s, .net’s, .org’s, .gov’s and any other extensions of your website is part of your domain name. e.g. domainname.com

For You/The Client: Make sure you purchase a web hosting service from a company that belongs to the top hosting companies. I myself use Hostgator shared hosting on my company own website and this blog. I highly recommend them as they have great support and their services are great!

For the web designer : Did you ever had a client  who gave you login for a domian account and they thought that it is the only thing you will need to build a website and make it live on the internet? Then the client does not go online for a week and expected you to get the website and  up by them? Isure have had my share of that experience .One thing i have learned is ask them for all the stuff you need right when they sign the contract .Key thing is to  educate them.

2.) Cpanel

Is simply a web hosting control panel that provides a graphical user interface and useful tools that are designed to automate and simplify a process in hosting a website.

For You/The Client: When purchasing a web hosting service from a web hosting company make sure that they offer cpanel. There are a lot of hosting companies out there that do not offer cpanel. It will be a whole lot easier for you and the designer if you get a hosting service that offers it. This article from Slide Share shows 5 reasons why you should choose a cpanel web hosting service.

For the Web Designer: I’m sure most of you have had clients that have purchased a hosting service from companies that do not have cpanel. As professional web designers you are expected to adjust and learn how to handle any hosting service, so go and do your research or simply ask the client if he knows where you can access whatever on that hosting service. Also do not be afraid to tell them what cpanel hosting you would recommend.

3.) FTP

File Transfer Protocol, is a protocol used to transfer files from a computer into a host server. This is used by web designers and developers to transfer or access any kind of file from their computer’s hard drive to the hosting company’s server.

For the Client: If you want your Designer to have control on the project he is working for you, giving him the FTP access to the website is a necessary standard operating procedure. This way he can access and back up all the files, create new file templates and upload it to the server easily.

For the Web Designer: There are a handful of FTP tools out there. The most popular would be Filezilla, an open source software for FTP solution. Download the Client Type Filezilla software and install it on your computer

4.) Back-end and Front-end

The Back-end involves the database, the server and the application of the website. This is handled by programmers and developers and does not include what a user would see on the interface. Back-end developers handle server side languages like PHP, Python, Perl, .NET, Ruby, Java. While a Front-end involves what users see in their browser and the codes that make it work like HTML, CSS and JQUERY (front-end development). Basically front-end is the design and functionality of a website in a browser. Front-end developers may or may not have the skills in designing concepts on tools like Photoshop, Illustrator or Indesign. It really depends on how capable and skilled he is on designing websites.

5.) Website Mock-up

A website mock up refers to the static visual representation of a design of a website. Simply put to it that it is an image of the website which could be delivered to a client for feedback and revisions. Web designers would either choose Photoshop, Indesign, Illustrator or any other software that allows them to create such representation.

6.) Header, Navigation, Sidebar and Footer

These terms refer to the parts of a website. On this wireframe you will see that The Header is the top most part and the 1st thing a user would see when landing on a page of a website. This is where the logo and some very important information is positioned like the company phone number, search box and the social media icons.

The Navigation is composed of links that are designed as buttons or just plain text. This is where the user can navigate throughout the website.

Navigations can be placed on:

• top, inside or bottom of the header
• left side of the website
• right side of the website
• bottom of the website

The Main Content is where your main post or article would be located in. This is where the context of that page which you want visitors to read is positioned.

The Sidebar is the secondary column of a website that is either on the right side or the left side. There are many uses for the sidebar but basically it is used for secondary prioritized navigation or content like featured recent posts or ads.

The Footer is simply the bottom-most part of the website

7.) Thumbnail

A thumbnail is an image or a photo that represents either: a bigger version of the photo, a page, or a post that can be clicked to get through. On the example below, Jason Santa Maria’s portfolio shows thumbnails of his projects and when you click on one of them you will be redirected to the individual page of that project.

8.) White space

White space means the space between any content of the website, may it be text, photo, buttons or links. The amount of white space can either make or break the user experience of a website. A good amount of white space can make text content easier to read, buttons easier to navigate and photos easier to look at.

What better way to demonstrate white space by doing it on this website. As you can see on the screenshot below, I highlighted the white spaces on the website. I have incorporated a good amount of white space between elements of this blog. Even on each paragraph or each line of text there is white space that balances the coordination of the elements making it easier to read,

For the web designer: Adding a good amount of whitespace on your design will make the text of a website much more readable. It relaxes the eyes of the reader and as we all know content on a website is very important especially with blogs and company websites. One advice I can give you is never squeeze up the space of paragraphs, headings and images on the main content of a website page. Always try to adjust the margins, padding and line height of the content of the website.

9.) The Fold

The fold is a graphic design concept that pertains to the section of an important article or a visually appealing photo/image on the upper half of a newspaper. On web design however it is the part of the website the user or visitor initially sees before they scroll down.

For you/client: In web design the concept of the fold is one of the most debated topics between a web designer and a client in User Experience today. As there are numerous sizes of the monitor screens, the fold would not be a definite factor when designing a website. Although some parts of the website should be above the fold like the logo, main navigation, search form and contact information, you should not stuff content that would make the upper part of your website cluttered.

For the web designer: As a web designer, it is our duty to educate our clients about web design standards and best practices. We need to explain to them with a professional approach that the fold is no longer an issue in web design since users are used to scrolling down with their mouse. On I am Paddy’s article: Life below 600, he explains in great detail and through graphical and visual demonstration that the fold no longer exists in web design

 10.) Minimal or Minimalist Design

Refers to a style in web design that is flowing with simplicity. Simply put into the words “Less is More”.

For the web designer: Minimalist web design is most often used on Business to Business product and services firms as this style in web design promotes content hierarchy and focuses on the main messages that the company wants to deliver to their clients. It is even used on E-commerce websites as these are product based websites that would call for products to be the main focus of the user.

11.) Home Page and Landing Page

The Home page – This is the main page of the website or the index page. Whether your website is a blog where your home page compose of article teasers, a portfolio website showcasing your best client works,or you have a business website that shows a featured slider and services on the home page of your website, the home page is where the browser would take you when you navigate to your main domain e.g. yourdomain.com

Landing Page – A landing page however can refer to either your home page or any other page on your website that is landed by the visitor. In most cases landing pages are often in conjunction with a marketing campaign. This page is where a visitor would land when clicking from a link of your website from another website or just typing in the URL of your website on his browser tool bar.

For the web designer: Most clients who would need online marketing would want you to design a good landing page for a product or a service they are offering. This page should be handled with great caution as to make it simple yet very effective in making visitors stay on that page and in turn would help them to sell their product. There are some best practices that you can use when designing a landing page. I myself would introduce my clients who require a good landing page to Optimize Press, the best WordPress theme for creating high standard, high conversion and beautiful looking landing pages.

12.) Squeeze Page and Sales Page

A squeeze page - It is a page that is designed to make the visitors or end-user of a website fill in a form in order for them to get through to the next page.  Some squeeze pages would appear just before a user can download something from your website or before they can purchase a product. In all cases however, it is always used to add people to your mailing list which in turn can be used for email marketing. On Optimize Press’s Sample Squeeze page which you can see on the screenshot below they have:

• A video which would be about why visitors should sign up for the product or service a company is offering,
• A graphic representing the product a user would be getting if they sign up,
• And an opt-in form a user must fill in before they can get access to the offered product or service.

This is a very basic sample of a Squeeze Page but composes of the very essential parts that gives a Squeeze Page the convincing factor in marketing. In simple terms the Squeeze Page needs to convince the visitor to sign up by using compelling videos, graphics and text content.

A sales page – A sales page refers to a page on your website that is formatted to generate just that, SALES! One of the most important aspects of a sales page is its selling point. Like a sales person, it will act as a promoter of a product or service. As you can see on Optimize Press’s Sales Page on the screenshot below which I divided into 3 columns for the sake of reducing the space it would occupy on this article, they have heaps of valuable information about their product. Formatted to be very understandable and easy for the users to read by using lists, graphics, thumbnails of clients, client testimonials, buy now buttons, money back guarantee text and a secure order form that would help convince and assure the visitors that this is a valuable and authentic product that has been tested and satisfied numerous clients before them!

For the you/client and the Web Designer: Sales pages are designed to help a company or individual sell a product or service to its prospect clients that are using the internet as a means of looking for what they want or need. The important element of a sales page is content. More often than not a video should be a pre-requisite of a sales page, then a good copy or sales letter, some client testimonials with their photos and links to their website or contact information, buy now buttons and lastly, guarantee seals that would help them feel secure in purchasing the said product or service.

13.) Call to Action and opt-in forms

Call-to-actions – are elements whether graphic or text on a web page that pushes the visitor/end-user to do something. Most call-to-actions are designed as buttons and arrows. But in some cases it can be boxes with text that encourages a client to do something you want like, signing up for an email newsletter, downloading a free product or buying an item from your website.

Opt-in forms – refer to forms that a user has to fill in to get into another page of a website or join a mailing list of a website.

14.) Transitions

Refers to a change in one state to another. In web design it is simply how elements react when viewed on the browser or how they interact with the end-user. A good example of transition is how navigation buttons change colors when a user hovers it with their mouse.

15.) Proto-type

Also referred to as front-end prototype; is a working, incomplete version of a website. This often refers to the html and css version of the website and does not include any database queries.

16.) Anchor Text

Anchor text are the visible, clickable text links on a website.

17.) Backlinks

Are incoming links that point to a website or a page within a website.

18.) Breadcrumbs or breadcrumb trail

The term comes from the tail of Hansel and Gretel where they used breadcrumbs to leave behind signs for direction or to keep track of their location. This is also true in web design where breadcrumbs are a navigation aid for users to help them keep track of where they are in the website.

19.) Cache/Caching

Referred in web as Web Caching. It is a structure for the temporary storage of web documents to make a website perform faster on a user’s browser. Simply put to it that if you visit a website’s page once, all the content of that page are temporarily stored on your browser so that when you visit the page again, it will not have to extract those information from the web server of which the website is being hosted from. Making it load faster.

20.) Content Management System

The only thing that comes in mind is WORDPRESS! Ok so I am being biased here because this website is powered by WordPress. In reality a content management system is a computer software that allows publishing, editing or managing of content from a central interface or a dashboard with graphical elements to help make a more user-friendly process. There are several CMS that are available for you in the market but the top 4 are WordPress, Magento, Drupal and Joomla.

21.) DNS

A Domain name system is used to point any hosting server to a specific domain. So if you hosted your website on Hostgator but bought your domain on Godaddy, you would need to get your DNS from Godaddy and set it up on Hostgator cpanel.

22.) E commerce or E commerce Websites

Are basically storefronts or product based websites use to sell items over the internet. Probably the most popular E commerce website is Ebay.

23.) Favicon

A favicon is that tiny image on the left side of the top of your browser tab that represents the website. Most often its dimensions are 16 pixels by 16 pixels.

24.) HTML and CSS

HTML or Hyper Text Mark-up Language – Is the main mark-up language used for creating web pages and displaying information on a web browser. To put into another point, HTML can be associated with the engineering of a website’s page when displayed in a browser.

CSS or cascading style sheets – If HTML is the engineering of a website’s page, CSS would be associated with the design or the architecture of a web page thus you can control the colors, size, position, and other styling of an element in a website through CSS.

For the Web Designer: When working on a website, you should follow the web standards in coding. There are techniques like specificity,using multiple classes, combining elements, avoiding extra selectors and a whole lot more! Make sure you read and update your coding skills to the highest-standard as this will only benefit you, your client and any other developer that would work on the website. In short coding ethics!

25.) Permalink

Often used in the Blogosphere, a permanent link or a permalink is the URL that points to a specific post or article after it has passed the front page. For example: yourcompany.com/your-awesome-article

26.) RSS or Really Simple Syndication

Are summary feeds of frequently updated entries in a website like blog posts, news headlines, audio or video in standard format. The purpose of subscribing to a feed is for visitors of your website to get content feeds and read it through a software called RSS reader. An example of a web based feed reader is my Yahoo. On this blog you can subscribe to the RSS Feed byClicking Here or looking for an icon that looks like the one below and clicking on it!

27.) Tags and Tag Cloud

A keyword or term that is assign to a piece of information. It helps describe an item and allows it to be found again  by browsing or searching. Blogs would normally place their tag clouds on their sidebar or their footer to help visitors in navigating posts that are related to a keyword.

28.) Web Template

Is a tool used to produce or reproduce a website. The essence of a web template is that it is easy to set up and it is reusable. Once a web template is downloaded all you need is to change the generic information with your own personal, organizational or product information.

29.) CAPTCHA

Completely Automated Public Turing test to tell Computers and Humans Apart is a challenge or test to get a response that would help determine whether or not the user is human. CAPTCHA is mostly used in forms on a website. The characters on a distorted image should be identified by the human user and typed into a form text field.

.

30.) Post and Pages

Posts are often associated with blog articles or news and updates that are dynamic content of a website.

While pages are static in nature such as your about page, privacy policy, legal disclaimers, etc.