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 just ask David Lubinski to make changes on your behalf.

Although this guide is not relevant to labs/groups that are hosted 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 https://www.colorado.edu/instaar/user with your CU Boulder IdentiKey username and password.
  2. After logging in, navigate to your lab/group page as per usual.
  3. When you see 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 instructions, tips, and videos below. If needed, you might want to search the Web Express help docs or ask David a question or three. If you want to take CU’s Web Express training, keep in mind that 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 picture and 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, which "expands" the content 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. If so, contact David about creating a new page for you.

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. Just look for the Revisions tab near the top of your editing screen.

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 ensure accessibility 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 using the 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 buttons for lists
    • Chose the button for a bulleted or numbered list.
    • Do not type your own bullets, using symbols like "*" or "-".

See more about creating accessible content (Web Express support) >

 

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.

Overview - Editing your lab/group (12 min video)

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

Video created by the Web Express support team.  It covers text and image editing.

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

Need to remake this video

[video:http://www.youtube.com/watch?v=17W0R-iGwpc]


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 page are flexible, we do ask that you try to follow the INSTAAR conventions for consistency across labs/groups that make it easier for the site visitor to understand your information. Basically, you just need to mix and match the sections below as needed. Most are optional.

* = Required

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 go to Edit Layout and then update the Title Image field near the bottom.  

Breadcrumb navigation

Your banner image is automatically overlain by "breadcrumb" navigation in white text, like this example:
    Home > Research > Labs & groups > Advanced Laser Technology for Atmospheric Research

Click on any navigation segment - like Labs & Groups - to navigate directly there.

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 Labs & Groups page but with more information.

  • If you want to change your text on the Labs & Groups page, contact David.

Optional second paragraph

  • If you need to clarify collaborations or describe ancillary projects up front, add an optional second paragraph.
  • 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 members can be ordered however you like.
  • Due to Web Express limitations, the process of adding a person is a bit laborious. You will need to enter content manually in a column, typing the person's name, and inserting their previously uploaded photo.
  • The easiest process for entering a new person is to copy all the code for an existing person, paste it, and then modify as needed.

Watch the video instructions (8 min)

new video here???

1. Use columns 

Put instructions here

 

 

2. Enter and link their name

Enter the person's name 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.

3. Insert their photo

Blah blah instructions

4. Link their photo

Link their photo to their INSTAAR profile page similar to how you linked their name. Select the photo and then click the link button in the editing toolbar.


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. Here's an example screenshot showing the full code for the alumni section. It includes code for the expanding section as well as splitting the list into two columns.

This section lets people know how to get in touch with your contact person and may also describe services offered to people 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:

  • Stable Isotope Lab 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 Polar & Paleoclimate Modeling Group.

Add instructions and link to Insert Accordion on Web Express help

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

 

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:

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:

* ::[+] 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 in your lab/group have been tagged in at least three INSTAAR news stories, David will add a news section near the bottom of your lab/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 this section 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 CU Boulder Elements (CUBE), in turn part of the Faculty Information System (FIS). 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 (FRPA) as well as a public website showing research profiles across the university: CU Experts.

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 elements.colorado.edu 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 pages to 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.