Iodinated seafood party together ignoring the scale

It’s half past three in the morning and I write this post while the book about use of iodized salt in bakery is printed. Infographics and tables I wrote about couple of weeks ago (Infographics Howto: Iodide! Iodate!) were used on the pages of this book. Some of them changed a bit, others changed a lot after discussions and specifications of charts targeting. Furthermore there happened to be two books not one as it was expected at the beginning. The second one is thinner about use of iodized salt in Denmark. I’ll write about changed charts at first and then I’ll describe the books makeup process.

Infographics

Some graphs wished to stay on certain places on the pages of the book so it would be easier to read them. Other graphs were disturbed with the fact they can visualize more information they visualized in the prior editions. More graphs just wanted to be even more handsome.

Culinary treatment impact on iodine contents in seafood (Fig. 1, page 8)

Usage of iodinated additives to impact iodine concentration in bakery (Fig. 2, page 23)

Captions on this graph were moved below so they won’t mess with the figure caption.

Impact of iodized salts on dough smearing (Fig. 3, page 30)

The long way I made selecting and composing the appearance of bars ended with simple solution. Though it looks obvious all prior steps were needed not just for this graph but also for other charts with bars in this books, including the first one described above.

Impact of iodized salts on gasification ability of the flour (Fig. 4, page 31)

As long as numbers are too close that would be to impossible with just scaling them to feet the page width. That’s why the bars have the parallel similar parts withdrawn so the difference is shown zoomed in. The skipped parts are properly marked.

Growth of the diameter with the lapse of time (Fig. 6, page 33; Fig. 7, page. 34; Fig. 9, page 36)

All three charts visualizing the growth of the diameters of colonies and mycelium with the lapse of time changed too. They now look less avant-garde while colour coding and captions are now more readable and obvious. I would send the prior edition to biennale while letting the second to find its mission in book.

Layout

Finished book in Russian is available for download in PDF (1,5 Mb). It is also available in miniature:

I start with the statement I was in a horrible rush and even though I tried my best to work on every line I’ve must have skipped something. I understand it’s not ok but I’ll try to live with that. I was in a lack of about a week and about a box of Portuguese vino verde ;)

I have a thing and a pony who helped me. Pony is bo, who edited the whole text way more readable than it was in source. The book is ‘Manual for Publisher and Author’ by Milchin and Chelcova.

Everything started with the grid which was then implemented in second book too.

Grid is flexible enough to work for one and two column layout (mouse over spreads to see the grid for them)

Grid works for one column layout with wide external margin and two column layout with equal margins. Two column layout is used particularly for appendix which is the separate document to show it is not part of the book text while it is part of the whole book.

Graphs and tables in both layouts are wider than text part. That makes reading more dynamic and pleasant. They are also placed after the text they illustrate to make reading more straightforward and one-directional.

Some tables were rotated 90° to make them more readable. The contents of table cells was aligned the way it would be easier to compare the data.

(Table 3, page 27)

I removed some obvious column headings to minimize redundant information.

There seemed to be a problem when I started working with appendix. As appendix is a separate document it has the separate page numbering. I spent and hour and a half to force Indesign to make it automatically but hand to place page numbers by hand ;) Appendix page numbering is placed on top of every page aligned to external edge.

Hint for Mac OS X users: you can use default application called Grapher (Applications › Utilities) to format mathematical formulas. After the formula is edited in Grapher copy it to the clipboard and paste as PDF to any application that supports that.

After I was to tired to even look at the book I made I started the creation of table of contents. As I worked with Indesign styles it was easy to compose TOC in couple of clicks but I wanted to use the whole spread and make something more creative.

I finished with way more traditional TOC so readers won’t be distracted starting from the third page.

The same decoration was used for appendix table of contents.

‘Dutch’ Book

This book in Ukrainian is also available for download (PDF, 706 Kb) and can be the fist for the eyes in miniature

The main problem with this book was insufficient number of pages that’s why one column is stretched on two column width. The tables don’t hang wasn’t so expressive but still dynamic.

Though the tables were more readable then in first book I still had to edit them.

(Table 3, page 10)

I united age groups with colour, made the left column more readable and changed the header so the table was easier to use.

It was a pity I had no source of the chart so I had to work with what I’ve got. To place make it more appealing and fit it into the layout.

