Specification for digital editions DER SPIEGEL...

Specification for digital editions

DER SPIEGEL

manager magazin

Harvard Business Manager

Contents

1

Contents

1. Android/ Kindle Fire

1.1. General 2

1.2. Static advertisements 2

1.3. Static advertisements with video 4

1.4. Interactive advertisements 7

1.5. Tracking 9

2. iOS - iPad

2.1. General 11


2.3. Static advertisements with video 13


2.5. Inpage Ad 20

2.6. Download Ad 21

2.7. Tracking 21

3. iOS – iPhone 23

4. Web Reader

4.1. General 24



5. Windows 8

5.1 General 30

5.2 Static advertisements 30

5.3 Interactive advertisements 31

Android / Kindle Fire

2

1. Android / Kindle Fire

1.1. General

The SPIEGEL app for Android tablets and the Kindle Fire make it possible to read the weekly SPIEGEL in digital form on Android tablets and the Kindle Fire. To do this, both the current and any previous issues can be downloaded within the app. Once an issue of the magazine has been downloaded onto the user's device, it will remain unchanged on the device without being updated again.

There are three different forms of advertising in the SPIEGEL app:

- Static advertisements

- Static advertisements with video

- Interactive advertisements

For each selected form of advertising, one variant must be provided in portrait format and landscape format respectively. When the device is swivelled, the correct display format is shown automatically.

As issues (analogous to print magazines) can still be downloaded and/or read after the time of their initial publication, target URLs must be accessible for at least 6 months and/or click commands must be similarly durable.

Important: the material must be delivered at least 9 working days before publication! Due to their association with particular issues, app advertisements must be regarded from a conceptual point of view as print ads rather than online ads. This means that belated delivery might prevent the ad from appearing in the issue that had been booked. The individual forms of advertising, including their technical specifications, are described below.

1.2. Static advertisements

General

Static advertisements are advertisements that consist of a static image to which a link can be provided where appropriate.

As a special characteristic, different areas of the image can be given different target URLs. This is realised by means of an HTML image map whose area elements delineate the upper left-hand corner and the lower right-hand corner of a rectangle, behind which the desired link is placed. Only rectangular areas can be created.


3

Formats

Android 7" / Kindle Fire: Portrait format: 600 x 1024 pixels Landscape format: 1024 x 600 pixels Android 10": Portrait format: 800 x 1176 pixels Landscape format: 1280 x 696 pixels

File format: JPG

Maximum file size: 200 KB per image

We receive the image map either as an HTML file or as free text (please indicate clearly which URL belongs to which area). If we receive only one URL we provide a link to the image in full-screen form.

The URLs can be click commands. It is not possible to integrate web bugs, however!

You can find an example of a suitable HTML file in landscape format here – the entries shown in bold must be adapted. Please also note that we require a separate HTML file for each format:

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Anzeige</title>

</head>

<body>

<img src="SP-2010-25-00-T-1024x600-KUNDE.JPG" alt="Querformat" width="1024" height="600" border="0"

usemap="#imagemap" />

<map name="imagemap" id="imagemap">

<area shape="rect" coords="346,524,1004,656" href="http://www.kunde.de" alt="home" />

<area shape="rect" coords="50,550,272,655" href="http://www.kunde.de/sub" alt="sub" />

</map>

</body>

</html>

Delivery (at least 9 working days before publication)

The material delivered must include the following:

- one image in both portrait and landscape format

an HTML file in both portrait and landscape format, or alternatively a target URL with a full-screen link, or both(!) image maps as free text


4

1.3. Static advertisements with video

General

Static advertisements with video are static advertisements with which a video can additionally be played back as soon as the user is online (otherwise he is given an indication).

In order to play back the video, the SPIEGEL app integrates a play button into the static image (see Fig. 1). When the play button is clicked on, the video is played back in full-screen mode (Fig. 2).

Fig. 1 Fig. 2

The user can leave full-screen mode while the video is being played back. The video is then displayed over the ad in a size and position determined in advance using an image map (Fig. 3). The play button is always positioned in the middle of this defined area (compare Fig. 4 and Fig. 1).

After the video has been played back, the app returns to its status as per Fig. 1.


5

Fig. 3 Fig. 4

