A fresh look for OMP 1.2 and OJS 3.0

December 8th, 2015 by  | 6 Comments






When we redesigned the OJS 3.0 backend in time for the beta release, we had to rush out a frontend. We’ve now had a chance to revisit the reader interface, think about the wide variety of use-cases we need to support, and put together something we’re pretty happy with.

In this post I’ll give you a look at our new frontend reader interface and go into the thinking behind some of the decisions we made.

I’ll be showing you screenshots from my own test OMP installation. The OJS frontend is similar. OMP is just a bit farther along as we gear up for the OMP 1.2 release.

homepage-full

Responsive, mobile-friendly design

The first principle we had to tackle was ensuring the reader frontend was easy to use on a mobile device, touchpad or any of our small-screen cousins.

While academic publishing lags behind other publishing sectors in the relative weight and priority of its mobile users — for understandable reasons — it’s becoming more and more critical to offer browsing experiences that are comfortable across a range of devices.

The new frontend offers appropriate, collapsed views for small devices and scales up as the visitor’s browser size increases. The full desktop view presents a familiar, traditional view with a sidebar on the left.

responsive-design-sml

Fast, easy browsing and searching

Academic researchers and librarians often know exactly what they’re looking for when they visit a journal or press website. We wanted to make it as easy as possible to drill down and locate what they want, or to search across the catalog/journal.

Our browse block plugin will be familiar to OMP users and it will play a strong role in the new frontend as well. For OJS users, we’ll be working on simple, clear navigation patterns for journals as well. For both, we’ve included a prominent search bar to locate items quickly.

search-animation

Flexible and re-usable content blocks

The biggest challenge when designing an open platform like PKP’s software suite is finding a design which can accommodate the vast diversity among our users. Some will have a lot of resources, high visual impact and a marketing team writing copy. Others will get by with a smaller team and a smaller budget.

To accommodate this diversity, we settled on a design which carefully ring-fenced the content with strong design cues. Sidebar blocks are clearly distinguished from the main content and given generous spacing. Whatever block content you toss into the sidebar, it shouldn’t disrupt the continuity of design with other blocks or with the main content.

sidebar

This pattern was repeated with our catalog displays. Each book is boxed off and clearly separated. This will help retain visual cohesion for each book, whether the thumbnail is large or small, or even in cases where some titles or author text are very long and others are very short.

catalog

And finally, we used the same boxed pattern for the book page. Every publisher has it’s own set of data which they want to display on the book page. By providing a small side-box for each piece of data, we hope it will be easier for publishers to add their own data while maintaining visual cohesion within the design. More about customizing templates will come in a future post.

book

Announcements

Announcements now get a more conventional news treatment on the homepage.

announcements-summary

They also get their own URL so you can include a fully-detailed post for your announcement. This will help increase the announcements’ exposure for search engines as well as give you a proper link you can share to take people directly to your announcement

announcements-full

And finally, they get a proper archive page which lists all past announcements.

announcements-archive

Adding custom content, templating and branding

We’ve increased our use of slots for generic content blocks. You can use these to add content to the homepage, footer and sidebar. This should give you more flexibility to add content without needing to tamper with the template files. We’ve also made it easier to change the colour scheme — though for the moment this will still require a bit of fiddling with the CSS code.

In a separate blog post aimed at developers I’ll cover the improvements we’ve made to the template structure. This will hopefully make it easier for developers to extend or modify the frontend.

6 Comments on "A fresh look for OMP 1.2 and OJS 3.0"

  1. Hello. I’m the managing editor of Chasqui, a Journal dedicated to Social Communication in Latin America which is using OJS.
    I’d like to know when you think could be released OJS 3.0
    Thank you very much

    • Kevin says:

      We haven’t landed on a firm date yet, but are definitely planning to have OJS 3.0 out this year. Once we do know, we’ll be sure to post a message here.

  2. OJSuser says:

    I’ve just saw your incredible work on OMP.
    What’s about OJS ? This front-end would be a great step for OJS !

    • Kevin says:

      Absolutely, the work going into OMP 1.2 right now will also be applied to OJS 3 later this year. Watch this space for further information soon.

  3. thank you nice article has been

Here's your chance to leave a comment!