Hyphens in URLs

So you want to create a URL without hyphens? Not so fast. Hyphenated URLs are easier for users to read, tend to be clicked more often in search results, and prevent unwanted words from forming. Additionally, Google considers hyphens to be word separators, splitting potential keywords in your URL structure. Their advice?

“Consider using punctuation in your URLs. The URL http://www.example.com/green-dress.html is much more useful to us than http://www.example.com/greendress.html. We recommend that you use hyphens (-) instead of underscores (_) in your URLs.”

While Bing and other search engines accommodate the use of underscores as word separators, Google does not … yet. So, for the time being, hyphens are your best bet.

YouTube Preview Image
Posted in Video | Leave a comment

Changes to Ektron Reports

With the upgrade to Ektron 9, the steps to downloading a form report has changed a bit. Now, when you click on the “Get Report” button, it will download the report as an .htm file, which will by default open in your browser. Here are the steps to open the file in Excel:

  1. Open Excel
  2. Go to File > Open
  3. Navigate to the folder where you downloaded the report (note: if you didn’t select a folder, it was likely saved in your Downloads folder)
  4. Select the file — it should be named form_data_export.htm
  5. At the bottom of the window, you should see the name of the report next to “File name.”
  6. Click “Open”
  7. You can then re-save the file as a .xls/.xlsx file

If you don’t see the .htm file, try changing the “All Excel Files” drop-down at the bottom right of the window to “All Files.” You should then be able to see and select the .htm file.

Save Reports in Ektron 9

Posted in Pro Tips | Tagged , | Leave a comment

We’ve Upgraded to Ektron 9

We’re happy to share that the system upgrade has fixed the following issues:

  • In certain versions of Chrome, buttons in the Editor were grayed out and unusable when creating a new page.
  • Clicking “Edit” and “Undo Checkout” changed the “Last Edit Date,” even though changes were not made.
  • When changing text to a bulleted or numbered list, extra inline code would be added.
  • Closing a Smartform editing field (e.g., in news stories or faculty profiles) without clicking “Save” would cause the system to get stuck.
  • Selecting “View Properties” from the silver dot on a form page opened the WorkArea with an error message.
  • Adding a file (such as a PDF) from the Library to a menu did not work.
  • A caching bug would periodically bring the site down.
  • The title field would accept punctuation marks that caused cross-browser difficulties with automatic aliases (such as asterisks, forward slashes, and pipes).

We also wanted to let you know that a few new issues have been introduced with this version. Ektron is aware of these issues and is working to resolve them:

  • When switching a template for a page, there’s a 5-minute lag time before the change shows up on the site. – Ektron recently helped us fix this.
  • When exporting form data from the Ektron workarea, the file extension is now .htm rather than .xls. The .htm file must be downloaded and opened with Microsoft Excel to be viewable in spreadsheet format.
  • The Link Manager has a formatting issue that shows a white gap in the pop-up. Make sure to scroll down so you can see the “Save” button.
  • The “Remove Alignment” button in the Editor is not displayed in Firefox.
  • For Power Users only: There is a bug with creating aliases in Internet Explorer. We’ll send you a separate communication about this issue.

Thank you so much for your patience during the content freeze. If you have any questions or concerns, send us an email at webservices@usfca.edu.

Posted in Video | Tagged | Leave a comment

Why are the event pop-ups blank?

With recent updates to browser security, some users have reported seeing a blank pop-up when they try to view a calendar event from the website. There are usually two reasons why this is happening:

  1. You logged in and are viewing the site with SSL (usually only web editors run into this).
  2. You have ad-blocking software that is preventing the content from displaying.

Blank Event Pop-up

If you recently logged into Ektron:

Check the address bar of your browser. Do you see “https” in the URL? If so, delete the “s” and press the Enter/Return key. This will reload the page using non-SSL, and when you click on the event, it should open and display as expected.

If you are using Chrome and have AdBlocker installed:

 Look at the top right corner of your screen. Do you see a red warning icon? If so, this means that the event pop-up is being blocked. Click on the icon to disable blocking on pages within the USF domain.

