Landing Page Graphics

Landing page graphics can be used to enhance the design of your sites home page as well as other landing pages. The landing page graphic should be representative of the services provided by your Department/Center/Program.

LandingPgGraphic.jpg

The red box in the above image highlights the Landing Page Graphic.  Click the image for a larger view.

The landing page graphic is a unique horizontal background that replaces the normal site banner.  Though every site needs to have a site banner that carries throughout the site, a landing page graphic is optional and shows on a single page.  What makes a landing page graphic unique?

  • Landing page graphics are taller than the site banner, extending down below the horizontal navigation.
  • Landing page graphics can have an optional carousel/slider or short bit of content (text) overlapping it.

Designing Your Own Landing Page Grapic

  • Landing page graphics should be sized 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 due to the nature of the responsive design that is used on the School of Medicine websites,  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.
  • At this time, the landing page graphic can only be implemented by the OIS web team.  
  • Fill out the Request a Landing Page Graphic form to either have us design a landing page graphic for you or to have us install a landing page graphic that you have designed.

What Will It Look Like?

If you've designed your own landing page graphic, you can preview it with our Landing Graphic Tester page.

 

Landing Page Examples

UNC Department of Obstetrics & Gynecology

LandingGraphic_OBGYN.png

 

Department of Pediatrics 

LandingGraphic_Pediatrics.png

 

Genetics 

The Department of Genetics uses a landing page graphic on their home page.  They did not add the optional carousel over the top of the landing page graphic.

LandingGraphic_Genetics.png

 

UNC Otolaryngology/Head and Neck Surgery

LandingGraphic_ENT.png

 

Biochemistry and Biophysics 

LandingGraphic_Biochem.png

 

Department of Allied Health Sciences 

LandingGraphic_AHS.png