The Breakroom

Aligning UI with xScope’s Overlay Tool

June 25, 2015

By Tyler Anderson

In our recently-released update to Twitterrific (version 5.12), we made the decision to redesign our in-app notifications. Our work on Twitterrific for Apple Watch opened our eyes to some of the ways that we could display more information to the user while they browsed their timeline. Designing a more robust notification system was a clear way to improve things.

Most new features in Twitterrific start with a set of mockups from a designer that are translated into code, and the new in-app notifications were no different. This implementation process is one of my favorite parts of development: being able to take a beautiful, user-friendly UI layout from a designer and make it interactive and alive. Sean Heber had been working on the new notifications based off Gedeon Maheux’s designs, but had moved on to focus on some of the other major features we were fitting into this release. I was tasked with finalizing the notifications and making sure they were as much like the design mockups as possible.

Adjusting the layout of the in-app notifications was going to be a relatively time consuming task. We tend to shy away from using Storyboards in Twitterrific, mostly due to legacy code reasons. This means I would have to tweak the layout of on-screen elements through code instead of rearranging them by hand. Compound that with the number of different notification types we provide and things start to become more complicated.

Screenshot of Dimensions tool measuring iOS simulator

I had been using xScope to measure the placement of UI elements in the in-app notifications, recording placement values using the Dimensions tool and adjusting those code values in comparison to the mockups. After doing that for a couple of the notification types, I realized there was a faster way to handle layout comparison using xScope’s Overlay tool.

Screenshot of Overlay tool attached to iOS simulator

By attaching the Overlay tool to an iOS simulator window, I was able to drag and drop the mockups I had received into the Overlay window, displaying them overtop of a running version of Twitterrific.

Screenshot of mockup overlaid on top of iOS simulator

I then used the top and side sliders in the Overlay tool to adjust the location of the mockup image, aligning it properly with the in-app notification’s placement at the bottom of the simulator window.

Screenshot of mockup aligned properly overtop of iOS simulator

After that, I lowered the opacity of the overlayed mockup image, allowing me to see both the designer’s vision and the currently-running application. This is the main benefit of using the Overlay tool for UI layout. It allows you to adjust transparency on the fly, quickly fading back and forth between the simulator and the mockup.

Screenshot of transparent comparison between simulator and mockup

Visualizing the UI in this direct manner quickly pointed out the ways the notification layout needed to be adjusted. Even better, comparing layouts with this method made things easier with each measurement. There was no need to measure origin points and width/height values a second or third time to readjust, since the UI either aligned properly with the overlaid mockup or it didn’t.

Since this realization, I’ve found xScope’s Overlay tool more and more useful in speeding up my UI layout tasks. Hopefully this trick makes your front-end development work a little easier as well.

A Special Feature

June 19, 2015

By Craig Hockenberry

Over the years, we’ve been lucky to have a lot of products featured in Apple’s stores. Yesterday, we got the one we’re most proud of:

Screenshot of Twitterrific in App Store VoiceOver feature

We’re not in this business just to make money: all of us at the Iconfactory hope that our products will make people’s lives better. We’ve worked hard to make Twitterrific work well with the accessibility features in iOS. Hearing that these efforts make things easier for customers with disabilities is rewarding beyond words. (Listen to the podcast file in that last link to get a great idea of what life is like for a VoiceOver user.)

But now there’s another incentive for thinking about accessibility: helping others also helps your downloads:

Graph of Twitterrific downloads going up after VoiceOver feature in App Store

If you’re a developer, you’ll want to learn more about how to implement accessibility in your own app. Apple has also put together a fantastic list of resources that covers all aspects of accessibility.

Over the years, we’ve learned that it’s essential to have folks with impaired vision as beta testers. It’s very easy for a developer with good eyesight to make bad accessibility choices. A beta tester who uses VoiceOver all day long will tell you immediately about a screw up.

Apple remains committed to making their products accessible. Smart developers will follow their lead.

Twitterrific 5.12 Adds a Host of New Features & Improvements Including Quoted Tweets

June 11, 2015

By Ged Maheux

T5_Quotes

Over the last several months, the Twitterrific team has added tons of new features and improvements for iOS, but today’s 5.12 release may be the best yet. We’ve focused on improving Twitterrific’s appearance as well as its user experience by adding several key new features including quoted tweets, bottom-based navigation options, muffle sharing, a re-designed in-app push notification system and much more.

First, Twitterrific now supports Twitter’s popular new Quoted Tweet format. Quoted tweets replace the older Re-tweet with Comment, are easy to create and fun to read. To quote a tweet simply select it, and then tap and hold the RT icon. This opens the compose window with the URL of the tweet you want to quote inserted and ready to go. Simply add your own remarks to the quote and press send. In the timeline, you’ll see the quoted tweet inset within your own for context. Nifty!

