Let the games begin!

I recently had the good fortune to work with our extremely talented lead app developer on upgrading some UI elements for users that weren’t having the best possible experience with our app on the Retina Display. Having researched some different blog posts on the matter and surveying our image collection, I quickly realized that I would be creating a lot of the images from scratch. In order to reduce the work-effort necessary for any future display changes, I would re-create all the new icons in vector format (something that we should have done in the first place, but team time constraints tend to have those effects).

Let the games begin!

One might assume that this endeavor would be rather straightforward.

• Open up Illustrator
• Create the required images in vector format
• Find the size of the existing image and multiply the height and width by 2
• ‘Save As’
• Go grab a beverage and call it a day

Unfortunately, as with many things in life, this wasn’t as straightforward as initially believed. It is true that if we had developed a native application, we could have created the new images and placed a ‘@2x’ within the image name (e.g. fooBar.png would become fooBar@2x.png – Apple has a nice little paragraph here on automating image replacement with naming conventions). But our reasons for creating a web application are well documented, and the ‘extra’ work required to get the new hi-res images in place was well worth the effort considering the freedom we achieved by not dealing with the App Store. After the jump, I’ll attempt to walk you through our process and highlight some findings to hopefully save other developers some time.

Switch CSS or straight image replacement?

Our main goal with any project is to offer a great experience for our users. While the Retina Display sizes the images appropriately, the current images within Blackswan were not up to our standards. We needed to balance our desire to offer up crisp graphics against the constraints of bandwidth we consume through Google and the application’s speed. After doing some quick mockups in Illustrator and cleaning up (ie, applying filters and layer styles) in Photoshop, I realized the images we were talking about were small enough and simple enough to not impact the file size. It was therefore decided that instead of an entirely new css and swapping it based on media queries I would simply create new hi-res versions over the old ones.

With all the hype Apple as made about HTML5 and Web Apps, they must be ready to roll, Right?…RIGHT!?!

The first image I chose to tackle was our “favicon” (the one displayed on the homescreen when the bookmark is made). As this was truly the first item that one associates with our application, I wanted to make sure that regardless of device it was clean and readable. Luckily this was one of the few items we had in vector format (what I would call low-hanging fruit). I cracked open Illustrator and set out to make a few minor modifications and be on my way. The resulting changes were saved off in the required 114×114 size, uploaded to the test server, and…

We have our first hiccup – “favicon” has pixelation on iPhone 4. The image on the left is what we were expecting. The image on the right is what we were NOT expecting.

Our goal from the beginning was to create a web based application that allowed a true-to-native-app user experience. In doing so we decided to make sure that any reminder that one was in a browser was removed, so we added this necessary line of code:

meta name="apple-mobile-web-app-capable" content="yes"

While this piece of code allowed us to maximize the available screen real estate there was a minor drawback – on an iPhone 4, the “favicon” became pixelated. This anomaly also occurred within the iPhone 4 SDK (hey, at least Apple offers an accurate testing interface).

I submitted a bug report with Apple, and received a reply that this was a known issue and they are working toward a fix (here’s the original bug id should you be interested in following along – 8204108). Although we feel that the icon is a very important piece of the polished look for our application, we decided that the need to have the application run within a full screen greatly outweighed a few blurry pixels.

On to the images!

With the favicon issue out of my control, I moved on to updating the rest of the images used within our app. Though creating the images themselves wasn’t all that difficult, I did find that it took some related CSS massaging to really have the images maintain pixel-perfect precision within our app.

As I am sure I have exceeded my own internal word count on this post, here is a quick list of takeaways from my time updating the code and images for VoiceCentral: Black Swan:

1. As best as one can, try to create your images in vector format and manipulate as ’smart objects’ within Photoshop – For the iPhone 4, I re-created all the images in vector format so that we are “future proofed” as displays become even more advanced.
2. Always set width and height values for inline images – I know, I know…this is a given regardless and the ‘standards compliant’ way of doing things, but with so many images involved (and developers), I freely admit it is not always convenient to go look up the dimensions of the image (at least that is my excuse). Not to mention that one rarely knows exactly what the images will look like in the end anyway. At least put them[height/width] in blank so that a quick ‘ctrl-f’ -> ‘height=”” width=””’ can assist in tracking down final dimensions if and when they need updating.
3. Read up on the Safari CSS Reference – Get to know what is available. Though I had been following CSS3 development, knowing exactly what Safari supports cleared up a few questions I had about how to approach a resolving a task.
4. If you use –webkit-border-image to define an element’s border, be sure to explicitly state the border-width property as well (should be half of the values used in the -webkit-border-image property). By failing to do so, the image will be displayed with the native dimensions. This is a similar way to define the scaling of an object as background-size but within the context of the border. We used this technique to show crisp/consistent edges to our SMS ‘bubbles’ and icon buttons. See example below:

   
     ...
     border-width: 4px 4px 4px 4px;
     -webkit-border-image: url(../img/toolButton.png) »
     8 8 8 8 round stretch;
   }
   
   

   ** As a side not, I chose to use this route for our banner buttons, though I was able to come very close using background: -webkit-gradient() along with some custom border colors. In the end I kept it simple as I already had the button image in vector format.

