Content

Writing for the Web

Your website should clearly identify your department and its purpose. The best advice is to simplify your writing. There are many ways to accomplish this, even when working with academic/technical material.

• Be succinct: Your site visitors are more likely to read shorter sentences that make up just a few paragraphs. 300-700 words is a good target for a page’s body copy.
• Break up your content: Use bullets, subheads and short paragraphs to guide your audience.
• Talk to your audience: For example, “you will,” “you can,” and “if you want more information.”
• Links: We encourage you to link to relevant information — either as buttons or contextual links. That being said, be judicious. Too many links on a page can overwhelm your audience.
• Spell out acronyms on first reference: Not everyone who visits your website knows what each acronym means.

See UT Dallas’ Editorial Guidelines for answers to common questions about writing style.

Images

• Image Selection Tips
• Common Image Sizes
• Optimize JPGs for Web
• Naming Image Files

Image Selection Tips

• When gathering photos for a website, aim for variety to effectively represent the University’s diverse community.
• Be mindful of the date an image was taken. In addition to looking outdated, the older the image, the more likely it’s been overused.
• Choose an image that will display well on mobile, tablet and desktop screens.
• Optimize images for website use. Note that the more detailed and visually complex an image is, the larger its file size tends to be.

Common Image Sizes

The following are common aspect ratios and pixel dimensions used for web.

Aspect Ratio	Image Size (pixels)	Common Uses
16:9	1920 x 1080 1280 x 720	Standard widescreen — widely used on desktop monitors, TVs and digital cameras. Works well on hero pics and social media cover photos.
1:1	1200 x 1200 1000 x 1000 800 x 800	Square — perfect for profile pics, social media posts and mobile screens.

If the top two ratios won’t work…

Aspect Ratio	Image Size (pixels)	Common Uses
21:9	1680 x 720	Very wide, works well on hero areas with less height.
4:3	1024 x 768	Typically seen on iPads, older TVs and digital cameras. 4:3 is a good option if you need something between a square and widescreen image.
3:2	1920 x 1280 1080 x 720	From 35mm film and photography, still widely used for print sizes. 3:2 is a good option if you need something between a square and widescreen image.

Optimize JPGs for Web

JPG works best with photos. To optimize a logo or vector graphic for the web, export your image as a PNG or SVG instead.

To optimize a JPG file for web:

1. Open the image in Adobe Photoshop.
2. Resize and crop the image:
   • Export images at least 2x larger than how they’ll be displayed on the webpage (ex: for profile pics displayed at 300×300 pixels, resize and export each photo 600×600 pixels or bigger.). Doing so will accommodate high-resolution displays.
   • [Optional] Apply common image dimensions so it’s easier to standardize image file sizes. Some suggestions:
     • 800×800 pixels for square or circle profile images.
     • 1280×720 pixels for sidebar or main content images.
     • 1920×1080 pixels for hero banners, backgrounds, and full-width images.
3. Use the Blur tool on areas around the focal point. The more blurred parts the image has, the smaller the file size will be.
4. [Optional] Mute colors, export in black & white or go monochromatic if it works with the design. Fewer colors on images yield smaller file sizes.
5. Export the image for the web: File > Export > Export As…
   • Format: JPG
   • Quality:
     • Adjust so the final size is about 300kb or less. Go as small as possible without sacrificing too much quality.
     • You may need to tweak the image dimensions or blur more areas to get it under 300kb.
     • For pages with multiple images, try to keep the total of all images on the page under 1MB.
6. After exporting, remove unnecessary image metadata with ImageOptim.
   • ImageOptim is for Macs only. Here are some options for non-Mac users.
7. Add the image to the webpage, then test to see if it displays well. If not, try other image dimensions or go bigger on the file size. Test again, making sure the page still loads fast.

Naming Image Files

Keep your image file names informative but short:

• Lowercase all letters.
• Limit the length to about five words or less.
• Use dashes to break up the text.
• Do not use words like “ad” or “banner” to avoid getting blocked by ad blockers.

Examples of descriptive yet concise file names:

• students-studying-campus-mall.jpg
• ryan-garcia.jpg
• chess-team-fall-2020.jpg
• texas-instruments-plaza-sunset.jpg

Statistics & Fast Facts

University Web Services manages a Statistics plugin that uses shortcodes to keep UT Dallas’ fast facts and numbers up-to-date on multiple sites.

The plugin requires the following:

• must be a CampusPress website
• Statistics plugin enabled

Click the “Statistics Includes” tab on the left column of your WordPress dashboard to view the list of statistics shortcodes:

Embed shortcodes in your content when you mention facts and figures about UT Dallas on your CampusPress pages. Available stats include:

• total enrollment
• number of degree programs
• student:faculty ratio
• average SAT score of incoming freshmen
• … and more.

If you see an issue with the Statistics plugin or its numbers, please contact webdeveloper@utdallas.edu.

---

For UWS team only: Log in with your NetID in sites/prod-oberon to:

• View the shortcodes
• Edit a statistic
• Add a new statistic

SEO Tips

Keep your web content updated and relevant using strategically chosen keywords.

• Remove old content regularly.
• Redirect the URLs of outdated pages.
• Avoid duplicate content; search engines may not know which URL to rank higher, resulting in low rankings for all.

Meta Descriptions

Google truncates the meta description snippet to about 160 characters, so keep descriptions between 50 and 160 characters. Search engine results show the meta description mostly when the searched-for phrase is within the description.

<head>
...
<meta name="description" content="This is an example of a meta description. This will often show up in search results.">
...
</head>

QR Codes

Create trackable QR codes with Google Analytics and Adobe InDesign.

Step 1: Build Your Trackable URL

1. Go to Google Analytics’ Campaign URL Builder.
2. Complete the required form fields*. Enter qrcode for the Campaign Source.
3. Copy the generated campaign URL.

Step 2: Build the QR Code

1. Open a new square document in Adobe InDesign.
2. Go to Object > Generate QR Code…
3. Select Web Hyperlink as the content type. Enter your trackable URL. Click OK.
4. Click on the document to place your QR code into it.
5. Resize and center the QR code with the Selection Tool (V). Drag a corner of the QR code while holding Ctrl+Shift (PC) or ⌘+Shift (Mac) to preserve its proportions while resizing.
6. Save the QR code as a vector file** appropriate for how it’ll be used.

Additional Tips

* For more specific tracking (ex: have a tracking code per sign), differentiate your URLs in the Campaign Content field.

** Vector files will yield the best image resolutions. Export the QR code as an EPS file for print. For web use, convert it to an SVG.

If you plan to change the destination of your QR code over time, create it with a redirect that you can modify later.