The Breakroom

Twitterrific Inducted into AppleVis 2016 iOS Accessibility Hall of Fame

May 24, 2016

By Ged Maheux

Over the years Twitterrific has collected critical recognition from the public and from the iOS developer community including an Apple Design Award and inclusion in the iMore Hall of Fame. This past week Twitterrific earned a new award that we felt was important to highlight: Membership in the AppleVis iOS Hall of Fame for App Accessibility.

In AppleVis’ own words, the iOS Hall of Fame plays an important part in empowering blind and low-vision users to better experience the digital world around them:

“Our Hall of Fame provides the community with a means to showcase and acknowledge the passion and hard work that app developers put into creating great apps that are fully accessible to VoiceOver users. These apps place powerful tools into the palms of our hands, and give access to services, information, media or entertainment that the sighted world takes for granted.”

Here at the Iconfactory, we’ve have made a conscious effort to make Twitterrific (and all our products) as accessible as possible. Lead engineer Sean Heber’s improvements and adoption of the latest accessibility features from both Apple and Twitter have received tons of positive feedback from the VoiceOver community and have encouraged us to re-double our efforts to make Twitterrific even better for blind and low-vision users.

Twitterrific would not have received this award without the support of our amazing group of VoiceOver beta testers and users like Michael Hansen, Ashley Bischoff, Alison Hartley and most especially Marco Zehe. Without this dedicated group of people, Twitterrific would not be as accessible or as easy to use. The insight and critical feedback they provide helps us greatly improve how VoiceOver works within the app and for that we are truly grateful. In short, we have them to thank just as much as all of the people who nominated and voted for us at AppleVis.

Knowing that our efforts help to measurably improve the lives of mobile users who are often taken for granted is extremely gratifying. From the entire Twitterrific team and all of us here at the factory, this is a great honor and one we are proud to receive. Thank you.

Looking at the Future

April 21, 2016

By Craig Hockenberry

At the last Apple Event, a seemingly simple thing was announced: a True Tone display on the 9.7-inch iPad Pro. This device also uses a new LCD panel and sports “a color standard big enough for Hollywood.”

As with most things released by Apple, there is an amazing amount of underlying technology that makes this new display shine. This new product is also a glimpse of how our screen technology will evolve over the coming years, so now is a good time to start understanding how these changes are going to affect our products.

As a developer, you’ll quickly realize that the scope of these changes will make your update to Retina graphics look like a walk in the park. At the end of this piece, you’ll also learn how I can help guide you through this process.

Wider Gamuts

Since the late 1990’s computer displays have almost universally used the range of colors specified by sRGB. The standard was developed to match typical viewing conditions in a home or office. My home and office have changed radically since then, but this standard has not.

The world of color science has notoriously bad acronyms and you’re about to become familiar with a new one: DCI-P3.

The “DCI” in the name stands for “Digital Cinema Initiatives”, a consortium of major motion picture studios. This new standard was published in 2007 by the Society of Motion Picture & Television Engineers (SMPTE). They’re the folks responsible for the test patterns on your TV and the time codes in your footage.

Today, there’s a symbiosis between the motion picture and computer industries: as celluloid film goes away, devices in various forms are now used to show movies. Computers are also indispensable for effects and editing in cinema production. Both groups benefit from excellent display quality.

In fact, the DCI-P3 standard was established as a way to control the quality of digital projection systems. It makes sense that iMacs and iPads can display the same range of colors as your local theater.

From your point-of-view, the important thing about DCI-P3 is that it can display a wider range of color. Apple’s promotional literature states that the new iPad Pro has “up to 25% greater color saturation than previous models”. The diagram below lets you see this difference:

sRGB vs Display P3

Comparing the gamuts of sRGB (colored shape) and the new 9.7″ iPad Pro (white area)

The polygons represent the range of color and are often referred to as “gamut”. The white area shows the additional color that can be displayed by the new iPad compared to a more typical sRGB display. The black outline indicates the maximum range of color our eyes can see (it’s the locus of the wavelengths captured by the long, medium and short cone cells in the retina.)

More importantly, this is just a hint of things to come. Ultra-high-definition television will use something called Rec. 2020 to display color (yet another great acronym!) Someday your Apple TV apps will be using this:

sRGB vs Rec. 2020

Comparing the gamuts of sRGB (colored shape) and Ultra-high-definition TV (white area)

Over the coming years, displays that only show sRGB are going to feel as antiquated as ones that can only display @1x resolution. And the only way you’re going to be able to cope with all these new kinds viewing environments is with a thing called “color management.”

Smart Displays

Unless you’re a color scientist, “chromatic adaptation” means nothing to you. Yet, you experience the phenomenon thousands of times every day. The cool part is that your iPad Pro is now mimicking your eye’s behavior.

Here’s what Apple says about the new display:

See things in the best possible light. Whatever the lighting.

People love using iPad everywhere. That’s why the new 9.7‑inch iPad Pro has a True Tone display. It uses advanced four-channel ambient light sensors to automatically adapt the color and intensity of the display to match the light in your environment. Which means reading is more natural and comfortable — almost like looking at a sheet of paper.

Specialized neurons in our brain do the same thing to adjust the information received by the cone cells in our eyes. When you look at a sheet of paper, the “gain” of our color receptors is adjusted so that constant color is perceived. Amazingly, this effect is seen with both the global illumination of your environment and the local illumination of what you’re focused on (this is why the checkerboard shadow illusion works.)

On the iPad, there’s some heavy-duty math being done on the GPU in real time. The colors of what you are viewing are transformed into a numerical model based on the wavelength responses of your retina’s cone cells. Those, in turn, are transformed into colors that are adjusted by sensors hidden behind the top bezel of the device.

Again, color management is the thing that makes it all work.

The Advantage of Managing Color

Today, we’re in a pleasant situation where displays don’t need to get any denser. Thanks to the Retina display and others like it, we can’t see the pixels that are on our screen.

There’s only one way for manufacturers to improve displays and gain a competitive advantage. They need to make the displays “deeper”; able to show a wider range of color. It’s also clear from Apple’s work that they see smarter displays, with things like True Tone technology, as a way to distinguish themselves in a crowded market.

Apple is in a unique position with regard to color management. They own a technology called ColorSync that first saw the light of day in 1993 with System 7.1 on the Mac. It’s also been integrated at a system-level for all of the OS X releases. It’s a very mature technology that recently made its way to mobile in the iOS 9.3 release.

On the other side of the coin, Android has no color management. Companies like Samsung are going to find it impossible to pull off something like True Tone and DCI-P3 without the aid of color management.

There are open source color management systems and profiling tools, but integrating them system-wide is a large undertaking. Also, color management can’t be an “add on”: most users won’t be aware it exists or how to enable it. Windows is a good example of that phenomenon—apps rarely use color management because developers can’t rely on it being available.

But I Can’t See It!

Apple has a bit of a problem with selling these new displays: the vast majority of people looking at promotional materials can’t see the wider color gamut. It’s physically impossible for the sRGB display on your current iPad to show off the increased saturation of the new iPad.

Even when you come in face-to-face with this new screen it’s hard to describe in words. Smart folks who can normally summarize their feelings in a few choice words end up saying things like this:

There is something about this new screen. It’s beyond me but it’s striking.

I had the same reaction and decided to look at the display in more detail. With the help of some sample wide-gamut images by Jeff Carlson, I decided to dig into the effect DCI-P3 was having on my eye. The result is a web page to compare color gamuts:

Wide Gamut Photos

Click on the image to explore the capabilities of the new 9.7″ iPad Pro display

Be careful on that web page: unless you’re looking at it on a 9.7” iPad Pro, the ProPhoto and AdobeRGB images will actually look worse than the traditional sRGB image. But if you’re on the new iPad or iMac you will quickly appreciate what a talented photographer can do with more color saturation.

The harbor image is where this effect is most obvious, but the increased saturation occurs in all the images. Highlights are subtlety stronger, contrast is better, and gradients don’t flatten out as they get brighter.

To illustrate this, I used Photoshop to analyze screenshots of the page. I created a base layer with the ProPhoto image then overlaid the sRGB sample using the difference blending mode. This setup highlighted pixels that were different between the two screenshots (which I emphasized by adjusting the levels.)

Here are the differences between the two harbor images, where it’s clear that the orange gradients are rendered more faithfully:

Harbor Difference