As can be seen in in Fig. 4, the area to be indicated for the video determines where the play button will be positioned. As a result, certain positions of the play button also restrict the possible size and position of the video area. An example for clarification purposes: if the play button is to be positioned e.g. in the bottom left-hand area, the video would also be placed in the bottom left-hand corner, as well as being restricted in its size by the screen frame (Fig. 5):


6

Fig. 5

This should be taken into account when the ad motif is being designed and/or when the video area is being defined. Irrespective of the defined video area's position and size, however, the video is generally played back in full-screen mode, which is terminated again only upon a user action or at the end of the video.

Formats

Android 7" / Kindle Fire: Portrait format: 600 x 1024 pixels Landscape format: 1024 x 600 pixels Android 10": Portrait format: 800 x 1176 pixels Landscape format: 1280 x 696 pixels

File format: JPG

Maximum file size: 200 KB per image

Video: either the video can be sent to us (high-quality spot material – preferably Windows Media or mp4 – 16:9 with 1024 x 576 px or higher, 24-25 frames per second, 4 Mbit encoding rate, stereo sound 44KHz sampling) or we receive a URL for the video to which reference is then made.

We receive the image map either as an HTML file or as free text (please indicate clearly which URL belongs to which area). If we receive only one URL we provide a link to the image in full-screen form. A link cannot be provided to the video itself.



7

You can find an example of a suitable HTML file in landscape format here – the entries shown in bold must be adapted. Please note that the area earmarked for the video must be identified with the value "video" by using an alt attribute and that we will require a separate HTML file for each format:




<head>



</head>

<body>





<area shape="rect" coords="24,280,744,685" href="http://adserv.quality-

channel.de/images/flashvideos/1077413_960x540_H264_1400.mp4" alt="Video" target="_blank"/>


</map>

</body>

</html>



- one image in both portrait and landscape format - a video - one HTML file in both portrait and landscape format, or alternatively a target

URL with a full-screen link, or both(!) image maps as free text

1.4. Interactive advertisements

General

Interactive advertisements offer far-reaching possibilities for the integration of video and sound, as well as animations and interaction with the user. This is possible because the interactive advertisement is an HTML page that can use all of the possibilities made available by HTML5 on Kindle Fire in the Amazon Silk browser and/or on Android tablets. This HTML page is then loaded into the app and displayed when the user browses on the ads page.

Specifically, this means that virtually everything that can be displayed in the Amazon Silk browser can also be used in an ad. All elements of the ad are downloaded onto the device together with the magazine issue, with the result that the add is fully functional even when the user is offline.

In addition to the interactive HTML page, there are "default" and "transition" images. The default images are shown to users who still have an older version of the app that


8

does not support all of the interactive features. They are also used for displaying an ad preview while the user browses through the magazine navigation.

Transition images are shown to the user while the HTML ad is being loaded and set up in the background. As soon as the setup has been completed, the display then switches to the HTML ad. If the motifs of the transition images and the first image of the interactive motif are the same, it makes sense for the arrangement of all the elements to be aligned pixel by pixel, as otherwise there will be pronounced jolts in the motif when the ad switches from transition to interactive.

The three elements described above (interactive HTML page, default images, transition images) must be delivered within a container with a structure of the kind shown in Fig. 6:

Fig. 6

The subfolders "defaults" and "transition" contain the image files that have each already been described in landscape and portrait format. The subfolder "ad" must always have two index files – one for the landscape format (index_landscape.html) and one for the portrait format (index_portrait.html). The aforementioned files in the three subfolders must be named as shown in Fig. 6.

In addition, any further files or subfolders which are part of the HTML page (e.g. images, sounds, videos, CSS or JavaScript files) can be created in the subfolder "ad". CSS and JavaScript can be used without any problems; the same applies to the use of JavaScript libraries and frameworks such as jQuery. Generally, the following rule of thumb applies: If it is running on a Kindle Fire/Android Tablet in the Amazon Silk browser, then in all probability it will also be running in the SPIEGEL app as an advertisement.

A sample container can be downloaded at: http://adserv.quality-channel.de/images/example-container.zip.


9

It is important to remember that with all interactive advertisements, it must be

guaranteed that the user can also advance to the next page of the magazine by

"swiping", i.e. a swipe function within the ad must first be activated using a button or

similar device in the ad where appropriate.

Formats

