News

Adaptive digital magazine style inspired by DuJour

Jason Binn decided to create a new luxury, lifestyle and fashion website to showcase DuJour magazine (www.dujour.com). Learn some of the essential techniques used.

Adaptive digital mag Doujour

DuJour combines 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 first 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.

INSPIRATION: www.dujour.com

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.” Mark Shufflebottom

TECHNIQUE

SLIDING SIDE PANEL

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.

001 <div id="panel">Panel</div>
 002 <div id="switch"></div>

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 overflow is set to hidden to avoid having horizontal scroll bars.

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

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 off 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.

001 #panel {
 002 background-color: #999; width: 
 400px;
 003 height: 100%; position:absolute;
 004 top: 0; right: -400px;
 005 }
 006 #switch {
 007 background-color: #FF0; position: 
 absolute;
 008 top: 50%; right: 0;
 009 cursor: pointer;
 010 }

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 off to the right.

001 <script>
 002 var onScreen = false;
 003 $(document).ready(function() {
 004 $(“#switch”).click(function() {
 005 if (onScreen){
 006 $(“#panel”).
 animate({‘right’:’-400’}, 
 ‘easeOutSine’);
 007 $(‘#switch’).text(‘).
 008 onScreen = false;
 009 }

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.

001 else {
 002 $("#panel").
 animate({'right':'0'}, 'easeOutSine');
 003 $('#switch').text('>');
 004 onScreen = true;
 005 } 
 006 }); 
 007 });

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 letter forms.

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.

Convert to paths
Select the text, and from the type menu choose 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.

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.

×