Edit your lab/group

Use this guide if your lab or group's website is hosted by INSTAAR, and you want to edit it yourself.


Do not edit your lab/group on a shared computer

Logging out is is not reliable on UCB's Web Express system.After clicking the "Log Out" button, it can take hours before you are actually logged out. This delay is a serious security issue on a shared computer.

Alternatively, skip this guide and email your changes to David Lubinski. He'll make the updates on your behalf.

Although this guide is not relevant to labs/groupsthat arehosted elsewhere (eg., Squarespace, Wix, Weebly), feel free to contact David if you'd like some general feedback on such a website.

If you want to update your lab/group by yourself, follow these four steps:

1. Request access

How many pages do you need?

Most INSTAAR-hosted labs/groups have just a single home page. A few have additional pages for detailed topics or news. For example, the Mountain Hydrology Group has five pages: a home page, three pages to help visitors access snow data stored elsewhere, and a blog page. If your lab/group needs many pages, images, file uploads, or other complexity, then the INSTAAR website may not be the best option.Instead, we recommend an independent website hosted by Web Express, Squarespace, Wix, Weebly, or similar. David is happy to discuss options with you.

Request access for your web editor

Because of a limitation in CU Boulder’s Web Express website platform, only one person in your lab/group can access your lab/group webpages. Decide who will be your lab/group’s web editor and have them email David Lubinski to request an account. David can typically respond within about 24 hours. He will set up your editor to have “Edit My Content” privileges and change the author of the lab/group’s pages accordingly.

2. Log in

Anytime after your access has been set up, log in as follows:

  1. Log in at /instaar/user with your username and password.
  2. After logging in, navigate to your lab/group page as per usual.
  3. When yousee your page,click “Edit” on the blue bar near the top of the page.

3. Learn how to edit

Using Web Express

The INSTAAR website uses CU Boulder’s Web Express website-building platform. Whether you are new to Web Express or not, we suggest that you check out the INSTAAR-specific instructions, tips, and videos below. If you have questions after looking below, or ask David. Taking CU’s Web Express training is optional, mostly because the self-paced Canvas course and training video cover many more topics (eg. layout, person pages, news articles) than you need for editing an INSTAAR lab/group.

Editing in one main field

Once you've logged in and clicked the "Edit" button on your lab/group page, you'll see an editing screen. It shows your information in one big Body field with an editing toolbar at top. You can use the tools in the toolbar to format your text, add links and buttons, and paste in plain text. Images are uploaded via the Insert Media button in the toolbar; its icon looks like a photo overlain by a musical note.

Stay concise

In general, your goal is to keep your home page to a reasonable length, mostly to avoid long scrolling on phone screens. People pay better attention to more concise content.If you have lots of descriptive text to include, you can set up expanding sections called accordions (like the one you are viewing now). Only the title of the accordion is visible until you click on its [+] symbol or text, upon which the content is expanded/revealed so that you can read all of it.If you have even more text, like multiple paragraphs and photos about the history of your lab, you might want a separate page for that.Ifso, contact David about creating an additional page for your lab/group.

Dive in, you've got backups

Please don't hesitate to start editing your lab/group and do some experimentation.If you run into trouble, you've got two backups.First, you can contact David for help.Second, revisions are automatically saved. If you make a really big mistake, you can roll back to a prior version.Look for the Revisions tab near the top of your editing screen.

Be sure to read through all sections of this page before you start editing. This include the instructions below for your lab/group home page as well as optional blog and supporting pages.

The University has a legal obligation to comply with the Americans with Disabilities Act. This means that all of the INSTAAR webpages must be accessible, including yours. As an editor, you can ensureaccessibility for those with visual and cognitive impairments by carefully considering how you enter content. Here are some key tips:

  • Use headings to structure the content of your page
    • Start each main section with a Heading 2 (H2).
    • Subheadings are H3 and so on (H4 > H5).
    • Do not skip heading levels.
  • Write descriptive text for your links
    • Try to avoid usingthe raw URL as the text for your link.
    • Don't use "Click Here" or "More Information" for your link text.
      • Instead, make the text more descriptive, like "2023 snowfall information".
  • Enter image alternative (alt) text
    • Before you click the upload button for an image, you need to add a text description.
    • Succinctly describe the image for someone who cannot see it well or at all.
    • E.g. A smiling researcher in puffy winter parka holds a frozen ice core, with a dramatic mountain in the background.
  • Avoid all caps
    • Screen readers for visually impaired uses may read text that is written in all caps as the letters instead of the words.
    • All caps is generally harder to read because the words lack the shape of letters.
  • Use the toolbar for lists
    • Chose the icon for a bulletedor numbered list.
    • Do not type your own bullets, using symbols like "*" or "-".

