Nancy Fields Graphic Design

Personalized profitable websites for coaches and authors

website header

Are Website Header Banners Dead?

by Leave a Comment

Does your website banner extend across the top of each page?

Sorry to break the bad news, but they just look old and outdated. That’s because long, horizontal website banners don’t look good on a mobile device, and mobile is what’s driving design these days.

Quick and easy web header banner check

To see what your website header banner looks like on an iPhone 5 — without leaving your desktop…

  1. Enter your URL in Chrome browser. If you don’t have Chrome installed click here to download.
  2. Right-Click (Mac = Control + Click) anywhere on the web page
  3. Choose Inspect
  4. Near the top left click on the little phone/tablet screen icon
  5. View your site in the browser window

webpage Chrome Inspect

Chrome mobile view check

Reuse & Recycle

Still love your web header banner? You don’t have to abandon it. Instead…

Tip One

Use it at the top of your e-newsletter to build your brand like Lacey did

 

MiCommunity Newsletter header banner

Tip Two

Replace your current WordPress theme with a mobile-friendly version that has a banner on the home page. Here are three examples of themes from StudioPress that accommodate a long, horizontal header banner and still pass the mobile-friendly test, plus look fresh and modern.

three StudioPress themes

Website Anatomy: Part 2 – Web Headers

by Leave a Comment

Location Words Real Estate For Sale Sign Best Home

Your Most Valuable Real Estate

Your website header is on every page, and it’s often the first thing people see so treat it as your most valuable real estate.

Think Like a Pro

website header desktop and mobile view info graphicHeaders in mobile responsive themes are divided into two sections: left and right.

On a desktop your header will look long and narrow across the top of the page.

On a mobile device the header breaks in two: Header Left on top, Header Right stacking neatly underneath.

Top Left

The left side is for your company name, logo, and tagline

TIP No. 1: Make sure your logo is crisp and clear and fits the space.

TIP No. 2 : Choose a tagline that’s

  • Engaging
  • Descriptive
  • Memorable, and
  • Complementary to your business name…

…because you have only a few seconds to capture your visitors’ attention and tell them what you do.

Top Right

The top right is a widget area, and widgets can accommodate anything you wish. The size of your header widget area will vary, depending upon your theme. An average is 400 pixels wide X 200 pixels high: That’s small!

Any one of these can look great in the right side of your header:

  • Your navigation menu
  • A promotional video
  • Your new book
  • A product or,
  • An Irresistible Free Offer and/or
  • A request to signup for your newsletter

If You Need Help

Getting just the right graphic or promotional video into your header right widget area can be tricky. For example, creating a graphic requires a photo editing program such as iPiccy or Photoshop. After creating your graphic, you may need to do a bit of hand coding for your graphic to display. But wait…there’s more. Once the header right is “perfect,” your logo (on the left) may need to be resized.

If you get into a jam, and don’t have time, or the patience to figure it all out, contact a web designer or developer to do it for you. The least attractive website is one that is not yet up.