"Web Editing Made Easy" Archive

Each semester, the Office of Communications sends out a series of "Web Editing Made Easy" emails to all of the members of the Law School community who edit the NYU Law website. These emails contain tips for keeping your pages updated and user-friendly. 

This is an archive of past "Web Editing Made Easy" emails. If you want to be added to the list to receive future emails, please contact Rachel Burns in the Office of Communications at rachel.burns@nyu.edu.

2021-2022

Web Editing Made Easy Archives

Dear Web Editors,

Welcome back to Web Editing Made Easy! I hope that the fall semester is treating you well. 

As a reminder, this is an email series that offers advice for the Law School’s web editors on how to keep your pages up to date and easy to use. Last semester, we looked at topics including:

  • Getting rid of wonky text styling
  • How to use headings
  • Making your pages user-friendly
  • Embedding YouTube event videos

In case you need a refresher—or if you are new to receiving these emails—you can brush up on all of last semester’s topics by visiting the “Web Editing Made Easy” Archive, now available in the Communications section of the NYU Law website.

If there are any topics you would like to see addressed in a future edition, please let me know! And if you have any other questions, you can always feel free to get in touch.

More soon!

Making Hyperlinks

Dear Web Editors,

Welcome to another edition of Web Editing Made Easy! 

Now that you have had the chance to peruse the archive of past topics, it’s time to explore new territory: the best way to make hyperlinks. (Read on, even if you know how to link; some protocols have changed.)

To make a hyperlink:

  1. Highlight the text you want to serve as the link.
     
  2. Click the “link” icon in the toolbar, circled below:
     
    Screenshot of Add Link button

    A box with a URL field will appear.
     
  3. There are a few types of links: internal ones that go to other pages on the NYU Law website, external ones that go to pages on other websites, and special links that go to email addresses or PDFs. (Linking PDFs will be a topic in a forthcoming WEME.)
     
    • To make an internal link, type the title of the destination page in the URL field. When a list appears, click your title from the options.
       
      Screenshot of adding an internal link in drupal
    • To make an external link (including links to the main University site), copy and paste the full URL into the entry form, including the “https://”: 
       
      Screenshot of adding an external link
    • To make an email link, type “mailto:email.address@nyu.edu” in the URL field:
       
      Screenshot of adding an email link

      *NOTE: You do not need to fill in the Title field in the “Add Link” window.
       
  4. Once you have added your link, press “save” in the “Add Link” window. Be sure to also  save the page you are working on.
     
  5. Be sure to check your link to make sure it works!

That’s it for now. As always, if you have any questions, or if there are any topics you want to see in future emails, please let me know.

Uploading and Linking to PDFs

Dear Web Editors,

Welcome back to another link-focused edition of Web Editing Made Easy! In our last email, we discussed internal links, external links, and email address links. 

Now, the missing link: uploading and linking to PDFs. 

Note: Please only use PDFs if you have a specific need that can't be met by a web page. PDFs are not as mobile friendly and easy to edit as web pages. They also need to be remediated to meet NYU's accessibility policy before they can be posted to the Law School website. For information on how to make your PDF accessible, please follow these instructions.

Ok, here’s how to upload your accessible PDF:

  1. Open the Edit tab on the web page you’re working on and scroll to the “Files” box at the bottom. Click the “Add Media” button:
     
    Screenshot of Files box in Drupal
  2. Next, click “Choose Files.” A list of your computer’s files will appear. Select the PDF you want to upload, and then click “Open.”
     
    Screenshot of "add files" window in Drupal
  3. Now you get to name your PDF. Choose something logical/descriptive, then click save and insert. Your PDF should appear in the Files box.

Congratulations! You’ve uploaded your PDF.

