Documentation

Detailed specifications and sample resources to help you make the most of the digifi.it platform.

IOSTILE
androidtile
custom-tile

Preparing Your Files

PDF

For each issue you will need to supply a PDF containing all of the pages for that issue. The specifications for the PDF are as follows:

  • – Prepare your publication into single pdf pages (no double page spreads) with all fonts embedded.

    – All pages must be the same size.

    – Save your file as a single combined pdf file with a minimum resolution of 150dpi.

    – You can reduce the file size of your combined pdf document using Adobe Acrobat Pro.

  • For standard pages you can add regions to your PDF that will be automatically detected by the digifi platform that will trigger any of the following actions:

    Action TypeDescriptionRequired PrefixExample input
    OPEN_URLOpens a web link to an external web pagehttp://http://www.google.com
    OPEN_MAILOpens a new emailmailto:mailto:support@digifi.it
    GOTOPAGESends a reader to a specific internal page of the publication issue.pageto:pageto:10
    SMSOpens a new text message (only supported on some cellular devices)sms://sms://0044
    TELInitiates a new telephone call (only supported on some cellular devices)tel://tel://0044

    To add any of these actions in Acrobat Pro you need to go to Tools – Add or Edit Interactive Object – Link. This will allow you to draw the region on the relevant area of the page by right clicking and dragging the region to the desired size. You will then need to follow these steps:

    1. In the Create Link dialog box under Link Action select Open a web page and click Next

    2. You will then be presented with an Edit URL dialog box. Here you will need to enter the correct information from the table above for the specific action you want to initiate.

Standard Pages
  • The digifi.it platform currently supports the following input files for standard pages:

    Adobe InDesign CS5.0 +
    Adobe Photoshop CS5.1+

    If you supply a CS4.0 InDesign document, you must include a IDML file.

    Whilst the overall page size and dimensions is a creative decision most publications will use one the following sets of dimensions depending on orientation. These are optimised for the Apple iPad devices and allow for on device zooming whilst maintaining image quality:

    Landscape: 2048 pixels x 1536 pixels
    Portrait: 1536 pixels x 2048 pixels

    To create a page specifying the size in pixels in inDesign you can follow these steps:

    File – New.
    Intent – select Web
    You will now be able to specify the width and height in pixels.

    General guidelines:

    – All colours/swatches should be in RGB, not CMYK.

    – All images must be links to images on the file system.

  • General requirements:

    Each document must always contain a layer named background. If this is the only layer within the document then the page will contain no interactivity. To add interactivity you must add at least one other layer. The layer names must follow the requirements in the table below. There is no limit to the amount of layers a document can contain so multiple layers can be used to add multiple interactive elements to a page.

    – All layer names should be in lower case and contain only letters, numbers and underscores. No spaces should be used if for readability you need to punctuate your layer names you can use and underscore e.g. region://show_product1

    – All layer names must be unique including where you specify a different layer type. For example image://play and region://play will clash.

    – It is recommended that layer names are kept as short as possible whilst clearly indicating the content/purpose of the layer.

    – For region layers we recommend using a fill colour set to 50% opacity so that they can be easily identified.

    Layer TypeRequired?DescriptionRequired PrefixExample
    overviewNoA flat image which will be used for the page thumbnail that
    must the same size as the page. If an overview is not present the background will be used for the page thumbnail.
    overviewoverview
    backgroundYesA flat image which contains all elements that are not required to be interactive or separate for layering purposes.backgroundbackground
    imageNoAn image asset (including text layers)image://image://popup1
    regionNoAn area of the page which when displayed and clicked on triggers an interactive action)region://region://show_popup1
    videoNoThe size and dimensions of the video playervideo://video://video1
    audioNoAn layer that is not displayed to a user but allows for an audio file to be played within a pageaudio://audio://covertrack
    scrollableNoThe dimensions and the position of a scrollable area that will contain an image asset that exceeds the it's width and/or height.scrollable://scrollable://gallery
    htmlNoThe dimensions and position of an area of the page that will display custom html.html://html://googlemaps1
Media Requirements

Video formats involve two distinct, and very different technology concepts: containers(sometimes called wrappers) & codecs(short for coder/decoder).
Codecs are used inside of a container and because of this video formats can be confusing.

The container describes the structure of the file. It does not define the coding or compression of the data. It is used to package the video & its components
(audio/metadata) and is identified (usually) by a file extension such as .AVI, .MP4 or .MOV.

A codec (short for “coder/decoder”) is a way of encoding audio or video into a stream of bytes. It is the method used to encode the video and is the chief determiner of quality.

Our preferred form of video input is H.264 or MPEG-4 encoded inside an .mp4, .m4v or .mov container. We recommend that the video is 25 or 30 frames per seconds (fps) and a bit-rate around 500-2000kbps.

