The Oomph design team have put together the 7 tips to make you a better iPhone app designer to help you start making great interactive content for the Oomph platform on iPhone.
Oomph Platform iOS 7 for iPhone
Before we start, it is worth mentioning the improvements to the Oomph platform for iPhone in the latest update. Oomph iPhone apps now have Libraries for multiple issues, Favourites, Pinch to zoom, content scrubber, search bar, social sharing as well as an updated user interface. To get a real feeling for these new features download Oomph Viewer from the app store now and check it out.
1. Single Column
Just as you design content differently for the iPad as your do for print, you must also design content that works with the iPhone format. As a guide, it is best to use a single column and tall pages when possible. Having a flow of elements in your design, one after the other creates a more simple path for your user, allowing them to more easily digest your content.
2. Font Size
The pixel dimensions for 4 inch iPhone is 640 x 1136 which is similar to the iPad’s dimensions of 768 x 1024 however the physical size of the iPhone screen is less than half of that of the iPad. This can make choosing the correct font size a little tricky. We found that having a minimum font size of 20pt was best for us, but play around as see what works better for your purpose. Also remember that user holds their phones closer to their face, then what they would with an iPad.
3. Make use of the Oomph features
In most cases, it is not possible to fit all the content you would usually have on the iPad screen for the iPhone. Although this might mean that some things won’t be at the forefront of user’s attention, it does give an opportunity for your users to interact with content they would otherwise not have engaged with.
For example, like in the case of the March 2014 issue in the Cosmopolitan Australia Magazine, instead of trying jam all the headlines on the cover of the magazine, they have chosen to reveal the headlines in bit size pieces using a Vertical In Page Slideshow (VIPS). We think interactions like this helps the user to fully retain what is being displayed and encourages them to act on a possible decision that may have been presented with.
4. Create A Universal App
With Oomph, it is now possible to create a single app that is available in both the iPad and iPhone App stores. If you want to, you can have the same content in the iPhone and iPad apps that simply has different layouts or you could alter the content to maximise the strengths of each device. We know 81% use multiple screens sequentially to accomplish a task over time and 52% of the time when we are using a smartphone we are using another device.*
Therefore it may be worth considering how you can complete iPad content with complimentary content on the iPhone or vice versa. Perhaps your iPad app displays video in one section while the corresponding section on the iPhone app displays commentary text in regards to the video. This concept obviously has endless applications so we are quite excited to see how designers will take advantage of this capability.
*Source: Google new Multi-Screen World Australia Research Studies 2013.
5. Designing for multiple screen sizes
Oomph makes it possible to put together just one design bundle for multiple devices and differing screen sizes. Varying screen sizes will show content differently, here are a few things to consider when designing your content. For example, when designing portrait pages for 4 inch devices a good rule is to not include any important elements of your layout (e.g. buttons, navigation etc) after 960px in height as this area will not be seen for users with 3.5 inch devices.
A snap page on an 4 inch device equates to a tall page on 3.5 inch device. This creates smooth scrollable area, however if a tall page or smartfit object is used that is taller than 1136px, both devices will scroll in the same way. Also note that a full page slide show will always scale proportionally to fit the device screen size instead of creating a scrollable area.
6. Designing in Scale
InDesign has a page size limit of 15552px, however you may need to create a tall page that is longer than this for your iPhone app. Oomph solves this problem by allowing you to design your content at half size, thus enabling you to double the maximum height allowance . Simply create your documents at half size and Oomph will scale them back up to fit the screen. Because Oomph works with vector based files types like PDF and HTML, no scaling of your content will cause pixelation. If you use this method and you want to maintain quality for bitmap based content, just double your usual PPI count in your export settings.
7. Testing with Oomph Editor
You can test your designs for iPhone with Oomph Editor. Once you have run your bundle through Oomph Editor and your bundle is visible within the Simulator, you can then change the device hardware you are viewing your content on. To do this go to the top menu and choose: Hardware > Device and choose either iPhone Retina (4 inch) or iPhone retina (3.5 inch).
Freebies! To help prepare and inspire you in creating iPhone content on the Oomph Platform, download these freebies:
- 3D View iPhone 5S Psd Vector Mockup
- iPhone 5C Psd Vector Mockup
- iPhone 5 Psd Flat Design Mockup
- InDesign iPhone Templates
See our responses to some recently asked questions regarding the Oomph platform on the iPhone:
Can you have different price points on the same iPad/iPhone apps? No, Universal apps are the same on iPhone and iPad.
Can the standard user interface be disabled? Yes, when building the app you can choose to disable the user interface and create your navigation in your content.
What setup is required for existing app? Your app will need to be resubmitted as a universal app to include both iPhone and iPad.
What control do I have over pinch to zoom? You can choose to enable pinch to zoom on a per issue basis and is switched on in the ‘preparing for publish’ stage.
What happens if I have a universal app and I don’t publish for iPhone? If no iPhone versions are uploaded, iPad versions will be served to all devices. In these instances you would want to have pinch and zoom enabled on these issues.
Can you change back from being a universal app? Currently Apple does not allow apps to revert back to device specific apps once it has been made a universal app.
How do I upload issues to the iPhone version of my app if it has been made universal? This is done with the same process used for iPad issues. In the Oomph Publishing, when you create a new issue there will be an option to upload an iPad and iPhone bundle.
Is the publishing process the same? i.e. uploading thumbnails, search indexes, etc. Yes, the process remains consistent with the process used for the iPad.
If you would like to find out more about a tailored training session from one of our Oomph Design Gurus to get your content ready for iPhone please contact us.