How‌ ‌to‌ ‌Pick‌ ‌a‌ ‌Banner‌ ‌Image‌

There are quite a few considerations when choosing a banner image for your website.  That statement might set an ominous tone, but I assure you- it’s fairly easy and painless.  Think of it like following a recipe. Before we delve into the thick of it let’s take a moment to define what we mean by “banner image”.

A banner image is one that is placed on your webpage in a manner that serves to set the tone for the page, often housing the page title and/or menu of the site.  It is both an important design and functionality element.  Many times, (whether the banner is placed horizontally at the top or vertically on the side), the ratio of the space would be considered panoramic in nature.  That is to say that one side of the rectangle is going to be substantially larger than another side. Whether you have a different banner image on every page, or utilize the same image and/or element throughout the site, it is imperative that the banner image be selected with thought and purpose.  No good will come from just placing any image in the banner location to fill the space.  I can not stress this enough- ideally you will create images for your banner spots.  If budget or time do not allow, then and only then should you delve into your image library.

As for all imagery on your site- your banner image should only be utilized if it is a net positive in its use.  These 5 questions will dramatically improve the quality of your banner images.

1. Does the content of the image lend itself to the unique (panoramic) format of the space? 

This is the big one folks.  This is where most banner images go wrong right from the start.  You may have what you think is a dynamic and compelling photograph. Often the moment you pop it in as a banner image, the unique crop removes all of the elements that made it such a wonderful picture in the first place, and you are instead left with an image which looks anywhere from blah to downright ridiculous as a banner image.  To avoid this, your banner image needs to be one with no important elements cut off from the crop.  More than that, the unique banner ratio should be utilized in the image creation (or selection).  It is important that all the traditional compositional rules still apply even in this unique format. 

Example (Image 1a): The image itself would be an appropriate image to place within a site, as is.  However, when you place it in the more constrained ratio of a banner image- it is unusable. (Image 1b)

 

2. Are my banner images technically acceptable enough to blend in and compliment both the rest of the page and the header?  

What I mean here, is fairly simple.  There should be no blown out highlights, no loss of detail in the darks.  The color correction should be in the realm of believable.  If there are people in the image, facial expressions should be pleasing and believable.  Absolutely no camera shake, blurriness, or lack of focus of any kind.  (The caveat of course, unless you are utilizing depth of field as an artistic choice.)  Lastly, but certainly not least important of the technical considerations- was this image taken with enough quality to either make adjustments for use, or with enough resolution to allow for smooth up or downsizing as necessary?  When going through potential banner images, it’s best to from the start, simply disregard any image that does not meet the technical standards.  This banner image will set the tone for the rest of your site.  It would be a shame to spend so much time, energy and resources on a fantastic and functional site, only to cheapen it with bad imagery choices.

Example (Image 2a): This image is the correct format and orientation but the color correction and exposure are distractingly bad. (Image 2b) Demonstrates proper color correction and exposure.  Additionally, this image can be used in full color or at a lower opacity, lending itself both to adding pop or blending in, depending on website needs.

 

3. Are there competing elements within the image that make menu functions difficult to read and/or use? 

The biggest offender here are images which are just too busy in the background.  Sometimes this means images with a lot of detail and contrast.  Other times this just means images which do not allow for any negative space.  (See image 3a for an example of a background which is too busy as a banner image.) Which brings us to…

 

4. Does the image have built in negative space to allow for text or other elements to be placed over the banner? 

Ultimately, the banner image is a supporting image.  It should never be so distracting that the site suffers a loss of function.  Negative space in a banner image also provides an important function of versatility in cropping and design.   (See image 4a and 4b for an example of a banner image which utilizes negative space effectively.)

 

5. Does this image have a purpose and/or tell a story?  

Specifically- are you looking for something to provide a dynamic pop to the site?  Does this image do that?  Or are you instead looking for an image to serve a support role on the page, and not distract from other elements and text?  *(It is imperative to know which type of image you want and need before creating and/or selecting your banner images.)  Another category of image, which should be used sparingly as large banner images, are what I call “story images”.  If you are trying to tell a simple story, and you have an image which does that successfully- use it.  If you have an image that you think is in the sort of realm of the theme, story or idea you would like to project- skip it.  Use story images as banner images only when they are simple, compelling, to the point and very clear.  

See image 5a for an example of a simple concept banner, as well as image 5b for an example of a storytelling banner.

A last thought on banner images.  If you are going to create images specifically for your banners, (which I highly recommend that you do), you will be so much happier utilizing a professional photographer for this process.  These are things that they will already know and be thinking about when they CREATE your image.  This is very different from just “taking a picture”.  If you need pointers on how to hire and what to look for in a photographer, please feel free to utilize our “What to look for in a Photographer” Guide.

 

*Image 1a

Image 1b

 

Image 2a

Image 2b

Image 3a

Image 4a

Image 4b

Image 5a

Image 5b

Mobile Design

WHAT IS A RESPONSIVE WEBSITE:

A single site that reacts to the size of a user’s device—with one URL and one content source. A responsive website has a fluid and flexible layout which adjusts according to screen size including:
  • Readable text without requiring zoom
  • Adequate space for tap targets
  • No horizontal scrolling

FACTS ABOUT MOBILE DESIGN:

  1. As of July 2019, Google Search’s mobile-first indexing is enabled by default for all new websites
  2. Mobile viewing has now surpassed desktop web traffic with 60% of searches online now come from a mobile device.
  3. By the end of 2019, the number of mobile phone users is forecast to reach over 4.68 billion.

MOBILE DESIGN TIPS:

  • Design: Web page design should factor in the variety of mobile devices used to view your site from the beginning of initial planning.
  • Speed: Faster loading content is both helpful for both mobile and desktop devices. Use of appropriate image sizes and the use of caching can help in increasing your overall site speed.
  • Structure: Organize both your page content and your url structures with a logical hierarchy. This provides for more accurate search indexing & results.
  • Video & animation: Use HTML5 standard tags. Using flash or other license constrained media may provide a poor mobile experience.