5. If you are using –webkit-border-image, I found it useful to embed a separate ‘label’ div within the element to control the margins of the label I wanted to use. By using the border-width you obviously increase the size of the box model. Embedding a div within the border “element” you can use negative margins to control how the text fits within the “border element” (this could potentially also be massaged with line-height, but for the spacing I was looking for, the embedded elements worked perfectly).
6. For background images, use the -webkit-background-size property to scale the images appropriately (i.e., the rendered size of the image which is half of the actual image’s height and width). This assisted greatly when displaying icons within our application.
7. If using a style sheet to feed up content, media queries are the recommended solution for doing so. Walt Dickinson has a nice post regarding this practice. I debated using a new style sheet specific to the Retina Display (as mentioned above), but it turned out that the images we use weren’t greatly impacted (sometimes not at all) by increasing the pixel size so I stuck with the existing CSS files.

I would love to hear from others regarding their solutions to the items listed above, but for now, I’ll continue to read up on the new CSS3 features available in Safari and wait without much hope for Apple to fix bug #8204108.

Hot on the heels of Google announcing that Google Voice is now open for everyone we have just released a new version of VoiceCentral Black Swan.  The latest release is version 1.2.0 and has a bunch of features and fixes included.

Here are some of the new features to look out for:

1. Premium feature: Mark a phone number as SPAM
2. Premium feature: Block a phone number
3. Premium feature: Ability to forward an SMS message (tap and hold)
4. Direct Outbound dialing for iPhone users (user optional)
5. Voicemail transcription preview
6. Launch directly to Favorites
7. Auto-update of SMS conversation list
8. Setting to toggle SMS auto-correction
9. Toggle Favorite status from call/voicemail details
10. Allow users to hide status messages
11. User-selectable date format
12. Select callback number per call

We have also incorporated many fixes and performance improvements.  Many of these come from our wonderful users so keep up all the feedback!

While we look forward to adding even more new features in the near future, we hope you enjoy this new release!

Side note: It is so very nice to have a managed release on our schedule and not the whim of a faceless App Store review team.  Wish they would fix that aspect of the App Store!

We are seeing an issue playing voicemails in Black Swan for certain users.  It seems that Google changed the access parameters.  We are working on a fix and will have it updated as soon as possible.

Stay tuned for more…

Many of you already know this but a couple of weeks ago we released a significant update to Black Swan.  The user response over the last two weeks has been tremendous and we’d like to spread the word on the improvements to those who hadn’t heard.  Along with several performance improvements and general fixes we have added some additional features:

• iPad Compatibility.  This will be an ongoing effort to make the experience on the iPad completely unique and better able to leverage the screen real estate but for this release our immediate goal was to have feature parity with the iPhone version.
• Many improvements for people with long contact lists
• Management of both callback numbers and forwarding numbers.
• Support for multiple Google Voice accounts (this was a much requested feature)
• Copy/Paste support in the keypad
• Inbox Search
• Option to enter a default area code
• Optional Default Startup screen
• Option to disable the “Please answer the call” prompt
• Prowl/Growl support for SMS push notification compatibility

We are constantly working on improvements to the platform, so keep your great ideas coming. And if you haven’t already go check out the new release of VoiceCentral Black Swan.  See the differences between free and premium here.

The beta period is over and VoiceCentral is now available to the general public. We planned to release it Friday, but there was an issue on the web server that caused us to delay until today. Everyone that registered to be notified of the public release will be receiving an activation e-mail to the address they provided during sign up.  But for anyone who hasn’t previously registered, feel free to register now!

We would love to give everyone free and unlimited access to VoiceCentral Black Swan, but unfortunately we have significant costs in providing this service. Aside from R&D costs, Google bills us monthly for the amount of data our users access above a certain threshold. In order to still provide a “free” alternative, we have released two versions of Black Swan: a Free (ad-supported) version and a Premium Subscription.