We support audio input in these formats: aif, mp3, wav, aac

Creating Enhanced pages

Initial Properties
  • PropertyPossible ValuesExampleNotes
    WidthNumber in pixels.250Width relative to 100% image
    HeightNumber in pixels.50Height relative to 100% size image
    LeftNumber in pixels of the x co-ordinate of the top left corner.20Left relative to the 100% image.
    TopNumber in pixels of the y co-ordinate of the top left corner.300Top relative to the 100% image.
    Bottom ClipNumber in pixels between 0 and the height of the image asset. Max value = height of the image.250The clip property specifies the area of the element that should be rendered. If you set a bottom clip value then the only the remaining pixels between the image height and the clip value will be rendered.
    Top ClipNumber in pixels between 0 and the height of the image asset. Max value = height of the image.250The clip property specifies the area of the element that should be rendered. If you set a top clip value then the only the remaining pixels between the image height and the clip value will be rendered.
    Left ClipNumber in pixels between 0 and the width of the image asset. Max value =width of the image.250The clip property specifies the area of the element that should be rendered. If you set a left clip value then the only the remaining pixels between the image width and the clip value will be rendered.
    Right ClipNumber in pixels between 0 and width of the image asset. Max value = width of the image.250The clip property specifies the area of the element that should be rendered. If you set a right clip value then the only the remaining pixels between the image width and the clip value will be rendered.
    OpacityOpacity of image between 0-100, with 0 being completely transparent, 100 solid.50
    DisplayTrue or FalseTrueDenotes whether the element should start displayed on the page.
    z-indexNumber2Layer ordering of element relative to the main background image which has a z-index of 0, higher number z-index is furthest to the front. Elements can share the same z-index.
    Alt textStringRhubarb and Custard Recipe.The alt attribute provides alternative information for an image if a user for some reason cannot view it.
  • PropertyPossible ValuesExampleNotes
    WidthNumber in pixels.250
    HeightNumber in pixels.50
    LeftNumber in pixels of the x co-ordinate of the top left corner.20
    TopNumber in pixels of the y co-ordinate of the top left corner.300
    DIsplayTrue or FalseFalseDenotes whether the element should start displayed on the page.
    z-indexNumber2Layer ordering of element relative to the main background image which has a z-index of 0, higher number z-index is furthest to the front. Elements can share the same z-index.
    HighlightTrue or FalseFalseDenotes whether the region should be highlighted in the reader application.
  • PropertyPossible ValuesExampleNotes
    WidthNumber in pixels.250
    HeightNumber in pixels.50
    LeftNumber in pixels of the x co-ordinate of the top left corner.20
    TopNumber in pixels of the y co-ordinate of the top left corner.300
    DIsplayTrue or FalseFalseDenotes whether the element should start displayed on the page.
    z-indexNumber2Layer ordering of element relative to the main background image which has a z-index of 0, higher number z-index is furthest to the front. Elements can share the same z-index.
    Show ControlsTrue or FalseFalseDenotes whether or not to show the video player controls.
    Can PickupTrue or FalseFalseDenotes whether or not the video player can be picked up by a user in the iOS reader app.
    Media file nameStringpage3The video files names that can be played within the video element. A video element can play multiple media files.
  • PropertyPossible ValuesExampleNotes
    Media file nameStringpage3The audio files names that can be played by the audio element. An audio element can play multiple media files.
  • PropertyPossible ValuesExampleNotes
    WidthNumber in pixels.200
    HeightNumber in pixels.600
    LeftNumber in pixels.Number in pixels of the x co-ordinate of the top left corner.
    TopNumber in pixels.Number in pixels of the x y co-ordinate of the top left corner.
    Shell backgroundString #8ec1da'
    Shell colorString#ffffff
    Tweet colorString#444444
    Tweet links colorString#1985b5
    TitleString#5Mag's Latest TweetsWidget Title
    ScrollbarTrue or FalseFalseDenotes whether the widget should display the scrollbar.
    QueryString#5 Magazine, #5movementQuery can contain @names and #hashtags. Maximum 4.
    LoopNumber in pixels of the x co-ordinate of the top left corner.20Denotes whether the widget should loop tweets round.
    TimestampTrue or FalseTrueDenotes whether the widget should show timestamps next to tweets.
    LiveTrue or FalseTrueDenotes whether the widget should poll for new tweets.
  • PropertyPossible ValuesExampleNotes
    WidthNumber in pixels.250Width of the scrollable region.
    HeightNumber in pixels.50Height of the scrollable region.
    LeftNumber in pixels of the x co-ordinate of the top left corner.20
    TopNumber in pixels of the y co-ordinate of the top left corner.300
    DIsplayTrue or FalseFalseDenotes whether the element should start displayed on the page.
    z-indexNumber2Layer ordering of element relative to the main background image which has a z-index of 0, higher number z-index is furthest to the front. Elements can share the same z-index.
    Content WidthThe width of the element being scrolled.200
    Content HeightThe height of the element being scrolled.2000
    Scrollbars HorizontalDenotes whether the horpage3Denotes whether the horizontal scrollbar should be displayed when a user scrolls.
    Scrollbars VerticalStringpage3poster.pngDenotes whether the vertical scrollbar should be displayed when a user scrolls.
    Sub ElementsArray of elementsimage://scrolltext, region://url_1, region://gotopage3Elements to layout as children on the scrollable element. All fields of a sub element are relative to their parent element.
