Journal >

Ammo Magazine – Responsive Website Design

Ammo Magazine – Responsive Website Design

I founded Ammo in 2009 and have been publishing small illustration magazines and art books ever since. Recently I redesigned and built a new website for the magazine. Below is a summary of some of the more interesting aspects of the redesign and how it responds to suit various resolutions.

Key features of the new responsive website design for Ammo Magazine

A responsive website is tailored to change its appearance in reaction to the viewport it’s being displayed upon. These changes ensure that the content of the site remains legible and is presented in the best possible way. Most of these responsive features will go unnoticed by visitors to the site (unless they view it on several different devices). In fact that’s the whole point – to provide a seamless experience no matter what device, orientation or resolution the visitor is using. I’ve listed some of the key features of the Ammo site below.

 

Main Navigation

The main navigation for the Ammo site has three states. Small, medium and large screens will be served the correct state to suit their size.

Ammo Navigation

From the top to bottom you can see the large, medium and small navigation. These will be displayed as you might expected on mobile, tablet and desktop devices. Users may also witness the nav change especially if they alter the orientation of their device or change the size of their browser window eg. if a user is viewing the site on a large tablet in portrait orientation they may see the medium nav but turning the tablet to landscape orientation may create enough space to display the larger nav. As the site is responsive the navigation states aren’t based on specific devices but logical break points so they’ll work well across a wide range of devices.

To ensure the custom lettering in the nav didn’t slow things down or potentially make the links illegible I saved each image as an svg file. This format is vector based and results in file sizes that are very small. Being vector based also means they look great even on retina devices.

 

The Artist Directory

Showcasing the artists that have taken part in the various Ammo publications is the most important aspect of the site. I added filters so that artists could be found via their medium or style. I also wanted each artist to be represented by a piece of their artwork whilst still keeping the listings very clear and easy to browse. So I kept things simple and represented each artist with a thumbnail image and their name underneath.

The directory also responds to different screen sizes. On a medium screen (eg. a 15 inch laptop) you’d see the directory listings displayed across three columns.

Ammo Artist Directory - Medium

On a larger screen (eg. a 21.5 inch desktop computer) the directory spreads across four columns. I wanted to take advantage of the space and make the directory listings wider. I also increased the width of the rows for larger screens so that the main content isn’t floating in huge areas of empty space. Other pages on the site keep the three column layout but with the wider rows (The images on those pages are responsive and adjust to fit).

ammo2

On mobile devices the directory listings are displayed in a single column.

 

Artist Profiles

When you select an artist from the directory you’ll be taken to their profile page. A selection of artwork is included in a slider on each page as well as a profile photo, website link, intro, description and social sharing buttons.

When viewed on a mobile the content is display in a single column. Currently some parts of the profile are hidden on mobile. This is simply because I ran out of time before launching the last issue and not because I felt they should be omitted. At some point I’ll go back and update the media queries and styles so that all info is included. Below you can see how the profile pages look on medium screens and mobile.

Ammo Artist Profile

 

Product Pages

Initially the shops product pages were going to have the same layout as the artist profiles ie. the image slider on the right and the smaller column on the right. Once I began building I realised it just wasn’t going to look right and that it would be better to swap them around. It feels much more natural to have the ‘Add to Cart’ button on the right and it’s a layout that I’ve commonly used on product pages in other sites.

Below you can see the alternative layout and mobile view.

Ammo Product Page

 

Future Updates

In true publisher style I was fighting against a deadline to get the site completed. Issue 10 of the magazine was ready to be launched just before Christmas and I needed to get the site completed in time for the launch date. It was a huge (but enjoyable!) task, especially as I was responsible for writing all the content as well as the design/development/photography etc (not to mention organising artists and designing the printed magazine…).

There are several updates I’d like to make in the future. Most notably more filters and possibly a search function on the artist directory as well as an artist ‘wishlist’ feature. I’d also like to go back to the artist profiles and add in the hidden content on mobile. Apart from those small issues I’m really happy with how the site turned out and feel that it really represents the artists who’ve helped me build Ammo into a leading illustration brand.

Ammo Magazine »

Hello!

I'm a North Yorkshire based Creative Director with over 12 years of commercial experience. I work on digital and print projects for creative studios, businesses and like-minded individuals. I provide a range of graphic design services including web design, front-end web development, print design and illustration.

Read More »