Some differences between the DCI-P3 display and a traditional display are obvious

But when I examined the differences in the tulip image, I saw this:

Tulip Sunrise Difference

Other times the differences between the two types of displays are much more subtle

If you look closely, you’ll see how the highlighted areas affect the tulips. But as you learned above, our eyes are amazing sensors. I think the additional detail gives our brain a better appreciation of the image even if it can’t put things like chromatic adaptation into words.

After using this iPad for a couple of weeks, I’ve realized it’s like the advances of Retina in an important way: I never want to use a lesser display again. And as with higher density, I think it’s obvious that Apple will eventually update all its products to use this improved screen technology. I can’t wait!

It also wouldn’t surprise me to see these wider color gamuts coming to the cameras in our devices. All iOS devices currently create images in the sRGB gamut, while professional gear can produce images in ProPhoto or AdobeRGB. High dynamic range (HDR) photos need a wider range of color, too.

We’re quickly reaching a point where more pixels don’t make better photos. Think about how much Apple likes to tout the camera and how better saturation improves photos. These new displays are the first step in a process where wider gamuts become a part of the entire iOS photography workflow. The number of places where your code assumes everything is sRGB will be both surprising and painful.

For more information on wider gamuts from a photographer’s point-of-view, this post analyzing the DCI-P3 display on the latest iMac has a ton of good examples.

Color Management is Hard

We’ve all seen the color management controls in Photoshop and thought “Hell no!”.

There’s no getting around the fact that color is a complicated subject: you’re dealing with both the physics of electromagnetic radiation and the physiology of our eyes and brains. The things that produce and sense color in our world are inherently complex.

For the past 20 years, we’ve had it easy. We could rely on just red, green and blue to get the job done. But as displays become deeper and smarter, that’s about to change.

We’re all going to have to face the music.

Personally, I had to confront my fears of color management in 2014 for the release of xScope 4.1. In the Mavericks release of OS X, Safari’s colors started looking different than Chrome’s. This is what I currently see in both browsers on OS X:

Safari & Chrome Color Differences

Color differences in two popular browsers: Safari (left) and Chrome (right)

One browser is using color management for the display of CSS colors, the other is not. (And don’t tell me it looks fine on your display: that’s like saying “it works fine in IE 6!”)

Besides being a big change to my web development workflow, I had to deal with these color differences in xScope’s Loupe tool. I was faced with learning about color profiles and how colors are transformed between spaces.

During this learning process, I experimented a lot and kept notes. I thought I’d do a blog post about color management, but as you’ve seen above, writing about color can quickly get out of hand!

When Apple released the iMac with the DCI-P3 display, all of the work of the WebKit team quickly came into focus. They were laying the foundations for a world with more color. And my draft folder kept getting bigger.

A Book Apart

When I reached 10,000 words, I knew I had a problem and approached my friends at A Book Apart with a proposal to write a book about color management. Luckily, they agreed that this was a topic that would benefit many designers and developers. Over the past year, that draft has been refined, simplified, and become something I’m very proud of.

We’ve strived to make a book that helps you understand color in laymen’s terms, to use color management with step-by-step instructions for popular apps like Photoshop, and guides you with the work necessary to create great looking web and native apps.

We’re on the cusp of big changes with color management in our work. A new color-gamut media query is about to drop in Safari, UIImageView and UIColor both support color profiles in the latest version of iOS, and the differences in color processing across platforms continue to widen. The timing for this book couldn’t be better.

We’re not at the point where we can announce a release date, but if you’d like to know when the book is finished, sign up for A Book Apart’s newsletter (scroll to the bottom of that page.) It will be worth the wait.

In the meantime, check out the new iPad display at your local Apple store. You’ll be looking at the future.

Twitterrific 5.14.2 Improves Direct Messaging, Adds Keyboard Shortcuts & More

April 13, 2016

By Ged Maheux

Twitterrific Direct Messaging UI

With today’s launch of Twitterrific 5.14.2, the entire direct messaging interface has been re-designed and re-engineered to make sending and receiving direct messages via Twitter fun and easy. DM’s are now styled like classic chat conversations which means you can view photos and media in-line and follow the flow of a conversation more easily. The re-design lets you search for people to start a new conversation with and even delete entire existing threads quickly and easily with a swipe.