Action Type
  • The following action types are supported on enhanced pages. For details on the attributes that can be specified for a specific action type click on the relevant tab.

    Action types can be triggered at the following points:

    ON_LOAD – when the main background image has loaded.
    ON_CLICK – when a user clicks on an image or region element.
    ON_FINISH – when an action finishes.

    ANIMATE, SHOW and HIDE action types can be performed on both individual elements and groups.

    Action TypeDescriptionAvailable On Load?
    AnimateTakes the element and applies a transformation of display attributes e.g. left, top, bottom clip etc. YES
    ShowUsed to set the display property to true on an element.YES
    HideUsed to set the display property to false on an element.NO
    LoadFor media elements - loads a different resource in to the elementYES
    PlayFor media elements - causes the media to start playing without the user having to press play on the widget.YES
    Open URLWhen clicked opens an external web URLNO
    Open mailWhen clicked opens a new emailNO
    Go to pageWhen clicked transitions to specified page number within the issue.NO
  • PropertyPossible ValuesExampleNotes
    Element numberAn individual element or group number.5
    ExcludeAn individual element of a group you do not want the animation to be performed on2
    WidthNumber in pixels for the width of the element on completion of the animation.250Width relative to 100% image
    HeightNumber in pixels for the height of the element on completion of the animation.50Height relative to 100% size image
    LeftNumber in pixels for new x co-ordinate of the top left pixel of the element on completion of the animation.20Left relative to the 100% image.
    TopNumber in pixels for new y co-ordinate of the top left pixel of the element on completion of the animation.300Top relative to the 100% image.
    Bottom ClipNumber in pixels between 0 and the height of the image asset for the new pixel clip of the element from the bottom of the image on completion of the animation. Max value = height of the image.250The clip property specifies the area of the element that should be rendered. If you set a bottom clip value then the only the remaining pixels between the image height and the clip value will be rendered.
    Top ClipNumber in pixels between 0 and the height of the image asset for the new pixel clip of the element from the top of the image on completion of the animation. Max value = height of the image.250The clip property specifies the area of the element that should be rendered. If you set a top clip value then the only the remaining pixels between the image height and the clip value will be rendered.
    Left ClipNumber in pixels between 0 and the width of the image asset for the new pixel clip of the element from the left of the image on completion of the animation. Max value = width of the image.250The clip property specifies the area of the element that should be rendered. If you set a left clip value then the only the remaining pixels between the image width and the clip value will be rendered.
    Right ClipNumber in pixels between 0 and the width of the image asset for the new pixel clip of the element from the right of the image on completion of the animation. Max value = width of the image.250The clip property specifies the area of the element that should be rendered. If you set a right clip value then the only the remaining pixels between the image width and the clip value will be rendered.
    OpacityOpacity of image on completion of the animation between 0-100, with 0 being completely transparent, 100 solid.50
    DelayNumber of milliseconds to delay the animation once the action has been triggered.250
    DurartionNumber of milliseconds over which this animation should progess.500
    Easing functionEASE_IN_OUT - causes the animation to begin slowly, accelerate through the middle of it's duration and then slow again before completing.

    EASE_IN - causes animation to begin slowly then speed up as it progresses.

    EASE_OUT - causes animation to begin quickly then slow as it completes.

    LINEAR - causes an animation to occur evenly over it's duration
    LINEAR
  • PropertyPossible ValuesExampleNotes
    Element numberAn individual element or group number.5
    ExcludeAn individual element of a group you do not want the animation to be performed on2
  • PropertyPossible ValuesExampleNotes
    Element numberAn individual element or group number.5
    ExcludeAn individual element of a group you do not want the animation to be performed on2
  • PropertyPossible ValuesExampleNotes
    Poster imageA poster image to be displayed within the video player when the video has finished playing.page3poster.png
    Media file nameThe video file names to be loaded into the video element. page3
  • PropertyPossible ValuesExampleNotes
    Element numberThe number of the media element that you want to play5
    Repeat countNumber of times to play the media1
  • PropertyPossible ValuesExampleNotes
    URLURL to open as a web pagehttp://www.google.com
    TootltipPresentation format of the linkGoto google.com
  • PropertyPossible ValuesExampleNotes
    ToAddress to pre-populate "to" withsales@digifi.it
    SubjectSubject if the email t pre-populate withCheck this out from Issue 8 of #5 Magazine
    BodyBody of the email to pre-populate with.Have you seen these skills from Player's Lounge? Go to to check out our great collection of videos.To deep link to the page the action is triggered from you can simply specify which will be replaced with the link.
  • PropertyPossible ValuesExampleNotes
    PagePage number to go to2Page numbering starts at 1.
    TootltipPresentation format of the linkGo to contents page

