Most of us aren’t site designers by trade nor do we have any particular aspiration to take on the profession. But if you have any interest at all in owning or running a website, especially if you have any interest at all in making money from said website, it’s in your own best interest to have some fundamental understanding of what it all means. This allows you to communicate far more effectively with the site designer and coder that you eventually do hire and it means you might even be able to troubleshoot a few issues yourself.
If you are reading this blog, there’s a good chance that you already have some basic level of knowledge in terms of what a website is and how it works. You might already know that WordPress is a content management system (CMS) and you might know the difference between a hyperlink and hypertext, but are you familiar with some more advanced terms?
1. Breadcrumb Navigation
Do you remember the fairy tale Hansel and Gretel? As the two children make their way through the woods, they leave behind a trail of bread crumbs so they can find their way back home. Breadcrumb navigation on a website works in a similar way, clearly defining the path toward a particular page.
You’ve likely seen this on some other websites. Typically found at the top of an article, it’ll typically take on a clear hierarchical structure similar to this, where each step is a clickable link:
Home > Products > Technology > Computers > Laptops
2. Hamburger Navigation
The importance of having a mobile-friendly web design is today’s Internet simply cannot be understated. Whether you have a separate mobile-optimized theme or you run a responsive theme, your website should function and render a little differently if someone is viewing it on a phone or on a computer monitor.
Hamburger navigation is what you typically find in the mobile theme where there is an icon that looks like three stacked horizontal lines. Tapping on this expands a navigation menu through which a visitor can find the content they’re looking for.
3. jQuery Slider
Why show just one image or snippet of content when you can show several? Popular with many of the magazine style themes for WordPress, a jQuery slider is a website element that will automatically cycle through multiple image while also allowing the visitor to click on the left and right arrows (or series of dots along the bottom). This makes for a more dynamic appearance and can help you highlight more content in a more confined space.
Critically important from a search engine optimization perspective (and thankfully automatically generated with a lot of content management systems), a sitemap effectively tells the spiders, crawlers and bots what pages are on a website and where they can be found. When the Google bot comes around, it’ll know where to look.
A user-facing version of the sitemap is also commonly made available too, functioning as an exhaustive and comprehensive form of site navigation.
Standing for Content Distribution Network or Content Delivery Network, a CDN effectively takes the content of your website from the main server of your web hosts and mirrors it through a series of proxy servers deployed in data centers all around the globe. Ideally, all the data is completely synchronized, but that may not always be the case.
The objective here is to connect each individual user with the proxy server that is closest to their location. This generally improves page load times and offers other performance boosts compared to standard single-location hosting.
6. Parent/Child Theme
It used to be that a WordPress theme could be a rather standalone kind of thing. You could customize it in a number of ways, but in doing so, you are altering the core theme to fit your particular needs and preferences.
Somewhere along the line, parent and child themes were born. The parent theme provides the main, default framework for the site design, whereas child themes build off of that framework for slightly (or very) different designs. This allows you to have multiple child themes under the same parent theme.
7. Hex Color Code
While there are certainly exceptions, it’s generally true that the raw code of a website won’t understand what you mean when you tell it to make a block of text “blue” or “royal blue” or “light blue.” Those aren’t specific enough.
What you need instead are hex color codes or (hexadecimal codes). Typically prefixed by a # sign and consisting of six alphanumeric characters, they define a specific color on the RGB spectrum. The first two, second two, and final two letters represent levels of red, green and blue respectively. #00000 is black, whereas #FF0000 is full red and #33FFF3 produces a shade of aqua.
Most people have an intuitive understanding by now of what a “font” is. You use them all the time in word processing and everything else. What fewer people know about is kerning.
Arguably just as important as the style and size of the letters themselves is the space between the letters. That’s kerning. This becomes important not only for clarity but also for creating more aesthetically pleasing logos and other typeface-based designs.
9. Above/Below the Fold
Derived from the newspaper industry, the “fold” represents the split between what is immediately visible to a visitor upon arriving on a webpage and what only becomes visible after the user scrolls. Picture a newspaper and how it might fold in half. That’s how get what’s “above” the fold and what’s “below” the fold.
From an Internet marketing perspective, you might want to make sure that your primary image and call to action appear “above” the fold, for instance. This also has SEO implications.
Website development and website design, like any other areas of expertise, are filled with endless jargon and lingo. These are just a few of the more advanced terms that you should familiarize yourself with. Even if you never touch a line of code yourself, you should have some idea what you’re talking about.