T5_TabSettings_Thumb

Next we’ve added an option in Settings allowing iPhone users to shift the main navigation bar to the bottom of the timeline. Handy for iPhone 6 and 6 Plus owners, it also allows for an additional navigation tab. Here’s a quick video tip on how to move the navigation bar to the bottom. As before, you can tap and hold the icons in the tab bar to customize your favorite timeline destinations. Version 5.12 adds a new custom option called My Tweets that’ll let you gain instant access to your own timeline of tweets.

With the advent of the Apple Watch and its elegant notification system, we thought it was a good time to improve Twitterrific’s own in-app notifications. We’ve completely re-designed the app’s pop-up banners to be color-coded and easier to read. They can also be tapped to quickly jump to the content being notified and even dismissed with a quick swipe. Watch for even more improvements to in-app notifications in future updates.

Finally, for those who love to hide unwanted users, words or phrases via Muffles, v5.12 introduces the ability to share Muffles with other users. Simply open the Muffles UI via the sidebar and tap and hold on any term. This brings up the standard iOS share sheet from which Muffles can be emailed, sent via text message, or simply copied to the clipboard. To import a Muffle URL, just tap on it in a tweet or email and Twitterrific will automatically add it to your running list of Muffled terms. Easy!

We’ve only scratched the surface of what’s new in version 5.12 so be sure to visit Twitterrific’s version history page for the complete list of new features, improvements and bug fixes. Twitterrific 5.12 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.

Two new ‘Best Of’ Effects for Flare

May 14, 2015

By Travis Zuker

Today, we’re introducing two new ‘Best Of’ Effects for our award-winning photo editing application, Flare 2 and our companion application for iOS, Flare Effects. Here’s a small preview of Colorchrome and Dreamy (original images on the left, Flare versions on the right).

Flare_ColorchromeColorchrome

Flare_DreamyDreamy

These new Effects were painstakingly crafted by Wolfgang Ante to recreate the subtleties of analog photography. Find out more on the official Flare blog. Enjoy!

If you don’t already have Flare 2, check it out on the Mac App Store and start creating your very own Effects today!

xScope and Apple Watch

April 24, 2015

By Craig Hockenberry

We’re happy to announce the availability of free updates for xScope and xScope Mirror with support for Apple’s new watch!

The majority of changes are in the xScope Mirror app running on iOS: any image that you’ve mirrored from your Mac to your iPhone can be transferred to your wrist with a simple tap on the watch’s face. As you’d expect, this feature works great while in design apps like Photoshop or Sketch as well with loose PNG and JPEG assets in your Xcode projects.

When transferring images to the Apple Watch, the xScope Mirror detects different scenarios and adjusts the display accordingly:

  • Layouts that have the same width as the current display, but that are taller, are scrollable using your finger or the digital crown. This makes it easy to test mockups that span several screens.
  • Images that are in the standard icon sizes are automatically masked to a circle and presented on a black background. This makes it a snap to test how your square icon designs look when presented on the home screen or in notifications.
  • Images with transparency are assumed to be menu items and are displayed as such on the watch face. Opaque areas of the image are drawn in black on a white circular background.

But wait, there’s more! We’ve also updated the Mac app with new templates that let you see how your watch icons are going to look in the Apple Watch app on iOS. The Mac app also has all the Help you’ll need to get up and running: check out the Mirror section for all the details.

Finally, we put together a short video that shows how it all fits together along with some tips and tricks. We’ve found these new features to be very helpful with our own design and development work, and really hope that it makes life easier for you, too. Enjoy!

Twitterrific for Apple Watch

April 16, 2015

By Ged Maheux

T5_Watch_Header

Today we are pleased to announce that Twitterrific 5.11 with Apple Watch support is available in the App Store. Ever since we first saw Apple’s new wearable in action, we knew Twitterrific would be a great fit. There are a myriad of compelling features in this update so we wanted to take some time to share a few of them with you.

Twitterrific’s approach to interactions on Apple Watch closely mirrors those of Apple’s built-in apps. The app consists of three parts: the Glance, Recent Activity, and Notifications.

Twitterrific’s glance gives you a fun, visual digest of the total number of favorites, retweets and new followers you’ve received over the past 24 hours. Think of it as a lightweight version of the Today View from the iOS app. It also displays the number of unread tweets currently waiting for you the next time you launch the iOS app. Note that Twitterrific’s push notifications (available as a one-time in-app purchase) are needed to take full advantage of the app’s features on Apple Watch.