Analytics

Accessing your Analytics

The digifi.it platform has it’s own bespoke events engine which records an unrivalled depth of usage information. The standard events and their associated properties can be found below. In addition to the standard reports the platform also supports a custom_event page action which means that you can record a custom event every time a reader interacts with your publication e.g. when a popup layer is shown.

The events data is accessible in real-time via the Mixpanel interface which is a events based reporting interface which allows you to simply run detailed queries and visualise your data. It also allows you to ask in-depth questions such as how many users who viewed issue 1 went on to view issue 2.

To access your analytics data you will need a username and password for Mixpanel. If you don’t have a login or don’t remember your credentials please contact support@digifi.it. When you have your credentials you can got to http://www.mixpanel.com/login to view your data.

Event Types and Properties

The digifi.it platform posts Events to the engagement section of Mixpanel.

In Mixpanel, Events are the high level action type that describes the specific action that a user triggered for example they opened an External Link or opened an Issue. In addition to the Event the digifi.it platform passes in detailed properties that allow you to segment and break down your data further. For example the External URL event contains a type indicating if the link was a URL or email and a URL parameter detailing the specific URL that the user clicked on. It is these properties that allow you to build detailed reports.

Super Properties

Super properties appear in the Mixpanel interface appear along side custom properties but are present for all event types where as custom properties vary on a per event basis. Examples of super properties are Browser, Location, Device.

Details of event types and associated properties along with super properties are detailed below.