Android 7" / Kindle Fire: Portrait format: 600 x 1024 pixels Landscape format: 1024 x 600 pixels Android 10": Portrait format: 800 x 1176 pixels Landscape format: 1280 x 696 pixels Maximum file size (incl. default and transition images): 5 MB

Default and transition images: File format: JPG Maximum file size: 200 KB per image



- the HTML container as described above, incl. all of the files required to display the ad, plus the default and transition images (both in portrait and landscape format).

- If you would like to use click commands, please integrate them into your ad before sending it to us.

1.5. Tracking

The question of tracking possibilities is asked frequently, of course, so we shall make a few general remarks about them here.

The use of click commands or redirects to track the clicks is possible with all of the aforementioned means of advertising; however, these click commands or redirects may not contain any kind of random numbers or timestamps to be replaced dynamically.

The tracking of ad impressions is unfortunately impossible for technical reasons, i.e. web bugs or similar tools cannot be used.

Notwithstanding the technical possibilities, however, it would also make little sense to track the ad impressions because the user does not have to be online when using the SPIEGEL app.


10

To put it another way, the ad impressions that the user generates while he is offline would not be tracked, with the result that the actual final total of impressions would simply be meaningless because only those users who were online at the time of the respective ad being called up would be included in the counting process.

iOS - iPad

11

2. iOS – iPad 2.1. General

The iPad apps in the SPIEGEL QC portfolio make it possible to read the weekly SPIEGEL or the monthly manager magazin and the monthly Harvard Business Manager in digital form on an iPad. In order to do this, both the current and any previous issues of the respective publication can be downloaded within the app. Once an issue of the magazine has been downloaded onto the user's iPad, it will remain unchanged on the device without being updated again.

There are three different forms of advertising in the iPad apps:

- Static advertisements - Static advertisements with video 4 - Interactive advertisements

For each selected form of advertising, one variant must be provided in both portrait format and landscape format. When the iPad is swivelled, the correct display format is shown automatically. As there is no Flash Player on an iPad, it must be borne in mind that in the event of links, the target page contains no Flash elements that are imperative for using the target page.


It is important to remember that the material must be delivered at least 9 working days before publication! Due to their association with the the respective issue, iPad advertisements must be regarded as print ads rather than online ads from a conceptual point of view. This means that belated delivery might prevent the ad from appearing in the issue that had been booked.

The individual forms of advertising, including their technical specifications, are described below.


General Static advertisements are advertisements that consist of a static image to which a link can be provided where appropriate. As a special characteristic, different areas of the image can be given different target URLs. This is realised by means of an HTML image map whose area elements delineate the upper left-hand corner and the lower right-hand corner of a rectangle, behind which the desired link is placed. Only reactangular areas are possible. Formats

iOS - iPad

12

Portrait format: 768 x 960 pixels Landscape format: 1024 x 704 pixels File format: JPG Maximum file size: 200 KB per image We receive the image map either as an HTML file or as free text (please indicate clearly which URL belongs to which area). If we receive only one URL we provide a link to the image in full-screen form. The URLs can be click commands. It is not possible to integrate web bugs, however! You can find an example of a suitable HTML file in landscape format here – the entries shown in bold must be adapted. Please also note that we require a separate HTML file for each format: <?xml version="1.0" encoding="UTF-8" standalone="yes"?>



<head>



</head>

<body>






</map>

</body>

</html> Delivery (at least 9 working days before publication) The material delivered must include the following:

- one image in both portrait and landscape format - one HTML file in both portrait and landscape format, or alternatively a target

URL with a full-screen link, or both(!) image maps as free text

2.3. Static advertisements with video

iOS - iPad

13

General

Static advertisements with video are static advertisements with which a video can additionally be played back as soon as the user is online (otherwise he is given an indication).

In order to play back the video, the iPad app integrates a play button into the static image (see Fig. 1). When the play button is clicked on, the video is played back in full-screen mode ( Fig. 2).

Fig. 7 Fig. 8

The user can leave full-screen mode while the video is being played back. The video is then displayed over the ad in a size and position determined in advance using an image map (Fig. 3). The play button is always positioned in the middle of this defined area (compare Fig. 4 and Fig. 1).

After the video has been played back, the app returns to its status as per Fig. 1.

iOS - iPad

14

Fig. 9 Fig. 10

