Skip to Content Skip to Local Navigation Skip to Global Navigation
Stanford Medicine Website Design Training – TDS Web Services

McKinley Template

Stanford Medicine

Explore Stanford Medicine

  • Health Care
    • Find a doctor

    • Adult-care doctor
    • Pediatrician or pediatric specialist
    • Obstetrician
    • Clinics & Services

    • Adult care
    • Pediatric care
    • Obstetrics
    • Clinical trials
    • Locations

    • Stanford Health Care
    • Stanford Children's Health
    • Emergency Department
    • Dial 911 in the event of a medical emergency

    Explore Health Care

    Learn how we are healing patients through science & compassion

    Back
  • Research
    • Basic science departments
    • Clinical science departments
    • Institutes
    • Research centers
    • See full directory
    • Research Resources

    • Research administration
    • Academic profiles
    • Clinical trials
    • Funding opportunities
    • See all
    • Professional Training

    • Postdoctoral scholars
    • Clinical research fellows

    Research News

    Stanford team stimulates neurons to induce particular perceptions in mice's minds

    Stanford team stimulates neurons to induce particular perceptions in mice's minds

    Explore Research

    Learn how we are fueling innovation

    Back
  • Education
    • MD program
    • PA Programs
    • PhD programs
    • Masters programs
    • Continuing Medical Education
    • Postdoctoral scholars
    • Residencies & fellowships
    • High School & Undergraduate Programs
    • See all
    • Education Resources

    • Academic profiles
    • School Administration
    • Basic science departments
    • Clinical science departments
    • Alumni services
    • Faculty resources
    • Diversity programs
    • Lane Library
    • Student resources

    Education News

    Students from far and near begin medical studies at Stanford

    Students from far and near begin medical studies at Stanford

    Explore Education

    Learn how we empower tomorrow's leaders

    Back
  • Give

    Support Stanford Medicine

    • Support teaching, research, and patient care.

    • Ways to give
    • Why giving matters
    • Make a gift online

    Support Children's Health

    • Support Lucile Packard Children's Hospital Stanford and child and maternal health

    • Ways to give
    • How your gift helps
    • Make an online gift
    Back
  • About
    • About us
    • News
    • Contacts
    • Maps & directions
    • Leadership
    • Vision
    • Diversity
    • Global health
    • Community engagement
    • Events
    • How you can help

    Stanford School of Medicine

    Stanford Health Care

    Stanford Children's Health

    Back
  • Site Search
    Submit Search Query
  • Panel Builder Layouts

    Panel Builder Layouts

    • Layout 1: 100%
    • Layout 2: 66/33%
    • Combo
  • General Page Layouts

    General Page Layouts

    • Low Volume
    • Medium Volume
    • High Volume
  • Home Page Layouts

    Home Page Layouts

    • Homepage 1: Calls to Action
    • Homepage 2: Project or Lab
    • Homepage 3: Information Feed
    • Homepage 4: Promotional Page
    • Homepage 5: Information Landing Page
  • People Page Layouts

    People Page Layouts

    • Faculty
    • Non-Faculty & Mixed Groups
    • Small Groups
    • Large Groups

High Volume General Pages

When there's a veritable encyclopedia of information, employ sophisticated layout techniques including tabs, accordions, anchor links, and downloads to mitigate clutter.

These layout techniques work well to consolidate larger amounts of content into a small space, though make an effort to use them sparingly. Alternatley, splitting the content across multiple pages or simply cutting it down are other effective strategies for managing clutter.

Click to cycle through some examples or use the blue arrows below.

Characteristics

  • 5+ ¶ | Variety of media
  • Staff & People | Publications
  • Homepages | Instructions
  • Cancer Clinical Trials: OnCore Trial Management System
  • Dermatology: Subspecialties
  • EdTech: Portfolio

(H1) High Volume with Jump Links

This is a great layout for pages with long lists of content and FAQs

Long pages aren't necessarily a bad thing, as long as they're clearly segmented and easy to navigate .  To achieve such an effect, this page uses an Anchor Index Menu (on the right) with headings marked as anchors.

(H2) Heading 1