When you tap the Direct Messages tab in Twitterrific you’re now taken to the new Inbox view where you can quickly browse recent DM threads or start a new one. Prior to this update, Twitterrific users had to find a user profile and tap the email icon to initiate a direct message, but no longer. Simply tap the DM compose icon at the top of the mail box view then tap a recent person or search for a new user to message. Tap on an existing DM thread from the Inbox to continue a previous conversation or swipe left on it to mark it as read or delete it.

Version 5.14.2 also adds an extensive list of keyboard shortcuts for use with Twitterrific that make navigating and using the app with a keyboard a breeze. Simply hold down the command key on your physical keyboard to see a list of commands that are available. Keep in mind that commands are contextual so the list changes depending upon what view you’re currently looking at within Twitterrific. Visit the Twitterrific Knowledge Base for a full list of keyboard commands for use with iOS.

Keyboard Commands in Twitterrific

We’ve also included several accessibility improvements for voice over users, fine tuned readability for tweets in right-to-left languages when small thumbnail mode is enabled, and added the ability to view either a user profile or an associated tweet from the Today View. Tapping on the name of a Today view event opens the profile of the person, whereas tapping on the message text opens the tweet itself. We’ve also made the switch from completely relative time stamps like “2d ago” to “4/12/16 3:46pm”. Twitterrific still shows relative time stamps for tweets less than 24 hours old, but then shows absolute date info thereafter.

Finally, 5.14.2 includes some very important bug fixes including one that was preventing the timeline cache from clearing itself. Over time this slowed performance of loading new tweets and scrolling the timeline. We also squashed an annoying bug that could prompt the user for Twitter account authentication from time to time.

We’ve only scratched the surface of what’s new in version 5.14.2 so be sure to visit Twitterrific’s version history page for the complete list of new features, improvements and bug fixes. Twitterrific 5.14.2 is free to try via the App Store and is universal for iPhone, iPad, Apple Watch and iPod touch. Advanced features such as tweet translation, ad removal, and more are available via in-app purchase.

xScope 4.2

March 17, 2016

By Ged Maheux

An update for xScope is now available in the Mac App Store and through the in-app update. xScope 4.2 features a new setting in General preferences that allows tool windows to stay in the Space where they were activated. If you do design or development in one space and email or chat in another this will come in very handy.

In addition the Loupe now features a new eyedropper icon that allows you to quickly switch the working color space as well as a new preference to highlight colors that are out of gamut. Version 4.2 also fixes a number of bugs like truncated color values in the Loupe, an improved layout of Dimensions controls in El Capitan and a host of others.

This is a free update for current users and is available now. Check your updates at the Mac App Store or, if you purchased from the website, check for updates under the xScope menu item.

Expanding the Twemoji Universe

March 7, 2016

By Ged Maheux

Twemoji_Hero

Over the past few years the popularity of emoji has steadily grown. Heck, you can even send your sweetheart a kissy face emoji pillow as a gift! Over a year ago, we were pleased to be able to contribute to the ever-growing popularity of emoji as we helped Twitter design and develop their own unique emoji style for use on Twitter.com and their mobile apps.

Twitter recently announced an update to the Twemoji suite and we’re pleased to report we were once again able to lend them a hand in their creation. Twitter’s newly announced emoji cover the expanded icons added in Apple’s iOS 9.1 update and include dozens of new national flags, a newly-designed set of people icons with diverse skin tones, new animals, buildings, vehicles and more. The expanded set of emoji were completed here at the Iconfactory in Greensboro under Twitter’s direction over the course of two and a half months and helps bring the Twemoji suite in line with the current suite available in iOS 9.

Twemoji_Diversity

Chief among the challenges of these new emoji was the creation of Twitter’s own set of diverse skin tones. Unlike the emoji seen in iOS, Twitter’s emoji have no levels of gradients or shading so finding the colors to represent each of the required diversity levels took some time. Adjusting hue and saturation levels to find the exact right combinations for primary skin tones, plus shadows and highlights required several rounds of exploration until we zeroed in on the correct values. The new people emoji were also improved upon from their previous versions thanks to unified eye, lip and hair colors that all were specifically designed to work with the various diversity settings.

Twemoji_Flags