As can be seen in in Fig. 4, the area to be indicated for the video determines where the play button will be positioned. As a result, certain positions of the play button restrict the possible size and position of the video area as well. An example for clarification purposes: if the play button is to be positioned e.g. in the bottom left-hand area, the video would also be placed in the bottom left-hand corner, as well as being restricted in its size by the screen frame (Fig. 5):

iOS - iPad

15

Fig. 11

This should be taken into account when the ad motif is being designed and/or when the video area is being defined. Irrespective of the defined video area's position and size, however, the video is generally played back in full-screen mode, which is terminated again only upon a user action or at the end of the video.

Formats

Portrait format: 768 x 960 pixels Landscape format: 1024 x 704 pixels File format: JPG Maximum file size: 200 KB per image

Video: either the video can be sent to us (high-quality spot material – preferably Windows Media or mp4 – 16:9 with 1024 x 576 px or bigger, 24-25 frames per second, 4 Mbit encoding rate, stereo sound 44KHz sampling) or we receive a URL for the video to which a reference is then made.

We receive the image map either as an HTML file or as free text (please indicate clearly which URL belongs to which area). If we receive only one URL we provide a link to the image in full-screen form. A link cannot be provided to the video itself.


You can find an example of a suitable HTML file in landscape format here – the entries shown in bold must be adapted. Please note that the area earmarked for the

iOS - iPad

16

video must be identified with the value "video" by using an alt attribute and that we will require a separate HTML file for each format:




<head>



</head>

<body>





<area shape="rect" coords="24,280,744,685" href="http://adserv.quality-

channel.de/images/flashvideos/1077413_960x540_H264_1400.mp4" alt="Video" target="_blank"/>


</map>

</body>

</html>



- one image in both portrait and landscape format - a video - one HTML file in both portrait and landscape format, or alternatively a

target URL with a full-screen link, or both(!) image maps as free text


General

Interactive advertisements offer far-reaching possibilities for the integration of video and sound, as well as animations and interaction with the user. This is possible because the interactive advertisement is an HTML page that can use all of the possibilities made available by HTML5 on the iPad in the Mobile Safari. This HTML page is then loaded into the app and displayed when the user browses on the ads page.

Specifically, this means that virtually everything that can be displayed in the Mobile Safari can also be used in an ad. All elements of the ad are downloaded onto the iPad together with the magazine issue, with the result that the ad is fully functional even when the user is offline.

In addition to the interactive HTML page, there are "default" and "transition" images. The default images are shown to users who still have an older version of the app that does not support all of the interactive features. They are also used for displaying an ad preview while the user browses through the magazine navigation.

iOS - iPad

17

Transition images are shown to the user while the HTML ad is being loaded and set up in the background. As soon as the setup has been completed, the display then switches to the HTML ad. If the motifs of the transition images and the first image of the interactive motif are the same, it makes sense for the arrangement of all the elements to be aligned pixel by pixel, as otherwise there will be pronounced jolts in the motif when the ad switches from transition to interactive.

The three elements described above (interactive HTML page, default images, transition images) must be delivered within a container with a structure of the kind shown in Fig. 6:

Fig. 12

The subfolders "defaults" and "transition" contain the image files that have already been described in landscape and portrait format respectively. The subfolder "ad" must always have two index files – one for the landscape format (index_landscape.html) and one for the portrait format (index_portrait.html). The aforementioned files in the three subfolders must be named as shown in Fig. 6.

In addition, any further files or subfolders which are part of the HTML page (e.g. images, sounds, videos, CSS or JavaScript files) can be created in the subfolder "ad". CSS and JavaScript can be used without any problems; the same applies to the use of JavaScript libraries and frameworks such as jQuery. Generally, the following rule of thumb applies: If it is running on an iPad in the Mobile Safari, then in all probability it will also be running in the iPad app as an advertisement.

A sample container can be downloaded at: http://adserv.quality-channel.de/images/example-container.zip.

The HTML container can also contain the file "ad_config.plist" that makes it possible to use a number of iPad functionalities. In this way, the app can inform the ad of the following:

iOS - iPad

18

- the iPad was shaken - the change in the tilt angle - the geographical orientation (compass) - any swivelling of the iPad is ignored, i.e. the ad display does not switch to

the other format when the iPad is swivelled (this functionality may not be used on the opening page!).

If this file is not delivered, the ad is not informed about any of the aforementioned points. More about the precise contents and use of "ad_config.plist" can be found below under the heading Miscellaneous.