In order to use the trends and segmentation reports in Mixpanel you will need to familiarise yourself with the event types and their associated properties. These will allow you to segment and drill down on your analytic data.

  • Event PropertyDescriptionExample Value
    referrerThe URL of the previous web page that the user visitied that linked to the open issue event.http://www.google.com
    issue_nameThe issue name where the event was generated.May/June 2013
    issue_uuidThe unique ID for the issue where the event was generated1ed56b4b-3505-47b0-81b2-cc6415bcfa58
    publication_nameThe publication where the event was generatedDare Magazine
    publication_uuidThe unique ID for the publication where the event was generated819006fe-2018-457b-a8e4-d48815c53641
    platformThe platform the reader was viewing the magazine on when the event was generated, either web/iosweb
  • Event PropertyDescriptionExample Value
    departure_pageThe page number that the user navigated away from to generate the Navigate event.4
    departure_page_uuidUnique ID for the page number that the user navigated away from to generate the Navigate event.2970d50c-8c28-4e05-84c7-d1a2877319c6
    departure_display_pageWhere an alternative display page number is used instead of the system generated page number this property will be present in addition to departure_page.3 & 4
    durationThe total amount of time in seconds that the reader spent on the departure_page before navigating away34.5
    destination_pageThe page number that the user navigated away to. This can be null if we are closing tab or navigating out of the magazine.5
    destination_page_uuidUnique ID for the page number that the user navigated away to. This can be null if we are closing tab or navigating out of the magazine.37022781-5773-4893-8b9c-892d3948a43b
    destination_display_pageWhere an alternative display page number is used instead of the system generated page number this property will be present in addition to destination_page.5 & 6
    sourceThe way the reader navigated from one of the following sources: page / contents_grid / contents_list / content_scroller / nav_top / keyboard / nav_side / swipe / search / browser_close / bookmark / orientation_change
    issue_nameThe issue name where the event was generated.May/June 2013
    issue_uuidThe unique ID for the issue where the event was generated
    publication_nameThe publication where the event was generatedDare Magazine
    publication_uuidThe unique ID for the publication where the event was generated819006fe-2018-457b-a8e4-d48815c53641
    orientationFor issues with alternate or double page layouts the orientation the device was in when the event was generated, either portrait/landscapeportrait
    platformThe platform the reader was viewing the magazine on when the event was generated, either web/iosweb
  • Event PropertyDescriptionExample Value
    current_pageThe page number where the event was generated from.4
    current_page_uuidUnique ID for the page number where the event was generated from.2970d50c-8c28-4e05-84c7-d1a2877319c6
    display_pageWhere an alternative display page number is used instead of the system generated page number this property will be present in addition to current_page.3 & 4
    typeDistinguishes between a URL and Email external linkURL
    URLThe external link that the reader was taken tohttp://www.google.com
    subjectWhere the link type is Email the pre-populated subject of the email (can be null if not set)Check this out from issue 10 of #5 Magazine
    issue_nameThe issue name where the event was generated.May/June 2013
    issue_uuidThe unique ID for the issue where the event was generated
    publication_nameThe publication where the event was generatedDare Magazine
    publication_uuidThe unique ID for the publication where the event was generated819006fe-2018-457b-a8e4-d48815c53641
    platformThe platform the reader was viewing the magazine on when the event was generated, either web/iosweb
  • Event PropertyDescriptionExample Value
    mediaDistinguishes between video and audio media types.Video
    typeThe type of action performed on the media element either play, pause, seeked, ended, enter_fullscreen, exit_fullscreenplay
    idThe unique ID for the media file that the action was performed on.713a7bd7-625e-4ded
    current_pageThe page number where the event was generated from.5
    current_page_uuidUnique ID for the page number where the event was generated from.http://www.google.com
    display_pageWhere an alternative display page number is used instead of the system generated page number this property will be present in addition to current_page.Check this out from issue 10 of #5 Magazine
    media_fileThe media file name the action was performed on.freshenup.mp4
    sourceThe method the reader used to trigger the event either controls / page_change / page_action.controls
    current _timeIn seconds, the point in the media file at which the event was triggered23
    media_length (secs)In seconds, the total length of the media file.44.652 secs
    percentage_completeThe amount of the media file that had played at the point the event was triggered.74
    issue_nameThe issue name where the event was generated.May/June 2013
    issue_uuidThe unique ID for the issue where the event was generated
    publication_nameThe publication where the event was generatedDare Magazine
    publication_uuidThe unique ID for the publication where the event was generated819006fe-2018-457b-a8e4-d48815c53641
    platformThe platform the reader was viewing the magazine on when the event was generated, either web/iosweb
  • Event PropertyDescriptionExample Value
    mediumThe social network that the reader shared to.Facebook
    sourceThe source from where the reader triggered the event from either reader/pagepage
    urlWhere a URL is shared this value will be presenthttp://app.5mag.co
    current_pageThe page number where the event was generated from.4
    current_page_uuidUnique ID for the page number where the event was generated from.2970d50c-8c28-4e05-84c7-d1a2877319c6
    display_pageWhere an alternative display page number is used instead of the system generated page number this property will be present in addition to current_page.3 & 4
    issue_nameThe issue name where the event was generated.May/June 2013
    issue_uuidThe unique ID for the issue where the event was generated
    publication_nameThe publication where the event was generatedDare Magazine
    publication_uuidThe unique ID for the publication where the event was generated819006fe-2018-457b-a8e4-d48815c53641
    platformThe platform the reader was viewing the magazine on when the event was generated, either web/iosweb
  • Event PropertyDescriptionExample Value
    typeThe type of interaction the user engaged in within the UI that triggered the event, either enter_fullcreen / exit_fullscreen / reader_zoom_in / reader_zoom_out / search / enter_contents_list / exit_contents_list / enter _contents_grid / exit_contents_grid / enter_share / exit_share / enter_more / exit_more / dblclick_zoom_in / dblclick_zoom_outreader_zoom_in
    current_pageThe page number where the event was generated from.4
    current_page_uuidUnique ID for the page number where the event was generated from.2970d50c-8c28-4e05-84c7-d1a2877319c6
    display_pageWhere an alternative display page number is used instead of the system generated page number this property will be present in addition to current_page.3 & 4
    issue_nameThe issue name where the event was generated.May/June 2013
    issue_uuidThe unique ID for the issue where the event was generated
    publication_nameThe publication where the event was generatedDare Magazine
    publication_uuidThe unique ID for the publication where the event was generated819006fe-2018-457b-a8e4-d48815c53641
    platformThe platform the reader was viewing the magazine on when the event was generated, either web/iosweb
  • Event PropertyDescriptionExample Value
    referrerThe URL of the previous web page that the user visitied that linked to the open issue event.http://www.google.com
    publication_nameThe publication where the event was generatedDare Magazine
    publication_uuidThe unique ID for the publication where the event was generated819006fe-2018-457b-a8e4-d48815c53641
    platformThe platform the reader was viewing the magazine on when the event was generated, either web/iosweb
  • Event PropertyDescriptionExample Value
    App NameThe name of the app that was opened#5 Magazine
    App ReleaseThe version number of the app that was released2.0
  • Event PropertyDescriptionExample Value
    App NameThe name of the app that was opened#5 Magazine
    App ReleaseThe version number of the app that was released2.0
    durationIn seconds, the amount of time the app was opened for in that session.645
  • Event PropertyDescriptionExample Value
    App NameThe name of the app that was opened#5 Magazine
    App ReleaseThe version number of the app that was released2.0
    issue_uuidThe unique identifier of the issue that was downloadedMay/June 2013
    publication_nameThe name of the publication that the issue that was downloaded is associated with#5 Magazine
    publication_uuidThe unique identifier of publication that the issue that was downloaded is associated with1ed56b4b-3505-47b0-81b2-cc6415bcfa58