The new Twemoji now also includes over 100 new flags from countries like Mongolia, Ethiopia, Macau and Sri Lanka. All of the artwork seen in Twitter’s flags were drawn by hand specifically to match Twitter’s existing emoji style and precise level of detail. We’re grateful Twitter users in these many countries can now find their own nation’s flag for use on Twitter.

We’re pleased to have been able to assist Twitter once again with the development of their cool and unique emoji suite. Like the universe itself, the emoji cosmos continues to expand day by day. Even more exciting emoji will be added in the months ahead and we’ll be standing ready once again to help our clients with all their emoji needs, should they call on us. No project is too large or small; make sure to check out our portfolio. You can learn more about the expanded emoji suite seen in iOS 9.1 over at Emojipedia and explore all of the icons we’ve helped create for Twitter there as well. 🖖

Happy Holidays and Thank You!

December 18, 2015

By Ged Maheux

2015 Animated Iconfactory

As we power down our Macs and prepare for our annual (and much-needed) Christmas break, we wanted to take a moment and say thank you. Thanks to everyone who has continued to support our efforts by purchasing software like Twitterrific, xScope, iPulse and Flare. Thanks to our incredible clients who put their brands, reputations and apps in our hands year after year. Thanks to everyone who writes with words of support for the things we do, who sends us ideas and constructive suggestions, who makes us laugh on Twitter or who inspires us with their incredible talent.

2015 was an important year for all of us here as we saw the horizon of our services greatly expand to encompass not only icon and UI design, but also end-to-end coding, development and testing. With the help of Iconfactory North, we brought a host of new software into the digital world and we can’t wait to continue that trend next year and beyond. We’re were also excited to be privileged to witness the birth of the new Apple Watch and Apple TV platforms as well as the introduction of the incredible new iPad Pro.

Incredibly, 2016 will be the 20th anniversary of the Iconfactory. When we reflect on just how far we’ve come, from a simple, single hosted page on AOL with sets of pixel pushed icons to where we are today, it’s simply amazing. Needless to say we wouldn’t have lasted 5 let alone 20 without all of you supporting and encouraging us to continue. Next year is going to be a big one around these parts and from our Iconfactory family to you and yours, happy holidays, thank you and have a smashing new year!

Making of the 7R Mobile App

November 23, 2015

By Cheryl Cicha

7R is short for DRD4-7R, a gene associated with the hunger to explore. Also known as the “adventure gene,” some scientist claim people with this gene are more likely to embrace change and novelty, explore new places and take risks.

Suunto – a leading designer and manufacturer of sports instruments – approached us to develop their 7R App for iOS. The goal was to enhance the experience for owners of the soon to be released World Collection. The 7R app pairs with the adventure and travel watch Suunto Kailash named after the soaring 22,000 foot mass of black rock in Tibet that has never been climbed.

7R-App-Timeline

Iconfactory was approached by Suunto to design and develop a mobile app that enabled Kailash owners to visualize and share their journeys based on the vast amounts of data collected by the watch. Via the app, users have their complete travel logbook at their fingertips, get notifications and can adjust the watch on the go. A unique timeline pulls photos from the camera roll and softly merges them with a dynamic world map allowing them to see where they were travelling in the world along with the photos they took at that moment.

The first and biggest challenge the Iconfactory development team faced was communicating with the watch over Bluetooth while several versions of the hardware and firmware were still in development. This often meant determining whether Bluetooth errors were in the integration library, the watch firmware, the hardware, or in the application’s code was tricky. Solving these problems required in depth knowledge of the Bluetooth stack, custom debugging code, and a bespoke library written to monitor and track conversations with the device, as well as constant communication with the teams involved in Finland.

Once these initial hurdles were overcome, the app was able to sync with Kailash and utilize data. We would have loved nothing more than to test the app in an adventure around the world, but ultimately settled for limited to trips to the grocery store. Ultimately, the Suunto sales force carried early prototypes of the watch with them as they travelled providing valid test data.