It is important to remember that with all interactive advertisements, it must be

guaranteed that the user can also advance to the next page of the magazine by

"swiping", i.e. a swipe function within the ad must first be activated using a button or

similar device in the ad where appropriate.

Formats

Portrait format: 768 x 960 pixels Landscape format: 1024 x 704 pixels Maximum file size (incl. default and transition images): 5 MB

Default and transition images:

- File format: JPG - Maximum file size: 200 KB per image



- the HTML container as described above, incl. all of the files required to display the ad, plus the default and transition images (both in portrait and landscape format).

- If you would like to use click commands, please integrate them into your ad before sending it to us.

Miscellaneous

Metatags

If the correct presentation of the ad is to be guaranteed, the following metatag should be contained in the header of the two index files:

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />

iOS - iPad

19

ad_config.plist The file "ad_config.plist" has the content shown below. If it is not delivered, all of the flags shown below will be received with "false". Example:

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN"

"http://www.apple.com/DTDs/PropertyList-1.0.dtd">

<plist version="1.0">

<dict>

<key>notify_shake</key>

<true/>

<key>update_accelerometer</key>

<false/>

<key>update_teslameter</key>

<false/>

<key>prevent_autorotation</key>

<false/>

</dict>

</plist>

In order to activate one of the aforementioned iPad functionalities for the ad, the key in question must be set to the value "true". In the above case, only the “notify_shake” function (the iPad was shaken) is activated.

If one of the functionalities referred to above was activated, it calls up the following JavaScript function, which must then be allocated the desired action in the ad's JavaScript code:

the iPad was shaken: passShakeEvent()

change in the tilt angle: passAcceleration(x,y,z)

Compass: passHeading(magneticHeading, trueHeading)

Suppression of rotation: no response

The iPad app informs the advertisement about the tilt 30 times per second, and compass alterations are passed on whenever the iPad ascertains a change. In the event of passAcceleration(x,y,z) the three tilt directions are passed on; in the event of passHeading(magneticHeading, trueHeading) so is the compass alignment.

JPEG pixel quantity Please bear in mind that the iPad scales all JPEGs with more than 2,000,000 pixels. In the process, the width and height are divided by the smallest power of two that is required to reduce the number of pixels to below 2,000,000.

(See: http://developer.apple.com/library/safari/#documentation/AppleApplications/Referenc

iOS - iPad

20

e/SafariWebContent/CreatingContentforSafarioniPhone/CreatingContentforSafarioniPhone.html)

2.5. Inpage Ad

The Inpage Ad is shown within an article page in the SPIEGEL digital editions' apps.

manager magazin digital and Harvard Business Manager Digital do not yet support

this special form of advertising.

The ad can be delivered in the following image formats:

– JPG – PNG – GIF (for simple animations, only 256 colours possible) – optional: Movie (MP4, H.264/MPEG-4 AVC, [email protected], 24 FPS), without audio track; a still image must also be delivered in this area as a starting image. The film starts automatically and remains standing on the last key frame. The delivery must be made in the following formats for the various devices: Telephones: 640 x 160 pixels 7-inch devices and WebReader: 1024 x 256 pixels (recommended; alternatively 1024 x 128 pixels) 10-inch devices:

2048 x 512 pixels (recommended for devices with Retina resolution; alternatively

2048 x 256 pixels). For movies, a video with the format 1024 x 256 must be

delivered, also for 10-inch devices.

The ad can be provided with a link exclusively for the full-screen mode – if necessary,

a target URL must be delivered additionally.

The material must be delivered at least 9 working days before publication!

2.6. Download Ad

General

The Download Ad is an advertisement that can be seen while a magazine issue is being downloaded onto the iPad. It consists of up to three individual images in JPG format, each of which has 300 x 250 pixels.

iOS - iPad

21

It can be determined individually for each image how many seconds it should be visible for, and for all of the images whether they should run in a loop (if the images do not run in a loop, the last image remains stationary until the download is completed).

The ad cannot be provided with a link.

manager magazin digital and Harvard Business Manager Digital do not yet support this special form of advertising.

Format

Image format: 300 x 250 pixels, maximum of 3 images File format: JPG Maximum file size: 300 KB in total for all images; the individual images may be apportioned in any way (so if only one image is used, this can take up all of the 300 KB).



- 1-3 images as described above. - A disclosure for each image on how long it is scheduled to be shown.

