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.

Tips

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.

  • WordPress core 3.4.1 plus updated theme and plugins.  Some themes might be gone, that is the nature of updates.
  • Now uses CAS for login.  CAS stands for Central Authentication Service.  It still uses your ONID credentials for login.
  • A new theme for the front page.  This brings it up to standards for branding like the OSU Homepage.

OSU Authentic is the preferred theme for administrative departments, programs and academic units and will be available only for the Faculty, Staff and Department blogs. This theme contains features that allow it to function as a small website, a blog or an online newsletter.

Accessing the administrative features

As with any WordPress blog, reach the administrative page by typing “/wp-admin” at the end of your blog’s URL. For blogs.oregonstate.edu users, that would be: blogs.oregonstate.edu/YOURBLOGNAME/wp-admin.

Widgets and regions

The Authentic theme contains a number of custom widgets and layout regions that can be accessed through the administrative panel. These widgets allow for customization of your blog. To access widgets, go to your blog’s administrative page and select Appearance > Widgets from the right-hand menu.

Through using widgets and regions, you’ll be able to customize your layout to create a distinct front page for your blog and to give it a newsletter feel.

Feature

The feature region can be used to create a front-page image or to highlight a feature blog post. You can add a feature region by dragging the Home Page Feature widget to the feature region in the widgets control panel.

You will be asked to input a link to an online image. This image should be exactly 620 pixels in width and roughly 250 pixels in height. The height can be variable, but the width is fixed.

You will also be able to input a link to a blog post or other page or site. Finally, you can input a caption to appear below the photo.

Sub-features

This area is for highlighting three separate pages of your site or within your program or department. You create this space by dragging the Home Page Sub Level Features widget into the sub-features region on the Widget panel.

You must choose 3 photos of exactly 200 pixels in width and 72 pixels in height. These photos can exist online in your blog’s media library or elsewhere on the web. You will also be required to input a link for each photo, and a caption. It provides a great opportunity to highlight different posts or pages within your blog on the home page of your site.

Sub-features can be used with the feature or separately.

Middle and right sidebars

You can customize the content of middle and right sidebars to suit your needs using all of the default widgets that WordPress provides.

Middle sidebars only appear on the blog’s home page and on blog post pages. It does not appear on blog pages.

Contact information

This widget allows you to customize the contact information appearing in the blog’s lower-left-hand corner.

Authentic layout with regions highlighted

This information comes from the OSU Brand Guidelines.  You can read more about this theme and see a video tutorial on the Brand Guidelines WordPress Themes page.