Everything is new. The iA, the font, the layout and the way we handle links¹, footnotes², captions and titles. There is a new font. It’s another Quattro, from the hands of a bloody amateur. Amateur means lover. Be nice to people in love. Yes, it has ink traps, and yes, it comes in different grades and has all sorts of specials like a ligature for the iA logo.

We rethought how articles work on large screens. We get an atypical amount of traffic with large screens. So we asked ourselves: How can we use the space better than just making the font bigger and we came up with this crazy layout:

It’s a three column layout.³ On the left you see titles, in the middle the text and on the right you see footnotes, captions and links? Say again, links? Yes, we figure that it would be nice to show where a link points to so you don’t have to hover.

Therefore, we treat links like footnotes. Or better: Sidenotes. There is room for improvement on mobile, but for now we put the footnotes reference on the bottom and scroll you right there.

We are proud of the headings on the left. They allows you to read the whole body text in one go without disruption. They allows you to quickly scan long articles and pick out the chapters you want to read. Again, there is room for improvement on mobile, where we’d like to introduce Wikipedia style folding, sooner than later.

This design has been influenced by previous websites. We wanted to close circles. We have done these footnotes before, and we have done the boring home page before. And for ages we have avoided lines like the devil. There are a couple of lines in the tables, because tables have rows.

Let’s see another Footnote⁴ before I tell you what else to look for. One thing we are proud of is the new iA Writer page. Why? There is not much there isn’t it? What we did there⁵, is unique. We used CSS to show screen shots. The cool thing is that it automatically picks the screens from the platform you are accessing the page with.

• Mac? Mac screenshot!
• iPhone? iPhone Screenshot!
• iPad? iPad Screenshot!
• Android? Android screenshot!
• Windows? Windows screenshot!
• German? Everything in German!
• Japanese? Everything in Japanese!
• No keyboard extension? Everything without keyboard extension!
• You get it…

Not only can we scale one Screenshot to five platforms, but we can translate them in a gazillion of languages, with/without keyboard, keyboard extension or titlebar, etc. It’s simple math. With this, we do one screenshot in HTML, translate it in 10 languages, done! If we had to do screenshots, we’d have to do 10 (languages) x 5 (platforms) x 3 (states) x number of screens. Hundreds of screenshots. As of now, we have not yet done all the screenshots with all the variations. We are working on it.

Beta testers wondered “why is the light iA all night now?” It isn’t. If you see it all in black it’s because your device is set to night mode. And we respect that displaying the site in night mode.

Tell us what you think. If you find obvious mistakes, tell us. Via mail. Write to [email protected]. Don’t take this too seriously. Report if you think we have missed something important. We’re happy to hear that you like it. All honest and good hearted feedback helps.

This is the moment where we need to test lists. Let’s look at how they are formatted and learn what is not ready yet:

• Some videos are badly formatted
• All videos on the iA Writer main page are missing.
• Some Screenshot Examples on iA Writer page are missing
• Screenshot variations are needed! With and without keyboard, extension, etc etc.
• Design and About us are a mess
• The downloads page needs visuals
• We want to do many more examples in Support with iA Writer chrome
• Screenshots of iA Writer for iPhone should use Quattro
• Variable fonts with better grading are needed
• Italics need a bit more work
• Vertical spacing on smaller viewports
• Horizontal spacing on smaller viewports (esp. footnotes!)
• Missing translations for iA Writer and many :/ other pages

The real list is way longer than this. We’ll add to it as I go.

CSS and templating has been done by Taher Ali who has been very patient and thorough. Oliver has been designing this for over a year, on and off. No iA design would be the way it is without Takeshi, or Pedro. Richard and Yu have helped, Nicolae has helped cleaning it up. Project manager Iain was as central to it being built as ever. John has been working on the support section. Yumiko has made key calls. Momoco and Aki were a major influence. There were many contributions of beta testers. Thank you so much, Kris, Jürgen, Mehran, Dmitry, Rafael, Theo, Andrei, Johannes, Frank, Robin, Marianne, and Adrian.