To get a sense of how a disabled user might access your lab/group page, watch this 4-minute video demo of a blind person using screen reader software. The video was created by the Universal Access team at Salt Lake Community College. Although filmed in 2016, the process is similar today.

Web Express editing of text and images (4 min video)

Screencast video created by the Web Express support team, covering basic text editing and image uploads. You can start watching at the 1:00 mark and stop at the 4:30 mark, when the topic shifts to menus (not relevant for your lab/group).

Editing your lab/group (12 min video)

New version will be uploaded soon.

See the basics of editing your lab/group home page.

Editing people lists for your lab/group (8 min video)

New version will be uploaded soon.

See how to list your lab/group members near the top of your home page.

If you would like an interactive overview of the editing process, please email David Lubinski with several 30-minute day/time slots for a Zoom session. He'll get back to you about scheduling.

4. Edit

Once you've logged in, navigated to your lab/group's home page or other page, and clicked the "Edit" button, you'll see a toolbar above your content and you are ready to start editing. Shown below are tips for how to structure your home page as well as optional blog and supporting pages.

Home page

Although the structure and headings of your lab/group's home pageare flexible, we do ask that you try to follow the order of the tips below. They can make it easier for the site visitor to understand your information as well as that for other labs/groups. Basically, you just need to mix and match the sections below as needed. Mostare optional.

* = Required

Top banner * Overview text * People * Contact & services * Group photo(s) Blog headlines & news teasers Who we are Research * Join our team Your overview video News Publications
Top banner *

The large banner image at the top of your lab/group webpage is one of the few pieces of content that cannot be accessed by your lab/group’s web editor. To change this image, email your new image to Shelly or David.

  • Your new image should have a decent resolution, preferably 2000 pixels or more in width.
  • David will edit your Layout on your behalf and update the Title Image field in the top section.

Your overview paragraph near the top of your home page succinctly describes your lab/group for website visitors, while provideing keywords and context for search engines like Google.

  • Include both what you do and why it is important.
  • Use fewer than 500 characters, including spaces.
  • Frame your text using “We”: e.g., We study, We use, We perform.
  • Show the initial, overview paragraph in a big font size by putting the insertion point within the paragraph and setting the block style to "Lead" via the toolbar's Styles button.

Make sure your overview paragraph resembles your short description on the page but with more information.

  • If you want to change your text on the Labs & Groups page, send your updates toDavid.