Should the images run in the loop?

2.7. Tracking

The question of tracking possibilities is asked frequently, of course, so we shall make

a few general remarks about them here.

The use of click commands or redirects to track the clicks is possible with all of the

aforementioned means of advertising except for the Download Ad; however, these

click commands or redirects may not contain any kind of random numbers or

timestamps to be replaced dynamically.

The tracking of ad impressions is unfortunately impossible for technical reasons, i.e.

web bugs or similar tools cannot be used.

Notwithstanding the technical possibilities, however, it would also make little sense to

track the ad impressions because the user does not have to be online when using an

iPad app from the SPIEGEL-QC portfolio.

To put it another way, the ad impressions that the user generates while he is offline would not be tracked, with the result that the actual final total of impressions would

iOS - iPad

22

simply be meaningless because only those users who were online at the time of the respective ad being called up would be included in the counting process.

iOS - iPhone

23

3. iOS – iPhone

The ads in the SPIEGEL app for the iPhone are basically the same as the ads in the

iPad SPIEGEL app. This means that the specifications at http://www.spiegel-

qc.de/uploads/DigitaleMedien/ipad_specs_spqc.pdf also apply for the iPhone as far

as the individual ad types are concerned. The only exception is the Download Ad,

which is not available on the iPhone.

The significant difference from the iPad advertisements lies in the size of the ads. For

ads on the iPhone we require only ads in portrait format (ads in landscape format

cannot be displayed on the iPhone and therefore do not need to be delivered). The

size of the ad to be delivered is 320 x 480 pixels for non-Retina displays.

It is important to note the actual area of the ad that is supposed to contain

information is the upper 320 x 440 pixels. Due to its smaller display, the iPhone 1-4

has rather less space to offer than the iPhone 5, as a result of which the ad's bottom

40 pixels are cut off. The ad should therefore, as far as possible, be designed in such

a way that the bottom 320 x 40 pixels contain only background colouring and no

relevant information or graphical content such as logos or similar material.

For Retina displays we require the ad with the dimensions 640 x 960 pixels (full

screen) or 640 x 880 pixels (designed to be visible).

iOS - iPhone

24

If you have any further questions, please do not hesitate to contact the SPIEGEL QC

technical department at [email protected].

mailto:[email protected]

WebReader

25

4. WebReader 4.1. General

The WebReader for the digital issues of SPIEGEL, manager magazin and Harvard Business Manager make it possible to read the respective publications in digital form on a tablet, laptop or PC/Mac. For an advertisement, one variant must be provided in both portrait format and landscape format.


The use of click commands or redirects to track the clicks is possible; it must be borne in mind, however, that these may not contain any content, such as timestamps, which are replaced dynamically.


Please note that the material must be delivered at least 12 working days before publication! Due to their association with particular issues, the advertisements must be regarded from a conceptual point of view as print ads rather than online ads. This means that belated delivery might prevent the ad from appearing in the issue that had been booked.


General

Static advertisements for the WebReader are advertisements that consist of an image to which a link can be provided where appropriate.

As a special characteristic, different areas of the image can be given different target URLs. This is realised by means of an HTML image map whose area elements delineate the upper left-hand corner and the lower right-hand corner of a rectangle, behind which the desired link is placed. Only rectangular areas are possible.

Formats




WebReader

26





<head>



</head>

<body>




<area shape="rect" coords="346,524,1004,656" href="http://www.kunde.de" alt="external" />

<area shape="rect" coords="50,550,272,655" href="http://www.kunde.de/sub" alt="external" />

</map>

</body>

</html>



- one image in both portrait and landscape format - one HTML file in both portrait and landscape format, or alternatively a



General

Interactive ads for the WebReader consist of two elements: HTML content for the interactive ad, plus a static fallback image if the magazine is used offline.

The WebReader places the ad's HTML content in a protected environment within the

page. In the process, the HTML content is loaded into an Iframe to prevent any

conflicts between the external JavaScript and the WebReader app. The user can

nevertheless carry on navigating in the magazine with his usual actions (mouse,

touch, keyboard), even if the browser is focused on the Iframe content. To do this,

the "remote kit" must be loaded into the ad by means of JavaScript.

The HTML content is at the user's disposal only if the user is online and it is never

part of a downloaded issue. If the user is offline and is reading material in a saved

