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

Tables and mobile devices

Tables do not present well on a mobile device because the screen size real estate is so small.  In a traditional desktop layout, we have about a window width of about 1000 pixel to use, however the mobile device screen is anywhere from 300-320 pixels wide. What presents well on a desktop clearly will not fit on the smaller mobile screen.

General table best practices:

  • Do not set a fixed width in your table or table data rows.  Do Not use: <table width=”560″> or <td width=”100″>.  Instead, set the width to a percentage so that it can adjust according to the screen size. This does not guarantee a table will always display well in a mobile device, but it is a more flexible definition. Do use: <table width=”100%”> or <td width=”25%”>
  • table_layout_exampleDo not use a table for layout purposes.  If you have been using tables for layout purposes, such as for lining up text with images, we recommend that you stop doing this.   As you can see in this screen shot of a table used for layout, the table content in the far right is getting cut off.You should use the column styles in the USF CSS called <div class=”two text_columns”>, <div class=”text_two_column”>, or <div class=”text_three_column”> styles to separate your info.   View the full code sample.  If you need help, contact Web Services and we will show you how to do this. The contents will then break into a one column view on your mobile device, like this:tables_layout_fixed
  • Use a Table for Tabular Data Only. There are certain times where tables are completely appropriate to use.  For example, the tuition and fees page uses tables to present tabular data.  This is really the only time we should be using tables. It is much easier to read and scan lots of data in a table format. In these cases, we recommend that you ensure you do not have a fixed width set in your table (see first bullet).  The contents will not be completely viewable and an orange swipe text with arrows will appear above the table to indicate that users should scroll (see screenshot below).
    table_swipe_screenshotWe have noticed that a two column layout can presently nicely on a mobile device, like the Freshmen Facts and Figures page:
    table_tabular_good
    Here is the way the table is coded on the page:

    <table width="100%" border="0">
    <tbody>
    <tr>
    <td width="75%"><strong>Fall 2012 - Undergraduate</strong> </td>
    <td width="25%"> </td>

    Please contact Web Services if you need help or ideas on how to work with tables so that your pages present optimally for both the desktop and mobile experience.

Posted in Mobile Devices | Leave a comment