I’m posting some examples of the lead story presentation that I’ve been working on. To recap, the main issue is dealing with portrait and landscape photographs and how to display them in a flexible appealing way. Magazines use mostly portrait images as the pages are vertical but the web is a much more horizontal medium. Designing a flexible solution that enables editors to choose the presentation that best fits the art but still adheres to the style guides was a challenge especially when thinking about the backend logic that has to be coded to make this work. So I’ll go over a little about the thinking and show the solution.
The Default Carousel
This is the default presentation. A jQuery carousel will be used and there has to be at least two slides in it. In each slide there can be a flexible number of headline cells based on the art used. The default has headline cells which can contain either a landscape image with headline, time stamp and tease. Story links can also be added. If a portrait photograph is used then the space for the tease is limited and only a headline and time stamp are used.
Large Landscape Image
This is what I like about this solution. If the editor has a great photo that is landscape oriented they can use a different presentation to highlight that photo and article. This would be a slide in the carousel and highlights the flexibility of having different asset types to provide the presentation.
Large Portrait Image
If the lead story has a portrait image then this larger presentation can be used. Displaying large portrait images on the web is one of the constant problems that I’ve run into. This solution lets you put a relatively large portrait image in the headline cell but retains the proper proportion to maintain the vertical and horizontal grid.
Extra Large Image
The last example I’ll show is the extra large image format. For displaying large landscape images that stretch across all headline cells. This would be impractical for portrait images as it would break the grid and the page structure but works for landscape images.
Of course there are other configurations that I haven’t show here. Headline lists, secondary article lists, breaking news, link lists, giveaways, promos and on and on.
I really like this solution as it is flexible and solves a number of problems but will maintain the overall visual integrity of the page. I’m posting a mock up of a magazine homepage ( understand while it says Carolina Bride it’s just a mock up ). I’ve combined the carousel and ads into their own block. This meets our ad placement requirements and adds some visual separation from the rest of the page. I’m then free to be flexible with the bottom part of the page. The need for a traditional sidebar is not there as the ads have been taken out and different content types could be used. In this example there are blog entries, slideshow thumbnails, forum entries and calendar entries. These could be rearranged or expanded to cross multiple columns. In the right rail there is a promo and newsletter sign up form, also this issue content block. These are traditionally in the sidebar and will be on interior pages but for the homepage there is some flexibility on placement and presentation. While this is acting as a sidebar there is not the normal visual separation that usually accompanies a traditional sidebar. I think this make the page cleaner and easier to take in.
Is this the end all be all solution? Probably not but it addresses the major issues that had come up again and again with magazine web site designs that I’ve worked on.
lead story examples
I’m posting some examples of the lead story presentation that I’ve been working on. To recap, the main issue is dealing with portrait and landscape photographs and how to display them in a flexible appealing way. Magazines use mostly portrait images as the pages are vertical but the web is a much more horizontal medium. Designing a flexible solution that enables editors to choose the presentation that best fits the art but still adheres to the style guides was a challenge especially when thinking about the backend logic that has to be coded to make this work. So I’ll go over a little about the thinking and show the solution.
The Default Carousel
This is the default presentation. A jQuery carousel will be used and there has to be at least two slides in it. In each slide there can be a flexible number of headline cells based on the art used. The default has headline cells which can contain either a landscape image with headline, time stamp and tease. Story links can also be added. If a portrait photograph is used then the space for the tease is limited and only a headline and time stamp are used.
Large Landscape Image
This is what I like about this solution. If the editor has a great photo that is landscape oriented they can use a different presentation to highlight that photo and article. This would be a slide in the carousel and highlights the flexibility of having different asset types to provide the presentation.
Large Portrait Image
If the lead story has a portrait image then this larger presentation can be used. Displaying large portrait images on the web is one of the constant problems that I’ve run into. This solution lets you put a relatively large portrait image in the headline cell but retains the proper proportion to maintain the vertical and horizontal grid.
Extra Large Image
The last example I’ll show is the extra large image format. For displaying large landscape images that stretch across all headline cells. This would be impractical for portrait images as it would break the grid and the page structure but works for landscape images.
Of course there are other configurations that I haven’t show here. Headline lists, secondary article lists, breaking news, link lists, giveaways, promos and on and on.
I really like this solution as it is flexible and solves a number of problems but will maintain the overall visual integrity of the page. I’m posting a mock up of a magazine homepage ( understand while it says Carolina Bride it’s just a mock up ). I’ve combined the carousel and ads into their own block. This meets our ad placement requirements and adds some visual separation from the rest of the page. I’m then free to be flexible with the bottom part of the page. The need for a traditional sidebar is not there as the ads have been taken out and different content types could be used. In this example there are blog entries, slideshow thumbnails, forum entries and calendar entries. These could be rearranged or expanded to cross multiple columns. In the right rail there is a promo and newsletter sign up form, also this issue content block. These are traditionally in the sidebar and will be on interior pages but for the homepage there is some flexibility on placement and presentation. While this is acting as a sidebar there is not the normal visual separation that usually accompanies a traditional sidebar. I think this make the page cleaner and easier to take in.
Is this the end all be all solution? Probably not but it addresses the major issues that had come up again and again with magazine web site designs that I’ve worked on.
Magazine Site Skins
Magazine Lead Story Presentation
« Back to Blog
most recent entries