With the challenges of remote teams in vastly different time zones, here are just a few of the best practices we used to ensure the app was feature complete and shipped on time.

  • Weekly meetings with the client, Account Manager, Lead Designer and Development team kept everyone involved and moving forward with visibility into progress.
  • The Product Owner responsible for the success of the app responded quickly to email with detailed answers, which kept the feedback loops for communication short. This was critical when iterating on involved features like the Timeline.
  • Constant visual refinement so that the app shared the aesthetic of the Suunto brand, which is reflected in all aspects of the UI and icon design. To see some of the early wireframes, see our portfolio.
  • Lead developers had direct access to technical resources in the other time zones, which made working through challenges or getting answers to question much quicker.
  • A public Trello board for communicating status in near real time allowed anyone on the team to quickly assess the product status and provide detailed feedback from any time zone.

Designing and developing the 7R app was fraught with unknowns but was a challenge we thoroughly enjoyed. If curiosity drives you forward and you thrive on discovery you might belong to the few who possess the adventure gene, 7R. To find out, download the free Suunto 7R app for iOS from the App Store now.

The New Favicon

November 4, 2015

By Craig Hockenberry

The recent release of Safari 9.0 brought a great new feature: pinned tabs. These tabs are locked to the lefthand side of your tab bar and stay in place, even when you open a new window or relaunch the browser.

The default behavior is to display the first letter of the site’s name on a color from the site’s theme. If you work on a site with a strong branding element, you’ll want to customize the icon on the pinned tab. Anthony Piraino and I have been working on one for the Iconfactory and would like to share some of the things we learned.

Markup

You begin by adding some simple markup for the pin graphic. It’s literally one line of code in the <head> of your HTML:

<link rel="mask-icon" href="/favicon.svg" color="#990000">

The href points to an SVG file and the color is used to draw the vector shape contained in the file (the background color for the tab changes depending on whether the browser window is active and if it’s selected.)

Iconfactory logo shape

The documentation states that the graphic should be a vector shape filled with black. In our first test, we used a fill color that wasn’t black: the image is used as a mask, so the opacity of a filled shape is the only thing that matters. Any opacity in the shape’s fill color will be used, but we don’t recommend using it (and you’ll see why in just a second.)

We used both Illustrator and Sketch to create SVG files during our tests. In fact, we began this exercise by just exporting our standard logo into SVG; it’s shown to the left.

Seems simple enough, right?

Rendering

First attempt at SVG icon

And it is, until you upload the file on your site and see your beautiful artwork rendered down into a 16×16 bitmap (or 32×32 on a Retina display.) Our first attempt is shown to the right.

Yuck.

Of course, at such a small size, a hand-tuned bitmap graphic would be a better choice. The ubiquitous favicon.ico has been around since Internet Explorer 5 was introduced in 1999. The ICO file format also supports transparency (it was also used for desktop icons on Windows.) So why not stick with something tried and true?

Our first thought was that the Safari engineers were being lazy: the default implementation renders a vector glyph on top of solid color. Doing the same with SVG could probably reuse a lot of their internal code. But this doesn’t really sound like a path that the Apple we know and love would take…

It’s our guess that the company has other plans for these files. They currently only appear in pinned tabs, but as more sites support this new style of “favicon”, it’s likely that they’ll make their way into lists for browser history or frequently visited sites.

The proliferation of bitmap file formats within the browser may be another motivation. Sometimes the favicon.ico file is used, at other times apple-touch-icon.png appears. With a vector file, there’s a lot more flexibility.

It’s fun to speculate, but for now we have to play the hand we’ve been dealt. How can we improve our vector “favicon”?

Simplify

A simple SVG icon for Daring Fireball

Our first observation was the amount of detail in our icon was causing most of the rendering issues. As a test, I quickly created a pin icon for a site that has simple but effective branding. It’s also well within the capabilities of a developer who likes to pretend he’s a designer :-)

The result is dfstar.svg; it’s shown to the right. (This little experiment also shows that if you say “DF star” quickly it sounds like “Death Star”. Hmmm…)

A simplified SVG icon for the Iconfactory

We followed suit and moved our factory outside the circle that contained it. Instead of relying on negative space, we took advantage of positive space. The door, which used a thin divider between shapes, was also removed.

Our hunch about the need to simplify branding elements was correct; the result of our second test is shown to the right. We were a lot happier with our factory now.

A SVG icon which uses transparency

