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.
  • 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

Video Behavior on Mobile Site

Embedded videos will behave differently depending on where they are embedded in a page. Here’s a breakdown of the different functionality and also some known issues with embedded video on the mobile site:

  • When videos in the banner area are activated on a mobile device they will link out to the site that hosts the video (e.g. YouTube). When the video is finished, the user will need to click the “back” button on their browser to back to the www.usfca.edu website
  • Videos in the main content area of a page will be played by the device’s native player/app and will return the users to the website when they are finished
  • Known issue: QuickTime videos that are hosted on the old streaming.usfca.edu server are not functioning because they use outdated technology. These videos should be moved to Ensemble or YouTube.
  • Known issue: Videos that are hosted on Ensemble (media.usfca.edu) will not scale down to fit the viewport of mobile devices. We will be working with ITS to fix this problem as well
Posted in Mobile Devices | Tagged , | Leave a comment

Fixing Odd Text Behavior on Mobile Phones

Making the USF website responsive to mobile devices has brought up a number of issues with coding on our site’s pages. Many users have HTML coding on their pages that is inline, unique to that page, or does not use the regular site CSS definitions. Though this code may look fine on a web browser on a desktop computer, in most cases it causes odd or at least unintended issues when the site is viewed on a mobile device — particularly on smart phones.

WC+S has checked into a number of pages that look odd on smart phones and in most cases the problems we see are stemming from the use of inline styling. The changes we’re implementing for responsive web design rely on “swapping” styling definitions when a page is viewed on a smaller mobile device. If a block of text has local or inline formatting, that formatting will overwrite the CSS on the page and the CSS swap for mobile will have no effect on that text.

The issues are easy to spot. On a smart phone, you will see page structures that appear to have “blown up” with objects, callout boxes, etc. seeming to be stacked on top of each other. Fonts will display very large and obviously not of a piece with other elements on a page.

To fix these issues, simply open your content block, click on the “HTML” button <> at the bottom of the edit window and look for inline styles in your HTML code. In most cases these will be <span> or <p> definitions with added “style=” tags.

Look for code with style tags added, such as these examples:
<p style=”font-color: #fff; font-size: 16px;”>
<span style=”color: rgb(128, 0, 0); font-family: helvetica,arial,sans-serif; font-size: 10px; line-height: normal;”>
Strip those local style definitions out to return the text to regular CSS definitions. In the first case you would end up with simply <p>. In the second you should remove the span entirely.

We even saw problems with presentation on simple formatting like <p align=”left”> or full width justification of text. Best practice is to leave all font styles in their simplest, unadorned CSS definitions.

 

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