what is the bar at the top of a website called

what is the bar at the top of a website called

Parts of a website featured image

Headers, sidebars, weblog posts, footers…? Whereas we strive actually arduous to talk in plain English, we all know net designers can use numerous lingo.

You’re reading: what is the bar at the top of a website called

Don’t fear, it’s not too arduous to clarify or keep in mind the elements of an internet site when you perceive the essential construction.

On this publish, let me take a couple of minutes to get you snug with net design phrases that your net designer may use. Then, you’ll be able to soar proper in and appear to be a professional throughout your net design undertaking.

Residence Web page

The house web page of an internet site is the opening web page, normally situated at your important web site URL. Its targets are normally to:

  • Welcome guests
  • Assist them notice they’re in the correct place
  • Instantly make it clear what you do
  • Information guests additional into the web site
Rose Jewelers Kalamazoo website
Instance of a house web page we designed for Rose Jewelers

Residence pages might be lengthy or quick, containing numerous info or just a bit, relying in your targets.

Understand that the house web page shouldn’t be all the time the primary web page that guests land on after they enter your web site (particularly if in case you have a wise education-based advertising and marketing and web optimization technique). So each web page in your web site ought to lead guests to study extra about you and take motion, not simply the house web page.


Loads of purchasers ask me a a few “slideshow” or “picture rotator” or “swipe” on the house web page. I’m extra prone to name this a “slider.”

A slider on an internet site is a altering content material space with completely different “slides” of visuals or info. The slides might embrace a big picture and so they may embrace textual content and buttons overlaid on high.

Whereas sliders had been very talked-about a number of years in the past, I don’t usually advocate utilizing sliders for contemporary web site design. Take a look at this text for a lot of explanation why sliders don’t do an incredible job getting guests to take motion.

Find out: what is the difference between baking soda and baking powder

The header of an internet site is the constant space on the high of the location that features the emblem and navigation menu.

Instance of an internet site header on the Naylor Panorama web site, highlighted in pink

A header may embrace:

  • Brand
  • Navigation menu
  • Tagline
  • Telephone quantity
  • Handle
  • Search field
  • Buttons
  • Social media icons
  • Login or My Account hyperlink
  • Decide-in field

At 11Web, our tendency is to maintain the header quite simple and lead the person to the navigation menu.

Observe {that a} header is known as “sticky” or “fastened” when it stays in place on the high of the window when the person scrolls down.

The navigation is a part of the header and consists of the hyperlinks that take guests to different elements of your web site.

We regularly hear purchasers name these “tabs” on the high of the location, however menus designed to appear to be tabs are mainly non-existent in 2018. As a substitute of calling these “tabs,” you’ll as a substitute hear us check with the menu gadgets as “hyperlinks” or “pages” within the menu.

Major/Secondary Navigation

Observe that navigation can embrace each main and secondary navigation menus. Two separate navigation menus are used when there could also be numerous navigation wanted, and also you need to be clear which hyperlinks are most essential.

The Vitale-Robinson web site features a main menu (bigger) and a secondary menu (smaller, in a black bar)

The first menu consists of the principle, most distinguished hyperlinks. These are usually hyperlinks to high-value pages on the web site just like the Companies and Contact pages.

The secondary menu consists of different hyperlinks that might not be as transactional or essential. This is likely to be hyperlinks to Login, My Account, or Employment.

A sidebar is an space of the web site used to show info that’s not a part of the web page’s important content material.

Read: what is lil fizz real name

A sidebar can embrace an opt-in, name to motion, hyperlinks to different elements of the web site, hyperlinks to well-liked or latest weblog posts, commercials, social media hyperlinks, or a short “About” paragraph for context.

A website design with the sidebar highlighted
A web site with the sidebar highlighted

Sidebars was very fashionable locations to throw every thing you didn’t desire a web site customer to overlook. Right this moment, although, there may be much more discuss round the concept sidebars simply add distracting muddle to an internet site. See this superior article: Ought to Your Web site Have Sidebars? What the Analysis Says.

We are inclined to maintain sidebars on the web sites we design easy and related, once we use them. Our objective is to easily information the person to an motion we would like them to take, to not distract from the principle content material of a web page.

Name to Motion

A name to motion (“CTA”) is the a part of an internet site that incites guests to take motion. It normally includes an attention-grabbing headline, a sentence or paragraph about the advantages of taking the motion, and a button or opt-in field.

It is likely one of the most essential elements of an internet site as a result of it’s what guides the customer to do what you in the end need them to do.

I’ve written extra about calls to motion in these two posts:

  • What’s a Name to Motion
  • Easy methods to Get a Web site Customer To Take Motion

The web site footer is the constant content material space on the backside of each web page of your web site. Think about it the underside bun on the web site cheeseburger (if the header is the highest bun).

The footer might be something from a single line of copyright info to a multi-section space with contact info, a map, hyperlinks, opt-ins, social icons, a search field, and rather more.

Screenshot of a complex website footer
One of many extra advanced web site footers we’ve designed, together with two sections, a number of menus, contact info, and a search field.

The footer is a superb place to catch the customer’s consideration and information them deeper into your web site after they attain the underside of the web page. For some nice concepts, try Orbit Media’s publish Web site Footer Design Finest Practices.

The footer can be the place customers anticipate finding Contact info, a My Account hyperlink (if relevant), and authorized pages like your Privateness Coverage.

Armed with this info, you need to now be able to “communicate net design!” Confused about different net design phrases? Depart me a remark, and I’ll add them to this text.

Find out: what is the difference between associates and bachelors