"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!

Unpublishing and Deleting Pages

New accordion content

Finding and Inserting Faculty Portraits

New accordion content

Making Your Pages Mobile-Friendly

Dear Web Editors,

Welcome to another edition of Web Editing Made Easy! 

Are you reading this on your phone? If so, you’re not alone. A little more than half of all internet traffic is mobile these days

That’s why it’s important that all web pages look as good on mobile as on desktop. At NYU Law, we’ve got a head start—our site is already mobile-responsive—but here are a few ways to make your pages look their best on the little screen:

1. Keep page titles and text short

Text can feel even longer when you’re reading it on mobile, so be as concise as possible (without being cryptic). No headline should be more than a few lines. 

2. Make sure to put key info in your main content—not in sidebars.

Sidebars appear below main content on mobile, so important text or links need to be in the main content section where users will easily see them.

3. Avoid directional references

Mobile pages often stack images or sidebars, so directional references like  “see below” or “in the image to the left” won’t work. If you need to explain an image, use a caption.

4. Skip soft returns or extra spaces that make text look better on desktop.

Adding non-breaking spaces ( ) or making fixed-width tables may help balance a page on desktop, but will backfire on phones and look awkward.

5. Remember to check how your desktop changes look on mobile!

You can do this by looking at the page on your phone, or by dragging your desktop browser window to be as small as possible.

And that’s it for now! You can find more detailed guidelines for keeping your page mobile-friendly on the Website Editing Help pages. And as always, please feel free to reach out to Rachel Burns at rachel.burns@nyu.edu for any additional questions.

Using Legal Terms

Dear Web Editors,

You may have noticed that the US Supreme Court has been making a lot of headlines lately, with the announced retirement of Justice Stephen Breyer; the nomination process to fill his seat; and a slew of controversial, high-profile cases.

What does this have to do with web editing? Well, we thought it would be a capital idea to highlight the legal terminology portion of our Editorial Style Guide.

US Supreme Court

Here are a few things to keep in mind when you’re mentioning courts on your web pages:

1. Capitalize the name of the court on first reference, and use “the court” after that for most courts. (The US Supreme Court is the exception; use “the Court” for the second reference.)

For example, you might write: “With the help of the NYU Law clerkship office, Jane Smith ’18 was able to clerk for a judge on the US Court of Appeals for the Third Circuit. Her experience on the court was invaluable. She later clerked for a justice on the US Supreme Court. Smith says her time on the Court was a once-in-a-lifetime opportunity.”

2. Capitalize a judge’s title when you mention them by name or are mentioning the position in general for the first time. After that, references to a judicial position in general can be lowercase.

For example, you might write: “John Roberts is the current Chief Justice of the United States. There have been 17 chief justices of the Supreme Court since its formation.”

3. Jurisprudence is just one word – and there’s no need to capitalize it, unless it’s the first word in your sentence.

4. If your center has submitted an amicus curiae brief, that’s great! And there’s no need to italicize “amicus curiae” when you write about it.

Hope you find this helpful! As always, if you have any web editing questions, please reach out to Rachel Burns at rachel.burns@nyu.edu. For style guide-related questions, please contact Senior Writer Atticus Gannaway at atticus.gannaway@nyu.edu.

More soon!

Anchor Links

Dear Web Editors,

Ahoy, mateys! Today we’re talking about anchor links, special links that help users sail directly to a specific spot on a page. They are especially useful for FAQs or for sending users to an individual bio on a team page. 

Adding anchor links is a two-part process. First, you create the anchor, the desired destination for your user, and then you set up a link to it. 

Creating an anchor:

Step 1. Place your cursor at the beginning of your destination line.

Step 2. Click the flag icon in the top of the editor.

Step 3. Name your anchor. (One word is best, but if you need more, be sure to use hyphens between them. So “holmes” or “sherlock-holmes.”)

Step 4. Click “OK” and a flag icon will appear in edit mode to show an anchor has been created. 

