{"id":1161,"date":"2018-02-10T03:35:44","date_gmt":"2018-02-10T03:35:44","guid":{"rendered":"http:\/\/endlesshybrids.com\/?p=1161"},"modified":"2018-02-10T03:35:44","modified_gmt":"2018-02-10T03:35:44","slug":"interlitq-identifying-essential-elements-in-redesigning-a-literary-magazine","status":"publish","type":"post","link":"https:\/\/endlesshybrids.com\/web-development\/interlitq-identifying-essential-elements-in-redesigning-a-literary-magazine\/","title":{"rendered":"Interlitq: identifying essential elements in redesigning a literary magazine"},"content":{"rendered":"
The redesign of Interlitq<\/a> 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.<\/p>\n 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.<\/p>\n 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.<\/p>\n The first element a person encounters upon entering the website is the header. Here’s the (almost) original header from 2007:<\/p>\n <\/p>\n 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?<\/p>\n 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.<\/p>\n <\/p>\n 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\u00a0menu_r1_c2a.gif.\u00a0 Here are examples of a couple of individual images that comprise the header:<\/p>\n <\/p>\n <\/p>\n Dealing with multiple images in a header menu is a technique of the past thanks to advances in CSS<\/a>, the coding language used to style web pages.<\/p>\n 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.<\/p>\n 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.)<\/p>\n <\/p>\n 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.<\/p>\n 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<\/a> and Lato<\/a>. In the header, the word “Interlitq” is set in Cormorant Garamond and the text of the menu is set in Lato.<\/p>\nBranding<\/h2>\n
Home page and landing pages<\/h2>\n