Earlier, we recommended against using transparency in your vector shapes. The reason for this is that you end up with “muddy” shapes. You only get to choose one color, and without any contrast, the semi-transparent shapes don’t stand out against the primary elements. The heart to the right is drawn on top of a circle with 25% opacity and gets lost in the background color. You also have to remember that this icon appears deselected (where there’s even less contrast.)

Another thing we learned: the size of the canvas you’re working on doesn’t matter. The dfstar.svg graphic was done on a 1000×1000 canvas while our logo was done at 256×256.

We’re used to working with icons, so powers of two are wired into our brains. As you’ll see next, this can be helpful if you’re trying to achieve pixel precision with your vectors.

Align

A pixel-aligned SVG icon for the Hypercritical site

After complaining commenting about our initial findings on Twitter, our friend John Siracusa offered up his unique approach. He aligned every vector in a grid that emulated a @2x bitmap (in his 382×512 file, each “pixel” is 32×32 in a 12×16 grid.) For his Hypercritical logo, this works quite well. The only downside is that the sharp edges get a little blurry in the @1x image.

Very few branding elements will be lucky enough to get away with this precise alignment. For example, we didn’t want to get rid of the round edges and windows in our logo. But John’s approach did show us the importance of a pixel grid, so our explorations moved in that direction.

Iconfactory pin animation

The animation to the left shows the progression of changes Anthony made to align the roof and windows of our factory on a 256×256 grid. While we ended up with a shape that’s different than our official logo, it renders a lot more clearly in the space provided.

Final version of the Iconfactory SVG icon

As you do this with your own work, keep in mind our prediction about these SVG files appearing prominently in other parts of the browser user interface. A graphic that’s heavily optimized for 16×16 pixels could look really bad when Apple decides to use it at 100×100. We’ll be fine if our final graphic (shown to the right) shows up in a browser’s favorite or history lists.

Finally, don’t get obsessed with perfection as you align vectors. There’s still a fraction of a pixel misalignment on the factory door that causes some blurring at 1x resolution. But as much as this bugs us, the graphic is the best it can be. Any attempt to make it “perfect” could easily be undone by a Safari engineer tweaking a number in a software update.

Testing

Of course you’ll want to preview your work as you tune your vectors. Safari caches the SVG files, so it takes a bit of effort to clear the old data and see your changes. Here’s a sequence we found to be reliable:

  1. Unpin the tab for your site
  2. Quit Safari
  3. Remove the Template Icons folder in your Home > Library > Safari folder
  4. Relaunch Safari
  5. Refresh a page that references your “mask-icon” to update the cached file
  6. Pin the tab for your site

(The folder being named Template Icons instead of Tab Icons is another good hint that these graphics are destined for other uses within the browser.)

The cache maintained by Safari is indexed by domain. That means you can’t compare different SVG versions by using two sites at localhost:8001 and localhost:8002. Similarly, we needed to deploy the same SVG file on our design.iconfactory.com and blog.iconfactory.com subdomains as well as our primary iconfactory.com domain.

It’s also worth noting that subdomains open in the same pinned tab. For example, if you pin this site (blog.iconfactory.com), both iconfactory.com and design.iconfactory.com will open in the same tab. A link to different domain, like iconfactoryapps.com, opens outside the pinned tab.

Consistency

We also took this opportunity to make sure our Iconfactory mark was used consistently throughout the browser’s user interface. This meant updating two important files: favicon.ico and apple-touch-icon.png.

Once you’ve pixel-aligned the vectors, it’s simple to render them out into a file with the correct format. In spite of the ICO file extension, all modern browsers now support PNG and GIF file formats for the favicon (Wikipedia has a good overview on how this file is used in different browsers.) Since we wanted support for older browsers on Windows and the ability to have both a @1x (16×16) and @2x (32×32) bitmaps in a single file, we went with the ICO format on our site.

As its name implies, the apple-touch-icon.png was originally introduced on Safari for iOS. Apple’s documentation shows how you can specify different sizes in your markup for different display resolutions. On iOS, the file’s size can range from 60×60 pixels for the original @1x iPhone screen to a @3x 180×180 graphic used on the iPhone 6S Plus.

But don’t let that name fool you, this file also gets used in places that aren’t “Apple” or “touch”. For example, Safari on OS X uses this file in the frequently visited sites list. A 48×48 points version is displayed when you click in the address bar to enter a search or a URL. Rounded corners are also added to the image, but they’re not a squircle. Don’t use your own transparency in these images!