Now, here’s how to link to it. (This will be familiar from our last email.)

  1. Highlight the text you want to serve as the link. 

    Note: The linked text should include the file type (in this case, PDF) and file size (usually in KBs). You can find the size by right-clicking on your PDF and then clicking “Get Info.”
    Here's a sample link: 2021-2022 Block Schedule (PDF: 111.63 KB)
     
  2. Click the “link” icon in the toolbar, circled below.
     
    Screenshot of Add Link button
  3. Type the title of the PDF in the URL field. When a list of PDFs appears, select yours from the options.
     
  4. Press “save” in the “Add Link” window.
     
  5. Be sure to save the page and check your link to make sure it works!

That’s it for now. Hope everyone has a good Thanksgiving break!

Editorial Style Guide

Dear Web Editors,

Welcome to another edition of Web Editing Made Easy! This one is all about style. NYU Law editorial style, that is. 

Let’s start with a flash quiz: 

Do we use a serial comma? (Yes.) Did Amal Clooney earn an LL.M. or an LLM here? (We use LLM—no periods.) Do we capitalize seasons and semesters? (Tricky one. It’s the fall season, but Fall 2021.)

 

Don’t worry if you were stumped by any of these—you can always find the answers to these and other style questions in our Editorial Style Guide, part of our updated Branding Guide.

And in case you’re swamped with work as we end the fall semester (lowercased, of course), we've included a quick guide in this email to some of the most salient style points.

Here are the basics:

  • How to refer to the Law School
    First use: New York University School of Law, NYU School of Law, or NYU Law. After that, you can also use the Law School.
  • How to write numbers in your text 
    Spell out one to nine. Use numerals for 10 and higher.
  • How to write abbreviations
    No periods in abbreviations or degrees. We use US, the UN, the UK, the EU, and Washington, DC; and JD, LLM, JSD, and PhD. 
    Use periods in a.m. and p.m., and use an en-dash to designate a time span (for example: 1:00–2:00 p.m.).
  • When to capitalize titles
    Only capitalize a title that appears before a person’s name, as in Dean Trevor Morrison. Titles that appear after a name are not capitalized, as in Trevor Morrison, dean of NYU School of Law. 

That’s it for now! Make sure you take a look through the rest of the Editorial Style Guide to see the variety of topics covered. And while you’re at it, you can also check out the Design Projects Guide, which gives an overview of the Law School’s print and digital products and their production.

As always, please feel free to reach out if you have any questions. You can just reply to this email or reach out to Rachel Burns at rachel.burns@nyu.edu

Looking Ahead to January

Dear Web Editors,

Phew! We’re almost at the end of the semester! Before you head out for that well-deserved winter break, consider taking a few minutes to be sure your web pages are ready for next semester.

Here's a quick checklist of what to review:

  1. Dates and deadlines: It’s going to be 2022 when we get back in January! Make sure that any references to the semester, season, and year will be correct going forward.
  2. Contact information: Take a fresh look at the email addresses and phone numbers on your web pages and update them if necessary.
  3. Links: It’s always good to periodically check that all the links on your pages are live and going to the right place. For example, are you linking to any fall courses that need to be updated to spring courses? Now is the time to make those changes!
  4. Styles: If you have extra time to spruce up your pages, check out our Web Editing Made Easy archive and/or head over to the Editorial Style Guide that we shared with you last week.

That's it for now. As always, please feel free to reply to this email or reach out directly to rachel.burns@nyu.edu if you have any questions. Have a good break and a happy new year!

The more, the merrier!

Let me know if there’s anyone on your team who’d like to become a Web Editing Made Easy subscriber. We’re happy to add them!

 

2020-2021

Introducing "Web Editing Made Easy" + Getting Rid of Wonky Text Styling

Dear Web Editors,

Welcome to Web Editing Made Easy, a new email series offering small pieces of advice that will make a big difference in your pages.

Here’s our first topic: How to quickly get rid of wonky text styling problems.

Ever copy and paste content from a Word document or other website into a web page and end up with some weird looking text? You know, wrong font, strange spacing, or a bulleted or numbered list gone haywire? 

