Website as Universal Publishing Platform

Since starting the Alternative Textbook Initiative, Stacy and I have been working with OU faculty who have chosen to adopt an open textbook to be used this coming fall semester.  Some have simply adopted a textbook and others have chosen to write their own.  In the OER space, when an author writes a textbook it is most commonly published in multiple formats.  Typically open textbooks exist in digital form whether that be PDF, ePUB, iBook, a webpage, or some other form of eText.  Faculty who are interested in open textbooks are concerned about how accessible their textbooks are; therefore, it would be ideal if their digital textbooks were also available in print form.

We decided to do some experimentation with websites as an open textbook publishing platform.  After all, if you’re careful about it, webpages can be made to display well on desktop computers, laptops, tablets and phones alike regardless of proprietary restrictions.  Webpages offer the interactivity that many faculty members are looking for and they can be edited in such a way that all users of the page receive the updated version at the same time.  We even found during our experiment that webpages can be made to print beautifully using an alternative stylesheet that styles the content of the page in such a way that is ideal for printing on paper.  Realizing this, I set out to build a website template that displayed well on devices of varying screen sizes and could be easily printed.  Because I kept the layout pretty simple this was not too difficult to do.

stylesheet comparison

Using two stylesheets; one for on-screen presentation and the other for on-paper presentation is quite easy. In fact, the on-paper stylesheet is quite similar to the on-screen stylesheet except that elements that should not be printed are hidden by a display: none attribute.  Before beginning the experiment, I had never used a separate stylesheet for the print version of a page, but this article from Smashing Magazine gave me gave me all that I needed to get started.  Using stylesheets in this way makes removing menus, backgrounds, headers and footers simple and allows only the content of the page to be displayed. Something to consider when printing a webpage is how the interactive content of the page will be displayed on paper. Videos should ideally not show up in the on-paper version of a webpage, but in their place should be a link to the video so that those reading on paper can access the video once they are in front of a computer. This can be achieved, by displaying the video (media, in the example below) in the on-screen version of the page and hiding it in the on-paper version of the page and furthermore by hiding the link to the video in the on-screen version of the page and showing it in the on-paper version of the page.  The stylesheet comparison below explains this more clearly than that last sentence.  Even those who are unfamiliar with CSS, I’m sure can make sense of the snippets below.

On-Screen CSS Example On-Paper CSS Example
/*—————————-BODY*/
#body {
background-color: #660000;
position: absolute;
top: 234px;
min-height: 100%;
}
/*—————————-Media*/
#media {
display: block;
}
#printonly {
display: none;
}

@media print
{
/*----------------------------BODY*/
#body {
display: block;
background: white;
color: black;
position: absolute;
top: 10px;
margin-top: 1cm;
margin-bottom: 1cm;
}
/*----------------------------Media*/
#media {
display: none;
}
#printonly {
display: block;
}

 

One of the many benefits of using separate stylesheets for different forms of presentation is the ability to use different fonts for each.  There is debate about typefaces and which are more legible on screen vs on paper.  This blog post by Alex Poole, a user experience designer, outlines the debate well.  The argument is over whether or not san-serif fonts are more legible on-screen than are serif fonts.  My personal opinion is that they are, and I have set up the two stylesheets accordingly.  If you click on the side-by-side comparison of the styleshees above to view the full-size image, you’ll notice that the example on the left, the on-screen version, uses a san-serif font whereas the on-paper version, on the right, uses a serif font.  This is just another example of the flexibility achieved when using multiple stylesheets.

We are currently working with two faculty members regarding how to best deliver their open content to students.  A website template similar to that pictured above has been proposed to each citing the benefits of universal cross-platform compatibility, ability to edit after publishing, ability to print, and the option to include interactive features.  Neither solution is developed enough to link to an example page, but as soon as one is available there will surely be a blog post about it.

