Courses

The first change is that iTunes U now allows for full courses. A course is defined by Apple as a collection of audio, video, iBooks textbooks, ePub books, syllabi and class assignments, posts from the instructor, PDFs, presentations, and more.

While this is not a truly interactive course management tool like Blackboard, it does allow instructors to include their own iBooks textbooks, syllabi, and assignments, and gives an overall structure and timeline to their courses.

The new courses are meant to be taken at an individual learner’s own pace, just like past collections in iTunes U, however it definitely expands on what has been possible with iTunes U courses in the past.

At this time we do not have any of these new courses available for Missouri State on iTunes U, but we are hoping to test this new functionality with some volunteer instructors in the near future.

iTunes U App

The other major new component of iTunes U is the new iTunes U app for iOS devices (iPhone, iPad and iPod Touch). The new app looks very similar to iBooks’s bookshelf; both courses and collections in iTunes U appear within the app.

Any time a user wants to search for new iTunes U content, they will open the app and select the Catalog button on the top menu bar. The catalog interface behaves just like iTunes; when a user is finished searching the catalog, they can press the Library button to return to this bookshelf view.

It is worth noting that to use iTunes U on any mobile device, a user is now required to have both the new iTunes U app as well as have their iOS operating system upgraded to the latest version (5.01). If a user attempts to search for iTunes U content on a device with an older version of the OS, they are directed to upgrade as well as download the new app.

The iTunes U experience in the iTunes software on the desktop is, as of this writing, unchanged from how it has previously functioned; these changes only affect iTunes U on mobile devices.

Additional Resources

Below is a collection of articles I have collected since the rollout of these new education initiatives. Please visit them to learn more about the new iTunes U as well as the other new Apple education products:

• Apple in Education
• Initial Impressions of Apple’s New Education Initiatives
• iTunes U 2.0: Not Perfect, Just Awesome

Key features of the newly designed website include the following:

• Offers separate sections for students and employees
  Since different services are available to different clients, the website organizes the information onto audience-specific pages.
• Outlines all medical services
  Clients can now easily find and review all the services offered by Taylor, which helps them determine if they can save time and money.
• Provides updates through a blog
  The homepage offers timely updates for clients through a blog feed. This method also allows for clients to subscribe to updates or for other websites to display the posts.

Site credits

Several university relations offices assisted in developing this site:

• Staff lead: Andrea Mostyn, university communications assistant director
• Content development: Brooke Lairmore, university communications graduate assistant
• Design: Veronica Adinegara, publications senior graphic designer
• Website implementation: Brys Broughton and David Howell, web and new media student workers, with oversight by Sara Clark, director of web and new media

View the presentation slides

On Jan. 12, I was a guest speaker for Managing Emerging Technologies, a special topics course of the MS CIS program. It brought back memories to be in my former stomping grounds. (I received my MS CIS degree in 2005.)

Social media policy issues

My presentation provided an overview and examples of four social media policy issues:

• Training your employees
• Intellectual property and copyright
• Comments
• Privacy and releases

Because the principal investigator on the grant was a Missouri State employee, the grant website can be hosted within the Missouri State Web space.

Website development process

The Ozarks Public Health Institute and the office of web and new media collaborated to make the site a success:

1. The site navigation structure and content goals were established by the Ozarks Public Health Institute.
2. The site design was developed by Lindsay Thomack, web designer in the office of web and new media, and approved by the Ozarks Public Health Institute.
3. The website was set up within Web Press, the University’s web content management system. The website structure and stylesheet programming was completed by Kyle Falconer, student programmer in the office of web and new media.
4. Graduate assistants from Ozarks Public Health Institute accessed the website through Web Press to add and edit content. They will also maintain the website content in the future.

By working together, we were able to provide a website for a good cause at a low cost.

A little background

One of the most valuable recruitment tools we use in Admissions is our campus visit program. A positive campus visit experience has the potential to greatly influence a student’s decision to apply and enroll at the university. To monitor how well our campus visit program works and to discover possible areas for improvement, we solicit and collect guest feedback through an online Campus Visit Evaluation form. Our challenge is getting more visitors to complete this evaluation form — the more feedback we collect, the better we understand our visitors and how to positively influence them. So…how do we get more feedback?