The Twitterrific watch app displays a list of your most recent 25 replies, mentions, direct messages, favs, RT’s and new followers right on your wrist. This helps you focus on the part of Twitter that’s most important to you and frees you from information overload common when viewing your entire timeline. Simply tap any item in the list to view its details and respond in a number of ways. Favorite a reply or mention, give a new friend a follow back and even reply to mentions and direct messages using Apple Watch’s dictation feature. It’s just that simple.

T5_Faces

Twitterrific’s Glance, Recent Activity and Tweet Detail screens

Force-press from the activity view to compose a new tweet from scratch or manually refresh the list of recent items. You can even use Handoff when composing a new tweet with dictation or viewing a user profile to transfer what you’re looking at directly to your iPhone. Simply dictate your tweet, then look for Twitterrific’s icon on your iPhone or iPad’s lock screen. Unlock your device with the icon and Twitterrific opens directly to the compose screen with your new tweet ready for editing or posting. How cool is that?

Twitterrific for Apple Watch includes a range of notification types that help you keep track of who’s following you, retweeting or favoriting your tweets and more. Simply raise your wrist when you receive a notification to view it. Hold your wrist up for a few seconds longer to view more information about the notification. Depending on the notification type, you can even take action without touching your phone: saving time when you’re on the go.

Twitterrific 5.11 also includes a host of other new features including RT & Fave counts displayed directly on selected tweets, interactive notifications from the iOS lock screen and much more. Even if you do not own a shiny new Apple Watch (yet!) you’re going to love this update.

A wealth of attention to detail has gone into bringing you the best possible Twitter experience available. We thank our loyal customers for their continued support and hope new users will seek Twitterrific out in the App Store and give us a try on their wrists in just a few short days. Enjoy!

Flare Now 50% Off for a Limited Time

April 6, 2015

By Ged Maheux

Flare 2 for Mac OS X is currently 50% off it’s normal price of $15 USD for a limited time as part of the Mac App Store’s Amazing Photo + Video promotion. If you missed Flare’s original launch promotion, now is the time to gear up!

A reminder that you can also pick up Flare Effects for iOS for free. Flare Effects allows you to sync your photo filters and effects effortlessly from desktop to your mobile devices via iCloud. Take all your favorite appearances with you and enjoy the best of both computing worlds – desktop and mobile. Visit the Mac App Store to purchase Flare 2 at this special price today.

Twitterrific 5.10 Adds Improved Muffling, Muting, Drafts & More

April 2, 2015

By Ged Maheux

T5_Muffles

A major update to Twitterrific is now available in the iOS App Store that includes a host of widely requested features. The biggest improvement in Twitterrific 5.10 is the ability to view and manage your list of muffled usernames, URLs and hashtags. Users can also now add keywords to the terms that can be filtered via the new Muffles sidebar item. In addition, any muffled term can instantly be turned into a full-level mute by swiping left on the item in the list and selecting “Mute”. This completely hides the term from view in the timeline until it is un-muted or muffled. Thanks to the new Muffling interface, Twitterrific users now have the best of both worlds, they can choose to muffle certain items as well as mute others they may not wish to see at all. Muffling and muting also works when viewing Twitter searches, which sets it apart from other 3rd party Twitter clients.

Another highly requested feature that makes its debut in 5.10 is support for draft tweets. Once you compose a new tweet, if you decide not to post it, you now have the option to save the text as a draft when you close the compose view.

t510_muting

Drafts are account based and synced across all of your iOS devices running Twitterrific via iCloud. There are two ways to insert drafts into the compose field – Tap the drafts icon to open the list of pre-composed tweets and then select the draft you want to use. Next you can either tap the Copy Drafts icon to both copy it to the clipboard and insert it into the compose field, or you can simply insert it directly by tapping the Insert Draft icon. Selecting Insert moves it from the current list of drafts into compose, effectively deleting it in the process.

But that’s not all. Twitterrific also now supports an improved sidebar user interface, better push notifications, ability to use smart quotes, URL’s displayed above iOS 8 share sheets, important bug fixes and more. Be sure to visit the Twitterrific version history page for a complete list of what’s new in this release.

Twitterrific 5.10 is a free update and is available now in the App Store. Be sure to follow Twitterrific on Twitter for the latest news on releases as well as tips, tricks & latest issues.

Flare 2.1.1 Adds German and Japanese Localizations

March 19, 2015

By Travis Zuker

Today, we’re pleased to release an update to Flare 2, to our award-winning photo editing application that includes both German and Japanese localizations. Named by Apple as one of the Best Apps of 2014, Flare effortlessly lets you add effects & textures to your photos on your Mac & iOS devices. Today’s update is free for registered users and can be downloaded via the Mac App Store.