Western Kentucky University

IT Division - 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.

Another issue with tables occurs if there is an image within the table.  To correct this issue you can add a class to the table.  Within the html of your WYSIWYG, add the following line of code within the <table> tag: class='mobile-table' so your new table tag should look similar to the code below:

<table class='mobile-table' style='width:100%;'>

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, email webmaster@wku.edu 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 email webmaster@wku.edu and we will put the property on your page.
 Last Modified 7/23/13