(Chart 1, page 11)

I retrieved chart from PDF, made bars width equal and added marks on the left so the reader could estimate data concentration.

(Table 4, page 11)

One more long table was separated in two columns and it’s subheading was contrasted. Changes made table more readable and thus easy to use.

***

I saved all the fils, sent them to publisher and didn’t look at them for a couple of days. And now, when I am not sick looking at them, at three thirty in the morning I finalized the story of book creation. Pretty, usable and readable book made out of not so clear for the reader sources.

Iodine Makes Me Clever tshirt print (dribbbbbbbble edition)

It looks like I am absolutely out of time and won’t be able to translate this post into english for a long time. So let’s consider pictures really worth a thousand words and enjoy the examples of the charts and graphs I made for the book about use of iodized salt in bakery.

(Info)graphics

I made a long way searching for the visualization of dough smearing

I had to rotate almost every table in the book 90° so it would be readable. People who made them didn’t understand how data in cells is compared.

***

The tables and charts are in Russian and there is almost no text but don’t get sad, post in English about how the whole book was is here:

Iodide! Iodate! — 2
Data Visualization on Stream and Books Layout Explained

Me wearing tshirt (photo taken with coffee mug, the quality is adequate)

I’ve suddenly won a tshirt from vitamins. The print is Marylin formed with sliced fruits. The quality of the tshirt with 100% polyester outside and 100% cotton inside is perfect. The quality of the print is good too.

Thanking the tshirt I’d like to give the vitamins a good advice. If you want your tshirt to be worn elsewhere home: to the Toshoshop birtgday, to the night club or even to the vacation in Lisbon, then avoid placing the huge logo right in front. Especially try to avoid such things if the logo isn’t integrated into the print. There are a bunch of places to place the logo: gently on a sleeve, endearingly on the back side under the collar, comfortably at the bottom in front but closer to the seam. Having tshirt with logo placed that way I could answer my friends’ enviously admiring questions: “Where did I get this tshirt from? I’ve won it from Vitrum vitamins!

***

By the way there is no logo on a tshirt on
Кстати, на странице Vitrum facebook page.

Safari decided this morning is the morning to stop communicating with me. That was the reason I launched Google Chrome and decided to make it my default browser. As usually I clicked Chrome › Preferences… in menu bar and was surprised nothing happened. I clicked that path again — nothing! The reason was Google Chrome stopped opening settings window because it opens settings in separate tab right where you browse the sites.

Yet again Google created something unusable with awful UX. They do it every time so precise I even start thinking they have a special department that specializes on bad UX. Apple made their HIG specially for such clumsy developers and listed there all aspects of creating forms, buttons etc. Thanks to that relative unification Mac OS X users experience relief when working with Mac OS X applications. Even Opera that made Opera browser slightly wide of the HIG didn’t ruin preferences UX much.

Settings

That is how Preferences windows Looks in Safari and about every application in Mac OS X

And this is how Preferences look in Google Chrome

Unusual Chrome mess may seem usable to one but that one might never experienced Mac OS X and didn’t get used to its apps interfaces and Preferences windows. This Chrom settings tab looks alien and unusual. Pay attention to the text fields that are way too long and resize with window resize.

Instead of separating setting in different tabs in dependence of their functionality as it is done in other browsers

almost all settings in Chrome are collected under mysterious ‘Under the Hood’ section and look like mixed this and that.

Appearance

Comparing with Safari’s Preferences window and system wide pop-up (sample texts font changes with selection in pop-up)

Chrome’s realization doesn’t look so good. When one clicks button to change a font size he gets a layer that overlays other settings and looks like that (I had to change its height because there were about 500-600 pixels of plain white space at the bottom)

Search

Google is the search monster. Google tries to use search everywhere it is possible and in a couple of places it is impossible. Even the most unusable I ever met History in Chrome is based on search. Noticing Search option in settings tab I thought that it would finally prove me that there is something good in all that preferences change. Naїve me! Let’s skip the part that if your application’s settings need search field then your application is either Microsoft Word, or is too complicated. Instead of using simple and sweet mechanism of highlighting search results in Preferences windows

Google made their awkward unusable move.