Trends

iOS App Assets Updated

Custom Icon and Image Creation Guidelines

If you have opted for branded iOS application you are required to provide custom artwork for the submission to Apple. The required assets are detailed below but should you require further guidance you can refer to the Apple guidelines here.

To download an example .zip file containing all the required assets click here.

To download a Photoshop template for creating the required assets for iOS app icons click
here.

DescriptionSize for iPhone and iPod touchSize for high-resolution iPhone and iPod touchSize for iPadSize for high-resolution iPadSize for iPhone 5Apple Guidelines
App Icon60 x 60
File Name: Icon.png
120x120
File Name: Icon@2x.png
72 x 72
File Name: Icon-72.png
152 x 152
File Name: Icon-72@2x.png
120x120
File Name: Icon@2x.png
App Icons
App Icon for App Store512 x 512
File Name: iTunesArtwork.png
1024 x 1024
File Name: iTunesArtwork@2x.png
512 x 512
File Name: iTunesArtwork.png
1024 x 1024
File Name: iTunesArtwork@2x.png
1024 x 1024
File Name: iTunesArtwork@2x.png
App Icons
Default Newsstand cover icon for the App Store At least 512 pixels on the longest edge

The aspect ratio of all Newsstand icons should be between 1:2 and 2:1

File Name: Newsstand-Icon.png
At least 1024 pixels on the longest edge

The aspect ratio of all Newsstand icons should be between 1:2 and 2:1

File Name: Newsstand-Icon@2x.png
N/AN/AN/A Newsstand Icons






Launch Image (Portrait)320 x 480
File Name: Default.png
640 x 960
File Name: Default@2x.png
768x1024
File Name: Default~ipad.png
1536 x 2048
File Name: Default~ipad@2x.png
640 x 1136
File Name: Default-568h@2x.png
Launch Images
Launch Image (Landscape)N/AN/A1024 x 748
File Name: Default-Landscape~ipad.png
2048 x 1536
File Name: Default-Landscape~ipad@2x.png
N/A Launch Images
App icon examples - iOS 6

When creating your app icons ensure that your icon is eligible for the visual enhancements iOS provides. You should provide an image that:

  • Has 90° corners (it’s important to avoid cropping the corners of your icon—iOS does that for you when it applies the corner-rounding mask)
  • Does not include a drop shadow
  • Does not have any shine or gloss (unless you’ve chosen to prevent the addition of the reflective shine)
  • Does not use alpha transparency

Here is an example of how the supplied icons receive rounded corners, drop shadows and a reflective shine by the iOS system. On the left is the supplied app icon and on the right is the treatment that image receives upon being displayed on iOS.
iostreatment

There is an option to opt out of having a shine on your icons. Please let us know when you would like to opt out when you supply us with your app icons. On the left is an example of the original supplied app icon image and the resulting iOs treatment without the shine.
nogloss

What not to do

If your app icon image contains transparency you will find that parts of the image appear black like this example. The middle icon shows what will happen when you have opted out of a shine. Your icon will appear on a black background with rounded corners. The example on the right shows what happens when iOS is allowed to add all iOS icon treatments. Please ensure that your app icons do not contain alpha transparency.
exampleblack

A common issue is where icons are supplied with an image that contains a rounded corner with a transparency behind it. This results in an unwanted effect as seen in the following example. Please ensure that your app icons fill the entire canvas as iOS will crop the corners for youwrong

Newsstand Icons

Read the full apple guidelines here regarding Newsstand Icons.

As indicated in the Apple documentation you are only eligible to appear in the newsstand if you intend to publish at least quarterly each year. If this is not the case then you will not need to provide these icons.

  • Avoid adding to your default cover icon elements that users would never see on an actual cover, such as a message to “tap here for the latest issue”.
  • Avoid using artwork or headlines that are seasonal or topical, such as images related to holidays or headlines that refer to current events.
  • In particular, don’t reuse the cover of a previous issue for your default Newsstand cover icon, because users might confuse your app with a specific issue.
App icon examples - iOS 7

When creating your app icons ensure that your icon is eligible for the visual enhancements iOS provides. You should provide an image that:

  • Has 90° corners (it’s important to avoid cropping the corners of your icon—iOS does that for you when it applies the corner-rounding mask)
  • Does not include a drop shadow
  • Does not use alpha transparency

Note that iOS 7 doesn’t apply shine or a drop shadow to the app icon. And, although iOS 7 still applies a mask that rounds the corners of an app icon, it uses a different corner radius than earlier versions of iOS.

