Create separate columns for iOS and macOS
We should display support status for both iOS and macOS, using recognizable icons for each. Latest identities are visible at:
http://www.apple.com/ios/ios-10/ http://www.apple.com/macos/sierra/
Rationale here being 1) both operating systems are important to web devs, and 2) current Apple-icon-for-iOS is visually ambiguous. I thought it meant macOS at first.
Great call here - thanks! 👍 Will definitely add text labels regardless (icon-only labels are never ideal). Make the icons 100% grayscale; the colours are quite noisy.
Re: macOS vs. iOS: do you have a pointer to suggested branding guidelines? I was going to, but forgot, to use the iOS (the old Myriad Pro wordmark) instead of that "iOS App Store" curved black box. TBH, I didn't catch the new iOS 10 logo. I'll use t hat instead.
Thanks! :)
Wordmarks are the way to go, IMO, even though they're unwieldy. You could truncate macOS to "Mac", to at least get both into three letters.
San Francisco is probably safe font to use, but worth double checking. Myriad is on it's way out, but may still used for logos.
I'm going to probably use a similar icon to borrow the iOS icon from here (I know I've highlighted macOS):

<!-- iOS icon -->
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="svg-inline--fa fa-mobile fa-w-10" data-icon="mobile" data-prefix="fas" viewBox="0 0 320 512">
<path fill="currentColor" d="M272 0H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h224c26.5 0 48-21.5 48-48V48c0-26.5-21.5-48-48-48zM160 480c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32z"/>
</svg>