Landing Page Graphic
What Is It?
The landing page graphic is a unique horizontal background that replaces the normal site banner, on a landing page. Though every site needs to have a site banner that carries throughout the site, a landing page graphic is optional and shows only on a designated page (Example 1). What makes a landing page graphic unique?
- Landing page graphics are taller, extending down below the horizontal navigation.
- Landing page graphics can have a carousel/slider or short bit of content (text) overlapping it.
- Landing page graphics should be formatted to 2,000 pixels wide by 900 pixels tall. The large dimensions are to accommodate the myriad screen resolutions that are available today. Optimize for file size, and fastest display.
- Please note that not all of the landing page graphic may be visible at a given time. Again, this is to accommodate the various screen resolutions as well as the size of the browser window. Since our site is designed to reflow with the size of the browser window, you may see more of the landing page graphic when the browser window is larger and less when the browser window is smaller. Keep focal areas (people's faces, etc) within the first 1530px from the left to ensure visibility after scaling on the smallest supported desktop screens.
- Keep in mind that the site's name as well as the primary navigation will overlap and hide a portion of the top of the landing page graphic. We can't give you any specification as to how much will be hidden because each site will have certain attributes that will affect this:
- The length of the site name. There is a 300 pixel minimum width for blue box behind the site name. For longer site names, the blue box will expand to fit the name.
- Having a supersite or parent name above a site name will enlarge the height of the blue box that encompasses the site name.
- Having a logo in place of the site name will most likely shorten the horizontal width and lengthen the height of the blue box that encompasses the site name (minimum width of 300 pixels).
- Having more than one line of primary/horizontal navigation. Please note that it is strongly encouraged to have only one line of primary navigation in your site. At sizes smaller than 1024 pixels wide, but larger than 767 pixels, your horizontal navigation may wrap to two lines. Horizontal navigation in sizes below 768 pixels wide will convert to a button for mobile devices.
- The landing page graphic is always aligned to the top left corner of the page. This means that as you resize the browser window you may see more or less of the right and bottom sides of the graphic.
- We will soon have a selection of landing page graphics from which you can choose from to use on your site. Alternatively, you can submit a custom graphic to use as a landing page graphic (request form coming soon!).
- At this time, the landing page graphic can only be implemented by the OIS web team.
- The request form for a landing page graphic will be coming soon!
Can I preview a landing graphic?
You can try out a landing graphic you've created with our Landing Graphic Tester page.
Landing Page Examples
Here are some landing page examples with a brief description of how they were achieved.