Here’s a simple way to fix the problem: 

  • First, copy and paste your content into TextEdit or Notepad (You can find TextEdit in Mac Applications and Notepad in Windows Accessories.)
  • Then cut and paste your content into your web page.

This process usually clears any unnecessary code in the html (such as <spans>) that causes formatting problems, particularly in mobile.

Even better, make it a habit to run your content through TextEdit or Notepad before pasting it into your page and avoid text issues altogether.

Hope this is helpful! I’m always happy to answer any questions that might come up as you’re working, and if there are any specific topics you’d like us to address, please let me know.

Stay tuned! More tips next week!

Creating Accessible Links

Dear Web Editors,

Welcome back to Web Editing Made Easy. 

Did you know that you should avoid creating links that just say “Read More” or “Click here”, or using an actual URL as a hyperlink? These kinds of links do not meet accessibility requirements, since they provide no context to screen readers.

Instead, give the text of the link context in one of these ways:

Want more detail on this subject? Read more about how to create links on the website. :)

Of course, please reach out if you have any questions or suggestions. 

More tips next week!

Headings

Dear Web Editors,

Welcome back! Today’s Topic: Making headings easy as H1, H2, H3.

Headings, sometimes referred to as H’s, are an essential part of an accessible page; they create a clear hierarchy so that screen readers can follow the structure easily. 

Here’s what you need to know about them:

  • Heading 1, used only for page titles, is formatted automatically when you fill in the Title field.
  • You create other Headings by highlighting text and choosing a size from the “Format” menu. (If you highlight an existing Heading, this menu will show you its size, too.)
Screenshot of WYSIWYG with "Format" dropdown circled
  • Use Headings to establish new sections and subsections.

    • Heading 2 introduces a new section of content.
    • Heading 3 is for subsections of that content. 
    • Most of our web pages don’t go past H3, but if your subsection has a subsection, use the next Heading in the menu (i.e. H4, then H5). Do not skip levels or your page will not be accessible.
  • Remember, Headings are used only to indicate structure. If you just want to emphasize text, use Bold type.

Still have questions? There is more information about headings on the Accessibility for NYU Websites page. And of course, I’m always happy to help with any more specific questions you might have on the topic.

 

Callout Text

Dear Web Editors,

Welcome back to Web Editing Made Easy! This week’s topic: Going Big with Callout Text.

Callout Text is fun, large type that can be used for a very brief introduction or overview near the top of a page. 

Unlike a Heading, which (as you may remember from last week) is required to give a page structure, Callout Text is completely optional and used to grab a reader’s attention. Here are a few examples: ClinicsOrientationYour 1L Year, and the Tax Law Center’s About Us.

To create Callout Text, just highlight your content, and select “Callout Text”  in the Styles dropdown menu. (see below)

Screenshot of WYSIWYG with "Styles" dropdown circled and "Callout Text" selected


That’s all it takes! A word of caution, though: While Callout Text makes your page pop, too much can overwhelm users. A little goes a long way towards making your page seem fresh and readable.

As always, please let me know if you have any questions about Callout Text, or any other topic you might want to see addressed here.

More tips next week!

Making Your Pages User-Friendly

Dear Web Editors,

Welcome to this week's Web Editing Made Easy! 

Today’s topic: Making your pages user-friendly.

Ever wish your web pages would magically become easier to read and not so text-heavy? Here are 5 simple steps to help get you started. (No wand necessary.)

  1. Prioritize the most important information. Give users what they want, and you’ll get what you want—fewer phone calls asking where to find information.
  2. Lose the extraneous and outdated material. TMI and inaccurate information distract users from important information and leave them frustrated.
  3. Shorter paragraphs = Better web copy. Do you read long paragraphs on the web? Neither does anyone else. So keep them brief, usually not more than a few sentences.
  4. Use lists whenever possible. Bullets or numbers help make your text more scannable.
  5. Remember to use headings. (We know you’ve got this one!) They help readers scan the page easily.

As always, please let me know if you have any questions about this, or any other topic you might want to see addressed here.

More soon!

Going to the Source with HTML