The free version provides all of the core features for the casual user. It allows you to import contacts from your Google account, search your contacts within VoiceCentral, and dial those contacts using Google Voice or your iPhone. It provides you with easy access your 20 most recent voicemails, calls, and SMS conversations. You can listen to voicemails as well as read their transcriptions. The SMS functionality lets you create messages or reply to existing conversations.  It has advertisements so we can keep control of our costs and we appreciate your support on that front!

If the Free version can do all that, why did we create a Premium version? A Premium Subscription removes the ads and allows access to additional features:

• Unlimited number of voicemails, calls, and SMS conversations
• Contact Photos
• Billing History
• Do Not Disturb
• And one of our most requested features: a custom Favorites list providing fast, simple access to the contacts you choose.

To learn more about both versions, please visit the features page. Regardless of the version you choose, we look forward to your feedback and hope you enjoy VoiceCentral Black Swan.

Some of you have noticed that the VoiceCentral site is down for maintenance. This should not take long—a couple of hours tops—and you’re sure to like what you see when it comes back online.

Didn’t fully try to debug his one, so I’ll tell you what I know. My iPhone was running hot for a couple of days and wouldn’t hold a charge. Rebooting and restoring had no effect. I noticed that my iPhone Exchange account showed extra messages that didn’t appear in Apple Mail. The “extra” messages on my iPhone were messages that a client had tried to recall (I’m still amazed when people try to recall messages. For some reason, it brings back memories of cc:Mail.)

I deleted my Exchange account from my phone and setup again. My iPhone Exchange inbox still had the recalled messages, so I deleted the recalled messages. Things look good now. Not sure what did the trick, but I think it was simply deleting the recalled messages.

The guys from the App Show had Kevin on for another interview. Check it out.

Kevin talks about the development and rationale behind the Black Swan edition of VoiceCentral, and where we are going in the future.

While we continue to slowly open the VoiceCentral Black Swan beta to more and more people, we ask for your patience and understanding.

With all the awesome suggestions for the final name of the app, and the great press, it’s no wonder we’ve received many emails that say:

When in God’s name can I get hold of that awesome Apple Killing App? I’ve been looking for a way to stick it to them since the [wonderful people at Apple] unilaterally pulled those Google Voice apps from the Store. You should be suing [them] for the cost of supporting customers that they left stranded. The web app should send an email to [the guy who looks like Noah Wyle] on each install that says “Another one bites the dust,” and one to [The guy who personally approves each and every app], if he is real. Oh, and that tard [don't be nasty]. What a tool.

Please note that the only response you’re likely to see is:

Thank you for your interest in VoiceCentral Black Swan. The beta program is limited to a private (mostly internal) set of users at this stage. We will be opening it up to more and more users throughout January and February. Be on the lookout for an activation e-mail at the address you provided with your registration when your account is ready to use.

Just be patient, and remember how long it took Google to process your Google Voice request.

Happy Holidays and just wanted to start by saying thanks for all the support from everyone. We are very humbled that we received so many responses for the beta and we will be working through the list. If you haven’t had a chance to sign up yet, feel free to go to the register page and put in your details.

I also wanted to mention a few things that have come up in questions from folks along the way.

• If I purchased VoiceCentral from the App Store do I automatically get on the beta for Black Swan?
  Apple does not share your information (email address, etc) with us so we would not have your Google Voice information to set you up for Black Swan. You will have to register separately for the Beta because of this. You can also send us a note via the Support Link inside the application so we know you also purchased the app. We really appreciate all the folks that purchased the app through the App Store and just wish Apple hadn’t removed it from the store. We would love to produce updates to that version of the product, but we think Black Swan will be a lot more powerful.
• How long until I will have access to the Beta?
  We will be opening up the beta to more and more users over the next few weeks and will work through them in the order they were received. It will take some time though and just want to provide the best experience for all the users. You will get setup soon and we will be in touch with you so stay tuned.
• How do I merge my Contacts into Google Voice?
  The Mobile Safari browser doesn’t have native access to all the functions of the phone so we don’t have access to the Contacts data. There are many ways to get that data into Google Voice and you can check out: our contacts FAQ for a few of them. This is actually a really good thing because you get a lot more of out of Google Voice once you have your contacts merged in. That data also can easily be synced like the rest of your data on your phone so you can set it and forget it. You can also take advantage of other features like arranging contacts by Groups, specialized Call Presentation, etc so you will be unlocking a lot more from Google Voice. Plus, it will allow us to do a lot of other interesting things with the app in the future once you have your Contacts integrated with Google Voice.

Thanks again for all the questions and all the support. Have a Happy New Year!
pk