If the above solutions aren’t working for you, please send Web Services an email along with the browser you’re using and the link to the page where it’s not working. We’re try to help you figure it out.

Posted in Calendar | Tagged , | Leave a comment

Adding Meta Descriptions to Your Site

With the addition of a meta description field in Ektron, we thought it would be helpful to provide a brief explanation and to outline some of the dos and don’ts.

2013-10-02 01.35.33 pm

What is a meta description?

A meta description is a brief explanation of what a user will find on your page. It’s typically displayed underneath the page title on most search result pages.

2013-10-02 01.34.58 pm

For some prospective students and their parents, the meta description may be the first thing they read about the University. That’s why it’s important to include an accurate, concise and friendly description for every page. If you choose not to enter a meta description, search engines will use what they think is the most relevant piece of text on your page. But why not create your own? Here are a few tips to help you get started.

Do:

Write for the user first and the search engines second. While the meta description has no impact on your search ranking, it’s an opportunity to tell users what your page offers and why they should click through. Use keywords intelligently – don’t force them in.

Make the user feel welcome. Invite them in with a direct, concise and warm tone.

See what your competitors are doing. Then do it better. Who ranks higher than you? What do their meta descriptions say?

Check your analytics. Specifically, check out your bounce rate. If it’s high, your meta description may be promising one thing and delivering another.

Don’t:

Exceed 155 characters. Anything longer will probably get cut shor

Use the same meta description for multiple pages. Every page is unique; give it its own description. The search engines will love you for it.

Use non-alphanumeric characters. That means no exclamation points, quotation marks, parentheses or ampersands, for example.

Feel free to test out different options if you feel your description isn’t doing its job. And send an email to bhonson@usfca.edu if you have any specific questions.

Additional Resources:

Posted in Best Practice, Tutorial | Tagged , | Leave a comment

Extra Space Between Banners and Content

We have found that some templates have an extra space between the banners and the page title/body content on the mobile view of the site.

screenshot_extra_space

The problem is that in the banner box there is extra <p> or <br /> tags.  These need to be removed to fix the spacing.  Her is a screenshot after the tags were removed:

screenshot_extra_space_fixed2

Posted in Mobile Devices | Tagged , | Leave a comment

Alignment of Images With Text on Mobile

Issue: On mobile, top of some images don’t align with the top of the text they are next to although they look aligned correctly on the website.

IMG_0173

Fix: Simply remove the <img> tag out of the <p></p> tags that surround it.

Example of wrong code:
<p> <img src=”/uploadedImages/Destinations/School_of_Education/images/IME/ime_group1.jpg” alt=”ime_group1″ title=”ime_group1″ style=”border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; width: 350px; height: 150px; ” align=”left” border=”0″ width=”350″ height=”150″ />The programs are dedicated to understanding formal and informal education within social, cultural, and linguistic contexts around the world. </p>

OR

<span class=”text_callout_green”><p>/><strong><img src=”/uploadedImages/Destinations/School_of_Education/images/150×150/popal_tesol.jpg” alt=”popal_tesol” title=”popal_tesol” style=”border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; width: 150px; height: 150px; ” align=”left” border=”0″ width=”150″ height=”150″ />The basic TESOL degree consists of 10 courses for a total of 30 academic credits</strong>. Full-time students can complete the program in three or four semesters. </p></span>

Example of correct code:
<img src=”/uploadedImages/Destinations/School_of_Education/images/IME/ime_group1.jpg” alt=”ime_group1″ title=”ime_group1″ style=”border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; width: 350px; height: 150px; ” align=”left” border=”0″ width=”350″ height=”150″ /><p>The programs are dedicated to understanding formal and informal education within social, cultural, and linguistic contexts around the world. </p>

OR

<span class=”text_callout_green”> <img src=”/uploadedImages/Destinations/School_of_Education/images/150×150/popal_tesol.jpg” alt=”popal_tesol” title=”popal_tesol” style=”border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; width: 150px; height: 150px; ” align=”left” border=”0″ width=”150″ height=”150″ /><p><strong>The basic TESOL degree consists of 10 courses for a total of 30 academic credits</strong>. Full-time students can complete the program in three or four semesters. </p> </span>

