Get a Quote

Website-Anatomy & Jargon

Friday, December 21 2012 10:54 AM
By Kalen Kubik

Hey, you. Does your designer sometimes leave you in the dust with that fancy web lingo. Sometimes, if you don’t live in the web world some things can get confusing when you’re trying to speak that foreign language. We’re going to run through some design elements, the functionality and the best practices that will help you communicate with your designer.

This is a screen shot or screen capture (screen-cap), meaning an instance of a desktop screen was captured.

1. Social Icons – No doubt you’ve seen rows of these little guys popping up around the web. Usually when they are small and listed in a row they are linked to a business’ social media page. When they are accompanied by a word or a numerical counter, they are sharing buttons. These share buttons allow visitors to post specific content on their personal social media page or their friends (essentially free advertising for you). If you wish to know more about social media read up on it here.

2. “Call to Action” Button – Call to action buttons are usually used to catch attention upon arrival at the site. The top of the page, known as the Header, is usually pretty bare. This allows for a flashy button to attract attention with a sales message. This site is ushering its viewers to reserve a table; perhaps yours is “Signup for Our Newsletter”.

3. Your Logo! – You may wonder why this is on here. Of course you know what your logo is, right? Wellll, here’s the thing. No matter the client, many of them have issues with their logo files. Either their file is just a JPG that they’ve cut out and reused and reused or they don’t know where the file is. THIS IS A PROBLEM. This logo was provided in an EPS file or Encapsulated PostScript. This means your logo is stored as a mathematical equation known as a vector and is capable of being scaled. If you don’t have an EPS file for your logo, you might as well not have a logo. Pay for a professional to redraw it, or your nephew if he’s really good.

4. Main Navigation (pronounced : Main Nav) – This is a list of main navigation links for drilling down into your site. A site is made up of folder and levels of files. You don’t want to place all your pages on the main nav unless you have a very small site. Some pages are less important than others. Don’t think about yourself, think about your customers. Maybe people don’t want to “Contact You”. Put that link in the “Our Location” page. Remember, your nav should cater to your customer to get them to their desired content the quickest way possible. The less levels of navigation you have, the better (most of the time). This navigation menu should not change as they navigate the site, do not move the links around or replace links on different pages. You’ll confuse your user.

5. Slider or Image Slider – The image slider features sales banners generally. The images slide across the container box, the motion attracts the user’s eyes and your message is received. Large with pretty images is even better. Videos can discourage people from clicking on them, so perhaps don’t use those as your first slide. Save it for your last slide. Sometimes you’ll just see a blank grey box that says it’s broken. This is an old, old website you’ve stumbled upon using a Flash video. If you’re the offending culprit, then head over to Google Swiffy and convert your Flash video to HTML5. Also, amazing pictures are always best. If you’re pictures are horrible, DON’T USE THEM. Buy stock photography. It might even be tied into the price of your website. This isn’t your mom’s fridge, get some good photography. The web is getting more visual every hour and great pictures are an investment. If you put up bad pictures, just like your Pinterest campaign, the site suffers which translates to your sales and business suffering.

6. Feeds (pronounced streams, if you’re really old) – Pronounced just like it sounds. Feeds are containers filled with content from other websites. These pull information from other sites through API’s or Application Programming Interface. This allows you to display social media information or other information. This page just so happens to have Toolbox Integration from its 360Wichita page. If they post an event or job on their 360Wichita page, then it will automatically update on their site. For a static sites, feeds can make static content feel updated. (But honestly, don’t be that guy. Update your site.)

7. Feature Boxes / Featurettes / Buckets – I like the term buckets myself, but feel free to use whichever strikes your fancy. Why? Buckets hold things and are quite useful. Buckets come in many forms depending on your site layout. They are used to display important secondary information. They are another doorway to guide your viewer to the content they want or the content you wish them to see. New sale on coat? Place it on a bucket with a flashy “50% Off” star-burst to drive traffic to the sale page. (I’m kidding. Do not use a star-burst unless you were born in the 20′s)

8. Footer – Same as the header, this should not change with every page, but stay constant throughout the page. If you have a long page, no one wants to wear out their finger scrolling back to the top of the page. The footer contains important but tertiary information, like your address and other info. This site’s footer is pretty light, but some can be twice as tall and contain brand logos or feeds.

All in all, use good judgment. This is YOUR website. Voice your concerns, ask questions, and learn during the meeting. Get out there and look at other sites before you meet with your designer. Visit “Best of CSS” websites to see cutting edge designs.


By Kalen Kubik

Share the love

Submit Your Comment