magazine, a static image is shown as an alternative to the HTML content.

The two elements described above – interactive HTML content and static fallback images – must be delivered within a container with a structure of the kind shown below:

WebReader

27

The subfolder "transition" contains the fallback image files that have already been described in both landscape and portrait format. The subfolder "ad" must always have two index files – one for the landscape format (index_landscape.html) and one for the portrait format (index_portrait.html). The aforementioned files in the subfolders must be named as shown in the above depiction.

In addition, any further files or subfolders which are part of the HTML page (e.g. images, videos, CSS or JavaScript files) can be created in the subfolder "ad". CSS and JavaScript can be used without any problems; the same applies to the use of JavaScript libraries and frameworks such as jQuery.

Format

HTML content: flexible

Fallback: 1024 x 704 (landscape format), 768 x 960 (portrait format)

If the means of advertising is also supposed to be placed in the digital SPIEGEL's

iPad app, the maximum file size (incl. default and transition images) is 5 MB.

If a placement is made solely in the WebReader, the maximum file size is 30 MB.

Transition images:

File format: JPG Maximum file size: 200 KB per image Programming

The following points must be borne in mind when the HTML pages are being created:

• Embedding of the remote kit:

WebReader

28

As the first element in the <body> of the pages, the following JavaScript must be

integrated so that the WebReader's remote kit is loaded and used:

<script type="text/javascript" src="/reader/remote/remote.nocache.js"></script>

• The user can scale the window freely, which means that the ad should make

flexible use of the width and height of the available space. But a minimum size of 758

x 356 pixels can be assumed.