Using "block" style create a strong visual separation

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi suscipit turpis massa, eget bibendum mi egestas id. Donec vulputate erat eget dolor faucibus elementum. Cras imperdiet felis sit amet justo suscipit, vitae sollicitudin neque venenatis. Cras sollicitudin erat in aliquet eleifend. Aliquam tempor risus elementum tempor dignissim. Mauris sit amet efficitur orci. Vestibulum aliquam iaculis eros sed accumsan. Vivamus consequat euismod sollicitudin. Nulla ac arcu sit amet nulla auctor luctus porttitor sed libero. Curabitur eget ullamcorper sem, eu finibus purus. Integer ac justo sed enim vestibulum vehicula eget at dolor. Aliquam ac efficitur neque, sed imperdiet elit. In vestibulum in velit sit amet maximus. Nulla gravida nunc mi, at volutpat sem placerat eu.

Heading 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi suscipit turpis massa, eget bibendum mi egestas id. Donec vulputate erat eget dolor faucibus elementum. Cras imperdiet felis sit amet justo suscipit, vitae sollicitudin neque venenatis. Cras sollicitudin erat in aliquet eleifend. Aliquam tempor risus elementum tempor dignissim. Mauris sit amet efficitur orci. Vestibulum aliquam iaculis eros sed accumsan. Vivamus consequat euismod sollicitudin. Nulla ac arcu sit amet nulla auctor luctus porttitor sed libero. Curabitur eget ullamcorper sem, eu finibus purus. Integer ac justo sed enim vestibulum vehicula eget at dolor. Aliquam ac efficitur neque, sed imperdiet elit. In vestibulum in velit sit amet maximus. Nulla gravida nunc mi, at volutpat sem placerat eu.

Heading 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi suscipit turpis massa, eget bibendum mi egestas id. Donec vulputate erat eget dolor faucibus elementum. Cras imperdiet felis sit amet justo suscipit, vitae sollicitudin neque venenatis. Cras sollicitudin erat in aliquet eleifend. Aliquam tempor risus elementum tempor dignissim. Mauris sit amet efficitur orci. Vestibulum aliquam iaculis eros sed accumsan. Vivamus consequat euismod sollicitudin. Nulla ac arcu sit amet nulla auctor luctus porttitor sed libero. Curabitur eget ullamcorper sem, eu finibus purus. Integer ac justo sed enim vestibulum vehicula eget at dolor. Aliquam ac efficitur neque, sed imperdiet elit. In vestibulum in velit sit amet maximus. Nulla gravida nunc mi, at volutpat sem placerat eu.

Heading 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi suscipit turpis massa, eget bibendum mi egestas id. Donec vulputate erat eget dolor faucibus elementum. Cras imperdiet felis sit amet justo suscipit, vitae sollicitudin neque venenatis. Cras sollicitudin erat in aliquet eleifend. Aliquam tempor risus elementum tempor dignissim. Mauris sit amet efficitur orci. Vestibulum aliquam iaculis eros sed accumsan. Vivamus consequat euismod sollicitudin. Nulla ac arcu sit amet nulla auctor luctus porttitor sed libero. Curabitur eget ullamcorper sem, eu finibus purus. Integer ac justo sed enim vestibulum vehicula eget at dolor. Aliquam ac efficitur neque, sed imperdiet elit. In vestibulum in velit sit amet maximus. Nulla gravida nunc mi, at volutpat sem placerat eu.

Heading 5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi suscipit turpis massa, eget bibendum mi egestas id. Donec vulputate erat eget dolor faucibus elementum. Cras imperdiet felis sit amet justo suscipit, vitae sollicitudin neque venenatis. Cras sollicitudin erat in aliquet eleifend. Aliquam tempor risus elementum tempor dignissim. Mauris sit amet efficitur orci. Vestibulum aliquam iaculis eros sed accumsan. Vivamus consequat euismod sollicitudin. Nulla ac arcu sit amet nulla auctor luctus porttitor sed libero. Curabitur eget ullamcorper sem, eu finibus purus. Integer ac justo sed enim vestibulum vehicula eget at dolor. Aliquam ac efficitur neque, sed imperdiet elit. In vestibulum in velit sit amet maximus. Nulla gravida nunc mi, at volutpat sem placerat eu.