Dear Web Editors,

Celebrate Spring with another edition of Web Editing Made Easy! 

Today’s topic: Cracking the code. Source code, that is!

There is more to web content than what you can see—behind the scenes HTML (Hypertext Markup Language) is working to make your type bold, hyperlink words, add headers, etc. You usually don’t need to be concerned with this source code, but there are times when tweaking the HTML may be the only way to fix a formatting problem. 

One of those times is when unwanted fonts, colors, or sizes resist the cleansing powers of TextEdit or Notepad. The problem: <span> commands or as I like to think of them, spammy <spans>.

Here’s how you can make them disappear:

  1. Start by clicking the “Source” button. (You’ll see all sorts of hard-working HTML here, such as  <p> for paragraph; <a href:> for hyperlinks; <h2> for a H2 heading style.) 
     
    Screenshot of WYSIWYG with "Source" button circled
  2. Find the <span> commands. Like all HTML commands, they will have two parts, an opening and a closing tag. It will look like something like this:

    <p><span style="font-family:'Comic Sans MS'">Your text here.</span></p>
     
  3. Delete the opening <span> and everything inside of it, as well as the closing </span> and everything inside of that. (See text in bold above). Be sure to leave all the other HTML as is. The result:

    <p>Your text here.</p> 
     
  4. Click the “Source” button again. Voila! You’ll be back in the regular editor and can see if everything looks good before pressing save! 

Hope this is helpful -- as always, let me know if you have any further questions!

Making and Using Accordions

Dear Web Editors,

It’s time for a new edition of Web Editing Made Easy!

Today’s topic: How to display lists and FAQs in Accordions. (Not the musical instruments.)

Accordions are lists of headers that you can click open and closed to reveal pockets of information, like the one you are reading right now.

They are a great way to tame long lists that have lots of content, such as an FAQ or an overview of scholarships or programs. (For some more examples, check out the Students landing page and the COVID-19 Updates and Information pages.)

Accordions look fancy, but they are easy to create. Just follow these steps:

Step 1. Place your cursor where you want the Accordion to begin and click the Accordion icon (circled in purple below). A two-tab Accordion like the one below will appear.

Screenshot of WYSIWYG with "Accordion" button circled


Step 2. Replace the “Accordion title 1” and “Accordion content 1” text with your own. Repeat the process with the second tab. 

Step 3. To add or delete an Accordion tab, right-click it (or press control and click if you’re using a Mac). Choose an option: Add Accordion tab before, Add Accordion tab after, and Remove Accordion tab. 

Screenshot of sample accordion with "add accordion tab after" dropdown selected


Step 4. When your Accordion is complete, save your page. Hopefully, now you’re as comfortable with accordions as the great Finnish star Esa Pakarinen.

Finnish accordion player Esa Pakarinen

(Image courtesy of Creative Commons)

As always, please get in touch if you have any questions!

Embedding YouTube Event Videos

Dear Web Editors,

Welcome to another Web Editing Made Easy! 

Today’s topic: Adding NYU Law YouTube videos on your web pages.

What’s the secret to adding video to your web page? Believe it or not, it’s mostly copying and pasting. Here’s how to do it, step by step: 

Step 1. Find the YouTube link of the video you want to embed. Click the “Share” button in the bottom right corner, pictured here:

Screentshot of Forum event video with "Share" button circled


Step 2. Select “Embed.”

Screenshot of YouTube share options with "Embed" circled


Step 3. Copy the code that pops up. It will look something like this:

<iframe width="560" height="315" src="https://www.youtube.com/embed/scElLnIwPRE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Step 4. Go to your web page and open the Editing tab. Click the “Source” button and paste the embed code where you want the video to appear. 