The big idea

We recently put into practice a new idea for increasing visitor feedback. We now encourage our campus visitors to complete the evaluation form using their smartphones at the end of their tour, while the experience is still fresh in their minds. Our campus tour guides provide a printed QR code which guests can easily scan and be taken to the online Campus Visit Evaluation form.

Make it mobile-friendly

The idea is simple — if you make a task more convenient, there’s a greater likelihood it’ll get done. To make our campus visit evaluation process even more user-friendly, I was asked to develop a mobile-friendly version of both the online evaluation form and the “Thank you” page that returns when an evaluation form is submitted.

I was eager to tackle the task, as it would give me real-world experience with one of the hottest topics currently in web design and development, something called “responsive web design.”

What is responsive web design?

Responsive web design, sometimes referred to as “adaptive web design,” involves the development of web pages that dynamically adapt to best suit the user’s browsing environment (e.g., mobile phone, tablet, laptop, or large desktop monitor).

The easiest way to explain responsive web design is to show some examples. The first image below shows the original Campus Visit Evaluation form page and how it adapts when viewed on a mobile phone. The second image shows how the form submission confirmation web page — the “thank you” page — also responds when viewed on a mobile phone.

You can experience for yourself the dynamic change in the page layout by going to the Campus Visit Evaluation form page and the form submission confirmation page. Simply decrease the width of your browser window by dragging the right edge of the window inward towards the left, until the width is as narrow as a common mobile phone (480 pixels).

Back to task

To start the process of making these pages mobile-friendly, I needed to decide what types of changes would make the pages easier to view and interact with on a small-screen mobile device. Here’s what I came up with:

1. Simplify the two-column page layout to one column
2. Convert the fixed-width page layout to a full-width, fluid layout
3. Selectively remove or hide non-essential page elements
4. Decrease font size of headings
5. Center-align logo and headings for symmetry with centered full-width layout
6. Convert the “What next” text links on the form submission confirmation page to larger and easier to push buttons

These changes are fairly easy to make with CSS. But how would I selectively serve only the new, mobile-friendly CSS rules to mobile devices while keeping the original CSS intact for traditional, larger screen browsers?

Enter the mighty CSS media query

The hallmark technology powering responsive page layouts is the CSS media query. CSS3 media queries make it possible to target browsers based on media characteristics such as screen size and display orientation. Unique CSS rules are then served to browsers that fit the parameters of the media query. I like to think of media queries as conditional logic for CSS or CSS if–then statements.

For example, the code below targets only devices with a maximum screen width of 480 pixels (e.g., iPhone), and then serves specific styles only to those devices.

One of the biggest benefits of media queries is that they allow us to address the needs of many screen sizes (mobile phones, tablets, desktops, widescreen monitors), all with one code base. This means we don’t have to develop or maintain additional web pages to support different devices.

Below are the CSS rules used to adapt the Campus Visit Evaluation form page for mobile devices.

A few gotchas

No support for media queries in IE 8 and older versions

Internet Explorer 8 or older versions don’t support CSS media queries. One of the easiest ways to enable support for these browsers is to add the following code inside the <head> section of your HTML page. Read more about this JavaScript file.

iPhone rescaling

By default, the Apple iPhone and iPhone Touch rescale web pages to proportionately fit their small screens. This is good for pages that have not been optimized for mobile viewing. But if you’ve optimized your pages for display on these devices, this behavior is unwelcome, as it unnecessarily scales your page down and shrinks text and other elements.

To override this default behavior, add the following code inside the <head> section of your HTML page.

Are we there yet?

