App Store screenshots and the status bar

Two developers I follow on Twitter have asked pretty much the same question in recent memory: “Should I leave the status bar in iOS App Store screenshots or crop them out?” (link, link).

Crop out the status bar.

I replied to both on Twitter, but thought I’d write up a short post on it. A few people replied to the above tweets saying you should leave the status bar in the screenshots but take out the carrier. Someone even said they’d want to know what colour the status bar is for an app. Not sure customers would decide to buy an app based on the colour the the status bar to be honest.

Here’s what Apple says in the iTunes Connect Developer Guide, taken from the section Before you begin: Creating Assets with the Correct Specifications

The first screenshot you upload in iTunes Connect is used as the main screenshot. It is visible on your app product page on both the desktop App Store and the device App Store. For best results, do not include the iPhone or iPad status bar in your screenshots, and follow the requirements given below. Those dimensions allow you to remove the iOS status bar from screenshots so that you can showcase only the active app area, without distractions.

You can refer to Table 7-3 for screenshot dimensions for the various devices, both with and without the status bar.

But again: Crop out the status bar.

Use of status bar styles

On a related note, I strongly suggest going with a black status bar unless a status bar matching the colour of your navigation bar really enhances the UI.

The Keypad view in the Phone app shows a nice use of the default status bar where the top view seamlessly blends into the status bar. I also find that the status bar looks best when matched with the default navigation bar (blue). Other colours often don’t look right.

You can also mix and match throughout your app. The built in Clock app is a great example of this. The status bar compliments the navigation bar and background on the first two tabs, but the last two views are mainly black, so the status bar is black for these two tabs as well.

Xcode code snippets and syncing

Earlier today I took some time to create a few more code snippets in Xcode for code I’ve been writing a lot of lately. I’ve never really seen or discussed these much with other developers, so I was wondering whether people actually use them – and to what extent? I know from my own experience that I don’t use them nearly enough, so I thought I’d write up a quick post on Xcode’s awesome Code Snippet Library.

The Code Snippet Library in Xcode is a great feature and a huge time saver – you’ll be doing yourself a favour by using it if you haven’t already! Ever noticed how when you start typing “init” Xcode will autosuggest the Objective-C init method? It does this because it’s a code snippet with a completion shortcut “init”. Same with “forin”, “dealloc” and many more built-in code snippets. Check each snippet’s completion shortcut in their edit mode.

Objective-C init method code snippet

Here’s a basic example of a “user” code snippet I have in my library:

UIAlertView boilerplate code snippet

I wrote up the code for a UIAlertView, highlighted the code and dragged it into the Code Snippet Library. The code snippet retains the parameter placeholders as well as your indentation (don’t worry about the indentation in the preview box such as in the example above, as long as it’s correct when used in your code). Now for the awesome part: Notice how I set the Completion Shortcut to “alertview” and the Completion Scope to “Code Expression”? Now, if I type alertview inside a method Xcode will auto-suggest this entire code snippet and I simple hit enter to use it and tab through the parameters to quickly setup a UIAlertView. Thanks Xcode <3

The Completion Scope is fairly important as it allows you to set the scope for when Xcode should auto-suggest your code snippet. If a code snippet is a method, set the scope as such and Xcode won’t auto-suggest that snippet if you’re inside a method. If you’re writing code for both OS X and iOS you can also set a specific platform for the code snippet so you’re not having your UIKit-specific code snippets suggested when you’re writing code for a Mac app.

Keeping your Code Snippet Library in sync

An hour ago, I tweeted about syncing Xcode Code Snippet Library with Xcode, which basically led me to writing up this blog post.

I’ve got my Macbook Pro at work and Mac Pro at home and often switch between the two. Unfortunately Xcode doesn’t have iCloud syncing – though what a nice feature this would be – so keeping your Code Snippet Library in sync could be a small pain. Enter symlinks.

Custom code snippets can be found in

~/Library/Developer/Xcode/UserData/CodeSnippets/

Each code snippet is a plist file, which means adding or deleting code snippets on any machines won’t give you any issues (I believe it would in Xcode 3 because all snippets were saved into one file, which may have created some conflicts depending on the method used to sync).

Assuming you’re a Dropbox user*, you can use it to sync user Code Snippets between two or more machines. In the following example, I’ve setup a folder in Dropbox for Xcode. I’ll move my /CodeSnippet folder to the Xcode folder in Dropbox and setup a symlink in the original path that points to the CodeSnippet folder in my Dropbox:

$ cd ~/Library/Developer/Xcode/UserData
$ mv CodeSnippets /Dropbox/Xcode/
$ ln -s ~/Dropbox/Xcode/CodeSnippets/ CodeSnippets

You may have to sudo the last line, but now you should be all set. Do the same thing on your other machine(s) and start creating lots of useful snippets to use on any machine you’re working on! Don’t forget Completion Shortcuts to make your life much easier.

Hope you found this post useful. If you have similar tips, feel free to share in the comments. @tewha replied to my tweet saying that he uses symlinks to sync Archived builds and other Xcode User Data across several machines.

*If you’re not a Dropbox user, feel free to use my referral link :)