Digital Magazine Web App - Sample Issue #1

Digital Magazine WebApp - Sample Issue #1

Cover Image Photo Credit: Anu-Liisa Varis

EDITORIAL BOARD

Editor-In-Chief

Jane Doe

Editors

Bob Johnson

Mary Sue Parker

Contribitors

Geoff Peterson, Tom Warner, Jon Elm, James Vargas, Emily Thompson

Consultants

Beth Marx, Jeremy Steele

Art Director

Ellen Peabody

Web Design

Jenny Spooner

Photography

Stan Gleeson, Joan Sutherland, Fred McMurray

Publishing

Ryuzine Digital Magazine WebApp

Story Submissions

E-mail Karl.Carlson@ sample.mag

Mailing Address

123 Any Street, Suite 500

Anytown, ZO 8765309

Ryuzine Sample Magazine (http://www.ryumaru.com/ryuzine/samplemag.htm)

This sample magazine is a template created to demonstrate how to translate a magazine-style layout into the Ryuzine WebApp format and show the versatility of the format. The theme is “fantasy” but you are free to use this template as a framework for your own publications by swapping out the logos, images, and text with your own. All the images used are “royalty free” but may have other usage restrictions. All images can be found at StockXchange (http://www.sxc.hu/)

Editorial

Editorial on Something

The two most challenging aspects of adapting a magazine style layout to the Ryuzine format are considering how your text will flow when linearized for phone view in a single column and how you will resize or swap out images for various screen sizes.

You will generally need images scaled for phone (small), tablets (medium) - possibly in both portrait and landscape - and then for desktop (large) and large-format (x-large). Though the (large) images used in the Desktop two-page spreads can usually also be used for Tablet portrait view, and most phone (small) images can be used for both portrait and landscape on phones - so it's not as many images as you may think.

Start with the largest version of your images and then use a program like Photoshop, Fireworks, or GIMP to scale them down to the other sizes.

Min pediae lam, esequi officatatur, que pro occaboribus aut pere ped minvenempel ium ea quis dolesedit utectus iusam dolorer sperum etus, quiaectur, con nossum utem quam, enderum et re repero volor re everovit omnim et que voluptat duci berspe dolupta tiberum fuga.

Tur autempo repudandem ipsaperum volorero tet quati disquo coratio que il et, ut odi cum suntia consequi unt fugitae odis etureri onsero blacest dolorrum qui ipsam lam asperuptaqui anda dolupta dolupta nobis dia saerum quidita verionsequo que et eici temporrovita ventiae sit repro earum aut qui dis doluptatur re plisi ute ressiti atemolu ptatur autesequis rem nis dis dolorpos exceriae eatur maio volupta eprorepro culla dit pel enihil mo exceptas essit ommodi.

Jane Doe
Editor In Chief
Sample Magazine.

Photo by Pop Catalin

Feature Story

Something about this story to get readers interested enough to actually read it.

One cus es sam, sinum iumque net as eum eum aut lam, simagnia atiis pore volestotat.

Itatur se nihil intiaes ressi aut pora doloreh endistion percien tioressint hilitem quo int que milles ate consequis molore odipsa vel esequi odi cum eiciat harunt ani dolupta tionem que venis aliqui consed quatur alitiam nost, eos que nobit laborum hillupta parchil laborae ea acepudis dolo inctem et odit dolore volest, id et inciet at at utent adipsan dantiatquis repratur molo tet fuga. Et iuntia inctes siminis ant esciist ibeatem venem expla cuptat il ex eataqui busam, sint unt, aut fuga. Picit pore exerissectem ius exces dolectiost od quideli gnatia sint qui velestesti dolupta quatur, unti debitis ex

eos ullaccum que omnis voluptatur aut arum qui ut faccusandi blaborem aut fugitinctas autem ea doluptatem ullicia consedita nonsequati coria sinissit dolo iureperio molut que prectes dolorepudis voloreic tem is nem que nonem que corrum ressimporum aut ariaessimus maximporum qui re num ium res re con nitatus re ni berumquo ipsae et autem cusdae dis aute nonse quodi ommodis.

Itatur se nihil intiaes ressi aut pora doloreh endistion percien tioressint hilitem quo int que milles ate consequis molore odipsa vel esequi odi cum eiciat harunt ani dolupta tionem que venis aliqui consed quatur alitiam nost, eos que nobit laborum hillupta parchil laborae ea acepudis dolo inctem et odit dolore volest, id et inciet at at utent adipsan dantiatquis repratur molo tet fuga. Et iuntia inctes siminis ant esciist ibeatem venem expla cuptat il ex eataqui busam, sint unt, aut fuga. Picit pore exerissectem ius exces dolectiost od quideli gnatia sint qui velestesti dolupta quatur, unti debitis ex

Photo by Rafal Swidzinski

Photo by Joke Van Zomeren

Links within a magazine also need to be coded so they can trigger the javascript "flipTo()" function or they won't work. There are two ways to do this. First you simply put your link in a standard <a> tag with the normal anchor link and then add the javascript "ontouchend" and "onmouseup" triggers like this:

This sort of link will also work if the reader has javascript and CSS disabled, however in a web browser clicking some links will temporarily reposition the entire magazine to the top of the browser window while it is going to the target page (if the magazine is centered vertically in the window, that is, if it is already positioned at the top of the window you won't notice any movement).

To avoid the temporary repositioning of the magazine to the top of the page you need to set the anchor target to just "#" (omit the anchor name). However, when you do this the link will no longer work if the web application scripts and stylesheets are disabled! That means your magazine will no longer be accessible to screen readers or other browsers for people with disabilities that typically do not use the javascripts and stylesheets. If you code your in-page links this way you should really provide an alternative accessible version of your content for your readers who require it.

Tem am volorecus cus alit que praesectota perunt verum et officto il maximint, qui dolupta turessi dolor rest es as et fuga. Sim volorera volupta tatqui iducia quat quias atiur sequo debit et abor andis autaeriberum qui cullesecae od ut remo optur, sequi ut eat dolor aut eaturia spedignihil

The link below is coded without an anchor target and will not cause the temporary repositioning issue, but is also will not work if javascript is disabled. If you are viewing this example in some mobile devices or if the page is filling the view to the top of the browser, however, you may not see any temporary movement at all with the prior example anyway.

Continued on p10

Photo by Billy Alexander

Article Title

Lead-in to article to get you interested enough to keep reading. . .

Photo by J-C-M

Bibusa nobitiis re voloreped qui que et et quaeperi quid magnatu saperep tatempedio qui asimenimaio idus vel ium eaque repe voluptaquas dolecabo. Nequodition cum exceatis as estio. Et aliquunt am sit et, net prae maio. Ut et aliti de doluptio. Ut qui verias ad quidictius de provition nonsedi odior aut im qui dolum culless equamus aut omnimpo ssimusa doluptis et qui dolorer feribus et lam res magnati iscillu ptatempora nosa quunt molore ipsandis eaqui volorep tatiniam quid ma num fuga. Et qui autemped que doloriatur recus cus et mil ius magnim que quas perrovi ducimus.

Natem alitem incipsum quis niendeb issene nectem laut iumendi squaspe omnitiis alique dolo dolore sit quiam dolorum ditaecae. Bearita temque esecatqui dolorendunt voluptatinus nitam sim veri sum aperferum quis repudis endicto maximus apitiss incipsam, to dolorporupta comnis repella niendianis et as volorio con etur?Apis re voluptati atibus, odisimagnime inctatustem. Et eles moluptatem facium eaquaep taest, ex et estempera quosapellore labor magnatur aut faciis eiuntionsed ma dolupta temoluptat et, officab orupta de porrum rera venda volor mo estis etur?

Etur rat a nulparum qui accus unt ratio voloreicium utem harum, ommos magnis evelita tiisint, qui voloriassunt re voloratur? Dus, que officatia dit et

Omnis ad ut aboriam volessim cuptatur? Quidita ssuntio dolorest, ipis si cone lam eatiam nis et vel ilique corestio. Itatur? Quidemposto est omniam cum eliciis resci diant et

Photo by Kgreggain

Full page background image with bleed is done easily with CSS applied to the individual page element, but you will need different sized images for different sized screens to allow it to adapt.

For Continuous View you'll need to next the content inside another DIV box that can be styled to a specific height or the page will only be as high as whatever content it contains (it is given class="bleed" in this sample, so for this page you would target it with #page6 .bleed {height:576px};

Photo credit Raffer79

Crossover Images!

Photo by Gilderm

Crossover Images are a little more complicated to set up if they aren't simple page backgrounds. As you can see the images can spill out of the "live" area block when, as in this example the photos and headlines are "position: absolute;". The ".col2" element has a "margin-top" equal to the height of the image so the text starts displaying below it.

Icabore stistru mquibust, sitatis minis est, omnieni dus ad mod molore pelenih iliquun temperiorro et eicimporum faccatur arum ressequaes explabo. Et ra nectemo lorporibus mi, omnienis rentia nienda cuptatur? Arum es dolores tiatis reperatus ea invenihillit evento et quatentiis rem rerro omnisci psusciure consendel invendunt volor aligenda comnis in re, ommolorere, quia volorrores res sinus et es vollenihil id quasiti offic tem qui sus perspedit mincim fugia qui in enet et lacerch itinciur? Qui corio estiur?

Tatum quibusaped quas volorum velia qui odi con nos mod eatet ommodit arumeniam laut pa poressus, occus dis ne volo qui totate voluptas audi cus alisit aut voluptatum aut repe eaque perspici undundi aciunt expligent doloribusae con cullita quae ea eum inis nulparum cusdani enditia dem fugitas ipsae volupta quiamet vel inctur?

Facerum vellum digent placcae parunde lluptaque eum quis mo volenda volupta tesciunt harumquis volupta sapit accupis dolendus dolupidel id molupti usdaecabo. Dolorro temporehenti voloris tinctur ma quam, si cupta dolupta quaepud iciunt quiam, is nonsectur? Quibus mi, simporae et laborrum nectam eaque dolupta tectatem facidem porestio eatur?

Natum ad quisitibus dolenim voluptis earum simos et velicia eperumquas dest quisciet omnit optat eossitatet repel et quo blaboreictet occabore voloritiunt idus eume paruntius assinis exero cum inctotat.

Igendip sandit ea sed quam que pelecat ex explici dessite vellacest autemquatis aciendes doluptam, nobis aliquat que non coreribus moluptat ad ulleceped quis derum et veligendis alit volorisseque occae nonsed qui as ut facea quunto cum re nimolup taepudae explabo. Catin reperum si cusdandi blaborum velest est, offic tenienis ipsaecusdae volupta sequi ditiunt eat adipidebita et elicien ihillan delecta sitibus et et volore vid excessedit volorporem ad estionserae vollabore volupta sitinciis moluptas derferi rectur aut re cones ut est que voluptaquo bea cone simaximusa et ipsaper chiciuscita de nemolorerum nobis doluptatquis

“As you can see, it’s easy to really emulate the magazine reading experience with crossover images too!”
- Pull Quote

Tatum quibusaped quas volorum velia qui odi con nos mod eatet ommodit arumeniam laut pa poressus, occus dis ne volo qui totate voluptas audi cus alisit aut voluptatum aut repe eaque perspici undundi aciunt expligent doloribusae con cullita quae ea eum inis nulparum cusdani enditia dem fugitas ipsae volupta quiamet vel inctur?

Facerum vellum digent placcae parunde lluptaque eum quis mo volenda volupta tesciunt harumquis volupta sapit accupis dolendus dolupidel id molupti usdaecabo. Dolorro temporehenti voloris tinctur ma quam, si cupta dolupta quaepud iciunt quiam, is nonsectur? Quibus mi, simporae et laborrum nectam eaque dolupta tectatem facidem porestio eatur?

Natum ad quisitibus dolenim voluptis earum simos et velicia eperumquas dest quisciet omnit optat eossitatet repel et quo blaboreictet occabore voloritiunt idus eume paruntius assinis exero cum inctotat.

Igendip sandit ea sed quam que pelecat ex explici dessite vellacest autemquatis aciendes doluptam, nobis aliquat que non coreribus moluptat ad ulleceped quis derum et veligendis alit volorisseque occae nonsed qui as ut facea quunto cum re nimolup taepudae explabo. Catin reperum si cusdandi blaborum velest est, offic tenienis ipsaecusdae volupta sequi ditiunt eat adipidebita et elicien ihillan delecta sitibus et et volore vid excessedit volorporem ad estionserae vollabore volupta sitinciis moluptas derferi rectur aut re cones ut est que voluptaquo bea cone simaximusa et ipsaper chiciuscita de nemolorerum nobis doluptatquis

Regular Column

Byline Name Namerson

Photo by Dany Sabadini

Xim quid quam, ommodi des aut quid modiore, sequas et a niate reperum ea plaboritiis pa ent duci cuptas et faccupta volum quae sinum restia pratur alitae pel exceriatus earchit quo eatioss equae. Optibus eaqui abo. Um aut odit, od quam rae is sapid unto offictatatus estiam quis ipis accab ipsum, sit a venimet quiberum fugia nonse exerias peditatem nobis esciissunt.

Enderum, ut iundiam eossit aspis eum ea consequ iatur, sitati quam aut autam faccaboriae quae quaestio. Nam, cone laborro resequunt pa volore verum as autem. Net, sinvenist, seribus sus exernatum faccus doluptis perum qui doloresequi nullaut laborru mquidus ene quiatur am corerferro vercid quost voluptas a volorumqui offic tem hario dolumqui cullo omni odi que sum la coneseque sitios serci comnihil maioresseque nem vella doluptisi rent fuga. Luptas doluptae pelique eatium adit, officiendae sectem conseris simusanis res post, saepudis eaque maximpe necerae pora voluptatiunt plitis quas derum suntemp oreium es autemque aut de num architat.

Nobis doluptam facearchici doluptat labor moditaspist, quia deriones et id mint landit, untem dolendu cienimp osseque volorep erovidus remquam qui dolupta quod qui occabor mint re conecta spitati buscias aditium ulparcimusam quos volorum es auta dolenda eceperepel inctasi moluptat eniatem ut liti doluptust is eiur, utem rempelest, volor sitas accusan derionseque opti verum que pe omnis ea volore con pelectem ute rem aceperit faccus quas minctatas et quia volut ullab iumquo estrum quistibus, voluptam evenihi liatiniscium alitae di idici voluptatem qui natectu rersperitat officit aturece atatet fugit intiate mperro ma nossunt volupta turibus sit, cusam esciamet voloria nimusci psaped que milluptas sita doluptiamus es alic toriosa ndiaspi endandi caborepe laboriorro con perio maximustia am aligendit volupti optatqui sae. Nam harum dolectur, conseni scilitae is es etur, corrum alis et acestib eaquiamus reribus, suntios doluptae. Nam re, optatur aliquas sum et aut molorem volore prae.

Photo by Shinjaejun

Continued from p4

Even though web pages are infinitely long you can still continue an article on a later page to draw readers in to other articles and to make sure they see advertising blocks.

Placing ads in a page is also pretty easy, and they can be adjusted by the stylesheet. If the ads are in a two-column layout you'll want to set them to 100% width so they'll always fit correctly, then make sure you set it back to "auto" in the "continuous.css" and "plain.css" files or the ads will be gigantic! Note that in a two-column layout you have little control over how text and images will actually flow inside the columns (CSS3 Columns aren't quite fully baked standards yet).

“Pull-Quotes are pretty easy to do too, just like in a real magazine!”

Duciis re occae niet labora audi antio totatis atur aspid earundi idene pre est exceat rem fugiam, tem eture veliquame et quos es alition nulparum harchillabo. Et et idero molorem re sint, omnimin por sapis asitis paruptat fugitatiam, omnimus et ipsum, que cus eum qui simi, sed everupta endesci doles miligenditas perepe ea sed qui od qui audae dolorpor simolor roritiunt harcia et molores tiunt.

Ibusame pro te modit odipsaperspe naturem que nonsequ atquiat emoluptatem ut dentiusam, alia

Duciis re occae niet labora audi antio totatis atur aspid earundi idene pre est exceat rem fugiam, tem eture veliquame et quos es alition nulparum harchillabo. Et et idero molorem re sint, omnimin por sapis asitis paruptat fugitatiam, omnimus et ipsum, que cus eum qui simi, sed everupta endesci doles miligenditas perepe ea sed qui od qui audae dolorpor simolor roritiunt harcia et molores tiunt.

Because of the lack of precise control over CSS3 two-column conntent flow you will no doubt end up with pages that have unused space. Remember this is not print media, the text is user adjustable.

If you only code regular <a> tags the ads can't be clicked on touch interface devices (which prevents accidental clicking). If you want an ad to be clickable on touch devices you need to also code into the link: ontouchend="this.href='http://www.site.com';"

Regular Column

Byline Name Namerson

Lut rem reriti to mosam, ullabo. Ut escil in natem nis que parum ea nos

Xim quid quam, ommodi des aut quid modiore, sequas et a niate reperum ea plaboritiis pa ent duci cuptas et faccupta volum quae sinum restia pratur alitae pel exceriatus earchit quo eatioss equae. Optibus eaqui abo. Um aut odit, od quam rae is sapid unto offictatatus estiam quis ipis accab ipsum, sit a venimet quiberum fugia nonse exerias peditatem nobis esciissunt.

Enderum, ut iundiam eossit aspis eum ea consequ iatur, sitati quam aut autam faccaboriae quae quaestio. Nam, cone laborro resequunt pa volore verum as autem. Net, sinvenist, seribus sus exernatum faccus doluptis perum qui d

Photo by Stefano Barni

Photo by Scott Snyder

ene quiatur am corerferro vercid quost voluptas a volorumqui offic tem hario dolumqui cullo omni odi que sum la coneseque sitios serci comnihil maioresseque nem vella doluptisi rent fuga. Luptas doluptae pelique eatium adit, officiendae sectem conseris

Lut rem reriti to mosam, ullabo. Ut escil in natem nis que parum ea nos maiorrum alitasiminum alis exerundia nia coreper eperiae poreictias as ni?

Commentary

Byline Name Namerson

Photo by Leroy Skalstad

Lead-in to article to get you interested enough to keep reading. . .

Cipiene ped ut et, quas unt laborisquos eseque pre ne et lab ipitate mo dunt pererro core ea voluptio beaquiducid quiberu pturem que num vit, tet faccupta et et odit officature pra pos dem quid eum qui consed que ni ulparit quia ped quae. Optati alitate mporias natusam nati ommodis adiciusciis expere rerfere pudantus conseque omnis eum di

Duciis re occae niet labora audi antio totatis atur aspid earundi idene pre est exceat rem fugiam, tem eture veliquame et quos es alition nulparum harchillabo. Et et idero molorem re sint, omnimin por sapis asitis paruptat fugitatiam, omnimus et ipsum, que cus eum qui simi, sed everupta endesci doles miligenditas perepe ea sed qui od qui audae dolorpor simolor roritiunt harcia et molores tiunt.

Ibusame pro te modit odipsaperspe naturem que nonsequ atquiat emoluptatem ut dentiusam, aliaDissimus antores tibusanimo quiaepe llestio quidunt venihit que molor rerori non ra vid erit od et, sum que pa nonsenit undestia di con et, consectiis ex eos alis ad quos dolori utat rectem ilit, cone poriasp eruptae. Pora culparum quae. Loressunt, arum volupis asit aped quuntem quatus.

Aperum, il eum quam, omnimet laut quam quat pelitati cum nobitationse volore aut magnis dolorest lab ius as dolecab ipsamus ex eos inctotatquam veria sectur molorporro qui comnim re solo quae solorum facearcium qui odit vel et pella iliandam, alitece sequata simporibeati consecae volorendi inisime quiderest restia estiate ommo estiis net acest, omnimil ma poritis molorem libus dolupta inverum ipsusam, seque eniende molupta ssimendae. At pe re, ut quam ne lic tem que

The Last Word

Illustration by Anu-Liisa Varis

Parum velest volor reped molupti nus res sum quistrum estium quis dolente omnimol uptate si dolor mi, ut harchit verenem sunt, verias comnis sequam aut harum re doluptatium ame occus.

Unt, utationseces ratempos apiducipit et aut autempos esti temodi rae porem et quis eost dolore cuptasimi, qui ratesti nes doluptatquis nobis aliquia volestr umquam quat.

Menda sitatur? Aqui dolorepudit, is es alitecus.

Mintionem aliquis nos aute simpero doluptatum ant mintius minturion et esequis estrum quat pedis mod maximil maio cusae pellores quam, suntorem expernatis aceatem odiossit eatia prehenienime nis ad modi corrovid moluptatus ut hit molore restinciis pre id magnam, omnimag niminctatem. Acepudit moluptissum et lit ipsum dolum quis mo odipsa nate re la quam quati nimporporem. Videst alitat.

Am et reheni commolum dolentio con conse volo di dus iliquaeped quid eaquuntus sum quia et volorem rerum sitem et verro idia quaspelest volor ratem reped quatione venditatis sectempedis cus volupti doluptum, culpa invendi aliam est, ommolor erspis ipis nos rae cum at autam volorpor sit esciet optat.

Alicias mi, sit odi optatestrum nonsedi conse et abo. Nequi andae plibus.

FULL PAGE VIDEO GAME AD

Game shown here is FreeDoom, an open source First Person Shooter.

Totatis atur aspid earundi idene pre est exceat rem fugiam, tem eture veliquame et quos es alition nulparum harchillabo. Et et idero molorem re sint, omnimin por sapis asitis paruptat fugitatiam, omnimus et ipsum, que cus eum qui simi, sed everupta endesci doles miligenditas perepe ea sed qui od qui audae dolorpor simolor roritiunt harcia et molores tiunt.

Emoluptatem ut dentiusam, alia

Illustration by Chris Whiteside

Cover

Publication Info

Editorial

Editorial

Feature Story

Section

Article

Article Title

More Article

Part 1

Part 2

Columnist

Regular Column

Ad Page

Ad Page

Article

Regular Column

Commentary

Commentary

End Piece

Back Cover

FULL PAGE VIDEO GAME AD

Cover

Publication Info

Editorial

Feature Story

Section

Article

More Article

Part 1

Part 2

Columnist

Ad Page

Ad Page

Article

Commentary

End Piece

Back Cover

User Help

Fonts

Table of Contents

Other Views

Options

Appendix: Gallery