Article

Interlitq: from custom PHP to WordPress

Earlier in the year I described the essential elements in redesigning a literary magazine with Interlitq as our case study. The Interlitq redesign continues. The current timeframe is a June completion date, which is delayed from my original intention of April. The delay is largely due to my teaching schedule. I completed the multimedia storytelling course, which had a complex web project, in April. And barely more than a week later started teaching an innovations in publishing course during our mini-spring term, which is just 4 weeks. Once spring term is over, I’ll have more time to wrap up the Interlitq project. Also, I have a graduate student from the University of Tennessee School of Information Sciences collaborating with me over the summer on literary magazine redesign and library publishing.

Quantity

Let’s review the quantity of material that has been published in Interlitq since its origin in November 2007: 26 issues + 6 ongoing series. That represents over 500 contributors in a variety of genres (essays, interviews, poetry, fiction) as well as more than 20 artists contributing nearly 200 works of art for illustrating the publication.

Content Management

That amount of material requires a content management system (CMS). Since its beginnings in 2007, Interlitq has existed in a set of custom PHP files where each work (essay, interview, poem, story, etc.) was stored in a separate PHP file. Each contributor biography also existed in a separate file. While static sites offer significant advantages, the integration of content and code and style in this fashion is a nightmarish scenario for migrating to a new design and more efficient form of publishing. The Interlitq site consists of over 4,000 files that need migrating to a new system.

For the redesign, I chose WordPress for the CMS because of its broad level of support and customization. While a tool like Grav presented a lot of interesting possibilities, I simply wasn’t ready to jump into developing a Grav-based site considering the limited time availability I have for working on this project.

Blog

The Interlitq blog has existed separately on wordpress.com since the blog started. With this redesign we will be bringing the blog into same new design as the overall site. The blogging component gives WordPress another advantage since WP is a premier platform for blogging. And, honestly, another reason for choosing WP is that I’ve worked with it since 2004. So I’m very comfortable with the WordPress way.

New Design Aspects

Let’s look at a few new design aspects that will be appearing in Interlitq.

Archives

The previous design had a listing of past issues as show below.

The new design is a grid layout of issues and series represented by its distinctive artwork.

The CMS allows the grid to be automatically generated when a new issue or series is added.

Contributors

One of the more problematic aspects of the old design is that the contributor list simply existed alongside the left column of the page. That worked fine for the first few issues but now with hundreds of contributors, the list scrolls far beyond the footer of the page:

A database-drive site allows for the contributor listings to be presented in a dynamic manner that features the author photo with the author’s name (which is actually a link to the author’s full bio on the site). This approach also allows optional text to exist below each author photo. For the prototype below, I simply added some placeholder text but this text could be a quote from the author’s work on Interlitq:

Obviously, this represents a small sample of the hundreds of authors that appear in Interlitq. The alphabetical row above the author photos allow for the contributor list to be segmented into smaller group for displaying on the page rather than loading the giant list all at once.

 

Article

Interlitq: identifying essential elements in redesigning a literary magazine

The redesign of Interlitq is going extremely well. We’re on a timeline to have the redesign completed this spring, and aiming for an early April release if at all possible. A literary magazine is one of the more complex types of sites to redesign. On the surface it looks quite simple: modify the header, adjust the color palette, update the typography and call it done. But there’s much more once you dig into all the elements that make a literary magazine on the web.

Branding

In continuous publication now for over a decade, Interlitq has retained the same design since it began in 2007. Yes, that now looks very dated but there are aspects of that design that form Interlitq’s visual identity. And we don’t want to do away with that entirely. Rather, we want to strengthen certain aspects and create a fresher set of visual elements through typography and judicious use of white space.

My opening step in any redesign is to pull out some graph paper and a pencil. Then I start sketching ideas that seek to uncover the overall structure of the site. Some of the graph paper ends up crumbled and tossed to the corner of the desk. Eventually, I find some drafts that capture the essence of each page of a site.

The first element a person encounters upon entering the website is the header. Here’s the (almost) original header from 2007:

I say almost the original header since the site did not originally include a blog. The blog tab was added a couple of years after Interlitq started. But the coding for the blog tab in the header was programmed so that it also appeared in the header of earlier issues as well. One thing to note that is now a historical artifact of web design is that this header image actually consisted of 10 individual images, plus 14 spacer gifs, all set within an HTML table. Actually, it’s an HTML table within a table. That was the complexity of web design in the early 2000s! But it looked good for the time, and it worked. Yet, there was something about the branding that wasn’t clear, e.g., was the site named Interlitq (or interLitQ) or was it The International Literary Quarterly? Or was The International Literary Quarterly a subtitle or simply a description of the interlitq.org site?

In 2010 a new header was designed for the site that solidified the branding on Interlitq as an original and memorable brand for the site. And the new header retained the thematic color scheme of the original.

The result was a slimmer header with a clearer emphasis on the Interlitq brand. This header still had the same problem, though, of being built out of multiple images. In the code the images have unwieldy filenames like menu_r1_c2a.gif.  Here are examples of a couple of individual images that comprise the header:

Dealing with multiple images in a header menu is a technique of the past thanks to advances in CSS, the coding language used to style web pages.

I knew that any redesign needed to start with figuring out how to design the menu in CSS without using any images. Only the web tech readers of this post will realize how exciting that is! And, also, how important. Through using only text-based CSS in styling the header, then we can create a site that works well on all types of screens, including cell phones.

