At Apple’s education event held last week on Jan. 19, the company announced three new education initiatives: iBooks 2.0, iBooks Author, and a major update to iTunes U. While the changes to iBooks and the new iBooks Author program are of interest to us, I’d like to focus here on the changes made to iTunes U.
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:
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
Website implementation: Brys Broughton and David Howell, web and new media student workers, with oversight by Sara Clark, director of web and new media
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:
The Ozarks Public Health Institute was recently awarded a grant to provide quit smoking resources for Christian and Dallas counties, which included funding for the Kick it! website.
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:
The site navigation structure and content goals were established by the Ozarks Public Health Institute.
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.
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.
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.
As the Coordinator of Web and Emerging Technology for the Admissions Office, my job is to use web technologies to assist in the recruitment of future students. I was recently tasked with making one of our online forms “mobile-friendly.” I’ll share how I used responsive web design techniques to develop a few web pages that automatically change their layout and presentation when viewed on mobile devices.
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
QR code for the campus visit evaluation form
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:
Simplify the two-column page layout to one column
Convert the fixed-width page layout to a full-width, fluid layout
Selectively remove or hide non-essential page elements
Decrease font size of headings
Center-align logo and headings for symmetry with centered full-width layout
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.
From 7 a.m.-7 p.m. on Saturday, Jan. 7, several University computer systems will be offline for system updates and unavailable for use. During the scheduled downtime, some available services may be interrupted without notice. Departments and customers are encouraged to plan accordingly and not to be dependent on the services during the scheduled outage.
Websites affected
In particular, we know that these websites will experience downtime:
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.
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.