Tweak the embed code:

  • The title: For accessibility reasons, you need to put the title of your video in the code.
    • Just change the generic title=YouTube video player text to the title of your video, and be sure to keep the quotes on either side. So, in this case, replace title="YouTube video player" with title="The SolarWinds Breach".
  • The height and width: You can adjust the height and width of the video to fit your layout.
    • While the automatic setting width="560" height="315" is ok for videos that appear in the middle of a page, you’ll want to use width="775" height="436" for videos on the top of a page like the Technology Law & Policy Clinic.

Step 5. Now click the “Source” button again, then press save. Your video is ready for viewing. Time to break out the popcorn and enjoy the show!

As always, please feel free to reach out if you have any questions about this or any other web editing topic.

More soon!

Naming Page Titles and URLs

Hello Web Editors!

Welcome to this week’s edition of Web Editing Made Easy. 

Today’s topic: Naming a web page.

As William Shakespeare once asked, “What’s in a name?” Well, for today’s web editors, the answer is a page title and a URL. 

Page Title

Every page needs a title, but how do you choose the best one? You want something clear and descriptive. Not too long, but with enough information to help a user know what it’s about. For example, Contact Student Affairs is better than Contact Us. Admissions FAQ is better than FAQ. If it helps, think about what you would want someone to see if they come across your page in a Google search result. 

Once you’ve settled on a good choice, enter it in the Title field at the top of the edit page. It looks like this:

Screenshot of Drupal page title field


URLs

Your page also needs a URL. (Drupal automatically gives it a node number, but a link like law.nyu.edu/node/123456 doesn’t help users know where they are on the website.) 

A URL is like a mini-map that tells users where a page is located, so any new URL you create needs to follow the pattern of the pages around it. Just add slashes to indicate subsections and dashes to separate words in page names. (Try to keep names a reasonable length, so that you don’t end up with long, unwieldy URLs.)

For example:

  • If your section of the website is www.law.nyu.edu/starwars, and you are creating a new page in that section about the Mandalorian, you would name it law.nyu.edu/starwars/mandalorian.
  • If that new page had a sub-page about Baby Yoda, the URL might be www.law.nyu.edu/starwars/mandalorian/baby-yoda.

Once you’ve got your URL ready, enter it in the URL ALIAS field in the drop down menu on the far right side of the edit page.

Screenshot of Drupal URL Alias field


And, that’s it! All’s well that ends well!

I hope this is helpful! And if you need a refresher, full instructions on adding new pages to the website are available for your use.

More soon!

Summer Web Checklist

Dear Web Editors,

It’s hard to believe, but summer is almost around the corner! (We all just have to make it to the end of the semester first!)

Many web editors like to use the summer months to work on their web pages, so we've put together a checklist to help you organize your efforts:

Spring Into Summer Web Checklist

  • Update information.
    This might seem obvious, but it’s essential. Be sure to check dates, class years, courses offered, and look for references to Fall 2020 or Spring 2021.
  • Look for any style issues, such as wrong font, size or odd spacing.
    If you see anything amiss, use Text Edit or go to the source code to fix. (For more, see our first and sixth Web Editing Made Easy emails.)
  • Test links, and be sure they are accessible.
    Make sure that the links on your page still work and that they are in an accessible format. (For more on link styles, see the second Web Editing Made Easy email.)
  • Check the order of headings.
    Click on each heading to see what “H” it is—and make sure that there’s no jumping from H2 to H5, for example. (For more about using headings, look back at the third Web Editing Made Easy email.)
  • Consider making content more scannable.
    Users are unlikely to read long paragraphs. Break the page into sections using headings or accordions. (For more on accordions, see the fifth Web Editing Made Easy email.)
  • Delete unneeded pages and outdated PDFs.
    If you have a page you no longer need, please delete it. And (as we mentioned in last week’s Web Editing Made Easy email), all posted PDFs need to be remediated.

Before you know it, your pages will look amazing, and you can head out for some fun in the sun—or settle in to binge-watch any shows you missed out on (The Mandalorian, anyone?). 

That’s it for Web Editing Made Easy this semester. But we’ll be back in a few weeks with more. 

In the meantime, please feel free to reach out if you need help or want to suggest a topic we should cover.