Skip to main content
Skip to main content

OU Campus - Self-Help

Responsive Design

Responsive design is an approach to providing optimally different aesthetics based on the size of the browser window.  This approach is very helpful for creating websites that are easy to view on a mobile device.  Since mobile devices have smaller browser windows, we can target those smaller windows, and present a site differently to those devices.

 

What does this mean for my site?

This means your sites on www.wku.edu will be reformatted when viewed on devices with a width of 640px or less (most mobile devices).  It also means that you will need to check your site to make sure that everything is displaying properly on a mobile device.  We have made every effort to account for as many scenarios as possible, but some things will require your attention.

 

How to check your site

The easiest way to check your site may be to use a mobile device, such as an iPhone.  You would simply browse through your site on the mobile device and look for anything that does not look proper.  For those of you who do not have access to a mobile device, another great way to check your site is with the Web Developer plugin available for Firefox.  It includes a "Responsive Design Mode" that allows you to scale the current tab to any size, while your other tabs remain at full size.  An iPhone's resolution (Note: the iPhone is by far the predominant mobile device we see in our analytics) is 320px by 480px.  Since an iPhone works in both portrait and landscape mode, you should check both 320px by 480px, and 480px by 320px.

Finally, you can also just scale your browser window down manually until you see the layout of the page change.  This is not the best way to check your site since you can't be sure of the exact size of the browser window.

Please Note: If testing in your browser on your computer and not on a mobile device please do not use IE.  The responsive menu's will not work in Internet Explorer.  You can use Firefox or Safari to test with.

 

Things you MUST fix...videos and iframes

There are a few items that you MUST (or most likely will need to) fix for you site to be viewed properly on a mobile device.  The main things you must touch are videos and iframes and below are the steps you must take to fix them.

Videos

  1. Edit the page containing the video
  2. Select the video in the WYSIWYG editor by clicking on the video.  Note:  You will not see the actual video in the editor, but rather you will see a placeholder for the video.  When selected, the border of the video placeholder will be highlighted.
  3. With the video selected, choose "Video Container" from the Styles drop-down.   The Styles drop-down is the second item in the second row of icons in the editor.
  4. Repeat steps 2-3 for all videos on the page.
  5. Save and Publish the page.
  6. Check the published page on a mobile device or scaled down browser (see section "How to check your site").

Iframes

Iframes can be trickier than videos - on the other hand, we've seen iframes that work without doing anything to them.  One thing to keep in mind with iframes is that they are used to display an external page - and you may not have any control of that external page.  In that instance, there may not be a way to make the content within the iframe to display properly - short of getting the person(s) who do have control of the external page to make changes.  In the instance that you cannot get content within the iframe to display properly, please see the section "I can't get it to look right, now what?".  But first, please try the steps below to fix your iframe.

For iframes to display properly, it is best to use percentage widths instead of pixel widths. A percentage width of 100% will fit perfectly across all screens.  Your code will look like the following:

<iframe width="100%" src="/some_address"></iframe>


Known Issues

Tables

If the page has a table on it you need to change the width on the table to 100% instead of a defined pixels.  You can correct it by clicking on the table in the WYSIWYG and then clicking on the 'Insert / Edit Table' icon (first icon on bottom row) in the WYSIWYG.  Then you can change the width to 100%, or any other percentage instead of a defined px.

To make your table responsive you can edit the table code within the html of your WYSIWYG, add the following lines of code around and to the <table> tag making sure to include the classes. Your new table tag should look similar to the code below with your table rows and cells in between:

<div class='wku-reskin table-wrapper'>
   <div class='table-responsive'>
     <table class='table wku-default-table table-bordered table-striped' style='width:100%;'>
       //Your Table code here.  	
     </table>
  </div>
</div>
  • Removing the class .table-striped from the <table> tag will remove the alternating grey row backgrounds.
  • Removing the class .wku-default-table from the <table> tag will remove the wku red from the table header.
  • Removing the classes .wku-default-table & .table-bordered from the <table> tag will remove all wku red and vertical borders for a very clean table.
  • * You can also add the class .table-condensed to reduce the padding on the table cells 50%.

OUAddon's Calendar and News

We know the calendar and news addon's do not look proper in responsive view.  All that is needed to correct this issue is to republish.

Other Tan Sightings

If the content still shows tan but does not have any tables, you might just be able to correct it by republishing your page.  This is because it has not been republished since we released html5 last year.  We made some style changes in that release.

I don't want something to display on either the full screen site or the responsive site.

If you do not want something to appear on the full site you can add the style 'wku-hide' to the item within the code or you can select 'Hide in Full Size' from the styles drop down in the WYSIWYG.

If you do not want something to appear on the responsive site you can add 'mobile-hide' to the item within the code or you can select 'Hide in Responsive' from the style drop down in the WYSIWYG.


I can't get it to look right, now what?

In the scenario that you cannot get your page to view properly in mobile, there are a few things you should do.  First, contact the IT Helpdesk to make sure there is not a way to fix your problem.  Second, if all else fails, you can turn off responsive design on a page-by-page basis.  To do so, please follow these step-by-step instructions.

  1. Edit the page properties of the page you do not want to be responsive
  2. Choose "No" from the "Responsive" drop-down (if you do not see this option, see step #4)
  3. Save and publish your page
  4. If you do not see the responsive option in page properties, please contact the IT Helpdesk and the property will be added to your page.

Note: documents in Portable Document Format (PDF) require Adobe Acrobat Reader 5.0 or higher to view,
download Adobe Acrobat Reader.

Note: documents in Excel format (XLS) require Microsoft Viewer,
download excel.

Note: documents in Word format (DOC) require Microsoft Viewer,
download word.

Note: documents in Powerpoint format (PPT) require Microsoft Viewer,
download powerpoint.

Note: documents in Quicktime Movie format [MOV] require Apple Quicktime,
download quicktime.

 
 Last Modified 6/27/17