• The page colour is pure white (#FFFFFF), and if the ad likewise has a white

background, it is integrated in the best possible way into the WebReader's look and

feel.

• The WebReader is used in all modern browsers. The ad must therefore function

faultlessly in at least the following browsers: Safari, Chrome, Firefox, Opera, Internet

Explorer (from Version 7 onwards), MobileSafari on iPad, WebKit on Android.

The remote kit offers the following optional possibilities:

• Centring the ad with a fixed size on the page

For this purpose, the content of the ad page can be encircled with a <div> element

with the ID "center". Example:

<div id="center" style="width: 800px; height: 500px; "> hier kommt der inhalt </div>

• Using actions for the advertisement

If the swipe action is supposed to be used in particular parts of the advertisement

without the WebReader turning the pages further into the next article, the interaction

with the WebReader can be blocked. To do this, the relevant elements are allocated

the CSS class "blind". Interactions with these elements are then not interpreted by

WebReader. In addition to "blind", "blindall" can also be used, in which case the

blocking also applies to all children in the element in question.

Example:

<div class="blindall">

No pages can be turned in this area. Here the advertisement can

carry out great interactions.

</div>

• Navigation in the issue

By effecting a JavaScript function call, the turning of the pages into the next or

previous article can be triggered from the advertisement. Examples:

<a href="#" onclick="SPIEGEL.Remote.previousArticle(); return false; ">klick</a> <a href="#" onclick="SPIEGEL.Remote.nextArticle(); return false; ">klick</a>



WebReader

29

- the HTML container as described above, incl. all of the files required to display the ad, plus the transition images (in both portrait and landscape format).

If you would like to use click commands, please integrate them into your ad before

sending it to us.

Windows8

30

5. Windows 8 5.1. General

The WebReader for the digital issues of SPIEGEL, manager magazin and Harvard Business Manager makes it possible to read the respective publications in digital form on a tablet, laptop or PC/Mac. For an advertisement, one variant must be provided in both portrait format and landscape format.


The use of click commands or redirects to track the clicks is possible; it must be borne in mind, however, that these may not contain any content, such as timestamps, which are replaced dynamically.


Please note that the material must be delivered at least 12 working days before publication! Due to their association with particular issues, the advertisements must be regarded from a conceptual point of view as print ads rather than online ads. This means that belated delivery might prevent the ad from appearing in the issue that had been booked.


General

Static advertisements for the WebReader are advertisements that consist of an image to which a link can be provided where appropriate.

As a special characteristic, different areas of the image can be given different target URLs. This is realised by means of an HTML image map whose area elements delineate the upper left-hand corner and the lower right-hand corner of a rectangle, behind which the desired link is placed. Only reactangular areas are possible.

Formats




Windows8

31





<head>



</head>

<body>




<area shape="rect" coords="346,524,1004,656" href="http://www.kunde.de" alt="external" />

<area shape="rect" coords="50,550,272,655" href="http://www.kunde.de/sub" alt="external" />

</map>

</body>

</html>



- one image in both portrait and landscape format - one HTML file in both portrait and landscape format, or alternatively a



General

Interactive ads for the WebReader consist of two elements: HTML content for the interactive ad, plus a static fallback image if the magazine is used offline.

The WebReader places the ad's HTML content in a protected environment within the

page. In the process, the HTML content is loaded into an Iframe to prevent any

conflicts between the external JavaScript and the WebReader app. The user can

nevertheless carry on navigating in the magazine with his usual actions (mouse,

touch, keyboard), even if the browser is focused on the Iframe content. To do this,

the "remote kit" must be loaded into the ad by means of JavaScript.

The HTML content is at the user's disposal only if the user is online and it is never

part of a downloaded issue. If the user is offline and is reading material in a saved

magazine, a static image is shown as an alternative to the HTML content.

The two elements described above – interactive HTML content and static fallback images – must be delivered within a container with a structure of the kind shown below:

Windows8

32

The subfolder "transition" contains the fallback image files that have already been described in both landscape and portrait format. The subfolder "ad" must always have two index files – one for the landscape format (index_landscape.html) and one for the portrait format (index_portrait.html). The aforementioned files in the subfolders must be named as shown in the above depiction.

In addition, any further files or subfolders which are part of the HTML page (e.g. images, videos, CSS or JavaScript files) can be created in the subfolder "ad". CSS and JavaScript can be used without any problems; the same applies to the use of JavaScript libraries and frameworks such as jQuery.

Format

HTML content: flexible

Fallback: 1024 x 704 (landscape format), 768 x 960 (portrait format)

If the means of advertising is also supposed to be placed in the digital SPIEGEL's

iPad app, the maximum file size (incl. default and transition images) is 5 MB.

If a placement is made solely in the WebReader, the maximum file size is 30 MB.

Transition images:

File format: JPG Maximum file size: 200 KB per image Programming

The following points must be borne in mind when the HTML pages are being created:

• Embedding of the remote kit:

Windows8

33

As the first element in the <body> of the pages, the following JavaScript must be

integrated so that the WebReader's remote kit is loaded and used:

<script type="text/javascript" src="/reader/remote/remote.nocache.js"></script>

• The user can scale the window freely, which means that the ad should make

flexible use of the width and height of the available space. But a minimum size of 758

x 356 pixels can be assumed.

• The page colour is pure white (#FFFFFF), and if the ad likewise has a white

background, it is integrated in the best possible way into the WebReader's look and

feel.

• The WebReader is used in all modern browsers. The ad must therefore function

faultlessly in at least the following browsers: Safari, Chrome, Firefox, Opera, Internet

Explorer (from Version 7 onwards), MobileSafari on iPad, WebKit on Android.

The remote kit offers the following optional possibilities:

• Centring the ad with a fixed size on the page

For this purpose, the content of the ad page can be encircled with a <div> element

with the ID "center". Example:

<div id="center" style="width: 800px; height: 500px; "> hier kommt der inhalt </div>

• Using actions for the advertisement

If the swipe action is supposed to be used in particular parts of the advertisement

without the WebReader turning the pages further into the next article, the interaction

with the WebReader can be blocked. To do this, the relevant elements are allocated

the CSS class "blind". Interactions with these elements are then not interpreted by

WebReader. In addition to "blind", "blindall" can also be used, in which case the

blocking also applies to all children in the element in question.

Example:

<div class="blindall">

No pages can be turned in this area. Here the advertisement can

carry out great interactions.

</div>

• Navigation in the issue

By effecting a JavaScript function call, the turning of the pages into the next or

previous article can be triggered from the advertisement. Examples:

<a href="#" onclick="SPIEGEL.Remote.previousArticle(); return false; ">klick</a> <a href="#" onclick="SPIEGEL.Remote.nextArticle(); return false; ">klick</a>



Windows8

34

- the HTML container as described above, incl. all of the files required to display the ad, plus the transition images (in both portrait and landscape format).

If you would like to use click commands, please integrate them into your ad before

sending it to us.

Windows8

35

Specification for digital editions DER SPIEGEL...

Documents

Transcript of Specification for digital editions DER SPIEGEL...