Linking to your anchor:

Step 1. Highlight the destination text and click the link icon.

Step 2. Enter a link with the anchor name in the URL field.

If the link is on the same page (for example, if you are setting up an FAQ), all you need to do is type the pound sign and the name of the anchor.
Example: #holmes If the link is on another page within the NYU Law website, enter the relative URL, the part that comes after “law.nyu.edu,” and then add a pound sign (#) and the anchor name.
Example:  /weme/detectives#holmes

 

More soon!

Step 3. Click “Save” in the Edit Link window, then save your page, too. 

Step 4. Test out your link to make sure it is working!

*Note: If you want to share your new anchor spot with someone (in an email or on social media), use the full URL name and just add the pound sign (#) and the name of your anchor.

Example: http://law.nyu.edu/weme/detectives#holmes 

That’s it for now! As always, if you have any questions you can reply to this email or reach out directly to Rachel Burns at rachel.burns@nyu.edu.

New Font Size

Dear Web Editors,

If the text on our website has started looking bigger to you suddenly, don’t worry. Nobody swapped out your glasses prescription; our colleagues in ITS have bumped up the text size in the site's body copy and sidebars to make our pages more readable. (Nice, huh?)

Although there shouldn’t be any issues, we recommend taking a look through your pages just to make sure the change in size hasn’t created any awkward line breaks. 

Look out for:

Any long URLs on your pages. The increased font size could make long URLs disrupt your layout. The fix for this is easy: Make a link with text instead of a URL. That’s something worth doing anyway for accessibility reasons.

Sidebars. Because sidebars are narrow, the new, larger font size may change the way your text fills the space. If you notice you have lines ending in odd places or there’s only one word on a line, edit your text to fit the sidebar. 

While we’re on the topic of sidebars…

Quick reminder! Important points and links should be in your main content, not in sidebars, since on mobile devices sidebars appear below main content, not next to it.

That’s it for now! As always, if you have any questions about this or any other web editing matter, please feel free to reply to this email or reach out to Rachel Burns at rachel.burns@nyu.edu

More soon!

 

Spring Your Webpages Forward

Are all your links working?

Dear Web Editors,

It’s officially Spring, and you all (hopefully!) have moved your clocks forward. Now, it’s time to spring your webpages forward, too, and get them looking their best. 

Where do you start? Just follow our easy week-by-week plan, and by the time the semester’s done, your pages will be, er, blossoming. 

Week One: Check your links!

There's nothing more frustrating than a link that doesn't work.

Do your links work properly? Take a few minutes to go through your pages and make sure that all of your links are going to the right place. If you find any broken links, now is a good time to fix them! Are they accessible? Avoid creating links that just say “Read More” or “Click here,” or using an actual URL as a hyperlink, since they provide no context to screen readers. 

More soon!

Need a refresher in linking? Head over to the Web Editing Made Easy Archive to check out our previous newsletters on Making Links, Call-To-Action Buttons, Anchor Links, and Creating Accessible Links.

That’s it for now! As always, please reply to this email or reach out directly to Rachel Burns at rachel.burns@nyu.edu if you have any questions.  

Are your headings hierarchical?

Welcome to week two of springing your web pages forward! 

This week, it’s all about hierarchy. No, not the kind you see in Bridgerton or The Crown—the kind that helps users know what’s important on a page. And the easiest way to make the hierarchy of a page clear is to use headings.

Here’s how to check and see if you’re using headings correctly. 

Week Two: Get Your Headings in Order

1. Is the first heading you’ve added in the body of the page a Heading 2?

It should be. Heading 1 is only for the page title, and that’s formatted automatically.

2. Are you using headings only for structural reasons?

You should be. Headings are not for decoration, they are for clarity. They are also essential for screen readers, since they literally provide a map of the content for users who can’t see the text. If you just want to emphasize text, try using bold or Callout Text.

3. Do you start each new subsection with a smaller heading?

You guessed it—you should be doing this. Headings indicate a new section or subsection on a page and help readers scan the page easily. To be effective (and accessible), they must be used in order. A Heading 2 must be followed by a Heading 3, which is followed by a Heading 4, if necessary. No jumping allowed.

For more on headings and how to make them, please take a look at last year’s email on Headings from the Web Editing Made Easy Archive. (You can also find a previous email on how to use Callout Text.)

That’s it for now! As always, please feel free to reply to this email or reach out directly to Rachel Burns at rachel.burns@nyu.edu with any questions.

More soon!

How do your pages look on mobile?

It’s week three of springing your webpages forward!

This week, it’s time to take out your phones. Have you ever looked at your web pages on mobile? 35% of our traffic is from mobile, so even if you haven’t made changes recently, it’s worth taking a few minutes to find out what your web pages look like on the little screen. 

Here's what to look for on mobile: 

1. Are your page titles and text short and readable?

You don’t want to have to scroll endlessly on your phone in order to read your page title—or the content of your page as a whole.

2. Is it easy to see the most important content?

The various parts of your page (text, images, sidebars, etc.) stack differently when viewed on a phone, with sidebars at the bottom of the page. Make sure that it’s easy for users to find the most important links and information.

3. Is there any weird spacing?

If you have lots of non-breaking spaces or tables on your page, that might make the spacing look weird on a mobile device. If you see weird line breaks or lots of extra spaces on your phone, that might be the reason. This is a good reminder not to use spaces in your pages to control any layout. What may look good in desktop will likely not look good in mobile.

4. Do your images look okay?

Your images will stack differently in mobile, so make sure you are using captions instead of directional references (such as "in the left photo") in your body text. Also, text in images can be distorted on mobile—and makes the page less accessible for users with screen readers. 

For more details on mobile-friendly pages, check out IT's Website Editing Help page.

That's it for this week! As always, please reply to this email or reach out to Rachel Burns at rachel.burns@nyu.edu with any questions.

More soon!

Using the "Remove Format" Button

Welcome to week four of springing your webpages forward!

Is this problem familiar? You’re copying and pasting text from a Word or Google document onto the website, and suddenly you notice different types of fonts with different sizes and odd line spacing have come along with the text. 

Good news! There’s now a Remove Format button in your editor window that makes it easy to get rid of wonky styling on your page—it’s almost like magic! (Thanks, IT!) 

Here's how it works:

Step 1. In Edit mode, highlight the “wonky” text, and click the “Remove Format” button, circled below. (Please note: While this tool preserves headings, bullets, and links, it removes bold and italics.)

Screenshot of Drupal edit window with Format button circled

Step 2. Click “Save,” then view your page. Ta da! The weird formatting should be gone.

Screenshot of drupal page with text from T.S. Eliot's the Wasteland, formatted correctled.

And that’s it! In fact, it’s so easy that we suggest you do it every time you paste text into the site just to avoid problems. 

Now that you know how to use the “Remove Format” button, take a few minutes to look through your pages and use it on anything that looks off. 

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

More soon!

Are you using Callout Text?

Welcome to the final week of springing your web pages forward. 

Today’s topic: Grabbing attention with Callout Text!

We know everyone is busy wrapping up the semester, but don’t worry, creating Callout Text is easy—and it’s perfect for a brief introduction or an important piece of information at the top of a page. 

All you have to do is highlight your text and select “Callout Text” in the Styles dropdown menu (see below).

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

Note: You won’t see the bigger Callout type until after you’ve saved your page. Once you've saved, you will be able to see a difference between

the Callout text

and normal text.

That’s it for now! For more details on using Callout Text, check out the Web Editing Made Easy Archive

This week, take a look at your webpages. If you have a brief introduction, or an important piece of information at the top of a page, consider making it pop with Callout text.

And as always, please feel free to reply to this email or reach out directly to rachel.burns@nyu.edu with any questions.

More soon!

 

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.