DSW develops the OneBeat.tv beta website and mobile experience
Digital Strategy Works recently completed a fully responsive website for OneBeat.tv, a popular online EDM channel. The site renders in both web and mobile browsers, making it easily readable for site visitors.
OneBeat requested a grid like layout that relies on images, titles and categories to lead all posts. Generally, these types of themes hide the title behind a rollover in the center of the image over a transparent graphic. However, the task was to build the layout and functionality, so that the post title fit into respective blocks on the page. To do so required the addition of a two tiered titling system, because it’s difficult to limit WordPress (or the web producer publishing the content) from displaying multiple categories on any given post.
We wrote a text entry field for the post title on its single post page and gave the post author the ability to write a secondary title for the homepage or category landing page. A social media bar is present across the top of the site to link site visitors to the company’s social profiles. We also provided the ability to limit the post category on the homepage to a single category, as WordPress usually prints all selected categories resulting in multiple categories stacked in a very small post box. It was a complex mission that we solved with a solution to tag a post with one of multiple categories, making the selected category primary.
As you can see, the posts fall into a layout that mimics a wall of bricks, each with a different width. We employed masonry.js, a popular javascript library to accomplish this layout and it generally works nicely with some minor caveats, which will be resolved in the next version.
Home Page – OneBeat.tv with grid layout
On the post page, the requirement was to have the lead be either an image, a video, a gallery or…nothing at all. We built a tool to allow the post author to insert a media type above the post at a fixed width. However, this image could not be “Featured” in the sense that WordPress takes a featured image from the Featured widget in the post admin and displays that image in the home page box, a category landing page or other areas. OneBeat wanted to be able to have 2 featured images – one for the post and one for everywhere else. And, the featured area needed to be a fixed size, so that the post author did not publish something out of scale with the rest of the site. Consistency of brand and message is critical for a blog or website, so that the reader always knows what layout to expect. The decision to make this area fixed width and height would keep a site wide consistency that is required in professional publishing.
In addition, we pulled in the OneBeat Twitter feed, set up a MailChimp email harvesting tool in the sidebar and gave them the ability to customize the sidebar with recent, relevant posts.
OneBeat.TV post page