Digital First For DuJour Magazine

The Visual Web: Visual content is placed at the forefront of this online magazine, to keep the presence extremely similar to the print edition of the magazine. This shows how far the web has come as a design medium, with rich magazine design becoming more easily created for the web.

One Page Wonder: “The print emulation of this website’s design is created to be as easy-to-read as possible, so there is really only one way to read and that is to scroll down through the content, like you would read through a magazine. Being a digital version, there is a handy inclusion of a contents page that can enable the reader to jump to any spread of pages.”

Earlier this year, Jason Binn decided to create a new luxury, lifestyle, and fashion website to showcase DuJour magazine (www.dujour.com). To do this, he combined print magazine design quality, with an adaptive web publishing model.

To accomplish this feat, Binn approached Code and Theory to develop a digital experience that could function flawlessly on desktops and tablets alike, while showcasing ongoing editorial updates and the full run of current issues.

Working side-by-side they embarked on designing a full digital experience on the web as the irst print issue of DuJour was being created. To do this well, simplicity was key. The online magazine exists as one long scrolling page with the relevant content loaded at the appropriate time.

#1 - INSPIRATION: Unified Publishing

Rather than creating separate experiences for the print and digital magazine, iPad, and website, Code and Theory developed a single-view site that houses editorial, advertising, and photo galleries. To ensure navigating the site was a seamless experience, Code and Theory designed an infinite scroll format that allowed for undisrupted exploration and keeps users on the same single webpage. Users can browse through photo stories, dive deep into editorial content or just scroll through highlighted stories one after another. Each individual piece of content is shareable to a variety of social media through deep links.

#2 - TECHNIQUE: Sliding Side Panel

STEP 1: Create The Panel

Create a new HTML page, and in the body, section add the div tags as shown below. This is the panel that will slide in from the side and the switch that will be pressed to make the panel slide in and out from the right-hand edge. The switch has a less-than symbol displayed as an arrow, but you could use an image icon.

CODE:

<div id="panel">Panel</div>

<div id="switch">&lt;</div>

STEP 2: Style The Document

Move up to the head section of the document and add the link to jQuery and the style tag. Add the CSS rule for the body and HTML that sets the margin and padding to 0, with the height of the document set to 100% which enables the panel to also be 100%. The overlow is set to hidden to avoid having horizontal scroll bars.

CODE:

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<style type="text/css">
body, html {
margin: 0; padding: 0;height: 100%; overflow: hidden;
}

STEP 3: Style The Document (2)

Continue styling the page by making the panel a mid grey colour, it will be the full height of the browser and 400px wide. The position will be o the screen to the right. The switch that controls the sliding panel is made to have a yellow background and also positioned to the right, but halfway down the document.

CODE:

#panel {
background-color: #999; width:400px;
height: 100%; position:absolute;
top: 0; right: -400px;
}
#switch {
background-color: #FF0; position:absolute;
top: 50%; right: 0;
cursor: pointer;
}

STEP 4: Add The jQuery

Still in the head section, add the script tag and the remaining jQuery code – this adds a variable that tells us whether the side panel is on the screen or not. The document-ready function allows jQuery to add a click function to the switch when it loads. If the on-screen variable is true then the panel is slid of to the right.

CODE:

<script>
var onScreen = false;
$(document).ready(function() {
$("#switch").click(function() {
if (onScreen){
$("#panel").animate({'right':'-400'},'easeOutSine');
$('#switch').text('<');
onScreen = false;
}

STEP 5: Add To Your CSS

If the panel is not on the screen it is slid on, using this code. Notice that the text in the switch div tag is changed to a greater-than symbol (>). This shows that the switch now controls the side panel to slide back out. Save this and test it in the browser to see the sliding side panel on the right of the screen.

CODE:

else {
$("#panel").animate({'right':'0'}, 'easeOutSine');
$('#switch').text('>');
onScreen = true;
}
});
});

#3 - TECHNIQUE: Recreating The Logo

The online magazine uses a classic title-based logo, often seen in print, and here we show you how to leverage the power of Illustrator to recreate the logo by manipulating the letterforms.

STEP 1: Add The Text

Open Adobe Illustrator or a similar tool and use the Text tool to add the title as shown. We’ve used Bodoni as the typeface and changed the ‘Jour’ part to bold, so there is a slight difference in the emphasis.

STEP 1: Add The Text

STEP 2: Convert To Paths

Select the text, and from the type, the menu chooses to Create Outlines. The text is not editable as text now but editable as a vector shape. Switch to the direct selection tool, which is the white pointer tool, ready to manipulate the text.

STEP 2: Convert To Paths

STEP 3: Manipulate The Letter

Click and drag around the bottom half of the letter J. Now click and move this down and to the right to create the letter as shown in the screenshot. You can also move the letter closer to the others after you have finished manipulating it.

STEP 3: Manipulate The Letter