While the search is not syntactic but semantic there is still not much use of it when highlights block GUI elements and descriptions especially.

***

Google Chrome has autoupdate feature on and no way to turn it off. That is the reason I got this update of functionality and visual part without even prompt or warning. This is the invisible part of UX that matters.

Please excuse the photo quality because it was taken with some Android HTC phone first generation iPhone

As you may know I’ve broken the glass on my iPhone 4 16Gb that was bought in Great Britain and was never locked. After that it was replaced with brand new front glass and I broke the back glass. So the back part of my iPhone now looks pretty much like decorated with stained glass and doesn’t cut the user because it’s very cool glass that looks quite stylish. As the glass was broken by me one can be sure it is designer’s edition of iPhone. As opposed to other designers I’ll sell my edition much cheaper than iPhone 4 costs here in Kiev (even if you decide to replace the back glass the final price would be still lower than used iPhone). You are welcome to contact me on this matter.

And if you still vague if the back glass is so important here is a story for you I wrote this winter. Thanks to it you would be as sure as I am that iPhone is not just about the back glass but more about user experience and being and iPhone.

Yet another story about every detail that matters

It’s cold in here, must be winter — paraphrasing pick up joke. I wear gloves already because I like wearing them and I don’t like to have cold hands. This morning I was in a hurry going down the street and listening music using default headphones attached to my iPhone 4. In a rush I was in I felt an overwhelming need yo know what time it was. As I wear no watches because I have clock in a phone the first impulse was to take the phone out of the pocket, slow down and look at it. Not the sort of things you do in a rush. Almost not thinking about what I was doing I just squeezed mic on default headphones wire to turn on voice dial and yelled angrily: ‘What time is it?’ in Russian Realizing what I was doing while asking the phone I expected ‘i don’t understand what you are asking better luck next time’ tone but was surprised to hear ‘The time is ten hours twenty four minutes’. The reply was in Russian too. Know what? That just brightened my morning!

I don’t know if other phones have this option but know I expect my phone to answer any question I have. I’ll start with: What’s the answer to the question of life the universe and everything?

***

I am not joking, my iPhone 4 is for sale. Please email or leave a comment below. Thank you ;)

Part of google.com screenshot with almost seamless but existing video background colour difference

As it’s John Lennon’s birthday today (actually Google failed even on that, announcing Lennon’s birthday on 8th of October), Google made a perfect animated logo dedicated to it. Check it on google.com in not so obvious way — you have to click the logo you’ve never clicked before and never new it was active. But Google is always Google — nothing can be done really perfect. Was it really so hard to make the background of video the same as the background of the whole page? Pay more attention to details already, you’re not beta startup for years!

For all those, who think that it’s the YouTube’s way of creating problems I want to remind that YouTube is Google’s. So even if the owner of the service can’t make the service stop ruining videos, what should ordinary users do?

Not so long ago me and my fellow antique, travel and glamour photographer from Minsk started a project called Walkyrie. Time passed by and here we are with helveticized vintage photo number 100. One-wow-hundred. It’s not just some kind of milestone or a reason to have some champagne but also some kind of a birthday.

As we are going to print the catalogue of walkyries in the nearest future but not today and we wanted with all two of our hearts to do something special to celebrate we’re 100 walkyries high, we decided to create the thing we’ve never saw before — ebook stuffed with artistic material like any printed design or art catalogue. The format chosen was ePub. You can read it with reader on your mobile device or computer. There are two versions of album (every is about 15 Mbytes): Walkyrie × 100 which should work with any and every reader and the iBooks special edition Walkyrie × 100 Interactive. You can always find links to both versions on walkyrie.org. I recommend to download interactive version if you’re using iBooks on your iPhone, iPod or iPad. Here is a tip how to add ePub to iBooks from Apple. And while the file is downloading let me tell you how it was creating the interactive art catalogue.

Why so interactive?

The idea of creating interactive ePub that can be viewed with default applications on idevices captured my mind long ago but I didn’t pay much attention to it. One day Ameagari asked in his twitter if anyone saw an interactive ePub. I didn’t and didn’t find any true interactiveness on the web. So I made one now ;)

It wasn’t so easy

