The Magnetic State Blog Dept.

The blog at Brooklyn web design studio Magnetic State.

Facebook Instant Articles Developer

by Leave a Comment

Instant Articles Developer

Getting approved for Facebook Instant Articles is more complicated than you might expect. I can help. If you are seeking a developer to help you get your Facebook Instant articles feed approved, send me an email.

Last week, my magazine Culture Creature was approved for Facebook Instant Articles. I spent weeks learning Facebook’s preferred HTML implementation for Instant articles (including bugs and workarounds) before I was approved. It was worth it – my articles are now up and running successfully, and generating income through Audience Network.

The Mobile-First Approach to Branding

by 1 Comment

mobile first branding

Normally, ‘mobile-first’ is a concept that applies to web design. The mobile-first approach has historically meant designing a responsive website by starting with the mobile version, then designing upwards towards desktop. This way, the concerns of the mobile experience are considered first, and applied or revised for larger viewports. It’s time to approach branding the same way.

mobile navigation menu

Above: mobile navigation menus offer very limited space for logos

Logos and other branded elements have been reduced to tiny squares across the web. These environments include social media avatars, favicons, and increasingly, the sticky navigation bar on your website itself. Logos are required to communicate your brand identity in a very small space – whether it’s on a mobile device, or even in a Facebook feed on desktop. That’s why it’s time to consider small scales first when you’re designing a brand identity. Design brand iconography that works in small contexts first, then scale your concept up for larger contexts.

mobile branding

A successful brand identity is recognizable or legible at small sizes.

The kind of design that is best suited for these small contexts includes very simple icons, short acronyms/single letters, or very basic secondary identifiers (a simple shape or even color scheme that is integral to your visual identity). In other words, the most basic forms of human communication – icons, letters, runes, color and shape. Full wordmarks don’t often work well at small sizes (see the Amtrak and BrooklynVegan examples on this page).

mobile first branding

The Onion’s icon is simple and memorable at this scale. Amtrak’s is blurry, tiny, and illegible.

Ironically, this is the kind of simple, concise icon & logo design that the old masters like Paul Rand and Milton Glaser excelled at. In the past decade, the trend for ‘flexible brand identity’ has moved away from this style of iconography and logo design in favor of motion, animation, and iteration. I think it’s time to reintroduce an element of classic, simple logo and icon design to modern branding.

The next time you build a brand, try starting small: design a mobile icon in a 50 pixel square before you do anything else. Start here before you approach your logo, color palette, or even your brand name. Start small and work up!

Parsons Alumni Exhibition

by Leave a Comment

Here’s an awkward photo of me at the opening of the 2015 Parsons Alumni Exhibition! My website HauntedToasters.com is on display in the gallery at Parsons right now. I hacked an emulator of the ubiquitous nineties screensaver ‘Flying Toasters’ and inserted images of a ‘subliminal’ demon face from The Exorcist into it. The site is part of my series ‘Contact the Webmaster.’

haunted toasters

New Work: Men’s Health Fall Guide to Style

by Leave a Comment

responsive magazine design

I designed and developed this responsive multimedia feature for Men’s Health: The Fall 2015 Guide to Style. The feature includes exclusive video and style content in three categories (Creative, Rugged, and Sophisticated). The videos are featured as large centerpieces, followed by dozens of products and tips. This responsive minisite integrates Bootstrap-based web design with the Men’s Health CMS.

Happy Birthday to the Device that Changed Everything

by Leave a Comment

The first generation iPhone went on sale eight years ago today – on June 29, 2007. The device’s popularity ushered in the mobile universe we live in today. This post is not an “Apple fanboy” rant, but rather an appreciation of all that has changed in the world of technology and communication in the iPhone’s wake. Like it or not, its impact has been tremendous. Here are a few ways the world has changed since 2007:

The Web and Responsive Design

The rise of smartphones (from both Apple and its imitators) presented web developers with a vexing problem: their standard desktop sites were unreadable and unusable on mobile. After a few years of innovation, failure, and debate, Evan Marcotte created responsive design. Responsive design uses CSS media queries to make websites change shape depending on the device and screen size they’re presented on. The web underwent an overhaul for handheld accessibility and immediacy; this was a watershed moment for web design and has forever altered the style and shape of the web (for more info, read my article about the basics of responsive design). One recent symbol of mobile’s impact on the web at large is the ubiquitous ‘hamburger’ menu icon – an icon that was once a mobile mainstay but which has risen to prominence on almost every platform.

While web designers were grappling with responsive design, app developers were learning to exploit mobile-centric behavior and functionality like swiping and geolocation.

Culture & Lifestyle

Your aunt has a dangerous addiction to Candy Crush. There’s an Angry Birds movie on the way, obviously. Last year, app developer Supercell was reportedly raking in an astounding $654,000 a day on its hit game Clash of Clans.

Mobile gaming applications have risen to be a major force in pop culture – but smartphones are used for much more than gaming.

Social media apps like Facebook and Foursquare have changed the way people communicate and socialize. Tinder caused a splash in online dating and created a cultural phenomenon out of ‘swiping left’ (Vogue calls it “the definitive gesture of permanent rejection in the digital age”). Another area of major cultural change is mobile’s impact on ecommerce and the way that people shop. Mobile commerce has experienced exponential growth; so much so that consumers now spend more time shopping on mobile devices than desktops.

Music

The universe of Apple products – including iPhone and iPod – have made some musicians feel that they need to tailor their music to be immediate and digestible. Former Oasis frontman Noel Gallagher was recently interviewed on the podcast You Made It Weird, where he commented on the impact of Apple products on popular music. “Music is now designed for the iPod. Music is designed and written to come out of tiny speakers on iTunes. Music is designed to hit you by the time that [iTunes preview] wheel turns around, so you buy it. The ninety second thing… check it out, modern pop music, it’s all about the ninety seconds – forget three minutes.”

Protein: the Manual for Men

by Leave a Comment

Check out this huge new responsive site I built for Men’s Health! The site is called ‘Protein: the Manual for Men’ and it’s conveniently located at menshealth.com/meat. This responsive standalone site is packed to the brim with recipes, photography, slideshows, and video. It’s kind of a multimedia meat smorgasbord. The site was designed by myself and developed by the ultra-talented Magnetic State freelancer Cécile Williams.