6 comments

  1. Laura Gibbs says:

    Wow, what a great post again, Cody! The faculty you are working with are so lucky to have your help, and I’m looking forward to seeing what products result and also what you will learn from the students as you use the materials. I especially appreciate your sharing the technical nitty-gritty of what you are learning so that we can get the benefit of that without having to start from scratch ourselves. I know a little bit about CSS, but I tend to prefer hosted solutions rather than building my own website.

    In fact, I’ve embarked on a huge and long-term course materials redesign this summer because my ANCIENT website (one I built back in 2002) is just not sustainable. As I do this, one of the things I am most curious about is just how the students use the texts – how do they choose (since my course is very much about choosing from a variety of texts), and when/where/how do they do their reading, do they print, etc., the same kinds of questions you are pondering! I hope to learn a lot about that next year just from asking the students about that so I can then refine my quick-and-dirty content from this summer in order to match their needs/preferences more closely.

    I’ve got one nice advantage which is that the materials I am working with all come from digital editions already, so if students want audiobooks or Kindle editions or PDFs, those are often available. I make a selection of stories from a book, and then I also write up a page of links to the different editions of that book available online for free in different formats. Here’s an example of one of my reading selections:
    Blackfoot Stories
    http://mythfolklore.blogspot.com/2014/06/myth-folklore-unit-blackfoot-stories.html
    And here’s the “library” page that goes with that, showing where students can get their own freecopies of the book I am using:
    http://mythfolklore.blogspot.com/2014/06/myth-folklore-book-blackfeet-indian.html

    One of the secondary learning experiences I hope the students will have is getting to know these different sources for free online books. My main sources are Project Gutenberg, Internet Archive, Google Books, Hathi Trust, Amazon (for free Kindle editions), and LibriVox (for audio). I also rely heavily on Sacred Texts Archive, Sur La Lune Fairy Tales, and Baldwin Project as more specialized sites that connect specifically with the topics I teach.

    As you can see, I opted for Blogger. That’s an idiosyncratic choice that reflects my own needs, but if you are curious why I chose it and how I use it, I wrote up some notes here:
    Blogger as content management system
    http://oudigitools.blogspot.com/2014/07/blogger-as-content-management-system.html

    Based on your blog post, I have to correct my statement there that OU provides zero support for content development, since you are clearly doing exactly that! I think it’s GREAT, and I am so glad you are sharing what you are learning online like this so that we can all get the benefit. Thank you!!!

    • Cody Taylor says:

      Thanks for your compliments and continued interest, Laura! It’s nice to learn about the work that others are doing regarding these matters. Thanks for doing that work and sharing your experiences.

      I am curious to know exactly what about your “ancient” website became unmanageable. You mentioned in your blog post about using Blogger as a content management system that its label feature is important to your workflow. I like your creative use of the post dates to order your posts. ! To give my question some perspective, I am not too familiar with blogging platforms and how to best use them. The back-end side of this blog has a what-you-see-is-what-you-get type editor that gives a pretty accurate representation of what you should expect the finished post to look like. It makes styling text and inserting links easy. I like that; however, I find myself spending quite a bit of time on the plain-text side of the editor massaging my post into shape because I find that it allows more control (I hesitate to say, “full control” because I notice that when I submit changes, it sometimes changes the edits that I have made. Sometimes I don’t mind WordPress trying to correct me. Other times I find it really annoying.) over the content of a post.

      As I worked on the experimental layout, I could not help but think about people who are slightly less enthusiastic about editing HTML and CSS than I am. I enjoy that type of thing and am far from an being an expert, but because I enjoy it, I don’t mind its tediousness. I perfectly understand that many faculty members who want to openly publish their course materials do not have the time or desire to have such a tedious workflow. Because of this, I would like to know if you are in any way hindered by using a platform such as Blogger and if so what benefits it offers over the freedom of building the site yourself.

      As I think about these solutions, I am trying to keep faculty of all disciplines in mind. It is worth noting that I tend to think in terms of science textbooks. When I think about publishing solutions, one of the first questions that I ask myself is, “how well will this display equations?” I’m currently working on another blog post about using a javascript service called MathJax to display equations written in LaTeX markup. I recently learned that WordPress offers a plugin that supports this, but I’m currently thinking about other disciplines and what difficulties they might encounter.

      Thanks again, Laura, for sharing your insight!

  2. Laura Gibbs says:

    Hi Cody! Big topics here, but some quick responses:

    The biggest problem with my old website was scale; since the blogging platform takes care of navigation for me (in much the same way a wiki would also, using labels and time/date stamps to build the navigation automatically), I was able to create this site with what will be about 2000 pages over the summer without any problems and no overhead in terms of design; the navigation pages and sidebar navigation modules are all automatic. My old website was already collapsing under its own weight with not more than 1000 pages or so. I’ve actually created this project in less time than it took me to build the old website.

    Even better, this will continue to scale upwards to 5000 pages or even more I guess (but I figure 5000 pages is probably what I will need before it feels finished to me). Then, when I’m done with that, I’ll want to move it to a true database-driven website… but that will require a summer of really learning code to do that. I’ve programmed databases before, but never a database-driven website. I hope that when that time comes in four or five years, there will be some good hosted solutions (I’m not the only person with a lot of content who would like to deliver that efficiently online with a database back end that I can manage more directly than in Blogger…) and/or a good solution provided by the university (but for that, OU would need to clone you about a dozen times at least!).

    I know what you mean about formatting! I mostly write the posts using HTML templates that I run in a plain text editor and then paste them in to the post box in code view. Where there are weird things in the posts, that’s almost always because I used the Blogger WYSIWYG editor, and what I see is not exactly what I get, ha ha. But I’m very plain-Jane about the HTML, just basically formatting, links, etc. Math stuff is seriously hard… I used to have trouble with foreign fonts but luckily Unicode really solved all those problems for me! To do stuff in ancient Greek used to be a time-consuming nightmare, but now it is as easy as typing in English. I’m really lucky that by working with just regular text and old book illustrations, I don’t really face any formatting dilemmas at all.

    Blogger will let me edit the style sheet if I want, but I don’t, except for having tinkered with some of the template defaults… and I love the way it has a great ?m=1 mobile view that will render all these posts super-easy to read on a handheld if my students are reading on handhelds — but are they reading on handhelds…? and do I really want them to since they are supposed to be taking notes as they read…? That is all stuff to ponder next year as I dialogue with them about this. I am very excited but also nervous to find out what they think of this! I know they want something better / bigger / different than the old website, and this is definitely better / bigger / different. But will it be good enough? Oh man, I am so curious to find out what this fall will be like!

    Anyway, another reason for Blogger: there is also a real virtue, for me, in using a free tool like Blogger that my students can also use. One of the most important things I feel I can do, esp. in the online Gen. Ed. classes I teach, is to model online presence for students: I want to use blogs and wikis and tools like Twitter, Pinterest, etc., that I know are free and easy for them to learn to use too. And since OU provides no reliable webspace for students (about the disaster that is students.ou.edu I will not speak), they need hosted solutions like Blogger, etc. Admittedly, I am more of a “power user” than they are, but that’s good: because I use these tools every day myself, I can be confident in providing tech support for my students. My students definitely do not need (or have the time) to learn to be actual website designers, but learning how to use online tools like Blogger, Google Sites, Google Docs, etc. is something that I think is VERY important for any career path they might follow.

    Again, thanks for what you are doing. Seeing what you and Stacy are up to is the most exciting thing I’ve watched happening at OU in a long time, and I am esp. glad you are sharing stuff online via Twitter, the blog here, etc. Much appreciated!!!

Leave a Reply

Your email address will not be published. Required fields are marked *