You know that feeling when you’re in a conversation where words are being used that you don’t understand and so you simply smile and nod as if you understand as you take mental notes of words to google later? I hope that’s not just me.. because I’m here to make sure this isn’t you in your next conversation regarding websites.
Each industry seems to come along with its own vocabulary or lingo used to discuss details of the trade. Often those that use these words all the time forget that other’s may have no idea what’s being talked about. So allow me to be the one to pull the curtain back and explain what all this website lingo means and show you how / where these things appear on our Showit website template, Jolie & Jasper.
The navigation on a website is often found at the top of the page. The navigation menu is typically made up of titles of important area’s of the website to direct visitors there quickly and easily. The page title’s work as buttons to take you to said page. Often the logo or company name is set up as a button to the homepage.
Example: The navigation for Jolie & Jasper has buttons to the about page, services page, gallery page, course, blog, and contact page, with the title ‘Jolie & Jasper’ linked to the homepage. This navigation can be found at the top of every page on the website.
A hamburger icon is an icon made up of three lines stacked together (resembling a hamburger – top and bottom bun with a patty in between) to indicate the use of a hamburger menu. When the icon is clicked it opens up to reveal a hidden navigation menu / hamburger menu and the icon is replaced with an X icon that when clicked hides the menu, used to open and close navigation as needed.
Example: The hamburger menu used in Jolie & Jasper is used on the mobile version only. To keep the small screen uncluttered the menu can be opened for use and closed to tuck those navigation elements away. This hamburger menu is made up of the same buttons found in the full navigation menu with the addition of social links to Instagram, Facebook, and Pinterest.
The hero image is the first visual element that a visitor will encounter on a website, it showcases an overview of the most important content of the page. A hero image is a banner image used at the top of a webpage.
Example: The hero image used on the Jolie & Jasper homepage is that of a modern editorial nature which reflects the mood for the rest of the site.
Sliders (also known by many other names) are similar to a slideshow inside of a website canvas, they are one of the most versatile tools used on websites and can be used in many different ways to showcase images, video, text, and other content all on one canvas. Often accompanied by navigational elements to click through slides, and can also be set on a timer to auto-shuffle.
Example: Just one example from Jolie & Jasper is the hero, the hero image and accompanying text changes as the visitor clicks the large arrows on the left and right sides.
An opt-in can look like a full webpage, a popup, or even a form on a canvas, they appear in many different ways but they all work the same. The way an opt-in works is the website visitor provides their information (typically their name and email address) to “opt-in” to receiving content such as newsletters, promotional emails, freebies, discounts, etc. to specific interest groups depending on which opt-in form the visitor filled out (most websites have more than one for different types of content)
Example: On the Jolie & Jasper template an opt-in form can be found at the bottom of the page. This opt-in form allows visitors to provide their name and email in order to receive a newsletter.
A CTA (call to action) is exactly as the name suggests, it is a statement that calls the visitor to take action. The best call to action phrases are clear but specific and create urgency that drives the user to action. If you have a truly irresistible offer, your call to action should sell its value. A CTA works best when directly accompanied by a button click straight through to the action you want the visitor to take.
Example: On the Jolie & Jasper template there are many examples of calls to action throughout the site, but the most reacquiring and strongest one of them all can be found towards the bottom of nearly every page on the website. This CTA states “Never feel ___ during a launch again.” with the ___ shuffling through the words, “overwhelmed”, “alone”, “clueless”. The movement of the words shuffling through and the layout of the canvas grabs the users attention and drives the visitor to click through to the contact page to complete the contact form.
A website’s footer is an area located at the bottom of every page on a website, below the main body content. The term “footer” comes from the print world, in which the “footer” is a consistent design element that is seen across all pages of a document. It typically includes important information such as a copyright notice, a disclaimer, or a few links to relevant resources. A footer should also serve to accomplish one or more of your specific site goals (such as a call to action, links to socials to direct traffic to follow, etc.)
Example: The footer used across Jolie & Jasper is made up by a few elements, links to socials, link to a contact email, the newsletter opt-in (seen earlier), and embed code to incorporate images from Instagram, as well as some legal / copyright things.
A featured image (primary image) is the image used to support a blog post. It can be found at the top of the blog post page, used as a preview when promoting the blog post, etc. By default the first image added into the blog content will set as the featured image, though as it is the visual representation of the post it proves helpful to set the featured image to something pertaining to the post.
Example: The blog post mockup featured on the Jolie & Jasper template uses a featured image of a girl in her bathrobe inside of a hotel room.
The meta data (also know as a meta description) is a snippet of up to 155 characters which summarizes the blog post content. Search engines show use this summary in search results. So optimizing it is crucial for on-page SEO. The meta data is also great to include across the site when promoting the blog post as well.
Example: The blog post mockup featured on the Jolie & Jasper template includes a featured canvas including three additional blog posts to encourage the reader to continue reading more content. These promoted blog posts include, the date the posted laid on top the featured image, the blog’s category, the title, and the meta data.
A blog sidebar is a narrow column located on the left or right side of a blog post (or blog page) where the content appears. They’re commonly used to display various types of supplementary information for users. Things that often appear in the sidebar include but are not limited to : mini bio of the person behind the post, social links, search bar, category list, most popular posts, opt-in, most recent post, other posts you may be interested, etc.
Example: The sidebar used in the blog post mockup featured on the Jolie & Jasper template, is located on the right side of the page, it extends above the blog content canvas and rests slightly on the hero section. It is made up by four sections. The first section larger and is made up by several of the common things mentioned earlier these include, a mini bio, social links, a search bar. While the last three sections make up a category list with one section for each category (marketing, launching, and business).
A blogroll is a list of blog recommendations by the blogger (commonly found in the sidebar of a blog). The term “blogroll” was originally used because it was a list of links to other blogs, but you can include links to any sites. While it may be confusing because we just talked about the sidebar, the sidebar is the column on which the blog roll content sits. The list of commonly used content used on a sidebar displays just that, items such as: social links, category list, most popular posts, most recent post, and other posts you may be interested, all would be considered blog rolls.
Example: The blog roll on the blog post mockup featured on the Jolie & Jasper template, is located on the sidebar. The first section features several links, the mini bio (including a headshot and a link to the about page) and the social links (linking to Facebook, Instagram, and Pinterest) and the other three sections making up a category list with each section linking to blog posts tagged to each category (marketing, launching, and business).
Responsive design means that the website has a fluid and flexible layout which adjusts accordingly for many different screen sizes to offer an optimized browsing experience to any visitor.
Example: Jolie and Jasper was designed to adjust accordingly to any screen size, no matter how big or small. The layouts have been made fluid to fit any laptop, tablet, or desktop. As well as a fluidly adjusted mobile layout that optimizes content to make the most of a much smaller screen.
A Favicon (short for favorites icon) is the tiny icon associated with a website to be displayed with bookmarks, in the URL bar, on tabs, and anywhere else where a website has to be identified visually.
Example: The Favicon associated with the Jolie & Jasper template is the same as the Quill & Co site as it is hosted by the Quill & Co website.
Now that I have explained a bit about the website industry you may be thinking this is great and now I have a better understanding of the lingo used but now how do I take this a make and website that works for my industry, well have no fear because I already thought about that! Read this blog post about How to Use a Showit Website Template for Your Industry.