Designing a Mobile-First Online Magazine:

We partnered with And Sons Magazine to design and deploy a mobile-ready online monthly magazine.  We took a mobile-first and minimalist approach to this site as the target audience are millennials who by nature are tech savy and tend to visit the web through their mobile device.  In addition, the minimalist design approach allows users to focus on the high level photography and well written content that is an essential part of every issue’s content.  

In this blog, I’ll highlight some of the elements that make this an engaging, modern and functional user-centric website.

Home Page:

The home page is usually a vivid photograph that ties together the theme for that particular issue.  This image changes monthly with the publication of every new issue.  In a mobile device, right underneath the main photograph, you’ll have the hamburger menu.  When this is clicked, a listing of all the different magazine categories show up.  Note that there’s no description next to the hamburger menu to followup on the minimalist approach and the fact that its audience knows that the “three horizontal lines” is the universal icon for menu.

And Sons Magazine Mobile

On a desktop, right above the fold, you’ll see the different categories that the magazine has.

And Sons Magazine Desktop


In all the interior pages, there is a very simple yet sharp Subscribe button that rolls up once the page loads.  This was done using the AddThis API.  When people click on the subscribe button, they are sent to a custom form that is housed in the And Sons Magazine site.  This is integrated with the email service provider, Mailchimp. Everybody that subscribes to the magazine will receive a monthly email alerting them when a new issue is available.

And Sons Magazine Subscribe

Social Share:

The Social Share tools integrate with the AddThis platform as well, but is stripped down and simplified to go along with the media-savvy, young audience.   All you see is the Share icon, and once you click on it, you see a list of different social media channels that can be used to share the article.  The number next to the “Share” icon is a cumulative count of the times this particular article has been shared regardless of the social media channel used.

Social Share for And Sons Magazine



The Comments section is collapsible because less is more.  We used the Facebook integration with Drupal for the Comments section as most of the targeted audience has a Facebook account.  This is a way for And Sons Magazine to remarket their magazine since any comments posted in this site can be automatically posted on FB.

And Sons Magazine Comments Section


To give readers a sense of thumbing through different articles, all the inside pages have arrows pointing to the left and right of the screen.  This allows readers to go to a previous article or to the next from the one you are currently reading without having to go back to the menu.

And Sons Magazine Thumbing_001.png


Remarketing of similar articles within a category:

In order to make it easier for readers to find the most popular articles within a category, we used the Drupal module, radioactivity.  This is an easy way to keep readers engaged on articles of interest to them.

And Sons Magazine Top Articles


Integration to Online Store:

And Sons Magazine also used this site as a platform to promote their book, Killing Lions, during its pre-release phase.  They sent emails about Killing Lions, had monthly giveaways, and created and published videos to publicize this book.  Now that the book is published, it is possible to purchase it through their online store (which is built on Magento), as well as other well known online book stores (such as Amazon and Barnes and Noble, among a few others).  

Killing Lions

*Mobile-first is the process of designing a website for mobile devices first, and then tweaking the design to be compatible with desktop devices.  Mobile devices are the driving force for the design.

What do you think of this website and its design? Would love to hear your feedback.


Contact Linda




Related Blog Posts



Technologies for Nonprofits