Here is an example of how the supplied icons receive rounded corners. On the left is the supplied app icon and on the right is the treatment that image receives upon being displayed on iOS.
iostreatment

What not to do

If your app icon image contains transparency you will find that parts of the image appear black like this example. Your icon will appear on a black background with rounded corners. The example on the right shows what happens when iOS is allowed to add all iOS icon treatments. Please ensure that your app icons do not contain alpha transparency.
exampleblack

A common issue is where icons are supplied with an image that contains a rounded corner with a transparency behind it. This results in an unwanted effect as seen in the following example. Please refrain from cropping your app icons, instead design to the full square canvas as iOS will crop the corners for youwrong

Tips from our designer

gridWhen designing Your App icon, if your brand guidelines allow you to, think about flattening the look of your app icon and creating a simple and clean application Icon. Use the Golden ratio grid shown here to align assets and shapes within the app icon shape. Start with a 1024×1024 canvas with the grid system as the background layer.
As with any grid design grid, they can be broken and only act as a guide and not a rigid cage to align too.
Save this image and open it up in photoshop as the background layer to assist in creating your icon. Or you can use Michael Flarup’s icon template and turn on the grid layer. Be sure to turn the rounded corners grid off when saving your icons, the mask is great for getting a feel for your icons boundaries but should not be output with the corners rounded.

Newsstand Icons

Read the full apple guidelines here regarding Newsstand Icons.

As indicated in the Apple documentation you are only eligible to appear in the newsstand if you intend to publish at least quarterly each year. If this is not the case then you will not need to provide these icons.

  • Avoid adding to your default cover icon elements that users would never see on an actual cover, such as a message to “tap here for the latest issue”.
  • Avoid using artwork or headlines that are seasonal or topical, such as images related to holidays or headlines that refer to current events.
  • In particular, don’t reuse the cover of a previous issue for your default Newsstand cover icon, because users might confuse your app with a specific issue.
inios

Android App Assets New

Custom Icon and Image Creation Guidelines

If you have opted for an Android application you are required to provide custom artwork for the submission to the Google Play Store. The required assets are detailed below but should you require further guidance you can refer to the Google guidelines here and the design guidelines here.

Standard Android app assets

DensityLauncher sizeIn app BarNotification BarGoogle Play Store 
mdpi48x48px32x32px24x24px512x512px
hdpi72x72px48x48px36x36px
xhdpi96x96px64x64px48x48px
xxhdpi144x144px96x96px72x72px
tvdpiuses hdpi 72x72pxuses hdpi 48x48pxuses hdpi 36x36px
xxxhdpi192x192px (devices often use the launcher image one density higher than its own density class. An xhdpi will use an xxhdpi sized launcher icon)

If you do not own photoshop then please use this link to upload your design and export the required icon sizes.online tool.

You can use the following psd template to create your Icons Android icon template.

You can use the following psd template to create your featured images Android featured graphic template.

Kindle Fire App Assets

Name and (Gen)Fire HDX 8.9" (3rd)Fire HDX 7" (3rd) Fire HD 7" (3rd) Fire HD 8.9" (2nd) Fire HD 7" (2nd) Fire (2nd) Fire (1st) 
Icon carousel624 x 624 562 x 562 375 x 375 675 x 675 425 x 425365 x 365322 x 322
Icon grid206 x 206198 x 198132 x 132252 x 252155 x 155121 x 121121 x 121
Icon list (large)178 x 178 172 x 172 114 x 114 118 x 118 100 x 100 80 x 80 90 x 90
Icon list (small)62 x 62 60 x 60 40 x 40 N/AN/AN/AN/A
Icon settingsN/AN/AN/A134 x 134 78 x 78 58 x 5858 x 58
Icon notifications100 x 100 96 x 96 64 x 64 118 x 118 78 x 78 58 x 58 32 x 32
Icon favourites206 x 206 198 x 198 132 x 132 188 x 188 125 x 125 125 x 125 100 x 100
Featured image for Google Play store App icon examples

The launcher icon is the visual representation of your app on the Home or All Apps screen. Since the user can change the Home screen’s wallpaper, make sure that your launcher icon is clearly visible on any type of background. The Google android guidelines explain how the icons should have a three-dimensional, front view, with a slight perspective as if viewed from above, so that users perceive some depth.

An example of such An icon can be seen here with our version of what the Rio Ferdinand logo would look like if the Android style was applied.

mdpi hdpi xhdpi xxhdpi launcher

Below is our logo in the style set out in the Android guidelines.

dmdpi dhdpi dxhdpi dxxhdpi dlauncher
androidinteractive

Further Customisation

Loading Graphic