Optional second paragraph

  • If you need to clarify collaborations or describe ancillary projects up front, add an optional second paragraph.
    • For examples, see
  • Use a regular font size, which may require removing the "lead" block style by de-selecting it (click on "lead" again the toolbar's Styles button).

Please include all your lab/group members, including faculty, staff, grad students, and undergrad students.

  • Your director/manager should be listed first and the remaining memberscan be ordered however you like.
  • Due to Web Express limitations, the current process of adding a person is laborious (sorry). For each person, you will need to entercontent manually in a colum: typing their name, inserting theirpreviously uploaded photo, and adding links. We hope to update this process in the future to be more automated.
  • One way to enter a new person is to copy the image and text for an existing person, paste it, and then modify as needed.

Watch the video instructions (8 min)

Since the process is a bit complex, please watch this video:
[VIDEO WILL BE ADDED HERE SOON]

1. Place each person in a column

All the people in your lab/group are listed in their own column within a 4-column row. Add more column rows as necessary by clicking the column icon near the right end of the toolbar options. Add more columns within a row by clicking the right arrow within an existing column row.

2. Insert their photo and link it

Click the Insert Media button, which has a musical note superimposed on an image icon. Then type the person's last name to look for an existing image. Follow the prompts to insert their photo. Once inserted, change the photo size to "Square Thumbnail". Otherwise, it will appear too large.

Once the photo is in place:

  1. Select the photo
  2. Click the link button in the editing toolbar (it looks like a link of a chain), and you should see a Link dialog box.
  3. Start typing their name in the Link field and you should see one or more options.
  4. Select the correct option, and click the OK button.

3. Enter their name and link it

Enter the person's name below their photo and bold it. Most people already have a profile page on the INSTAAR website, so please convert their name to a link:

  1. Highlight their full name
  2. Click the link button in the editing toolbar (it looks like a link of a chain), and you should see a Link dialog box.
  3. Start typing their name in the Link field and you should see one or more options.
  4. Select the correct option, and click the OK button.

Alumni

When a person leaves your lab/group, you can either just remove them from the webpage or add their names to your alumni list. Please bold their names.

This section lets people know how to get in touch with your contact person and may also describe services offered topeople outside of the lab/group.

If services are not offered, then simply title this section "Contact" and include information like name, phone, and room number. Examples include:

If you do offer services, you might include a brief description. Here are some examples:

If your description of services is extensive, consider using an expand shortcode with a [+] symbol to tuck the information away until clicked. Here's an example:

  • has several expand sections, with the first including a detailed table of analysis types. The screenshot below shows that table after expansion.

A group photo can be helpful for demonstrating lab/group camaraderie. It can be shown in different ways.

For examples, see:

Previous group photos

If you want to retain prior group photos, we suggest tucking them away in an expandable section whose [+] symbol can be clicked.

A good example is shown in the above screenshot for the.

Blog headlines link to more information.

See examples where blog headlines link to a separate blog page:

News teasers

If there is an illustrative media story for a lab/group, consider including a few sentences about it and linking to it. See an example at

    • Brief "In the news" text links to anarticle (CU Boulder Today)

This section can help provide site visitors a valuable glimpse into your lab/group camaraderie, culture, and beliefs.

This section may or may not use "Who we are" as a heading. Consider alternative headings. Different labs have taken different aproaches to showing who they are. See examples:

    • Fieldwork photos
    • Field, lab, and social photos
    • "We believe" poster and blog headlines.
    • "We believe" poster, group photo, and blog headlines.
    • Lab and field photos
    • "We believe" poster
    • Field, lab, meetings, and group photos
    • Group photos, previous group photos, and blog headlines.
    • Group photo collage and blog headlines

Your lab/group can customize this vital section as desired, using whatever combination of text, images, and links best illustrate your research.

This section is intentionally flexible, and labs/groups have used it in lots of different ways. Ideas for content include the following, possibly shown in expandable [+] accordions:

  • Projects
    • e.g.,
  • Completed projects
    • e.g.,
  • Field sites
    • e.g.,
  • White papers
    • e.g.,
  • Images of equipment
    • e.g.,
  • Example photos
    • e.g., masonry layout used by
  • Media story headlines
    • e.g.,
  • Outreach
    • e.g.,
  • By the numbers graphic
    • e.g.,
  • Partners, Collaborators
    • e.g.,

* ::[+] VIDEO - another explainer using column layout, masonry image uploads etc::

Consider a specific section inviting people to join your lab/group.

You can let prospective students or potential collaborators know who you might be looking for and how to reach out to you.

Different labs/groups use different headings, but they usually say something like "Join our team" or "How to join."

For examples, see:

If your lab/group has a short overview video, be sure to include it on your home page.

For examples, see:

First, make sure your video is on YouTube, Vimeo, or Wowza. Then blah blah instructions here

If faculty and senior staff in your lab/group have been tagged in at least three , David will add a news section near the bottom of yourlab/group home page that highlights the three most recent stories.

Any future INSTAAR news stories tagged with those faculty members will automatically appear in this section. They will also appear in a separate news page that includes all the stories, not just the three most recent ones.

Note that thissection one of the few that is not accessible to your web editor (a Web Express limitation). If you need changes, please contact David. For example, you might need us to add or remove a faculty member to show more or fewer stories.

See examples:

The publications section at the bottom of the lab/group home page is one of the few that is not accessible to your web editor (a Web Express limitation). If you need changes, please contact David.

From CU Boulder's publications database

For most labs/groups, the bottom publications section is based on lab/group members that are included in CU Boulder's publications database. This database is part of , in turn part of the . The database contains publications from most faculty and some staff and is interconnected with the annual self-reporting process for the Faculty Report of Professional Activities () as well as a public website showing research profiles across the university:.

Adding or deleting lab/group members from your publications list requires that you contact David. If you’re missing some specific publications, the associated lab/group member needs to log in to CUBE at and make sure they’ve claimed all of their publications and add more if needed. After they make updates in CUBE, the changes may take a few days to appear on your lab/group home page.

From alternative sources

If you're not a fan of the CU Boulder publications, we can instead show links to Google Scholar and similar services. Please send the links to David.

Yet another option

Another option is to manually add a section about publications, such as highlighted publications, higher on the page. You can do that yourself via the editing toolbar by adding and updating your needed text.

Blog page

Some labs/groups use an optional blog page to provide updates and show their culture.

Links to the blogs are typically near the Who we are and Group photo sections of the lab/group's home page, accompanied by a few blog headlines.

Example blogs:

Supporting pages

If you need a few supporting pages, just ask David to set them up and then you can add and edit your new content.

For example, the Mountain Hydrology Group has three pagesto help visitors access near-real-time snow water equivalent (SWE)data. The data are stored on servers elsewhere, but these pages link to it.

Editing additional pages works pretty much the same as editing your home page.

If your lab/group needs many pages, images, file uploads, or other complexity, then the INSTAAR website is not the best option. Instead, we recommend migrating your lab/group to an independent website hosted by Squarespace, Wix, Weebly, Web Express, etc. David is happy to discuss options with you.