Chrome running on Android can also use the file. The required sizes quickly get out of hand when you try to support every possible display size and resolution on that mobile platform.

For this reason, we suggest picking a reasonably sized image and let the browser scale it down to the size that’s appropriate. We chose a 180×180 pixel image for our icon.

Here’s a before and after shot of our files:

Old and new icons

The two icons on the left show the favicon.ico bitmaps at 200%. The apple-touch-icon.png is shown to the right at 100%.

Conclusion

So there you have it. Even in this brave new world of vector favicons, knowing how to push pixels is still important for making your brand stand out.

It may seem a little crazy to go to these lengths, but it’s our business to make products look the best they can. We hope the experiences shared above help you with your own work. And if you need a little help, don’t hesitate to get in contact.

Keeping A Spooky Eye on iPulse

October 29, 2015

By Ged Maheux

iBall iPulse Jacket screen shot

The recent update to our venerable OS X system monitoring utility, iPulse, has been receiving rave reviews. iPulse lets you track what’s happening under the hood of your Mac in a single, elegant and infinitely adjustable desktop window. One of our favorite iPulse features are customizable appearances called jackets.

Today we’re releasing a fun and creepy jacket just in time for Halloween called iBall. iBall includes Retina graphics (see what we did there?) and looks great sitting on your Mac’s desktop, staring blankly back at you. To install iBall, simply download and expand the jacket then drop it on iPulse’s dock icon to set the new visual appearance.

iPulse is a must-have for anyone who likes to keep tabs on their Mac’s inner workings and is available from the Mac App Store. Be sure to follow @iPulseApp over on Twitter for the latest news on jackets, tips & tricks and more. Enjoy and happy Halloween!

Cultivating a New Willow App for iOS

October 20, 2015

By Ged Maheux

Willow_Answering

Evolving a popular app from version 1 to version 2 is always a challenge, and so it was with the recent update of the Willow app for iOS. Willow connects users around the world via meaningful conversations, posed by simple questions.

The Iconfactory was charged with updating the popular 1.0 version of Willow, modernizing both its look and performance. It was a development effort that took over 3 months to complete and made use of our team’s full range of expertise, from design and coding, to back-end engineering and testing. Building on the groundwork we laid in V1, the second major release included developing all-new interactions, adding rich visual details, and implementing features like group conversations and a re-designed home timeline.

The new timeline presents questions from Willow users in a new and engaging way and features rich media thumbnails, parallax scrolling, swipe to answer or dismiss, as well as the new up-voting feature that surfaces popular questions quickly. When composing new questions, users can customize the question’s appearance with over 450,000 custom images from Pixabay, a fun new way to make questions come to life in Willow.

Willow_iPadQuestion

At the heart of improvements in Willow 2.0 was the inclusion of group questions. Previously, users could only pose single questions which were answered on a one-on-one basis by individual Willow users. The new Group tab allows users to ask questions and receive answers across the entire Willow user base. People can up-vote questions they like and respond to questions on either a local or global level. All of this happens in real time. It is a wonderful way for people to connect and have meaningful conversations about topics that span a huge range of interests with others around the world.

Another key goal with Willow 2.0 was to simplify and improve the Branches user interface. Branches is the communications hub within the application where users can keep track of who’s responded to their questions, see and manage new group questions, and initiate personal chats with users. As the depth and scope of Willow’s feature set expanded, Wilow’s Branches UI grew tangled and badly needed pruning.

Willow_Answering

The resulting re-design is a concise, tab-based interface that clearly lays out the three types of content that can be navigated in Willow – Questions, Groups, and Chats. New content is constantly updated and can be favorited or searched at will. Questions and chats are now clearly organized and can be answered directly from within Branches or quickly removed using familiar iOS swipe gestures.

Taken all together, Willow 2.0 represents a complete overhaul from the original app, one that helps bring it to the forefront of modern iOS user interface design and development. The new feature set and rich visual appearance have already helped Willow gain new users and connect more people than ever before. For more information about Willow’s redesign, visit our portfolio of work. Willow is available from the App Store today for free, be sure to check it out!