Formatting Content for the Web
These practices also help with accessibility for visually-impaired visitors and search engine optimization (SEO).
- Meaningful page titles - ‘About’ doesn’t tell our visitors much
- Use complete words and hierarchy in setting URL paths for pages. e.g. communications/web-tutorials matches it’s place in the menu
- Break up pages with subheaders that incorporate your keywords
- Use bulleted lists
- Don't use underlines as that indicates a link online
- Links should have action words in them and be informative - screen readers can jump to read just linked text:
DO: Join the Student Life email list
DON’T: Click here to RSVP
- Add alt text to your images with the image properties tool
- Do not use images in place of text; if the page needs pizazz, find an appropriate image, but important information should be in text. Images are not searchable, nor are they accessible to those relying on text.
Copying and Pasting Content
Never copy and paste directly from Word, Google Docs, other websites. These have code behind them dictating their format that gets brought along.
Use the Paste from Word clipboard, however it can sometimes leave in rogue code.
Change to plain text and format in the CMS - Tools to use:
- Word - Select all (ctrl-a) › Clear formatting
- Notepad (PC) or Textedit (Mac)
Ctrl-shift-t / cmd-shift-t to make plain text
- www.editpad.org - paste content in here to have it changed to plain text
Change “Text format” to Filtered HTML, then paste. Immediately change back to Full HTML to ensure any advanced features, like tables and embedded media, work.
Images - optimize for the web
Images straight out of the camera are much too large to use on the website. Guidelines and instructions can be found on Image resizing.
Great online tool: Pixlr
Includes access to all images and files that have already been uploaded to the site.
- Search under “All files” for anything that is probably already in the database, like social media icons and pictures of campus, students, faculty
- Do not upload your own files and photos multiple times
- When uploading a new photo or document, use a descriptive file name that will enable you and others to search for and find it again
- Save page as a draft before resizing an image
External links: Set links to sites outside of barnard.edu to open in a new window
Pro tip: for links within the barnard.edu site, use relative links. Copy everything after barnard.edu, including the leading slash, e.g., /communications/web-tutorials - the format will set automatically, no worries.
When creating a new table, use these settings:
Cell padding 0
Right-click on the table to get options for cell and table properties
Make use of the options for labels and column and row headers.
Avoid merging cells as this makes it difficult for screen readers to parse.
The college identity calls for bold, sharp photos of the campus and community. Many have been uploaded already and can be found via the media module - use the “All files” tab, filter for images and search on the file name.
Another source is our archive on Flickr - flickr.com/photos/barnardcollege/albums
Clip art is discouraged as it is usually of low quality and looks unprofessional.