To further brand your content reading experience you can now customise the loading graphic that your readers will see when pages are loading. We call this the progress animation.

Our progress animation is defined by using a sprite animation. A sprite is a collection of images together but form part of one image. Sprites are more generally used to contain all iconography on a page and with css used to display one icon at a time. Sprites are now used like a zeotrope where by one image contains many frames to portray motion and animation.

Create a new sprite animation perhaps using a logo or image.

The logo needs to be cut out and reduced to one colour only. Essentially an outline. This can be done in a vector image editor such as illustrator.

If you require a custom loading image for your web reader you have two ways of doing so. The first option is the simplest option that will use your graphic or logo and we will design the loading animation using the graphic. The second option is a more custom and advanced option whereby you can create a custom animation within our loading graphic parameters.

Option 1

Provide a high quality Graphic either in EPS, AI, PDF, PNG, TIFF OR JPG.

State whether you would like a horizontal loading animation

or if you would like a vertical loading graphic

provide the colour of the fill area

and the background colour of the graphic

Finally choose the screen area background. We recommend the standard colour: #0f0f0f

Extras: You can also include an optional numerical percentage overlay with a custom font and colour of your choice.

Here is an example of a custom loading graphic.

Download the templates for:

Vertical loading animation, top to bottom loading template
Horizontal loading animation, left to right loading template

Option 2

Make a custom animation using your own tools and creative flair following requirements

Dimensions: 155 px width 167 px height

No. Of images: 17 separate png images

Branded Library

The branded library is a standard library that you can customise to suit your brand. Many customisations require a hex code such as: #f06520. In other cases we require an opacity out of 100%. Some icons can simply have their colour changed with a hex code or a custom designed icon can be supplied at the correct size. Your branded library will feature on iOS, android and Kindle devices.

Here is an example of a branded library on an iPad iOS device and Google Nexus 7 android device.

customdevice

This diagram identifies the elements that you can customise.

ipad

The following image is how the branded library behaves on a smartphone.

phone

This table gives you the full list of custom values and the file types where an image is required.

ElementColourFile TypeFile dimensions
Logo.png .jpg700 x170px
Banner.png .jpg .gif950x170px
Background colourhex code i.e. #ffffff
Settings coghex code i.e. #ffffff40x40px
Custom Settings cog.png40x40px
Toolbarhex codei.e. #ffffff
Download buttonshex codei.e. #ffffff
View buttonshex codei.e. #ffffff
Archive buttonhex code i.e. #ffffff
Toolbar highlighted buttonhex code i.e. #ffffff
Toolbar menu text (not highlighted)hex code i.e. #ffffff
Toolbar menu text (highlighted)hex code i.e. #ffffff
Issue tint (for issue description, loading & progress bar)hex code i.e. #ffffff
Info icon colourhex code i.e. #ffffff35x35px
Custom info icon (if you want to use your own icon).png35x35px
Progress bar backgroundhex code i.e. #ffffff
Progress bar fillerhex code i.e. #ffffff
Preparing graphichex code i.e. #ffffff

coming soon
incustom

All downloads

All downloads

Icon and splash screen templates

Icon Template

The app icon template by Michael Flarup at Pixel resort is an easy to use template that will export your icons in all the sizes required in our documentation. This template is not for creating splash screens.

Edit the 1024×1024 Smart Object named ‘EDIT THIS SMART OBJECT’. This opens the Icon.psb file – create your artwork in this canvas. After saving the Icon.psb, the multiple sizes in the Main PSD file should be automatically rendered.

Use the Photoshop Actions bundled with the resource to export your icon files. Please ensure that there are no rounded corners with transparency as iTunes adds the rounded corner effect automatically. Incorrectly judging the corners could lead to unwanted black edges.

Its is important to ensure that the ‘Rounded mask is disabled’

Screen Shot 2013-06-06 at 17.31.15

Launch image files

A Launch image is a full screen image that briefly appears before the application starts on the device.

The size requirements are stated in the documentation section called “Custom Icon and image creation guidelines”. You can download the files for each required image and design your splash screens within the dimensions of the images.

launch image

Favicons

Favicons appear in the Url box on a browser. png images for Opera, Chrome, safari and Firefox. Ico files for Internet explorer. Upload tour highest quality png file to the Ico generator to create your icon file. Download and send this ico file to us. This ensures that your branding is seen throughout the experience.

Download png favicon pack
Create ico file for Internet Explorer 8+

Click on get code, upload your png, export ico files.

Page Templates

Indesign template files

These files are for guidance only. The Indesign files contain basic pages with example content to show you how to name layers or to specify where a scrollable region is. Each file has a yellow documentation box on the right hand side and off the visible page region. Included in the pack are Poppups, Scrollable regions, image gallery and pages with videos.

Download all files

All assets

Download all files from above.

 

One Response to “Documentation”