Anchor Index Menu

Anchor Index Menu

(H1) Text Heavy page

This layout is good for articles and stories

(H2) Break up large blocks of text with pull quotes for feature key concepts

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dapibus porta risus non laoreet. Maecenas tempus accumsan pellentesque. Nam sed lacinia justo. Nullam velit nulla, molestie ultrices rhoncus eget, eleifend vitae nibh. Aenean viverra vulputate risus, et laoreet risus cursus id. Phasellus suscipit nunc ac enim dapibus bibendum. Aliquam dignissim elit odio, at tempor odio tristique consectetur. Proin vitae mauris auctor turpis suscipit vehicula tristique vel risus.

Using pull quotes is a great way to feature key concepts

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dapibus porta risus non laoreet. Maecenas tempus accumsan pellentesque. Nam sed lacinia justo. Nullam velit nulla, molestie ultrices rhoncus eget, eleifend vitae nibh. Aenean viverra vulputate risus, et laoreet risus cursus id. Phasellus suscipit nunc ac enim dapibus bibendum. Aliquam dignissim elit odio, at tempor odio tristique consectetur. Proin vitae mauris auctor turpis suscipit vehicula tristique vel risus.

A full width image breaks up the page nicely

Break up large blocks of text with pull quotes for feature key concepts

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dapibus porta risus non laoreet. Maecenas tempus accumsan pellentesque. Nam sed lacinia justo. Nullam velit nulla, molestie ultrices rhoncus eget, eleifend vitae nibh. Aenean viverra vulputate risus, et laoreet risus cursus id. Phasellus suscipit nunc ac enim dapibus bibendum. Aliquam dignissim elit odio, at tempor odio tristique consectetur. Proin vitae mauris auctor turpis suscipit vehicula tristique vel risus.

Using pull quotes is a great way to feature key concepts

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dapibus porta risus non laoreet. Maecenas tempus accumsan pellentesque. Nam sed lacinia justo. Nullam velit nulla, molestie ultrices rhoncus eget, eleifend vitae nibh. Aenean viverra vulputate risus, et laoreet risus cursus id. Phasellus suscipit nunc ac enim dapibus bibendum. Aliquam dignissim elit odio, at tempor odio tristique consectetur. Proin vitae mauris auctor turpis suscipit vehicula tristique vel risus.

Floating an image left or right also visually break up the content

Break up large blocks of text with pull quotes for feature key concepts

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dapibus porta risus non laoreet. Maecenas tempus accumsan pellentesque. Nam sed lacinia justo. Nullam velit nulla, molestie ultrices rhoncus eget, eleifend vitae nibh. Aenean viverra vulputate risus, et laoreet risus cursus id. Phasellus suscipit nunc ac enim dapibus bibendum. Aliquam dignissim elit odio, at tempor odio tristique consectetur. Proin vitae mauris auctor turpis suscipit vehicula tristique vel risus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dapibus porta risus non laoreet. Maecenas tempus accumsan pellentesque. Nam sed lacinia justo. Nullam velit nulla, molestie ultrices rhoncus eget, eleifend vitae nibh. Aenean viverra vulputate risus, et laoreet risus cursus id. Phasellus suscipit nunc ac enim dapibus bibendum. Aliquam dignissim elit odio, at tempor odio tristique consectetur. Proin vitae mauris auctor turpis suscipit vehicula tristique vel risus.

(H2) Secondary Text

Be mindful about volume of text for this type of content. A few sentences usually suffice. Avoid placing mission statements, or long blocks of text in prime real estate areas, especially above the fold. 

(H2) Further Readings

Use downloads in lieu of direct text

Download PDF 1
Download PDF 2
Download PDF 3

share

Simple banner for section hero

This is not necessarly for content driven pages. Remember not to use images for image sake.

(H2) Primary Content Block

Break content into blocks to make it easier to follow

  • Group like-subjects together using Panel Builders. See the Panel Builder Layouts for more ideas how.
  • Text that goes 100% wide is hard to read, so break it up with images or other materials such as downloads, links or quotes.
  • Long blocks of text are discouraged. If you can't avoid it, use the collapse text feature,  More 