After brainstorming the design changes necessary to make the pages easier to view on a small screen, creating the CSS rules to implement the changes, forming the media query to target devices with a screen size less than 480 pixels, addressing some common problems with browser support and iPhone rescaling, and testing, I was basically finished. To be clear, this project was a pretty limited journey into responsive web design — I didn’t have to work with complex page layouts or essential images and I didn’t have to create layouts, media queries and CSS rules for devices other than a small-screen mobile device. As the interest in mobile-friendly web pages increases, I’m sure I’ll have the opportunity to dive into more complex projects requiring support for tablet-size screens and other devices.

Further resources

Responsive web design is a popular topic and there’s certainly no shortage of detailed guides and tutorials available. I’ve barely scratched the surface with this simple look into my experience. Here are links to resources that I have found particularly helpful.

Responsive Web Design — the blog post that ignited the community

Responsive Web Design: What It Is and How To Use It

How To Use CSS3 Media Queries To Create a Mobile Version of Your Website

Responsive Illustration: a fun and interactive tool for viewing how different screen widths trigger responsive layouts

Best in show

The following websites are outstanding examples of responsive web design. To see how the pages adapt, simply reduce the width of your browser window.

http://hicksdesign.co.uk/

http://colly.com/

http://www.alistapart.com/d/responsive-web-design/ex/ex-site-FINAL.html

Websites affected

In particular, we know that these websites will experience downtime:

• Blogs
• Missouri State Magazine
• News
• Ozarko

We do not anticipate that the outage will affect other websites, but those services may also experience interruptions on Saturday.

Key features of the newly designed website include the following:

• Describes philosophy in general
  To help students determine if the philosophy program is the right fit, the website offers a “What is Philosophy?” page.
• Provides two-year transfer plan
  To assist students transferring from OTC, the department provides a transfer degree guide. This is key since so many new Missouri State students are now transfer students.
  

Site credits

Several university relations offices assisted in developing this site:

• Staff lead: Don Hendricks, university communications director
• Content development: Tara Mueller, university communications intern
• Design: Abby Isackson, publications graphic designer
• Website implementation: Brys Broughton, web and new media student worker, with oversight by Sara Clark, director of web and new media

Key features of the newly designed website include the following:

• Includes marketing points about careers
  The website shares that students in this field can expect 100 percent job placement—a statistic that will help recruit future students.
• Highlights college-wide graduate program
  Computer science students can pursue an accelerated major offered by the college, so the website provides major-specific information about that graduate program.
  

Site credits

Several university relations offices assisted in developing this site:

• Staff lead: Nicki Donnelson, university communications public relations specialist
• Content development: Karen Culp, publications graduate assistant
• Design: Abby Isackson, publications graphic designer
• Website implementation: Brys Broughton, Brittany Dilts, Grant Holle and Kyle Falconer, web and new media student workers, with oversight by Sara Clark, director of web and new media

Key features of the newly designed website include the following:

• Offers advising resources
  The department goes beyond the standard template by providing checklists and worksheets for their majors.
• Highlights special projects and resources
  The facilities and resources section of the website not only showcases the facility but also embeds media from ongoing projects.
  

Site credits

Several university relations offices assisted in developing this site:

• Staff lead: Nicki Donnelson, university communications public relations specialist
• Content development: Karen Culp, publications graduate assistant
• Design: Veronica Adinegara, publications senior graphic designer
• Website implementation: Brys Broughton, Brittany Dilts, Grant Holle and Kyle Falconer, web and new media student workers, with oversight by Sara Clark, director of web and new media

Key features of the newly designed website include the following:

• Provides quick links to all language programs, including Global Studies
  Students can now easily access the program that best complements their professional goals
• Uses blog for news and activities
  A blog feed showcases the news and many activities the department offers students and the greater community such as Languages for Fun, film series events, and Study Away opportunities.

Site credits

Several university offices assisted the modern and classical languages department in developing this site:

• Staff lead: Don Hendricks, university communications director
• Content development: Karen Culp, publications graduate assistant; Stacey Funderburk, publications director
• Design: Angela Barker, instructional technology support specialist, college of arts and letters
• Website implementation: Angela Barker, Brian Heaton, Tasha Jacobsen, Elio Marcano Quevedo, Jenny Stoops, with oversight by Sara Clark, director of web and new media