The new header uses no images and consists only of code. (Okay, for the simplicity of writing this post, I’m cheating a bit by using a screenshot of the new header but, believe me, it’s all code and looks very crisp and clear on the actual site.)

The entire header and menu is created through CSS, including the rounded corners on the lower edges and the slight shadow. The color palette has been updated and the type is all web-based.

One of the remarkable aspects of web development that enable non-image based design are web fonts. For Interlitq I chose two fonts from the freely available Google web fonts service: Cormorant Garamond and Lato. In the header, the word “Interlitq” is set in Cormorant Garamond and the text of the menu is set in Lato.

Home page and landing pages

The home page of a literary magazine, the web page you see when you enter the main address of the site, e.g., www.interlitq.org, often serves multiple functions. In the early years of Interlitq, the home page served as the introduction to each issue. At that time, Interlitq only published issues quarterly. Below is a screenshot of the very first home page for Interlitq, which also was Issue 1 in November 2007.

That page was really functional. The main text on the page was an introduction by the editor. A list of contributors appeared in the left side column and the masthead just underneath the contributor list. (Again, note that the header menu in the image above is the only part that differed slightly.) Though information about each author’s work is embedded in the editor’s introductory text, one essential element that is missing is a table of contents for the issue.

The home page for issues of Interlitq has been redesigned to the following layout:

Noticeable changes here is an emphasis on an actual table of contents that gives prominence to the work of each author. The titles are the works are displayed as hyperlinks next to the authors. The works also are grouped by genre.

The next post in discussing this redesign in progress will examine how to handle the home page when the literary magazine switches from issues to publishing individual works on an irregular basis. That presents some challenges but can be handled quite well.

 

Article

The landscape of academic-led publishing

Jisc has issued a new report on Changing Publishing Economies: A landscape study of new university presses and academic-led publishing (pdf). At least, I think it’s a new report; oddly, there’s no date of publication on the report. But it’s a very interesting overview of initiatives at least through 2016 when the study was commissioned.

A significant aspect of the report involves the increasing role of library as publisher.

it is important to note the difference between the library as publisher with regard to post production services and the library as university press, which implies an active role in the entire publishing process.

In the section on background, motivations and goals (p 43) the report identifies that many initiatives are “community based” and originate from existing research communities based around shared interests. The report also describes how academic-led publishing initiatives does not necessarily mean institutional-based initiatives.

Open Humanities Press argues that its independence means it is better able to respond to what scholars want “rather than to what their institutions, libraries and funders want”, which is similarly emphasised by Ubiquity Press and Language Science Press.

This section of the report summarizes insightful responses to a series of open-ended questions that are well worth reading. Several responses touch on topics I want to explore in future posts, such as publishing multimodal scholarship. Overall, it’s a very good report on non-commercial academic publishing.

Publishing initiatives covered in the report:

Counterpress
electric.press
Goldsmiths Press
Language Science Press
Mattering Press
MayFly Books
Media Commons Press
meson press
Open Book Publishers
Open Humanities Press
Open Library of Humanities
punctum books
Ubiquity Press

 

 

Article

Interlitq: A Review in Progress

An activity I’ve undertaken this year is to modernize the design and digital strategy of Interlitq, The International Literary Quarterly. We’re approaching the 10th anniversary of Interlitq with the first issue appearing online in November 2007. A lot has changed on the web in the past decade, but the design and technical architecture of the site is showing its age. As I work on this project, I’ll be posting here updates that describe the redesign process. This is not simply a visual redesign but also a technical redesign of the underlying architecture.

Before embarking on the visual redesign, there are several technical steps to be taken:

  • Establish a working repository of text files. (All existing content are contained in individual PHP files.)
  • Convert files from existing php to a more manageable text file structure, e.g., Markdown.
  • Determine information architecture based on content types, desired functionality, and forward compatibility.
  • Examine other online literary journals for ideas about redesign, and identify key elements that are desired in the redesign.
  • Determine platform for the new site, most likely WordPress though that also requires determining if the platform should be multisite WordPress where each journal issue is a separate WP site. Some online journals have taken this approach.
  • Setup a test server.
  • Prototype design. Revise as needed.
  • Import content into test server.
  • Start implementation of new design in a restricted sandbox.
  • Fully test new design.
  • Import most recent content from current site into new system.
  • Migrate design and content from test server to product server.

A lot of steps with many details missing from the above list. Fortunately, I love working on this type of project.

Article

Drafting a course description

I’m working on a syllabus for a course for next spring’s 4-week short term….not sure of the title yet…I’m toying with the words digital publishing startup. Here’s the first draft of a course description:

Through focusing on a specific type of publishing endeavor, literary outlets, we will investigate the mechanisms that power the web and the production of literature in the 21st Century. The last twenty-five years have seen a seismic transition in publishing from print to digital. We’ll explore what really comprises the web: standardized software and network protocols running on interconnected machines. A close reading of a case study in digital publishing will provide you with the structure for understanding these technologies. A hands-on approach in a series of 10 lab sessions will provide you with the experience to tackle a variety of business and technical scenarios for fiction and non-fiction publishing. For the course project students will assume the roles of a business, editorial, and production team in a digital startup that is creating a new venture publishing e-books in translation of foreign works as well as an online magazine. And in true startup fashion, we’ll do all this in 4 weeks.

Students are not expected to have prior in-depth experience with technology other than at the consumer level.

css.php