available in the Text EditorLess 

Link Name

One strategy to mitigate high-information density is to create 'pathways' or 'funnels' that still accuratley summaraize content.

Link Name

These pathsways should reflect your sites primary objectives; don't simply mimick your left-navigation.

Link Name

As demonstrated here, less is more, so put on your marketing hat and try to be as succinct  and coersive as possible.

Link Name

Keep content fresh to increase the likelyhood of return visits. Rotate news and events to cycle out old information using a feed like the News component.

Secondary Content Block

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi suscipit turpis massa, eget bibendum mi egestas id. Donec vulputate erat eget dolor faucibus elementum. Cras imperdiet felis sit amet justo suscipit, vitae sollicitudin neque venenatis. Cras sollicitudin erat in aliquet eleifend. Aliquam tempor risus elementum tempor dignissim. Mauris sit amet efficitur orci. Vestibulum aliquam iaculis eros sed accumsan. Vivamus consequat euismod sollicitudin. Nulla ac arcu sit amet nulla auctor luctus porttitor sed libero. Curabitur eget ullamcorper sem, eu finibus purus. Integer ac justo sed enim vestibulum vehicula eget at dolor. Aliquam ac efficitur neque, sed imperdiet elit. In vestibulum in velit sit amet maximus. Nulla gravida nunc mi, at volutpat sem placerat eu.

Additional Content Block

  • March 27, 2023

    Asthma, eczema are associated with higher risk of osteoarthritis, Stanford-led research finds

  • March 22, 2023

    Going to the dark(er) side: Stanford Medicine study shows how cancer gene tricks immune cells

  • March 21, 2023

    Students toast their futures as medical residents on Match Day

  • March 9, 2023

    Bryan Myers, physician and pioneer in nephrology research, dies at 86

  • March 9, 2023

    State of Stanford Medicine affirms health equity, diversity and inclusion as core to strategic planning


Older Stories

Final Content Block

Removed from a panel, this content is clearly illustrated as last

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi suscipit turpis massa, eget bibendum mi egestas id. Donec vulputate erat eget dolor faucibus elementum. Cras imperdiet felis sit amet justo suscipit, vitae sollicitudin neque venenatis. Cras sollicitudin erat in aliquet eleifend. Aliquam tempor risus elementum tempor dignissim. Mauris sit amet efficitur orci. Vestibulum aliquam iaculis eros sed accumsan. Vivamus consequat euismod sollicitudin. Nulla ac arcu sit amet nulla auctor luctus porttitor sed libero. Curabitur eget ullamcorper sem, eu finibus purus. Integer ac justo sed enim vestibulum vehicula eget at dolor. Aliquam ac efficitur neque, sed imperdiet elit. In vestibulum in velit sit amet maximus. Nulla gravida nunc mi, at volutpat sem placerat eu.

Featured Content or Person

Be mindful about volume of text for this type of content. A few sentences usually suffice. Avoid placing mission statements, or long blocks of text in prime real estate areas, especially above the fold. 

(H2) Further Readings

Use downloads in lieu of direct text

Download PDF 1
Download PDF 2
Download PDF 3

(H3) Component Tutorials

Documentation on components used to make this page (in order of appearance):

  • Carousel
  • Simple Banner
  • Panel Builder
  • Heading
  • Feature Box
  • Text & Image
  • Button 
  • Download

Website Design Training

Design Catalog

Everest Design Site

McKinley Design Site

Web Training Resources

Health Care

Stanford Health Care

Stanford Children's Health

Stanford School of Medicine

About

Contact

Maps & Directions

Careers

Basic Science Departments

Clinical Science Departments

Academic Programs

Vision

Find People
Visit Stanford
Search Clinical Trials
Give a Gift
©2023 Stanford Medicine
  • Privacy Policy
  • Terms of Use
  • See us on Facebook
  • See us on Twitter
  • Stanford University
  • Stanford School of Medicine
  • Stanford Health Care
  • Stanford Children's Health
  • Stanford Health Care Tri-Valley
  • Stanford Medicine Partners