OSU Responsive ThemeWe have rolled out a new blog theme which is named OSU Responsive.  Why Responsive?

Responsive really means responsive web design.  The goal behind responsive web design is to have the design of a given web page be adjusted dependent on the size of the screen.  So on a phone, the look and feel changes to be more of a mobile experience where reading a full web page doesn’t necessarily make sense.

The theme is a two column theme, with only a main sidebar, and the bottom contact area as available areas to put widgets in.  Remember, not all widgets will look good in different areas so you will have to see what works and doesn’t.

Who can use OSU Responsive?  Responsive is available for everyone, however, there are some things to note.  The use of the OSU logo or tag is restricted to certain use.  The theme will display the tag or not based on the Organization Type as specified by the table below.

Organization Type Can Use Branded Theme?
Student No
Staff No
Faculty Yes
Department Yes
Sponsored Student Organization (SSO) Yes
Voluntary Student Organization (VSO) No
Non-Affiliated Student Organization (NSO) No

Student Organizations are governed by the policies of Student Leadership and Involvement.  If you are a student group and do not know which type of organization you are, please visit the Student Leadership and Involvement site.

What do you need to do to use it?

1.  If you are switching over from an existing theme, and you switch it immediately, it might seem that your site is broken in layout.  It isn’t.  It is simply that the widgets need to be removed and put back into the areas available for it.  So we recommend first removing all the widgets in use from the sidebars.

2.  Go to Appearance -> Themes in your WordPress dashboard, and select the OSU Responsive theme.

3.  Put your widgets back into the sidebar.

4.  Deactivate the Sociable Skyscraper plugin if you are using it.  Use of this inserts a thin horizontal line and makes the theme look broken.  Go to Skyscraper Options in the Select Sociable Plugin expanded menu to deactivate.

Skyscraper Option in Menu Settings

And that’s it.  Good blogging to you all.

Accessibility and Brand Guidelines

As part of the OSU Responsive use, the use of a different background image or color must adhere to OSU’s policies regarding Accessibility and Brand.  Any failure to do so may cause your blog to be disabled.  The net takeaway here is don’t change it if you don’t understand the policies, which is why we at Central Web Services, take care of these things for you in creating the default theme.  However, do remember within your articles, accessibility policies still apply if this is used in any official capacity for students, staff, or faculty or OSU.


When you are writing for responsive design, it is important to remember a few things:

1.  Look to use meaningful words for URL links, and then link those words to the URL using the Link icon in the editor.  Long URL’s do not wrap, and when viewing on a mobile device it doesn’t look nice as the URL stretches off the screen.  The same applies to email addresses.  Link a person’s email to his or her name.

2.  Digest-able content.  If you give someone on a mobile device too much content to read, it’s like giving someone a plate of too much food.  They’ll eat some of it, but then some will be wasted.

3.  Shrink your browser down to a mobile width and see what it looks like, then you can go back and adjust items.  Remember, it should look nice, so if something isn’t working, look for alternatives.  As always, let us know if something can be improved.

Print Friendly, PDF & Email

2 thoughts on “OSU Blogs are Responsive

  1. I’m experimenting with the OSU Responsive theme and wonder if I can add my own contact information (name and email address) to the bottom banner that has the generic OSU contact info flush left (I’d like to add my contact info flush right)

  2. Hi there Sam.
    You can add your own contact information by going to Appearance > Widgets in the left sidebar of your dashboard, creating a Text widget with your information in it, and then putting the Text widget in the Contact region.
    The Contact region spans 100% of the width of the footer area. Technically you could use the HTML attribute “align=right”, but this will only move your text over, it will not move the “Contact Info” header.

Leave a reply