IMG_0174

Posted in HTML Coding, Mobile Devices | Tagged , , , , | Leave a comment

Text Callout Arrows Behind Text

If you notice the >> arrows appearing behind the link text when using the Text Callout class, you may need to adjust the html code in your web page.   Here are two screen shots that show the behavior.

screenshot_text_callout  screenshot_text_callout_zoom

Issue:  the break tag is embedded within the link tag like this:

<a href=”http://www.usfca.edu”>USF Home<br /></a>
<a href=”http://www.usfca.edu/about/academics/”>Academics<br /></a>

Fix: Move the break tag <br /> so that it is outside the <a></a> tags or another option is to put the list items in an unordered list.

Correct code option 1:
<span class=”text_callout”>
<a href=”http://www.usfca.edu”>USF Home</a><br />
<a href=”http://www.usfca.edu/about/academics/”>Academics</a><br />
</span>

Correct code option 2:
<div class=”text_callout”>
<ul>
<li>View December Commencement 2012</li>
</ul>
</div>

Posted in Mobile Devices | Tagged , , | Leave a comment

Hardcoded Links in Menus and Body Text

Issue:  If you have hardcoded links on your page (full url starting with http://….) when the URL of that link changes it will not update automatically. You’ll have to go find each page that has that link and change them one by one. But if you make it a relative URL with the method shown below, it will be updated everywhere immediately. There are two ways to do this depending on whether the link is in a menu or in the body of the page.

How to change a hardcoded link in a Menu:

  1. Click on the  ‘Edit Menu’ link under the menu.
  2. Double-click on the Link you want to change. This will open up ‘Edit Menu Item’ window.edit-menu
  3. Change the URL Link to a relative one. And Save

Ex: Change a link from  ‘http://www.usfca.edu/soe/programs/ime/ma_tesl/’  to ‘/soe/programs/ime/ma_tesl/’

How to change a hardcoded link in body:

  1. Go to Edit and open the workarea.
  2. Find the link you want to change and put your cursor anywhere in the link.
  3. Click on the ‘Hyperlink Manager’ icon
  4. In the Link Manager window that opened up, click on the button next to the URL box.
    link-manager path
  5. In the Library Folder that opened, change the tab from ‘images’ to ‘Quicklinks’
    quicklinks
  6. Find the link you want find from the list.
    Note: To find where that link lives easily, go to the page that link sends you to. And open the ‘Properties’ of the page.
    properties
    There, find the ‘Path’ information.  It will show you the folder that quicklink is in and how to go there.
    path
  7. Select the link and click ‘insert’.  Click ‘OK’ to get out of the ‘Link Manager’ window and ‘publish’ or ‘save’ your page.
    insert-quicklink

 

 

Posted in Mobile Devices | Tagged , , , , , | Leave a comment

Image Stretching on Mobile Phones

If you encounter images on your site that appear stretched vertically on mobile devices it is likely due to the image being resized using HTML.

The responsive CSS we are implementing on mobile will reduce images for presentation on mobile devices, but it gets blocked if there is an inline HTML style in the page code.

Check your image HTML and look for definitions like this:
<img alt=”” width=”480″ height=”320″ style=”width: 480px; height: 320px;” src=”/uploadedImages/Destinations/Institutes_and_Centers/CELASA/chica1.jpg” data-ektron-style=”width: 480px; height: 300px; “ />

Strip out all of the inline style definitions and you should have HTML like this:
<img class=”left” alt=”USF students studying in the library” title=”USF students studying in the library” src=”/uploadedImages/Destinations/Institutes_and_Centers/CELASA/chica1.jpg” />

Note that the <alt> and <title> tags now also include a description of the image. And using our existing classes like “right” or “left” is the best way to move an image to one side of the page and create runaround for the text.

Best Practice: If you need an image to be smaller on your page, open it in Photoshop and make the image the size it really needs to be. You should only resize images in HTML in order to find that size which works best on your page, then resize the image in Photoshop and reupload it to your site with clean HTML.

Posted in Best Practice, HTML Coding, Mobile Devices | Tagged , , , , , | Leave a comment