My friend got a special t-shirt from NYC with lettering ‘fuck rude people, fuck subways, fuck rain, fuck high prices…’ and so on. I can make such t-shirt after creating and testing Walkyrie × 100 Interactive for iBooks. The words except ‘fuck’ would be ‘webkit’, ‘z-index’, ‘font-family’, ‘jquery, ‘iBooks’ etc. I’ll tell you why.

The interactivity of our artistic album is in the ways you browse it and get information. You can use it as an ordinary ebook but you can also click the circle (SVG image to look good on every screen resolution) and get a walkyrie fortune — random of 100 pages with pictures. It’s like fortune cookie.

Another interactive future is the ability to see the transcript if you can’t read it on the image.

Both things are nothing special but we didn’t want any more. May be in the next version ;)

Interactiveness doesn’t work almost anywhere except iBooks and even iBooks are not so good with it. You have almost no control on font choice, size and text align. You can’t control z-index (overlapping of elements) without tricks. You can’t control items layout some times (I had to use bloody tables, back to 2002). You can’t control if items will fit one page or more. The known bug is that sometimes, when one is leafing the catalogue backwards in iBooks on iPhone and then one does it the normal way blank pages may appear but not on the regular basis. Remember the t-shirt?

Tips

I think some of my beloved readers and you, the pretty girl from Korea, who googled this page, will find the following information interesting. There would be just lines of technical info so everyone not interested can skip to the next chapter.

Any ePub file is the zipped collection of some stuff and .xhtml’s with CSS, Javascript and other stuff you need on the pages like images. I made ePubs using Sigil for two reasons. First is it has perfect name that suits my needs and magic. Second is it works and has version for Mac OS X. Also it’s opensource if that matters for you. The shortened structure of the book in unusable and hard to edit tree view (hello, opensource) is below.

To work with elements I used jQuery. To react to touches I used this code:

1. $('#transcript').bind('touchstart', function(e){
2. …
3. });

To hack the issue with z-index (iBooks just acts if it was Internet Explorer 3 to it) I had to call webkit for help:

1. var tra=$('.help').height()+30;
2. $('.help').css('-webkit-transform','translateY(-'+tra+'px)');

That’s all nothing more interesting there. I think everyone interested is capable with embeddin SVG image with all that Midxmidymaxymidy ;)

Read don’t interact

All the readers I tested on touch devices aren’t capable with interactivity you can provide in book. They don’t expect you to interact with the book as they have to provide you interaction with the application. So when you have an interactive area on any page of you ebook and user taps it it’s quite not obvious if he expects it to interact (as he may be not used to interactivity and know nothing about it) or just wants application to show menu or some information. While iBooks handled everything not bad I had to remove showing the tip when you tap the photo and create the separate link. The reason is in the tests: I myself accidentally tapped the photo when I wanted to flip the page and though I was touching just the right side of the screen. And as you can control almost nothing the creating of interactive ux is quite a challenge. Also iBooks doesn’t provide any back/forward navigation so if you even clicked a link in an ordinary book to see the notes there is no simple way to get back to reading.

Anyway!

Get our walkyries on your device and enjoy having them with you. You can always impress you friends, colleagues or have something to look it while eating pizza.

As it is and art object our walkyries catalogue is notable on every bookshelf even if it’s virtual!

***

This is the second ebook challenge for me in last week and a half that was made not much longer then previous. Something is in the air.

I caught one post in the sea of the drafts I have here. There are 10s of them. Anyway, I’ve chosen one and publish it today because this morning twitter is overfilled with messages like “I want to sleep”. I don’t have a problem waking up with a smile (I don’t use don’t use alarms, imagine that ;). Anyway I sometimes think it’s wrong to get up early. But let’s get back to the topic. Below is the remastered version of text comics I’ve sent to bo one morning.

This strip can also be considered a Friday tribute to Friday 4Koma which I like a lot.

Yes that’s the screenshot of the site described below

Know how to make ideal strawberry crème? Take fresh strawberry, little bit of blender, three smiles, cream, something listed in recipe, vanilla and make it to cooperate somehow. We don’t have any strawberries, and have bunch of smiles and photos taken while walking and made to look a little bit vintage. As in an old joke, we just had to add Helvetica texts and serve. So take your mental spoons, my dear intellectual foodies, because we are serving to the table of your imagination the Walkyrie = photo × helvetica.