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