Evolution of : Gif without the GIF

tl;dr

  • GIFs are awesome but terrible for quality and performance
  • Replacing GIFs with <video> is better but has perf. drawbacks: not preloaded, uses range requests
  • Now you can <img src=".mp4">s in Safari Technology Preview
  • Early results show mp4s in <img> tags display 20x faster and decode 7x faster than the GIF equivalent – in addition to being 1/14th the file size!
  • Background CSS video & Responsive Video can now be a “thing”.
  • Finally cinemagraphs without the downsides of GIFs!
  • Now we wait for the other browsers to catch-up: This post is 46MB on Chrome but 2MB in Safari TP

Special thanks to: Eric Portis, Jer Noble, Jon Davis, Doron Sherman, and Yoav Weiss.

Intro

I both love and hate animated GIFs. Ode to GeocitiesThanks Tim

Safari Tech Preview has changed all of this. Now I love and love animated “GIFs”.

Everybody loves animated Gifs!

Animated GIFs are a hack. To quote from the original GIF89a specification:

The Graphics Interchange Format is not intended as a platform for animation, even though it can be done in a limited way.

But they have become an awesome tool for cinemagraphs, memes, and creative expression. All of this awesomeness, however, comes at a cost. Animated GIFs are terrible for web performance. They are HUGE in size, impact cellular data bills, require more CPU and memory, cause repaints, and are battery killers. Typically GIFs are 12x larger files than H.264 videos, and take 2x the energy to load and display in a browser. And we’re spending all of those resources on something that doesn’t even look very good – the GIF 256 color limitation often makes GIF files look terrible (although there are some cool workarounds).

My daughter loves them – but she doesn’t understand why her battery is always dead.

GIFs have many advantages: they are requested immediately by the browser preloader, they play and loop automatically, and they are silent! Implicitly they are also shorter. Market research has shown that users have higher engagement with, and generally prefer both micro-form video (< 1minute) and cinemagraphs (stills with subtle movement), over longer-form videos and still images. Animated GIFs are great for user experience.

videos that are <30s have highest conversion

So how did I go from love/hating GIFs to love/loving “Gifs”? (capitalization change intentional)

In the latest Safari Tech Preview, thanks to some hard work by Jer Noble, we can now use MP4 files in <img> tags. The intended use case is not long-form video, but micro-form, muted, looping video – just like GIFs. Take a look for yourself:

<img src="rocky.mp4">
Rocky!

Cool! This is going to be awesome on so many fronts – for business, for usability, and particularly for web performance!

As many have already pointed out, using the <video> tag is much better for performance than using animated GIFs. That’s why in 2014 Twitter famously added animated GIF support by not adding GIF support. Twitter instead transcodes GIFs to MP4s on-the-fly, and delivers them inside <video> tags. Since all browsers now support H.264, this was a very easy transition.

<video autoplay loop muted inline>
  <source src="eye-of-the-tiger-video.webm" type="video/webm">
  <source src="eye-of-the-tiger-video.mp4" type="video/mp4">
  <img src="eye-of-the-tiger-fallback.gif"/>
</video>

Transcoding animated GIFs to MP4 is fairly straightforward. You just need to run ffmpeg -i source.gif output.mp4

However, not everyone can overhaul their CMS and convert <img> to <video>. Even if you can, there are three problems with this method of delivering GIF-like (Gif), micro-form video:

1. Browser performance is slow with <video>

As Doug Sillars recently pointed out in a HTTP Archive post, there is huge performance penalty in the visual presentation when using the <video> tag.

Sites without video, load about 28 percent faster than sites with video

Unlike <img> tags, browsers do not preload <video> content. Generally preloaders only preload JavaScript, CSS, and image resources because they are critical for the page layout. Since <video> content can be any length – from micro-form to long-form – <video> tags are skipped until the main thread is ready to parse its content. This delays the loading of <video> content by many hundreds of milliseconds.


For example, the hero video at the top of the Velocity conference page is only requested 5 full seconds into the page load. It’s the 27th requested resource and it isn’t even requested until after Start Render, after webfonts are loaded.

Worse yet, many browsers assume that <video> tags contain long-form content. Instead of downloading the whole video file at once, which would waste your cell data plan in cases where you do not end up watching the whole video, the browser will first perform a 1-byte request to test if the server supports HTTP Range Requests. Then it will follow with multiple range requests in various chunk sizes to ensure that the video is adequately (but not over-) buffered. The consequence is multiple TCP round trips before the browser can even start to decode the content and significant delays before the user sees anything. On high-latency cellular connections, these round trips can set video loads back by hundreds or thousands of milliseconds.


And what performs even worse than the native <video> element? The typical JavaScript video player. Often, the easiest way to embed a video on a site is to use a hosted service like YouTube or Vimeo and avoid the complexities of video encoding, hosting, and UX. This is normally a great idea, but for micro-form video, or critical content like hero videos, it just adds to the delay because of the javascript players and supporting resources these hosting services inject (css/js/jpg/woff). In addition to the <video> markup you are forcing the browser to downloaded, evaluate, and execute the javascript player — and only then can the video start to load.


As many people know, I love my Loki jacket because of its built in mitts, balaclava, and a hood that is sized for helmets. But take a look at the Loki USA homepage – which uses a great hero-video, hosted on Vimeo:

lokiusa.com filmstrip
lokiusa.com video

If you look closely, you can see that the JavaScript for the player is actually requested soon after DOM Complete. But it isn’t fully loaded and ready to start the video stream until much later.

lokiusa.com waterfall

WPT Results

2. You can’t right click and save video

Most long-form video content – vlogs, TV, movies – is delivered via JavaScript-based players. Usually these players provide users with a convenient “share now” link or bookmark tool, so they can come back to YouTube (or wherever) and find the video again. In contrast, micro-form content – like memes and cinemagraphs – usually doesn’t come via a player, and users expect to be able to download GIFs and send them to friends, like they can with any image on the web. That meme of the dancing cat was sooo funny – I have to share it with all my friends!

If you use <video> tags to deliver micro-form video, users can’t right-click, click-and-drag, or force touch, and save. And their dancing-cat joy becomes a frustrating UX surprise.

3. Autoplay abuse

Finally, using <video> tags and MP4s instead of <img> tags and GIFs is brings you into the middle of an ongoing cat and mouse game between browsers and unconscionable ad vendors, who abuse the <video autoplay> attribute in order to get the users’ attention. Historically, mobile browsers have ignored the autoplay attribute and/or refused to play videos inline, requiring them to go full screen. Over the last couple of years, Apple and Google have both relaxed their restrictions on inline, autoplay videos, allowing for Gif-like experiences with the <video> tag. But again, ad networks have abused this, causing further restrictions: if you want to autoplay <video> tags you need to mark the content with muted or remove the audio track all together.

… but we already have animated WebP! And animated PNG!

The GIF format isn’t the only animation-capable, still-image format. WebP and PNG have animation support, too. But, like GIF, they were not designed for animation and result in much larger files, compared to dedicated video codecs like H.264, H.265, VP9, and AV1.

Animated PNG is now widely supported across all browsers, and while it addresses the color pallete limitation of GIF, it is still an inefficient file format for compressing video.

Animated WebP is better, but compared to true video formats, it’s still problematic. Aside from not having a formal standard, animated WebP lacks chroma subsampling and wide-gamut support. Further, the ecosystem of support is fragmented. Not even all versions of Android, Chrome, and Opera support animated WebP – even though those browsers advertise support with the Accept: image/webp. You need Chrome 42, Opera 15+ or Android 5+.

So while animated WebPs compress much better than animated GIFs or aPNGs, we can do better. (See file size comparisons below)

Having our cake and eating it too

By enabling true video formats (like MP4) to be included in <img> tags, Safari Technology Preview has fixed these performance and UX problems. Now, our micro-form videos can be small and efficient (like MP4s delivered via the <video> tag) and they can can be easily preloaded, autoplayed, and shared (like our old friend, the GIF).

<img src="ottawa-river.mp4">

So how much faster is this going to be? Pull up the developer tools and see the difference in Safari Technology Preview and other browsers:

Take a look at this!

Unfortunately Safari doesn’t play nice with WebPageTest, and creating reliable benchmark tests is complicated. Likewise, Tech Preview’s usage is fairly low, so comparing performance with RUM tools is not yet practical.

We can, however, do two things. First, compare raw byte sizes, and second, use the Image.decode() promise to measure the device impact of different resources.

Byte Savings

First, the byte size savings. To compare this I transcoded the trending top 100 animated Gifs from giphy.com and then converted into vp8/vp9/webp/h264/h265.

NB: These results should be taken as directional only! Each codec could be tuned much more as you can see the vp9 fairs worse than the default vp8 outputs. A more comprehensive study should be done that considers SSIM.

Below are the median (p50) results of the conversion:

Format Bytes p50 % change p50
GIF 1,713KB
WebP 310KB -81%
WebM/VP8 57KB -97%
WebM/VP9 66KB -96%
WebM/AV1 TBD
MP4/H.264 102KB -93%
MP4/H.265 43KB -97%

Yes animated WebP is smaller but any video format is much smaller. This shouldn’t surprise anyone since these modern video codecs are highly optimized for online video streaming. H.265 fairs very well as I expect AV1 will too.

The benefits here will not only be faster transit but also substantial $$ savings for end users.

Net-Net, using video in <img> tags is going to be much faster on a cellular connection.

Decode and Visual Performance Improvements

Next, let’s consider the impact of the decode and display effects on the browsing experience. H.264 (and H.265) has the notable advantage of being hardware decoded instead of using the primare core for decode.

How can we measure this? Since browsers haven’t yet implemented the proposed hero image API, we can use Steve Souder’s User Timing and Custom Metric strategy as a good aproximation of when the image starts to display to the user. It doesn’t measure frame rate, but it tells us roughly when the first frame is displayed. Better yet, we can also use the newly adopted Image.decode() event promise to measure decode performance. In the test page below, I inject a unique GIF and MP4 in an <img> tag 100 times and compare the decode and paint performance.

let image = new Image;
t_startReq = new Date().getTime();
document.getElementById("testimg").appendChild(image);
image.onload = timeOnLoad;
image.src = src;
return image.decode().then(() => { resolve(image); });

The results are quite impressive! Even on my powerful 2017 MacBook Pro, running the test locally, with no network throttling, we can see GIFs taking 20x longer than MP4s to draw the first frame (signaled by the onload event), and 7x longer to decode!

Localhost test on 2017 i7 MacBook Pro

Curious? Clone the repo and test for yourself. I will note that adding network conditions on the transit of the GIF v. MP4 will disproportionately skew the test results. Specifically since decode can start happening before the last byte finishes, the delta between transfer, display and decode becomes much smaller. What this really tells us is that just the byte savings alone will improve substantially the user experience. However, factoring out the network as I’ve done on a localhost run, you can see that using video has substantial performance benefits for the energy consumption as well.

How can you implement this?

So now that Safari Technology Preview supports this design pattern, how can you actually take advantage of it, without serving broken images to non-supporting browsers? Good news! It’s relatively easy.

Option 1: Use Responsive Images

Ideally the simplest way is to use the <source type> attribute of the HTML5 <picture> tag.

<picture>
  <source type="video/mp4" srcset="cats.mp4">
  <source type="image/webp" srcset="cats.webp">
  <img src="cats.gif">
</picture>

I’d like to say we can stop there. However, there is this nasty WebKit bug in Safari that causes the preloader to download the first <source> regardless of the mimetype declaration. The main DOM loader realizes the error and selects the correct one. However, the damage will be done. The preloader squanders its opportunity to download the image early and on top of that, downloads the wrong version wasting bytes. The good news is that I’ve patched this bug and it should land in Safari TP 45.

In short, using the <picture> and <source type> for mime-type selection is not advisable until the next version of Safari reaches the 90%+ of the user base.

Option 2: Use MP4, animated WebP and Fallback to GIF

If you don’t want to change your HTML markup, you can use HTTP to send MP4s to Safari with content negotiation. In order to do so, you must generate multiple copies of your cinemagraphs (just like before) and Varyresponses based on both the Accept and User-Agent headers.

This will get a bit cleaner once WebKit BUG 179178 is resolved and you can add a test for the Accept: video/* header, (like the way you can test for Accept: image/webp). But the end result is that each browser gets the best format for <img>-based micro-form videos that it supports:

Browser Accept Header Response
Safari TP41+ H.264 MP4
Accept: video/mp4 H.264 MP4
Chrome 42+ Accept: image/webp aWebP
Opera 15 Accept: image/webp aWebP
Accept: image/apng aPNG
Default aGif

In nginx this would look something like:


map $http_user_agent $mp4_suffix {
    default   "";
    "~*Safari/605"  ".mp4";
}

location ~* .(gif)$ {
      add_header Vary Accept;
      try_files $uri$mp4_suffix $uri =404;
}


Of course, don’t forget the Vary: Accept, User-Agent to tell coffee-shop proxies and your CDN to cache each response differently. In fact, you should probably mark the Cache-Control as private and use TLS to ensure that the less sophisticated ISP Performance-Enhancing-Proxies don’t cache the content.

GET /example.gif HTTP/1.1
Accept: image/png; video/*; */*
User-Agent: User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_2) AppleWebKit/605.1.13 (KHTML, like Gecko) Version/11.1 Safari/605.1.13

…

HTTP/1.1 200 OK
Content-Type: video/mp4
Content-Length: 22378567
Vary: Accept, User-Agent

Option 3: Use RESS and fall Back to <video> tag

If you can manipulate your HTML, you can adopt the Responsive-Server-Side (RESS) technique. This option moves the browser detection logic into your HTML output.

For example, you could do it like this with PHP:

<?php if(strlen(strstr($_SERVER['HTTP_USER_AGENT'],"Safari/605")) <= 0 ){ // if not firefox ?>
<img src="example.mp4">
<?php } else {?>
<img src="example.gif">
<?php }?>

As above, be sure to emit a Vary: User-Agent response to inform your CDN that there are different versions of your HTML to cache. Some CDNs automatically honour the Vary headers while others can support this with a simple update to the CDN configuration.

Bonus: Don’t forget to remove the audio track

Now, since you aren’t converting GIF to MP4s but rather you are converting MP4s to GIFs, we should also remember to strip the audio track for extra byte savings. (Please tell me you aren’t using GIFs as your original. Right?!) Audio tracks add extra bytes to the file size that we can quickly strip off since we know that it will be played on mute anyway. The simplest way with ffmpeg is:

ffmpeg -i cats.mp4 -vcodec copy -an cats.mp4

Are there size limits?

As I’m writing this, Safari will blindly download whatever video you specify in the <img> tag, no matter how long it is. On the one hand, this is expected because it helps improve the performance of the browser. Yet, this can be deadly if you push down a 120-minute video to the user. I’ve tested multiple sizes and all were downloaded as long as the user hung around. So, be courteous to your users. If you want to push longer form video content, use the <video> tag for better performance.

What’s next? Responsive video and hero backgrounds

Now that we can deliver MP4s via <img> tags, doors are opening to many new use cases. Two that come to mind: responsive video, and background videos. Now that we can put MP4s in srcsets, vary our responses for them using Client Hints and Content-DPR, art direct them with <picture media>, well – think of the possibilities!

<img src="cat.mp4" alt="cat"
  srcset="cat-160.mp4 160w, cat-320.mp4 320w, cat-640.mp4 640w, cat-1280.mp4 1280w"
  sizes="(max-width: 480px) 100vw, (max-width: 900px) 33vw, 254px">

Video in CSS background-image: url(.mp4) works, too!

<div style="width:800px, height: 200px, background-image:url(colin.mp4)"/>

Conclusion

By enabling video content in <img> tags, Safari Technology Preview is paving the way for awesome Gif-like experiences, without the terrible performance and quality costs associated with GIF files. This functionality will be fantastic for users, developers, designers, and the web. Besides the enormous performance wins that this change enables, it opens up many new use cases that media and ecommerce businesses have been yearning to implement for years. Here’s hoping the other browsers will soon follow. Google? Microsoft? Mozilla? Samsung? Your move!

from Sidebar https://sidebar.io/out?url=https%3A%2F%2Fcalendar.perfplanet.com%2F2017%2Fanimated-gif-without-the-gif%2F

Web Typography & Layout: Past, Present, and Future

Can typography encourage long-form reading—not just scanning? What are the most exciting areas of cutting-edge experimentation in typographic technology and digital layout, and what new skills will we need to design tomorrow’s web content? Three experts—Mozilla’s Jen Simmons, publication design legend Roger Black, and ALA’s Jeffrey Zeldman—discuss typography and layout on today’s web: where we are now, and where we’re going.









an article from Håkon Lie, like 12 years ago on A List Apart. It was like, You know, we should have webfonts because CSS will support it. What are we doing about this?

Roger: It was a long time. 1997, 20 years; there was a solution for webfonts that the community rejected. It was Microsoft’s EOT file format, which we don’t have to talk about. But in IE4, they supported the @font-face spec in the HTML W3C standard, and it was nice. But we said, “That’s not a standard, it’s not open, we don’t like that. We’d much rather use the Netscape solution,” and then Netscape kind of disappeared, and there was a lot of Arial for many years after that.

Jeffrey: And Jen, you work now at the place that wouldn’t exist without Netscape; the sort-of descendant, the grandchild of Netscape, which is Mozilla with the Firefox browser, which is like three generations, five generations maybe, in terms of rendering engine, from the initial…

Roger: From Urbana-Champaign.

Jeffrey: Mozilla really believes in open source and open fonts and the open web and all that stuff. And I know you’re here as Jen, you’re not here as a Mozilla representative, but still, it must color your perspective to some extent.

Jen: Yeah, well one thing I didn’t know until after I joined Mozilla and really got the opportunity to spend more time looking at the details of CSS and the implementations and comparing one browser to another, and looking at Firefox and seeing what’s missing, what do we need, what CSS should we prioritize… Firefox actually has really great support for fonts and typography. And there’s some details about CSS that we could be using, but it’s not really quite supported in every browser, so people hesitate to use it. Over and over again, I go to check, Have we put this in Firefox? Should I be advocating for this? And most of the time, with everything for typography, it’s like, Oh, we already did that. We did that a couple years ago. We’re waiting for other browsers to catch up at this point.

But I think you’re right, Roger. I think there’s so many tools when it comes to setting the type and making decisions about what font to use, and all the details of how to set it, that it’s gotten really overwhelming. People are a bit at a loss as to, like, what they need to know and how to do a good job.

Roger: Earlier this year, Jeffrey joined forces at Poynter, where I am today, Poynter Institute in St. Petersburg, Poynter Design Challenge. We asked five designers to come up with a better typographical solution or a better publication solution, better website solution for reading and for layout. And, there’s a very, very simple HTML prototype that you can find on the Zeldman.com site, which says, “Hey, let’s just use some of the typographic specifications that we’ve had for a long time—pull quotes, subheads, and nice captions, and a variety of these things.” He wrote up a nice HTML spec, and it’s funny, when we see typesetting on many websites, the homepages might be pretty exciting, but you get to the basic story page, and they’re god-awful. We have the classic news story page, and, you know, text interrupted by all kinds of advertising and other crap, and then a bunch of, you know, kind-of Taboola doodads at the bottom, and other things interrupting, and it’s very hard to read it. It’s like hundreds of years of typesetting history have completely been ignored to try to get a few clicks. And that’s one of, I think, the big challenges in typography. How do we circumvent the business model that’s making these ugly pages?

Jeffrey: But haven’t you also noticed, conversely, that on, let’s say, a few of the bigger papers, like washingtonpost.com, newyorktimes.com, the article pages have been pretty beautiful for a while now, that they use big type, very readable layout…

Roger: Yeah, or Medium.

Jeffrey: Yeah, Medium.

Jen: The Atlantic is a really great one.

Jeffrey: newyorker.com.

Jen: The New Yorker, the Atlantic, and the New York Times, to me, are the three big leaders in creating much more beautiful layouts.

Roger: So why do you think they’re succeeding? Because they have more money, or what?

Jen: I think something happened in the internal politics and probably in their user research, where they were able to say, “Hey, clutter, clutter, ads, ads, horrible, horrible. People don’t want this. Let’s declutter the page. Let’s find a way to get the ads that we need onto the page but do it in such a way that makes both the advertiser happy and the user, the reader, much, much happier,” rather than kind of going off of a bunch of assumptions about what the layout needs to be because of the advertising model.

Jeffrey: Those papers have a business model—

Roger: That’s off of their business model.

Jeffrey: Right, we’re saying the same thing. Yeah, those papers have a business model where it’s partly subscription, so that enabled them to experiment more. I also think they had to. I believe Rich Ziade’s Readability program from a few years ago, which is now pretty much defunct, sadly, but if you use Safari, an early version of it is built into the Safari browser; if you go to the article view, that’s just Readability 1.0.

But I believe that had a huge influence—I mean, it did on me. Like, after I looked at that for a while, I was like, I can’t have this cluttered… I loved my old cluttered layouts and I loved thinking that I was so good that I could make a cluttered layout that didn’t feel cluttered. And all of a sudden I was like, No, this is bullshit. Let’s remove everything inessential. Let’s strip it down as much as we can and make it a good reading experience that makes you sit back. That was the other thing to me. A page at newyorktimes.com, you actually lean back and analyze the news, as opposed to leaning forward and squinting. I think, physically, if you believe there’s a mind-body connection physically, those designers are saying, “Sit back, think about what we’re presenting. Don’t take it as gospel. These are the facts as we understand them. What do you think?”

Jen: Well, and, you know, “We’re going to make some space for you to really think,” like you said here, like, “instead of just tossing so much crap at you that you need to run away almost immediately. So, you’ve got to read, scan, fast, fast, get out of here, because we’re chasing you away.” To be like, “No, no, no, we’re not going to chase you away. We put a lot of time and effort into this.”

Roger: It’s fascinating to watch the acceptance of the idea that people are not reading your publication on desktop, or just at one place. You go to the New York Times, you go to Medium, and you’re sometimes on your phone, and sometimes you might have a tablet, and you might have a desktop, and you might have a huge screen that’s like what I’m looking at you guys on, that’s a 60-inch monitor.

Jeffrey: Like we’re on CNN. But also, don’t forget orbital content, the idea that people aren’t necessarily reading your content on your publication at all. What does that say about our freedom to innovate in layout, if the content that we’re creating is acceptably good enough anywhere? We’ve gone from… Right? That was the threat behind Readability, which for those who don’t remember, it was a device that removed all the cruft—I should have said that earlier. It removed all the junk from a layout so that it was a nice, readable…

Jen: Jeffrey, I think there’s a good chance that people are using those tools a lot, and that we don’t have any statistics on them. Google Analytics doesn’t tell you how many of the people who come to your website click on the reader-mode button. Safari has a reader-mode button, Firefox has a reader-mode button; Firefox has built Pocket directly into the browser, and we’re working on things to figure out how do we give people a better reading experience, especially when they’re going offline, they’re hopping on a train, they’re running around… And the fact that too many websites are crap. I mean, I’ve clicked on links in the past week where I just—I would have liked to have stayed on the website and seen it in their typography and everything, but I literally couldn’t. It was making me physically ill; it was such a crazy, cluttered, scrambled mess.

Jeffrey: Yes, yes, yes. Readability used to provide those stats. I believe Mercury Reader provides those stats. I’m not sure, though.

Jen: Yeah, the funny thing is, you know, people obsess all the time about how many IE6 users do we have, or how many IE10 users do we have, how many IE11… Nobody ever asks how many people aren’t even staying on the web page because our design is so terrible. It could be a really high number and we just don’t know it, because I don’t think that any of our stats tools measure how many people use tools like Readability, or Pocket, or Read It Later, or the reader modes, or the Instapaper… There’s a zillion ways to do it. It could be 40 percent of your audience, and you would have no idea.

Roger: Yeah, and I think that the page-view business model, which is audience-based, the idea that you get as many people looking at the pages as you can… Which is really the old broadcast model, it’s something that when publishers went into the web, they thought, “Okay, here’s our chance… We’re broadcasting, and we can have a huge audience and make it up in advertising.” For some of them, that’s working; for most of them, it isn’t. But it’s distorted the reading experience in a horrible way. And all you had to do is compare most websites, the conventional text page to Kindle…

In the ebook world, the typography, you can complain about the font choices and things like that, but once you’ve set your point size that you like that works on your device, it’s maybe no better than the cheap paperback, but that’s not bad, you could read it, and you know that you’re there to read. I don’t think that—we tried, like at the time at Readability, we were doing TreeSaver, and the business model didn’t support that because it didn’t get page views. The idea of reading a 2,000-word thing all the way through isn’t really treasured on the web. It’s not the important thing. The important thing is just to get to the beginning, to just show up, and then they count you.

Jeffrey: Can typography help overcome that long-ingrained habit of web readers, of, I’m going to read the headline and scan a couple of paragraphs and I consider that I’ve read this piece? Can a good layout actually draw people through the whole experience?

Roger: I think so. I mean, I hope so. What is a good layout? What are your rules of good type layout?

Jeffrey: I think it depends on the job it’s trying to do. Right now, I’m working on an ecommerce site, and I’m trying to apply some of the same principles. I’m still in the rough sketch phase, which is the most fun for me. But soon I’m going to actually have to commit to pixels, and I would like to bring some of the same thinking about classic, big, readable, engaging typography to a site that, by its nature, has to have a lot of stuff happening on the page. It can’t be a simple reader layout, it has to be a lot of stuff for you to browse and make decisions about and click pop-ups and all kinds of stuff. I guess my answer is, “It depends.”

But Jen, you’ve kind of abstracted the layout layer in a way. You’re currently actively engaged in studying layout not almost for its own sake, but what can layout be. Rather than starting with, “Okay, this is a news layout, so let’s do it the news way, this is a hospital page, so let’s make it look like a hospital page,” you’re going, “What can we do with the page?” Who was that great art director, Roger, from advertising in like—well, there were a bunch, but in the ’60s there was the guy, was it [Bob] Gage? They asked him how he stayed inspired, and he said, “I just keep finding new things to do with the page.” I think we have that opportunity on the web and haven’t really been using it.

Jen: Yeah. I mean, you know this, Jeffrey, because you’ve seen me talk at a lot of conferences. New technology has come along much in the same way that, once we finally had fonts and licensing for fonts to be able to use with @font-face, suddenly there was this new era of web typography. Because CSS Grid shipped in March 2017, almost three months ago, we now have tools to do layout in a way that was either completely impossible before, or it was possible, but it was laborious; it was just kind of too hard, or too fiddly, or too fragile to really be worth doing.

And so now with CSS Grid, but also with flexbox, with multicolumn layout, with box-sizing: border-box, we have like this whole bunch of combination of things. I think we really need to move away from using frameworks that we download from some third-party website and just kind of dropping everything into the layout that everybody else is using, and ask this question of What’s the job of the page we’re building? Maybe it’s an article, maybe it’s not. Maybe it’s an interface, maybe it’s a store, maybe it’s something else. How is it that people are trying to use it? It’s design. What are they trying to do? What do our users want? What do they need? What are they struggling with?

How can we use design, how can we use layout to better serve them, and really make an experience that’s the kind of experience that we want, that’s on-brand, or that’s easier or more elegant to use, if that’s the right value for this project or that helps people do the job that they’ve come there to do? And I have a feeling we’re going to see a huge change in layout, that we’re going to look back three years from now, five years from now, and it’s going to be really clear what came before and what came after, and we’re right at the tipping point of this massive change in page layout.

Jeffrey: I agree. I’ve been very inspired by what you’ve been doing and I’ve been following your articles, and your conference appearances, and all that. I also have a little story. One of the things that I do is every other semester I teach at the School of Visual Arts in the MFA Interaction Design program, and this semester I had a student, Ritwik Deshpande, he’s a brilliant guy, he was a journalist in India. He was very interested in music, and particularly in synthesizers, and he was very interested in creative web layouts and found that this whole Readability, Medium, this whole thing that’s been happening, which on one level is very good because it makes newspapers readable, on the other hand was sort of bringing this sameness to everything. He was sort of coming at the same thing Jen’s coming at.

So he, for his project, decided to do a piece on synthesizers, the reason being everyone learns about music synthesizers the same way. They sort of look at these instructional manuals, and there’s no interaction, there’s no dynamic interaction with… Actually, basically he designed something like you might see at a children’s museum in a way, like, this is a sine wave, this is a square wave, here’s what happens when you interact with these things. He used JavaScript and CSS to make these little interactive modules that showed a non-synthesizer player what it was to interact with synthesizers. He meshed that with explanatory text, and he made a custom layout that explained all this.

The reason I had to help him with his thesis was it was like almost everything I’m interested in in one piece, because it was about music and synthesizers, which I used to do, I used to play them; and it’s about web layout, and it’s about, How can I make this interactive learning? So, it was everything—education, writing; when does a page stop being a book-like experience and become something different; how far can you go with that before people become confused and need the reassurance of traditional paragraphs? He’s going to do more with this. It’s not a product.

Also, I loved it because usually when you have people graduating with an MFA in interaction design—I say “usually,” but it’s only been happening for a few years—but usually they’re trying to make a product. And this gentleman, Ritwik, was basically trying to make a learning experience for himself as a graphic designer, as an interaction designer, and as a fan of synthesizer-based music. I just thought, this is great, because it reminded me of the old web: I’m gonna make something cool that doesn’t exist because I’m curious about these things. I miss that. I love our new professionalism, but I do miss that experimentation for its own sake.

Jen: Me, too.

Roger: Yeah, there’s too much just copying the code.

Jeffrey: Yeah, especially when—

Roger: We’ve done that from the beginning.

Jeffrey: Right, but we didn’t have—if I made a two-column layout, I didn’t release it as a platform.

Jen: And a brand. [laughs]

Jeffrey: Right, and that sounds derogatory. But honestly, what people have made with Bootstrap… And it’s so complex. I’m not denigrating that. I’m not comparing it to my stupid two-column layouts from the ’90s. It’s a big deal. I think Rachel Andrew actually talked about, in her 2015 article, in her Christmas publication…

Jen: 24 Ways.

Jeffrey: Thank you. She said, “We told everyone, ‘Hey, web standards allow you to separate this structured content from this ugly—you can make a presentation and you can change it tomorrow, and you don’t have to have… But then as people wanted more and more complex app-like layouts with layers and everything, that was a lie.’” You ended up having to write HTML that was about, you know, divs that were sidebars. You didn’t have to, but if you wanted to do a certain kind of layout, you had to. And it became so complicated that something like Bootstrap’s just like, “Hey, if you’re going to do this anyway, I’ve gone through the trouble of doing it for you and I’ve got all the fallbacks in here, so here you go.” And you can’t really blame the industry for grabbing hold of something like that.

Jen: I feel like looking at the arc of history with layout, the shorter arc, I feel like Bootstrap and other tools like it—Foundation, and there’s others; and long before them there was 960 Grid and YUI I think was the first one, the Yahoo User Interface Library—there are reasons for that, and I think we needed them. I think we got into a situation where we needed to ship work, and we’re still trying to figure out what responsive web design meant, and we’re spending a lot of time reorganizing our entire workflow and our teams and what it meant to be a client or what it meant to have a content team versus a design team versus an engineering team… We had to restructure our whole entire organizations because of responsive web design. So, we had a lot going on, and just reaching for Bootstrap or something similar, it’s a good stopgap, whatever. But I think that era is over, and I think that a lot of companies, a lot of people are going to be like, “What are you talking about, Jen? There’s no way.” But three years from now, you’re going to be like, oh gosh…

Jeffrey: I also think there was an initial period—I mean, Roger, you were an exception. People who were trained designers, who knew what they were doing in terms of graphic design and art direction, who became web design gurus—that was an exception. Mostly it was like philosophy majors and English majors and all kinds of people without a design background. And then we had the period where there were more people like Roger. So, there was like the generation that, say, Jason Santa Maria represents. Somebody who went to art school, went to design school. There’s lots of designers like him; that was like this next wave—

Roger: And knew their history. Jason knows history.

Jeffrey: And knew their history. But now there’s a new generation of designers, I would say, who see themselves as product people, who are product people, and who actually think that layout and all that is some secondary work to be done by their assistants, and I think that might be hurting us in a way. The organizations listened to us and say, “Yes, design is very important! You’re right, we’re going to have an in-house design team!” But they don’t have actual hands-on designers necessarily running those teams. They have product people and marketing people who aren’t designers in a big sense—”big D” designers or whatever the hell that means. You know what I’m trying to say?

Jen: Yeah.

Roger: Yeah.

Jeffrey: There’s fewer people who came up through the craft of actually setting type and all this stuff. And so the juniors are doing that stuff, and they’re the ones, like Roger was saying in the beginning, being overwhelmed by all these typefaces and all these choices and all these tools, and the senior people aren’t bothering their pretty heads about typography and layout. They’re thinking about user retention and onboarding and all this stuff. I would love to see some product people also, or I would love to see more respect for this area, in addition to the respect we’re showing that aspect of design.

Roger: In the last day, I have had a big conversation on Facebook about photography, about the cover of Newsweek, of Rolling Stone, and Esquire, which I thought seemed oddly amateur this issue. It was fascinating to see the way people jumped on that conversation. There was this one guy from Singapore who just commented, “Well, ultimately it has to be in the hands of the readers. The readers will decide.” I think one of the things in all of this conversation about where we’re going with typography or layout on web, or in digital formats, is it forgets a little bit that what we’re trying to do is convey a message that readers and users will understand and enjoy. They’ll accept it, they’ll get something out of it, and they’ll come back. But it’s really this point-to-point communication between writer and reader that is the point of typography.

One of the things that’s happening is that the readers are having more info than they used to have. In the old days, a graphic designer often thought of herself or himself as an artist, thinking the big thoughts. You would stretch the canvas and then do the charcoal or the crayon, and then you’d paint, and then you’d have this wonderful thing that you would allow people to look at. So, it was a very top-down kind of communication. But in graphic design, in magazines or newspapers or advertising, or on the web or in print, it really is trying to get the message across.

And what’s happening—I think responsive, the whole responsive movement taught us an important lesson, that it’s not about that canvas square, it’s not an 8.5 by 11, or 1200-pixel-wide thing that we’re dealing with. We don’t actually know what we’re dealing with. There’s so many damn devices right now, and the media queries don’t always tell us the answers. It knows it’s an iPad, but it doesn’t know which generation it is or… We’re not getting good reporting back on what is actually the density of the screen, or the rendering method. We kind of guess. We sort of say, “Okay, it’s going to be these, and this percentage has to be this way.” But so many publications and advertising that I see, if I look at them on different devices, I can’t read it or it’s too small; or their lines are too wide, which is the oldest web-typography problem—put too many characters on a line so it’s harder to read.

But that’s sort of the current state. I think the most exciting thing about graphic design right now is the connection with the user and the reader. We’re beginning to understand who they are and what they want, and I think that ultimately the machine learning that we’re trying to do on the server side will start informing page layout so that people can read it more easily, with more enjoyment. Not that we’re asking them any questions about it; we’ll just watch what they like and give them more of that, and see what’s working, how the session time is being extended by different kinds of things. The metrics will start talking back to us and start transfiguring the pages. If we allow a variable format, then we can get amazing things. I mean, they can pick their own fonts, they could do their own kinds of colors and layouts if we collaborate with them. And as soon as we do that, as soon as we get the reader on board, then we’re geniuses. Then the design is great. That’s a huge challenge.

Jeffrey: I have mixed feelings about that. I like the idea of customization. I think customization is very important. We’ve always said the web is a conversation. We used to say it before we even had comments. We said, “The web is a conversation,” and then we started having comments on blog posts, if you guys remember blog posts and comments, and then we were like, “Yeah, it really is a conversation.” It was always a conversation design-wise too, because even back to the horrible days of liquid layout, where, “I want my screen this wide, and I’ll take that 10,000 characters per line,” and all that.

But there was always the chance that the user was going to install super-large fonts or override—I mean, I have a plugin in Chrome that lets me override any font on any site and replace it with some horrible thing. I’m having difficulty with, if I’m angry at a website, I can set it in Baby Teeth just for my own pleasure. So, there’s always been that thing, and I think it’s a mix, because you do want to let people—I mean, if someone has a problem with contrast, they need to be able to boost it. There are certain tools in the browser that let people do that, but it’s hard for a designer now, how people are interacting.

If we can make it an all-in-one design solution, like having type size widgets that we create instead of relying on the browser, then we might be able to. But now we’re playing three-dimensional chess with responsive layout, because, you know, what happens when someone makes this type seven times bigger, and, well, we’ve got all these minimum widths and… I guess what I’m saying is design is very hard right now, and although the user has always been in the mix and they’ve always had some power, once we start thinking about that and hoping that we’re going to get good design at the end of it, it becomes even trickier.

Roger: I think it’s like the templates that you’re designing anyway. You realize that you have to have adjustments for the different viewports. So, you know that it’s going to be one column in some places and multiple columns in other places. I think that’s how you deal with the users. You still want to build a road that they can travel on, but you’re deciding what the destination is. So, that means you have to guide that experience as best you can.

I think one of the things that we know is that if a reader feels that they’re a collaborator, that it’s a two-way communication, they remember stuff, they enjoy it much more. So, that’s not really what I’m talking about. I think in responsive design, the design challenge became much harder. We had to think about basic typographical relationships—a headline, a pull quote, a deck, a text, a caption. How do those things relate to each other? And there might be slightly different sizes and widths that we have to deal with, so we would write that into the code. But now what we’re saying is if we can find out what’s working for readers, let’s give them more like that. It’s one of the oldest things on the web, what they used to call collaborative filtering. We need collaborative filtering for design.

Jen: I think one thing that we do know for sure in 2017 that we didn’t know along the way at different points in the evolution of the web is that this medium is not controllable. We don’t know so many things about the conditions in which somebody is going through our website—screen size, font size, how they’re experiencing it. In a way, I feel dumb even saying that, because it’s so obvious and it’s so ingrained in the way that so many people work. And yet you meet web designers every day who don’t think that way at all; they’re designing fixed things in PDF and then they’re holding that thing up to the final result and they’re going, “I wanted 15 pixels and I don’t have 15 pixels. You’re not doing what I’m telling you to do.”

I still feel like the industry is struggling very hard with understanding what this creature is in this multidimensional… You don’t control it, but you do program it. So, you can create sort of a minimum and a maximum, and you can sort of say, under these conditions, this is what I want, and under these other conditions, this is what I want. And I can’t control it and I can’t necessarily predict when those conditions will be in place, but I can say some things and I can set some limits around what that means. And I think that that’s going to even be—with CSS Grid, with fixed websites, we had a fixed size. With fluid, we sort of said, “Oh, it’s going to be completely squishy.” With responsive, it’s like, “Okay, it’s being squished, everything is squishing evenly, or everything is stretching, everything is stretching evenly. We’ve rearranged things a little bit, but basically it’s all squishing and stretching at the same time.”

With CSS Grid, you could easily have some things that squish while this other thing stays fixed, and this other thing squishes while this one was fixed, and this other one’s fixed the whole time… I mean, it’s so much more dynamic in how it behaves in different ways. As I try to teach that layout… I don’t know, I think we’re in a strange time, because on the one hand, the web industry is not leveraging the power of graphic design in the way that we could be. We’re copying each other’s work too much. Too many things look like Medium; too many things look like web design out of 2007. Too many things look like copies of each other. Everybody’s bored, everybody’s talking about this, everybody’s ready to move on.

So, we definitely know that there’s a way in which we can use graphic design unlike we’ve ever seen on the web before—the power of the entire 20th century brought to the web. And simultaneously, the people who know that work the best, the historians, the people who know the history, the people who have been trained, the people who are coming out of schools do not understand the web at all. They think of it as a PDF format, it’s a format for displaying things that they drew in PDFs and that they figured out in PDFs. So, there’s this weird tension. We desperately need to figure out what our medium is in a way that we never have before, but we also need to bring the power of graphic design—and other fields, too. Like, I’ve been looking at a lot of filmmaking and cinematography lately, because I don’t think it’s just about print. It’s about standing between several different design mediums and realizing what our medium is.

Jeffrey: I have to make three quick points based on what you just said, because I’m so excited, my brain is going to explode. First of all, and I want to come back to CSS Grid, but none of my points are about CSS Grid. First of all, I think responsive—the questions about responsive and the fact that we don’t know has led naturally to pattern libraries, atomic design, modular design, whatever you want to call it when people say, “We’re designing systems instead of pages”—we’re still designing pages, ultimately.

Jen: We are.

Jeffrey: But to some extent—like I’m on a project now with a client, and I’m not comping pages yet. I’m just saying, “Here’s the call-to-action module—I think. Here’s how it might look on a wider screen, here’s how it might look on a smaller screen. Maybe it doesn’t change from one screen to the next, it’s just this, let’s call it one unit of width and height.” I’m thinking in terms of building blocks. Ultimately, to make a great page, you have to think of the page, but I do think responsive is leading us in a good direction toward pattern libraries, atomic design modules.

Second, I want to make a point about your wonderful comment, Jen, about how some of the experts in typography or experts in traditional publishing don’t understand the web. Wonderful example of this: there was a company I knew, they actually used Roger’s TreeSaver technology a few years back to create a set of publications that, of course, could configure themselves. They did pagination, and ads, and everything a publisher wants, but they were also responsive. No one was calling it that yet because responsive design and TreeSaver came out at the same time.

So, Roger and his colleagues came up with this product using JavaScript to basically paginate and do multipage layouts in any device. And this publishing company formed by experts who’d been at the helm of incredibly great traditional print publications over the years, they used to have their designers mount the layouts on foamcore and walk them in, and they’d look at them as if they were a fixed layout. And I can remember overhearing conversations where these experts said, “Why is there this white space here?” and it was explained, “Well, that’s where the article ended.” “Well, shouldn’t we sell an ad there?” “Well, but it’s not a print publication. That space exists on this device but not another.” “On which device?” “Well, whatever device this happens to represent. This is a hypothetical device.” It was completely different centuries, right?

Roger: It was sad.

Jeffrey: One last point: I think for browser makers, in the old days when we were doing the web standards thing, the browser makers were torn because they had people like Steve Champion from the Web Standards Project saying, “You must properly support CSS1.” And they’d say, “Yes, we hear you, but there’s a lot of detail to that.” And at the same time, we have this other designer, who represents a million customers, who wants colored scrollbars. We would get angry and say, “Screw colored scroll bars. Support CSS1.”

But the truth was the browser maker couldn’t afford to turn on either customer, and I think we’re at a similar inflection point here where the browser makers are excited about CSS Grid, and they’re excited about people pushing boundaries on layouts, but at the same time there’s all kinds of traditional businesses out there that are doing layouts like it’s 2007, and they have to support both. I would imagine it’s very hard to be a browser maker, because if you blow up the 2007 designs—I’m not saying that you have to, I’m not saying there’s causality, but you can’t turn your back on either customer. If you’re a TV show, you have to appeal to democrats and republicans—usually.

Jen: Browser makers are very obsessed with making sure that Google Docs runs fast, or that Facebook renders properly.

Jeffrey: Or that Gmail does what it does.

Jen: Because that’s what a typical person opening up a web browser wants. They want to use Google Docs, Gmail, and Facebook, and if those things are sort of broken, it doesn’t matter if it’s the fault of the people who made the websites, it seems like there’s something wrong with the browser.

Jeffrey: And I do remember a period in the Web Standards Project of us being very hardcore and saying, “Well, it should break. It should break! It’s coded wrong! It doesn’t validate! The div never closed! It should break! That’s the only way you’ll get these guys to do the right thing!” And the browser makers were like, “We can’t do that.” And then later on, “Yeah, of course they can’t do that. They’re a business.” To some extent, I can fall on my sword because I’m a designer thinking about what design should be…

Jen: Well, but also, I think—I mean, of course, there’s a wide range of different people and different companies and different folks who are making websites for different reasons, and all of those concerns are important. It’s not like one is more important than the other. I just know that myself, and probably you, Jeffrey, and a lot of us, we’re like in this little corner over here thinking deeply about design and what it can mean, and what we can give our clients by using design, by using graphic design, by using typography, by using the skills that come from the days of pasteup. People may or may not be into what we’re into, they may or may not want the skills that we have, but there’s definitely a huge audience that does.

And I also think that—you know, I’ve been thinking about the future, because I think there’s business opportunity there. When you get in the front, when you end up being the Boston Globe shipping the first responsive news website rather than shipping the last one ten years later, it gives you a competitive advantage. And not every company is willing or ready to take that kind of leap, but some want to; some want to be in front. Not everybody wants to copy Facebook’s layout. There are people who want to be the next Facebook and do something… Facebook’s layout was original when they came up with it. There’s other folks that want to go ahead and do something new. A lot of people say to me, “But what about usability? You’re talking about creating a whole new mental model for layout. No one’s going to understand how to use it. You’ve got to do things the way we’ve always been doing it because that’s how users are going to know how to use things.”

Jeffrey: “Blue underlined links!”

Jen: Yeah. It’s funny, sometimes when people say that to me, I think, “What do you think I’m advocating for? Do you think I’m advocating for some three-ring circus crazy-town of a layout?” I’m not. I’m advocating for: take the column of text and put it off-centered instead of centered.

Jeffrey: Right. Right.

Jen: Users are not going to be confused! It’s okay if the left margin is twice the width of the right margin. Or your navigation needs to be in a place where it’s expected to be, but it doesn’t have to be exactly the way that it’s been for the last ten years.

Jeffrey: Also, you were talking about film. With the first close-up, people ran in terror. They thought it was a giant severed head, they didn’t understand. And then they did. And when the sea waves were coming toward the camera, it was an ocean shot, they went out on a boat—people ran from the theater like they were going to drown. And then they got it. Today, if you think about the filmmaking we have now and imagine someone from 1910 watching just any modern film, they’d be terrified, they’d be hiding under their seat. Now audiences accept it and go, “That was fake. That was CGI.” People go in suspending their disbelief and yet looking for the CGI, right?

Jen: Yeah, and our users are smart, they’ve been evolving over time, and nothing is static.

Roger: They can find a “go” button, they can find the “okay” button if it’s on the left or right. It’s really annoying, but they can find it.

Jeffrey: Also, our generations are dying out, and, like, my daughter’s generation, they know how to use everything. I get angry, as a designer, I go, “This doesn’t make sense because the user interface was badly thought out.” But my daughter and her friends, they know how to do it. They look at it and go, “Oh yeah…” They can make mental models all day long. They can’t necessarily read, but they can make mental models… Actually, she’s a very good reader, that’s a stupid joke. But she learned this before she learned reading. She was slow to read, but she was using an iPhone at two.

Roger: Bringing up video is interesting, because in the current YouTube-standard world of video, video is its own layer that has nothing to do with anything else. If you want type in video, you put it in the video. You super it, or however you do it in your software that you’re editing the video in. One of the things I’m working on, and I do have a client in Myanmar who suddenly is starting a new publication that is going to be print, web, and video. So, it’s a 24-hour live-streaming news channel that’s over the top, it’s just on the web, and then it’s a print publication in Chinese and Myanmar, or Burmese. And the website has three languages: Burmese, Chinese, and English. How do you do all of that together? With a small staff? Because there’s still not a huge revenue stream, it’s in a small country and in a development stage.

So, we’re looking at ways, how could you separate the type… Because if you’re going to do video on the web, you need supertitles, you need to be able to let people read it if their sound’s off if they’re in a noisy place, or if they’re in their classroom and they want to watch video and not watch their teacher; you have to do it without sound. So, voiceover is not the answer. If you’re doing three languages, you have to have a layer of translation, and supertitles on top of that. So, how do we do that? And it gets very interesting, how do you know what the video is, or that the type is the right color, that they can read it, yada yada yada…

My friends in Holland are feverishly working on how you do responsive variable fonts that actually have server cues on what color, and other treatments—the outlines or shadows—they might, automatically in the font, take on. It’s very interesting stuff. So, I think that there are people willing to—I mean, this is not a first-world product, this is something happening in the developing world, where they really think, “Let’s make it really reassuring and great-looking, but at the same time, let’s forget about what video has been on the web and do something else.” I love that. It’s a big typographic challenge both for the programmers and the people who figure out the algorithms, and the type people, too. What are the fonts that can work in three languages together simultaneously just by flipping a switch?

Jeffrey: I’m really glad you said that, because I think supers in video are something that a lot of us don’t even think about, and should. I’m a web designer. I think about it because I have to, because of accessible video… I know I’m going to piss off either Netflix, Hulu, or Amazon. I don’t remember which. It’s either Netflix, Hulu, or Amazon, I was watching video and I discovered that, speaking of customizable, if you go into the supers, you can set the size, you can make it with a black outline, a white outline, you can make it yellow… My daughter went in and started making it like really crazy, like yellow type with an orange outline. But it’s like old Windows black metal jacket or whatever from Windows 3.1. Users can make stuff ugly as hell if they want to, which is my deal with customization, my concern with it.

But, I mean, there’s an opportunity. Setting type on video is going to be super important, and like with responsive design, some people are watching it on their little phone, some people are blowing it up to their full screen, some people are watching it inside a browser window in Firefox while they’ve got another browser window open doing something else. There’s a lot of complexity. Also, VR. Web VR is an emerging standard, and type for VR just for navigation, not enough people are thinking about it right now. I would love to see… Well, I’m sure the folks at Type Network are thinking about it. It’s type that’s experienced on a curve, and it’s lower res.

Roger: Well, that’s the interesting thing. I don’t think that the kind of customization you’re talking about is going to be done by users for the most part. I think that we’re happy to be able to make the type bigger, but how many people actually do that? 10 percent? I don’t know. It’s not a big number.

Jeffrey: People who need it.

Roger: People who are struggling. But at the same time, if you could find out what it is they like, if you can track their experience… And one of the things Matthew Carter said, “Readability is like 80 percent familiarity.” It’s like the web standards you’re talking about—or web conventions; they’re not really standards. If you go against the conventions, sometimes you lose people. At the same time, you can’t really expect them to fill out a form of their choices of design. But if you hear back from them in the same way we understand what device or what their viewport is, if we could find what they find easier to read, then we can make it more like that. And that’s an algorithmic problem more than it is a user decision.

Jeffrey: It’s almost a cross-site problem, too. Imagine if there were just a typography layer abstracted from your individual site which noticed after a while, “Wow, when this customer went to Type Network they boosted the font size, and then they went to A List Apart and they boosted the font size, and then they went to the New York Times and shrank the font size and changed it… So, what is it that they really seem to need?”

It would have to be really smart. Like, well, maybe they did this because of column width, or maybe they did this because of where they were viewing it or… But a sophisticated machine-learning layer… I mean, we have a primitive example of it now in, for example, I can tell my iPhone that I need a certain minimum type size in software that supports this, and then I use one Twitter client that supports it and my font is bigger. Let’s say I made it a little bit above middle because my eyes aren’t as good as they used to be, so I make it a little bit bigger than normal, and another software device doesn’t do it. But still, that’s the operating system extracting that.

Roger: The user.

Jeffrey: Yeah.

Roger: Well, I think you want the users to be complicit, but you can’t expect they’re going to do it.

Jeffrey: So, imagine a layer that exists… I don’t know where it exists, maybe the same place that—forgive me, I’m going to say AMP. Okay, I’m sorry, I hate AMP. But it exists somewhere, it’s being saved somewhere, or it exists where Google Fonts exists. Or it doesn’t have to be Google, it could be somewhere else. You opt in, it tracks you, and it starts adjusting font size to be better for you based on watching what you do. Would that be a boon for designers? Would that be a boon for users?

Roger: I think it’s inevitable. I think that in the same way that Amazon gives you stuff that you like, or that it thinks that you like—and it’s relatively successful at it—we’re going to see that affecting layout, too. And the typographical layers, also there’s some very interesting things that happen with language. Because, increasingly, your design has to go in multiple languages. The world is getting global and we want to be able to communicate with people who don’t necessarily speak English. So, then what happens? That’s another question of writing the rules so that layout can adapt to Chinese, which is really a functionally different thing. It doesn’t justify the same way; the whole thing is different. It’s these little squares that are very condensed. You can get much more text in Chinese in the same amount of space as you can in English or any Latin language. You know, one wag said, “Forget about icons. We could just all learn Chinese and we could put a Chinese glyph for every single thing that we needed touch on.” And it’s not a bad idea. I mean, we probably all should learn Chinese.

Jeffrey: Jen, in one of her talks, talks about we act as if design ended in the 1950s and 1960s in Switzerland and we’re all doing this one thing, this grid-based Helvetica approach to things. And that’s great, but there’s thousands of years of graphic design history from Asian cultures and Arab cultures and all these other places. It seems to me if you were designing for a Chinese website, that’s a perfect opportunity to not make a Western layout based on the grid, based on Swiss typographic design conventions, but instead actually look to Asian traditional graphic design, which was, after all, built around those languages, and use that on the web.

Roger: Yeah, and they had typesetting before we did.

Jeffrey: Indeed they did.

Jen: It’s interesting, because on the one hand I really want the kind of graphic design industry or whatever, the tradition of 20th-century graphic-design teaching and understanding, to come to the web because I think there’s a lot of power there. But on the other hand, I struggle with it a lot because it’s so incredibly arrogant and tied up in ideas of white supremacy and Western-culture supremacy, and, “This is the right way to do things,” and, “This is the way to do a grid, and this is the way to do typesetting, this is the way to use a font, and this is the way to do everything.” I don’t want to carry those ideas around. I don’t want us to all go, Hey, how should I use a grid? Oh, let me look at these experts, these particular people from this particular culture—

Roger: —from the Bauhaus… [laughs]

Jen: …and listen to them.

So, I’ve been really trying to educate myself around—because, also, I didn’t have a graphic design background, I didn’t have that kind of formal training, so I’ve been teaching myself over the last two years… But to balance out kind of, I don’t know, I have three feet of Western books and one foot of non-Western books; I really want that to balance back out even more. Trying to learn about Arabic design, learn about—like Japanese tradition of line grid, especially in vertical layouts, and all the rules and the details… It’s not like that happens separately. That’s definitely been cross-fertilized with modern ideas and cross-fertilized with the ideas out of the mid-20th century, lining things up and being rigid and having rules, and following the rules. All of this has been going back and forth the whole time.

But I do think it’s important for the web industry, when we are starting out on this new thing, to learn CSS Grid and to think about layout, and to learn entire new techniques for layout, to do so with a global perspective and to not fall into this idea of, “Well, this book I have on the Swiss use of the grid, or this use of the grid, that’s the way we should all do it.” No, that’s a way. It could be cool. There’s ideas we should look at, maybe we want to bring those ideas over, but let’s not get all, you know…

Roger: Typographically, there’s whole different conventions. In addition to reading the other way in Arabic, or the calligraphic tradition in the Indic scripts and in Arabic, and in very old Chinese or Japanese or Korean, you had to connect characters in a different way according to context. Most typesetting systems tried to force that into a Western model, which is not necessarily that successful. Now, in China there’s kind of a different thing going on where the square that all characters fit in, which started I think really when they started movable type, when they made wooden fonts, way before we did—that square made it easier for them. So, they kind of squished letters into that. Then after 700 years, people kind of get used to that, or 800 years, however long it’s been. So, then if you reintroduce Chinese calligraphy into the web, people get confounded. It’s like, “What is this? It’s dripping down the side, I can’t understand it, I can’t read it.”

Whereas in Devanagari, or Bengali, or Tamil, or the other big languages in India, the inability to have good ligatures makes it hard to read. I mean, the first fonts in the Indic world were so unreadable that Indian kids all did texting on their phones in Latin. They transliterated their own language in Latin because they couldn’t read the damn Devanagari. That’s been true in Myanmar, it’s been true in Cambodia, all the way through to the so-called Brahmic culture of lettering, it’s been very hard to adapt to electronic devices. It’s happening now. Google is actually leading the way, in many respects, on that. Google has 50 Devanagari fonts in Google Fonts. It’s kind of amazing. But it’s still setting types as separate glyphs.

With variable fonts, which we might not want to get into, there is an opportunity people like John Hudson have talked about, of using the hyphenation table in HTML to look up how you should connect ligatures in Indic languages. That would be great—and how much more fluid and beautiful we could become. For Westerners… I mean, I can’t speak any of these languages. I watched John Hudson at TYPO Labs Berlin, which you can see on YouTube. It’s an amazing idea of how this can happen. However, you need knowledge like his to be able to understand what it is, what we need to do. I think that’s the global challenge. We’re really moving quickly into a much more complicated world.

Jeffrey: There’s so much, again, to unpack, but I’d like to focus just on variable fonts for a minute, if you don’t mind, since I know you guys are working on them pretty hard. Tell me about that.

Roger: What do you want to know?

Jen: What is it?

Roger: I think the easiest way to understand variable fonts is that it’s several styles of a font, of a typeface family, pushed into one font file. So, you could have bold and light in the same font. Instead of having two or 12 or 15 or a hundred different variations of the weight of a font in different files, in your font menu to select, they could all be in one font. Using CSS, you could say, “Okay, I want a weight that’s 1/20th of that,” and the font will just respond—if the browser is up to it, which I think we’re seeing. All the browsers are making an interface that you can do this. So, the first iteration of variable fonts, so with these variations of weight or width or size, are happening in the kind of development versions of the big browsers right now.

Jeffrey: Are they doing it with fonts and some new CSS? Are they doing it with SVG? How do you control something like that that wasn’t envisioned when they wrote CSS?

Roger: Well, a variable font is a version of OpenType. It’s the next thing. So, the fonts are downloaded on the web just the way all TrueType or OpenType fonts are downloaded. The trick is to then specify how you want the variation to be issued on the page. That takes a little bit of a learning curve, but there are interfaces that people are working on to have slider bars for the three or four different axes that are in the font. Now, Google, Apple, Microsoft, and Adobe have embraced the first three axes of these fonts—weight, width, and size—because if you have one font instead of 15 fonts, the page loads faster. So, there’s an improvement of 30 percent of file size per font. Now, if you’re YouTube, you don’t maybe care too much about that. But for Google at large, the amount of text that’s being downloaded in the world simultaneously is a big thing, it’s a big number.

Jeffrey: Just so I understand: if I were using Adelle Sans and Adelle in a layout, in theory it could be one variable font that contained the right glyphs and serifs…?

Roger: Yeah, you could have serif axes. All of this started, we saw this with Multiple Masters that Adobe did years back.

Jeffrey: Right, ATM, 20 years ago.

Roger: Yeah. Then, right at the same time, there was a kind of untracked project called GX at Apple. If you look at the OS on Macs now, there’s a font called Skia, it was based on Greek inscriptions. It’s a beautiful font, and it is actually a variable font, it was done in TrueType GX. That’s the model of what we’re doing now. When Google heard about what GX had done at Apple 20 years ago, they said, “This could be a real savings on the web!” So, Google was the big impetus to make this happen.

So, they hired our company, Type Network, to make two demo fonts, all on GitHub. If you go to GitHub and look up Amstelvar, or Decovar, or if you go to the Type Network site, you can find these fonts, you can use them now, you can download them from GitHub. There’s a fairly interesting demo going on at the typenetwork.com site. Amstelvar uses these three main axes, and it’s quite exciting. And then Decovar uses lots of others, including the way that terminals and serifs are done on the letters, and decoration inside the stems and stuff. So, it shows you what the potential of variations might be for design, it’s really quite fun. These were both done by David Berlow.

Jen: Well, my understanding is that, for example, if I want to use Goudy right now, if I want to go and get myself a web font, download, and use Goudy on my website, for my body copy—like, okay, cool. Oh, I’ve got some type I want to do in italics? Well, the person who maybe doesn’t know as much about what they’re doing would just say, font-style: italic; and boom, you’re done. But if you really know a lot about typesetting, you’d realize, no, we don’t want to just take the regular font and make it sideways, like slanted. We want to download the italic font because the italic font is more beautiful.

Okay, so now you’ve got two fonts: you’ve got Goudy and you’ve got Goudy Italic. But then are we going to do some bolding? Okay, we’ve got the bold. Do we need the bold italic? Okay, well that would be four. But that’s too much data, so let me just… I’m not going to use bold on my website. Okay, why? Well, ’cause. So, I’ve got Goudy, I’ve got Goudy Bold

But now I want to do my H1 headlines in Goudy, too, but I really shouldn’t just take my font that was made for 14 or 16-point type and make it 36 points, because it’s not really nearly as beautiful as if I get the Goudy Display font. So, I get Goudy Display. But do I need Goudy Display Bold? Or, actually, they have a Black and they have a Light, and they have a… You could end up with…

And this would be, okay, we just have one font, and that one font knows, Hey, when you’re little, be like the little version of the font, and when you’re big, be like the big version of the font. And when you’re italic, the italics are actually computed and hand-coded into the same font and the bold is hand-coded into the same font.

Jeffrey: Is that what we’re looking at, Roger, for the future of something like Decovar?

Roger: Yeah. I think… Italic is the big challenge there. You’re probably going to end up with separate italic fonts. But in the simple italics, like something like Avenir italic, it’s mostly slanted anyway and just has some changes in some of the terminals to kind of make it more italic.

One of the things that Decovar shows is that you can change the x-height, you can slide up and down, or you can make other variations that are fun. And we hear a rumor that Adobe is going to support these fonts for desktop typesetting in the near future, maybe in the third quarter or maybe the fourth quarter of this year. That’s fun. I mean, that’s kind of interesting that they’re doing that. Because right now we’re talking about the web. But on the web we have a lot of SVG files for headings, for kind of static stuff that doesn’t have to be typeset, so there’s branding involved and all of that. And certainly in print it’d be fun to be able to make logos where you can make the text fit exactly in a rectangle that can be the same for different words—“baseball” and “basketball” could be fitted in the same rectangle…

Jeffrey: I want to make responsive logos, for instance, that’s just the graphic, and then above a certain size it’s the mark, and then above a certain size it’s the mark and type; and then the type, maybe there’s two different variants of the type. That’s coming soon; that’s gotta be coming soon.

Roger: Well, that I think is very, very possible. There’s an interesting site called Axis-Praxis, Laurence Penney’s site that you can go to—axis-praxis.org. You need a compliant browser, like the overnight build for Safari. He’s got some fun things like that you can play with right now. And I think you will—instead of using SVG, we could put fonts in there. What I was talking about is the desktop thing for an ad or something, or a publication design, that you want to print it, it’s not just web. So if Adobe gets in, and they’re one of the key members of this consortium that’s pushing this, this whole world could start taking place later this year. It already is happening, and all the browsers are working on it. I think the designer user interface, our interface for designing these things, is still up in the air.

Jeffrey: I think we have to wrap. We’re going to put Axis-Praxis in the show notes, and Type Network in the show notes…

Roger: That’s it?

Jeffrey: No, I could do this all day. You guys are so brilliant. I love chatting with you. It even makes me feel smarter, and there’s so much to learn and so much to play with. I hope that folks will continue to read. We’re going to have labs.jensimmons.com in the show notes, which is where Jen is showing the kinds of layouts that can now be done, for example, in CSS Grid, which we didn’t even get into. I would love to do this again in the future, because there’s so much. But I’m so sorry, my friends, I think we have to wrap things up.

Roger: It was fun.

Jen: Thanks so much for having me.

Jeffrey: Thank you both.

Roger: Thank you very much. Thank you for listening.

Jeffrey: Thank you, thank you.

“>

What can the era of mechanical typesetting teach us about layout and typography for today’s (and tomorrow’s) screens? What comes after the page-view business model? Can typography encourage long-form reading—not just scanning? What are the most exciting areas of cutting edge experimentation in typographic technology and digital layout, and what new skills will we need to design tomorrow’s web content?

What we talk about

  • How layout and typography were connected in the age of metal type, and why they will be again.
  • How to avoid being overwhelmed by all the tools and typefaces that are available today to today’s designers.
  • The history of layout on the web, and what multi-device reading and orbital publishing means to the practice of publication design.
  • Moving away from frameworks; bringing creativity back into layout.
  • Layouts that break the mold (and how to encourage them).
  • Helping the reader feel like a collaborator. The new wave of user customization, and how it impacts our designs.
  • CSS Grid and its portents.
  • Why it’s okay to try new layout ideas (why users won’t become confused).
  • Experimental, responsive variable fonts. Fonts that can work in three languages simultaneously, just by flicking a switch.
  • WebVR and typography.
  • Getting past the pervasive idea that 1950s Swiss layout was the final word in good design.
  • Typographic challenges in Chinese, Japanese, Korean, Bengali, Tamil, and other languages.
  • Variable fonts. What they are, and their potential to deliver more typographic power with less bandwidth.

 

Featuring

Transcript

Jeffrey Zeldman: Hello, welcome to A List Apart Events. I am here with Jen Simmons and Roger Black. My name is Jeffrey Zeldman, and we’re here to talk typography and layout on the web. Good morning, everybody.

Jen Simmons: Good morning.

Roger Black: Good morning.

Jeffrey: Jen, you had a thought about layout and typography and their inseparability, or lack thereof. Do you want to maybe kick things off with that?

Jen: Yeah, well we were just chatting a little bit before we started recording, about typography and layout, and I was thinking again this morning about how I think we—like, the web industry in the last couple years, we’ve really worked on typography and thought a lot about typography in maybe the last five years, figuring out how do you pick good fonts, how do you pair them together, how do you decide what size to make everything, and how do you set up a rhythm or make it look beautiful.

But in all of those conversations—on the web especially, but even sometimes if you’re thinking about InDesign—talking about typography or reading typography books, it’s all about the typefaces and the details of the type. But if you think back to setting metal type, or you think especially back to the era when the Linotype machine dominated and type came from this crazy contraption where there’s this giant keyboard and molten lead being squirted into these pieces of machinery that were moving and clacking and making all this noise, and on the other end would come out this line of type, this literal metal line of type… Layout, the actual layout, and the typography, were completely connected, they were the same thing.

I first thought of this because I was invited to speak at a typography conference and I kind of felt a little bit like, But what do I know about typography? I know about it as a person who sets type as a designer, but I’m no expert on typography. Then I was like, No, but typography and layout, now we think of it as two things, but we used to always think of it as one. It used to just be one thing.

Roger: Well in that era also, there was somebody in the middle, a typesetter or a compositor who actually, in the old days, knew something. When I worked for the New York Times in the ’80s, they still had these ex-Linotype operators doing pasteup, which was a little humiliating for them, but they actually knew what type was. In the era of kind of industrial specialization, we had a situation where those skills were put into the printing department or in the composing room, or at the printers, and the editors forgot how to do that stuff. If you go further back, you had Benjamin Franklin setting his own type. That was a different hands-on kind of typography, and we’re sort of back to that now.

Jeffrey: That’s really interesting. You’re right. I’m a publisher, it’s one of the things I do, but I started as a person writing and setting type on the web, to the extent that I could do that. It’s funny, I remember in advertising, too, we had that same— I started advertising in the late ’80s/early ’90s, and we had a guy, he would come in and buy us drinks basically, and we would spec type by looking at a specimen book and taking a guess, and he would come set it, and then we would cut apart his pasteup with a razor blade… Jen, do you remember this, too? Were you working during this period?

Jen: Yeah—

Roger: She’s not that old. [laughs]

Jen: No, I was trained in pasteup. I started in pasteup.

Jeffrey: This is amazing—

Roger: And you had a limited number of fonts, because it was whatever that typesetter had, or whatever your publication had. A graphic designer’s role might be to add more leading or see if there was another point size they could use. But often in a newspaper or a magazine, you were severely limited in the choices, there really weren’t a lot of fonts. One of the things that I think bewilders current designers is the proliferation of fonts. There are tens of thousands of fonts, many of them free at Google, or you move up a step and you go to Typekit and you spend just a little bit of money, but you have a ridiculous amount of options. That’s confusing for folks.

Jeffrey: Roger, you’ve been an art director for decades, but you also are cofounder and co-owner of a type company. In fact, you’re one of the reasons we moved to webfonts. I mean, I remember when this started as an article from Håkon Lie, like 12 years ago on A List Apart. It was like, You know, we should have webfonts because CSS will support it. What are we doing about this?

Roger: It was a long time. 1997, 20 years; there was a solution for webfonts that the community rejected. It was Microsoft’s EOT file format, which we don’t have to talk about. But in IE4, they supported the @font-face spec in the HTML W3C standard, and it was nice. But we said, “That’s not a standard, it’s not open, we don’t like that. We’d much rather use the Netscape solution,” and then Netscape kind of disappeared, and there was a lot of Arial for many years after that.

Jeffrey: And Jen, you work now at the place that wouldn’t exist without Netscape; the sort-of descendant, the grandchild of Netscape, which is Mozilla with the Firefox browser, which is like three generations, five generations maybe, in terms of rendering engine, from the initial…

Roger: From Urbana-Champaign.

Jeffrey: Mozilla really believes in open source and open fonts and the open web and all that stuff. And I know you’re here as Jen, you’re not here as a Mozilla representative, but still, it must color your perspective to some extent.

Jen: Yeah, well one thing I didn’t know until after I joined Mozilla and really got the opportunity to spend more time looking at the details of CSS and the implementations and comparing one browser to another, and looking at Firefox and seeing what’s missing, what do we need, what CSS should we prioritize… Firefox actually has really great support for fonts and typography. And there’s some details about CSS that we could be using, but it’s not really quite supported in every browser, so people hesitate to use it. Over and over again, I go to check, Have we put this in Firefox? Should I be advocating for this? And most of the time, with everything for typography, it’s like, Oh, we already did that. We did that a couple years ago. We’re waiting for other browsers to catch up at this point.

But I think you’re right, Roger. I think there’s so many tools when it comes to setting the type and making decisions about what font to use, and all the details of how to set it, that it’s gotten really overwhelming. People are a bit at a loss as to, like, what they need to know and how to do a good job.

Roger: Earlier this year, Jeffrey joined forces at Poynter, where I am today, Poynter Institute in St. Petersburg, Poynter Design Challenge. We asked five designers to come up with a better typographical solution or a better publication solution, better website solution for reading and for layout. And, there’s a very, very simple HTML prototype that you can find on the Zeldman.com site, which says, “Hey, let’s just use some of the typographic specifications that we’ve had for a long time—pull quotes, subheads, and nice captions, and a variety of these things.” He wrote up a nice HTML spec, and it’s funny, when we see typesetting on many websites, the homepages might be pretty exciting, but you get to the basic story page, and they’re god-awful. We have the classic news story page, and, you know, text interrupted by all kinds of advertising and other crap, and then a bunch of, you know, kind-of Taboola doodads at the bottom, and other things interrupting, and it’s very hard to read it. It’s like hundreds of years of typesetting history have completely been ignored to try to get a few clicks. And that’s one of, I think, the big challenges in typography. How do we circumvent the business model that’s making these ugly pages?

Jeffrey: But haven’t you also noticed, conversely, that on, let’s say, a few of the bigger papers, like washingtonpost.com, newyorktimes.com, the article pages have been pretty beautiful for a while now, that they use big type, very readable layout…

Roger: Yeah, or Medium.

Jeffrey: Yeah, Medium.

Jen: The Atlantic is a really great one.

Jeffrey: newyorker.com.

Jen: The New Yorker, the Atlantic, and the New York Times, to me, are the three big leaders in creating much more beautiful layouts.

Roger: So why do you think they’re succeeding? Because they have more money, or what?

Jen: I think something happened in the internal politics and probably in their user research, where they were able to say, “Hey, clutter, clutter, ads, ads, horrible, horrible. People don’t want this. Let’s declutter the page. Let’s find a way to get the ads that we need onto the page but do it in such a way that makes both the advertiser happy and the user, the reader, much, much happier,” rather than kind of going off of a bunch of assumptions about what the layout needs to be because of the advertising model.

Jeffrey: Those papers have a business model—

Roger: That’s off of their business model.

Jeffrey: Right, we’re saying the same thing. Yeah, those papers have a business model where it’s partly subscription, so that enabled them to experiment more. I also think they had to. I believe Rich Ziade’s Readability program from a few years ago, which is now pretty much defunct, sadly, but if you use Safari, an early version of it is built into the Safari browser; if you go to the article view, that’s just Readability 1.0.

But I believe that had a huge influence—I mean, it did on me. Like, after I looked at that for a while, I was like, I can’t have this cluttered… I loved my old cluttered layouts and I loved thinking that I was so good that I could make a cluttered layout that didn’t feel cluttered. And all of a sudden I was like, No, this is bullshit. Let’s remove everything inessential. Let’s strip it down as much as we can and make it a good reading experience that makes you sit back. That was the other thing to me. A page at newyorktimes.com, you actually lean back and analyze the news, as opposed to leaning forward and squinting. I think, physically, if you believe there’s a mind-body connection physically, those designers are saying, “Sit back, think about what we’re presenting. Don’t take it as gospel. These are the facts as we understand them. What do you think?”

Jen: Well, and, you know, “We’re going to make some space for you to really think,” like you said here, like, “instead of just tossing so much crap at you that you need to run away almost immediately. So, you’ve got to read, scan, fast, fast, get out of here, because we’re chasing you away.” To be like, “No, no, no, we’re not going to chase you away. We put a lot of time and effort into this.”

Roger: It’s fascinating to watch the acceptance of the idea that people are not reading your publication on desktop, or just at one place. You go to the New York Times, you go to Medium, and you’re sometimes on your phone, and sometimes you might have a tablet, and you might have a desktop, and you might have a huge screen that’s like what I’m looking at you guys on, that’s a 60-inch monitor.

Jeffrey: Like we’re on CNN. But also, don’t forget orbital content, the idea that people aren’t necessarily reading your content on your publication at all. What does that say about our freedom to innovate in layout, if the content that we’re creating is acceptably good enough anywhere? We’ve gone from… Right? That was the threat behind Readability, which for those who don’t remember, it was a device that removed all the cruft—I should have said that earlier. It removed all the junk from a layout so that it was a nice, readable…

Jen: Jeffrey, I think there’s a good chance that people are using those tools a lot, and that we don’t have any statistics on them. Google Analytics doesn’t tell you how many of the people who come to your website click on the reader-mode button. Safari has a reader-mode button, Firefox has a reader-mode button; Firefox has built Pocket directly into the browser, and we’re working on things to figure out how do we give people a better reading experience, especially when they’re going offline, they’re hopping on a train, they’re running around… And the fact that too many websites are crap. I mean, I’ve clicked on links in the past week where I just—I would have liked to have stayed on the website and seen it in their typography and everything, but I literally couldn’t. It was making me physically ill; it was such a crazy, cluttered, scrambled mess.

Jeffrey: Yes, yes, yes. Readability used to provide those stats. I believe Mercury Reader provides those stats. I’m not sure, though.

Jen: Yeah, the funny thing is, you know, people obsess all the time about how many IE6 users do we have, or how many IE10 users do we have, how many IE11… Nobody ever asks how many people aren’t even staying on the web page because our design is so terrible. It could be a really high number and we just don’t know it, because I don’t think that any of our stats tools measure how many people use tools like Readability, or Pocket, or Read It Later, or the reader modes, or the Instapaper… There’s a zillion ways to do it. It could be 40 percent of your audience, and you would have no idea.

Roger: Yeah, and I think that the page-view business model, which is audience-based, the idea that you get as many people looking at the pages as you can… Which is really the old broadcast model, it’s something that when publishers went into the web, they thought, “Okay, here’s our chance… We’re broadcasting, and we can have a huge audience and make it up in advertising.” For some of them, that’s working; for most of them, it isn’t. But it’s distorted the reading experience in a horrible way. And all you had to do is compare most websites, the conventional text page to Kindle…

In the ebook world, the typography, you can complain about the font choices and things like that, but once you’ve set your point size that you like that works on your device, it’s maybe no better than the cheap paperback, but that’s not bad, you could read it, and you know that you’re there to read. I don’t think that—we tried, like at the time at Readability, we were doing TreeSaver, and the business model didn’t support that because it didn’t get page views. The idea of reading a 2,000-word thing all the way through isn’t really treasured on the web. It’s not the important thing. The important thing is just to get to the beginning, to just show up, and then they count you.

Jeffrey: Can typography help overcome that long-ingrained habit of web readers, of, I’m going to read the headline and scan a couple of paragraphs and I consider that I’ve read this piece? Can a good layout actually draw people through the whole experience?

Roger: I think so. I mean, I hope so. What is a good layout? What are your rules of good type layout?

Jeffrey: I think it depends on the job it’s trying to do. Right now, I’m working on an ecommerce site, and I’m trying to apply some of the same principles. I’m still in the rough sketch phase, which is the most fun for me. But soon I’m going to actually have to commit to pixels, and I would like to bring some of the same thinking about classic, big, readable, engaging typography to a site that, by its nature, has to have a lot of stuff happening on the page. It can’t be a simple reader layout, it has to be a lot of stuff for you to browse and make decisions about and click pop-ups and all kinds of stuff. I guess my answer is, “It depends.”

But Jen, you’ve kind of abstracted the layout layer in a way. You’re currently actively engaged in studying layout not almost for its own sake, but what can layout be. Rather than starting with, “Okay, this is a news layout, so let’s do it the news way, this is a hospital page, so let’s make it look like a hospital page,” you’re going, “What can we do with the page?” Who was that great art director, Roger, from advertising in like—well, there were a bunch, but in the ’60s there was the guy, was it [Bob] Gage? They asked him how he stayed inspired, and he said, “I just keep finding new things to do with the page.” I think we have that opportunity on the web and haven’t really been using it.

Jen: Yeah. I mean, you know this, Jeffrey, because you’ve seen me talk at a lot of conferences. New technology has come along much in the same way that, once we finally had fonts and licensing for fonts to be able to use with @font-face, suddenly there was this new era of web typography. Because CSS Grid shipped in March 2017, almost three months ago, we now have tools to do layout in a way that was either completely impossible before, or it was possible, but it was laborious; it was just kind of too hard, or too fiddly, or too fragile to really be worth doing.

And so now with CSS Grid, but also with flexbox, with multicolumn layout, with box-sizing: border-box, we have like this whole bunch of combination of things. I think we really need to move away from using frameworks that we download from some third-party website and just kind of dropping everything into the layout that everybody else is using, and ask this question of What’s the job of the page we’re building? Maybe it’s an article, maybe it’s not. Maybe it’s an interface, maybe it’s a store, maybe it’s something else. How is it that people are trying to use it? It’s design. What are they trying to do? What do our users want? What do they need? What are they struggling with?

How can we use design, how can we use layout to better serve them, and really make an experience that’s the kind of experience that we want, that’s on-brand, or that’s easier or more elegant to use, if that’s the right value for this project or that helps people do the job that they’ve come there to do? And I have a feeling we’re going to see a huge change in layout, that we’re going to look back three years from now, five years from now, and it’s going to be really clear what came before and what came after, and we’re right at the tipping point of this massive change in page layout.

Jeffrey: I agree. I’ve been very inspired by what you’ve been doing and I’ve been following your articles, and your conference appearances, and all that. I also have a little story. One of the things that I do is every other semester I teach at the School of Visual Arts in the MFA Interaction Design program, and this semester I had a student, Ritwik Deshpande, he’s a brilliant guy, he was a journalist in India. He was very interested in music, and particularly in synthesizers, and he was very interested in creative web layouts and found that this whole Readability, Medium, this whole thing that’s been happening, which on one level is very good because it makes newspapers readable, on the other hand was sort of bringing this sameness to everything. He was sort of coming at the same thing Jen’s coming at.

So he, for his project, decided to do a piece on synthesizers, the reason being everyone learns about music synthesizers the same way. They sort of look at these instructional manuals, and there’s no interaction, there’s no dynamic interaction with… Actually, basically he designed something like you might see at a children’s museum in a way, like, this is a sine wave, this is a square wave, here’s what happens when you interact with these things. He used JavaScript and CSS to make these little interactive modules that showed a non-synthesizer player what it was to interact with synthesizers. He meshed that with explanatory text, and he made a custom layout that explained all this.

The reason I had to help him with his thesis was it was like almost everything I’m interested in in one piece, because it was about music and synthesizers, which I used to do, I used to play them; and it’s about web layout, and it’s about, How can I make this interactive learning? So, it was everything—education, writing; when does a page stop being a book-like experience and become something different; how far can you go with that before people become confused and need the reassurance of traditional paragraphs? He’s going to do more with this. It’s not a product.

Also, I loved it because usually when you have people graduating with an MFA in interaction design—I say “usually,” but it’s only been happening for a few years—but usually they’re trying to make a product. And this gentleman, Ritwik, was basically trying to make a learning experience for himself as a graphic designer, as an interaction designer, and as a fan of synthesizer-based music. I just thought, this is great, because it reminded me of the old web: I’m gonna make something cool that doesn’t exist because I’m curious about these things. I miss that. I love our new professionalism, but I do miss that experimentation for its own sake.

Jen: Me, too.

Roger: Yeah, there’s too much just copying the code.

Jeffrey: Yeah, especially when—

Roger: We’ve done that from the beginning.

Jeffrey: Right, but we didn’t have—if I made a two-column layout, I didn’t release it as a platform.

Jen: And a brand. [laughs]

Jeffrey: Right, and that sounds derogatory. But honestly, what people have made with Bootstrap… And it’s so complex. I’m not denigrating that. I’m not comparing it to my stupid two-column layouts from the ’90s. It’s a big deal. I think Rachel Andrew actually talked about, in her 2015 article, in her Christmas publication…

Jen: 24 Ways.

Jeffrey: Thank you. She said, “We told everyone, ‘Hey, web standards allow you to separate this structured content from this ugly—you can make a presentation and you can change it tomorrow, and you don’t have to have… But then as people wanted more and more complex app-like layouts with layers and everything, that was a lie.’” You ended up having to write HTML that was about, you know, divs that were sidebars. You didn’t have to, but if you wanted to do a certain kind of layout, you had to. And it became so complicated that something like Bootstrap’s just like, “Hey, if you’re going to do this anyway, I’ve gone through the trouble of doing it for you and I’ve got all the fallbacks in here, so here you go.” And you can’t really blame the industry for grabbing hold of something like that.

Jen: I feel like looking at the arc of history with layout, the shorter arc, I feel like Bootstrap and other tools like it—Foundation, and there’s others; and long before them there was 960 Grid and YUI I think was the first one, the Yahoo User Interface Library—there are reasons for that, and I think we needed them. I think we got into a situation where we needed to ship work, and we’re still trying to figure out what responsive web design meant, and we’re spending a lot of time reorganizing our entire workflow and our teams and what it meant to be a client or what it meant to have a content team versus a design team versus an engineering team… We had to restructure our whole entire organizations because of responsive web design. So, we had a lot going on, and just reaching for Bootstrap or something similar, it’s a good stopgap, whatever. But I think that era is over, and I think that a lot of companies, a lot of people are going to be like, “What are you talking about, Jen? There’s no way.” But three years from now, you’re going to be like, oh gosh…

Jeffrey: I also think there was an initial period—I mean, Roger, you were an exception. People who were trained designers, who knew what they were doing in terms of graphic design and art direction, who became web design gurus—that was an exception. Mostly it was like philosophy majors and English majors and all kinds of people without a design background. And then we had the period where there were more people like Roger. So, there was like the generation that, say, Jason Santa Maria represents. Somebody who went to art school, went to design school. There’s lots of designers like him; that was like this next wave—

Roger: And knew their history. Jason knows history.

Jeffrey: And knew their history. But now there’s a new generation of designers, I would say, who see themselves as product people, who are product people, and who actually think that layout and all that is some secondary work to be done by their assistants, and I think that might be hurting us in a way. The organizations listened to us and say, “Yes, design is very important! You’re right, we’re going to have an in-house design team!” But they don’t have actual hands-on designers necessarily running those teams. They have product people and marketing people who aren’t designers in a big sense—”big D” designers or whatever the hell that means. You know what I’m trying to say?

Jen: Yeah.

Roger: Yeah.

Jeffrey: There’s fewer people who came up through the craft of actually setting type and all this stuff. And so the juniors are doing that stuff, and they’re the ones, like Roger was saying in the beginning, being overwhelmed by all these typefaces and all these choices and all these tools, and the senior people aren’t bothering their pretty heads about typography and layout. They’re thinking about user retention and onboarding and all this stuff. I would love to see some product people also, or I would love to see more respect for this area, in addition to the respect we’re showing that aspect of design.

Roger: In the last day, I have had a big conversation on Facebook about photography, about the cover of Newsweek, of Rolling Stone, and Esquire, which I thought seemed oddly amateur this issue. It was fascinating to see the way people jumped on that conversation. There was this one guy from Singapore who just commented, “Well, ultimately it has to be in the hands of the readers. The readers will decide.” I think one of the things in all of this conversation about where we’re going with typography or layout on web, or in digital formats, is it forgets a little bit that what we’re trying to do is convey a message that readers and users will understand and enjoy. They’ll accept it, they’ll get something out of it, and they’ll come back. But it’s really this point-to-point communication between writer and reader that is the point of typography.

One of the things that’s happening is that the readers are having more info than they used to have. In the old days, a graphic designer often thought of herself or himself as an artist, thinking the big thoughts. You would stretch the canvas and then do the charcoal or the crayon, and then you’d paint, and then you’d have this wonderful thing that you would allow people to look at. So, it was a very top-down kind of communication. But in graphic design, in magazines or newspapers or advertising, or on the web or in print, it really is trying to get the message across.

And what’s happening—I think responsive, the whole responsive movement taught us an important lesson, that it’s not about that canvas square, it’s not an 8.5 by 11, or 1200-pixel-wide thing that we’re dealing with. We don’t actually know what we’re dealing with. There’s so many damn devices right now, and the media queries don’t always tell us the answers. It knows it’s an iPad, but it doesn’t know which generation it is or… We’re not getting good reporting back on what is actually the density of the screen, or the rendering method. We kind of guess. We sort of say, “Okay, it’s going to be these, and this percentage has to be this way.” But so many publications and advertising that I see, if I look at them on different devices, I can’t read it or it’s too small; or their lines are too wide, which is the oldest web-typography problem—put too many characters on a line so it’s harder to read.

But that’s sort of the current state. I think the most exciting thing about graphic design right now is the connection with the user and the reader. We’re beginning to understand who they are and what they want, and I think that ultimately the machine learning that we’re trying to do on the server side will start informing page layout so that people can read it more easily, with more enjoyment. Not that we’re asking them any questions about it; we’ll just watch what they like and give them more of that, and see what’s working, how the session time is being extended by different kinds of things. The metrics will start talking back to us and start transfiguring the pages. If we allow a variable format, then we can get amazing things. I mean, they can pick their own fonts, they could do their own kinds of colors and layouts if we collaborate with them. And as soon as we do that, as soon as we get the reader on board, then we’re geniuses. Then the design is great. That’s a huge challenge.

Jeffrey: I have mixed feelings about that. I like the idea of customization. I think customization is very important. We’ve always said the web is a conversation. We used to say it before we even had comments. We said, “The web is a conversation,” and then we started having comments on blog posts, if you guys remember blog posts and comments, and then we were like, “Yeah, it really is a conversation.” It was always a conversation design-wise too, because even back to the horrible days of liquid layout, where, “I want my screen this wide, and I’ll take that 10,000 characters per line,” and all that.

But there was always the chance that the user was going to install super-large fonts or override—I mean, I have a plugin in Chrome that lets me override any font on any site and replace it with some horrible thing. I’m having difficulty with, if I’m angry at a website, I can set it in Baby Teeth just for my own pleasure. So, there’s always been that thing, and I think it’s a mix, because you do want to let people—I mean, if someone has a problem with contrast, they need to be able to boost it. There are certain tools in the browser that let people do that, but it’s hard for a designer now, how people are interacting.

If we can make it an all-in-one design solution, like having type size widgets that we create instead of relying on the browser, then we might be able to. But now we’re playing three-dimensional chess with responsive layout, because, you know, what happens when someone makes this type seven times bigger, and, well, we’ve got all these minimum widths and… I guess what I’m saying is design is very hard right now, and although the user has always been in the mix and they’ve always had some power, once we start thinking about that and hoping that we’re going to get good design at the end of it, it becomes even trickier.

Roger: I think it’s like the templates that you’re designing anyway. You realize that you have to have adjustments for the different viewports. So, you know that it’s going to be one column in some places and multiple columns in other places. I think that’s how you deal with the users. You still want to build a road that they can travel on, but you’re deciding what the destination is. So, that means you have to guide that experience as best you can.

I think one of the things that we know is that if a reader feels that they’re a collaborator, that it’s a two-way communication, they remember stuff, they enjoy it much more. So, that’s not really what I’m talking about. I think in responsive design, the design challenge became much harder. We had to think about basic typographical relationships—a headline, a pull quote, a deck, a text, a caption. How do those things relate to each other? And there might be slightly different sizes and widths that we have to deal with, so we would write that into the code. But now what we’re saying is if we can find out what’s working for readers, let’s give them more like that. It’s one of the oldest things on the web, what they used to call collaborative filtering. We need collaborative filtering for design.

Jen: I think one thing that we do know for sure in 2017 that we didn’t know along the way at different points in the evolution of the web is that this medium is not controllable. We don’t know so many things about the conditions in which somebody is going through our website—screen size, font size, how they’re experiencing it. In a way, I feel dumb even saying that, because it’s so obvious and it’s so ingrained in the way that so many people work. And yet you meet web designers every day who don’t think that way at all; they’re designing fixed things in PDF and then they’re holding that thing up to the final result and they’re going, “I wanted 15 pixels and I don’t have 15 pixels. You’re not doing what I’m telling you to do.”

I still feel like the industry is struggling very hard with understanding what this creature is in this multidimensional… You don’t control it, but you do program it. So, you can create sort of a minimum and a maximum, and you can sort of say, under these conditions, this is what I want, and under these other conditions, this is what I want. And I can’t control it and I can’t necessarily predict when those conditions will be in place, but I can say some things and I can set some limits around what that means. And I think that that’s going to even be—with CSS Grid, with fixed websites, we had a fixed size. With fluid, we sort of said, “Oh, it’s going to be completely squishy.” With responsive, it’s like, “Okay, it’s being squished, everything is squishing evenly, or everything is stretching, everything is stretching evenly. We’ve rearranged things a little bit, but basically it’s all squishing and stretching at the same time.”

With CSS Grid, you could easily have some things that squish while this other thing stays fixed, and this other thing squishes while this one was fixed, and this other one’s fixed the whole time… I mean, it’s so much more dynamic in how it behaves in different ways. As I try to teach that layout… I don’t know, I think we’re in a strange time, because on the one hand, the web industry is not leveraging the power of graphic design in the way that we could be. We’re copying each other’s work too much. Too many things look like Medium; too many things look like web design out of 2007. Too many things look like copies of each other. Everybody’s bored, everybody’s talking about this, everybody’s ready to move on.

So, we definitely know that there’s a way in which we can use graphic design unlike we’ve ever seen on the web before—the power of the entire 20th century brought to the web. And simultaneously, the people who know that work the best, the historians, the people who know the history, the people who have been trained, the people who are coming out of schools do not understand the web at all. They think of it as a PDF format, it’s a format for displaying things that they drew in PDFs and that they figured out in PDFs. So, there’s this weird tension. We desperately need to figure out what our medium is in a way that we never have before, but we also need to bring the power of graphic design—and other fields, too. Like, I’ve been looking at a lot of filmmaking and cinematography lately, because I don’t think it’s just about print. It’s about standing between several different design mediums and realizing what our medium is.

Jeffrey: I have to make three quick points based on what you just said, because I’m so excited, my brain is going to explode. First of all, and I want to come back to CSS Grid, but none of my points are about CSS Grid. First of all, I think responsive—the questions about responsive and the fact that we don’t know has led naturally to pattern libraries, atomic design, modular design, whatever you want to call it when people say, “We’re designing systems instead of pages”—we’re still designing pages, ultimately.

Jen: We are.

Jeffrey: But to some extent—like I’m on a project now with a client, and I’m not comping pages yet. I’m just saying, “Here’s the call-to-action module—I think. Here’s how it might look on a wider screen, here’s how it might look on a smaller screen. Maybe it doesn’t change from one screen to the next, it’s just this, let’s call it one unit of width and height.” I’m thinking in terms of building blocks. Ultimately, to make a great page, you have to think of the page, but I do think responsive is leading us in a good direction toward pattern libraries, atomic design modules.

Second, I want to make a point about your wonderful comment, Jen, about how some of the experts in typography or experts in traditional publishing don’t understand the web. Wonderful example of this: there was a company I knew, they actually used Roger’s TreeSaver technology a few years back to create a set of publications that, of course, could configure themselves. They did pagination, and ads, and everything a publisher wants, but they were also responsive. No one was calling it that yet because responsive design and TreeSaver came out at the same time.

So, Roger and his colleagues came up with this product using JavaScript to basically paginate and do multipage layouts in any device. And this publishing company formed by experts who’d been at the helm of incredibly great traditional print publications over the years, they used to have their designers mount the layouts on foamcore and walk them in, and they’d look at them as if they were a fixed layout. And I can remember overhearing conversations where these experts said, “Why is there this white space here?” and it was explained, “Well, that’s where the article ended.” “Well, shouldn’t we sell an ad there?” “Well, but it’s not a print publication. That space exists on this device but not another.” “On which device?” “Well, whatever device this happens to represent. This is a hypothetical device.” It was completely different centuries, right?

Roger: It was sad.

Jeffrey: One last point: I think for browser makers, in the old days when we were doing the web standards thing, the browser makers were torn because they had people like Steve Champion from the Web Standards Project saying, “You must properly support CSS1.” And they’d say, “Yes, we hear you, but there’s a lot of detail to that.” And at the same time, we have this other designer, who represents a million customers, who wants colored scrollbars. We would get angry and say, “Screw colored scroll bars. Support CSS1.”

But the truth was the browser maker couldn’t afford to turn on either customer, and I think we’re at a similar inflection point here where the browser makers are excited about CSS Grid, and they’re excited about people pushing boundaries on layouts, but at the same time there’s all kinds of traditional businesses out there that are doing layouts like it’s 2007, and they have to support both. I would imagine it’s very hard to be a browser maker, because if you blow up the 2007 designs—I’m not saying that you have to, I’m not saying there’s causality, but you can’t turn your back on either customer. If you’re a TV show, you have to appeal to democrats and republicans—usually.

Jen: Browser makers are very obsessed with making sure that Google Docs runs fast, or that Facebook renders properly.

Jeffrey: Or that Gmail does what it does.

Jen: Because that’s what a typical person opening up a web browser wants. They want to use Google Docs, Gmail, and Facebook, and if those things are sort of broken, it doesn’t matter if it’s the fault of the people who made the websites, it seems like there’s something wrong with the browser.

Jeffrey: And I do remember a period in the Web Standards Project of us being very hardcore and saying, “Well, it should break. It should break! It’s coded wrong! It doesn’t validate! The div never closed! It should break! That’s the only way you’ll get these guys to do the right thing!” And the browser makers were like, “We can’t do that.” And then later on, “Yeah, of course they can’t do that. They’re a business.” To some extent, I can fall on my sword because I’m a designer thinking about what design should be…

Jen: Well, but also, I think—I mean, of course, there’s a wide range of different people and different companies and different folks who are making websites for different reasons, and all of those concerns are important. It’s not like one is more important than the other. I just know that myself, and probably you, Jeffrey, and a lot of us, we’re like in this little corner over here thinking deeply about design and what it can mean, and what we can give our clients by using design, by using graphic design, by using typography, by using the skills that come from the days of pasteup. People may or may not be into what we’re into, they may or may not want the skills that we have, but there’s definitely a huge audience that does.

And I also think that—you know, I’ve been thinking about the future, because I think there’s business opportunity there. When you get in the front, when you end up being the Boston Globe shipping the first responsive news website rather than shipping the last one ten years later, it gives you a competitive advantage. And not every company is willing or ready to take that kind of leap, but some want to; some want to be in front. Not everybody wants to copy Facebook’s layout. There are people who want to be the next Facebook and do something… Facebook’s layout was original when they came up with it. There’s other folks that want to go ahead and do something new. A lot of people say to me, “But what about usability? You’re talking about creating a whole new mental model for layout. No one’s going to understand how to use it. You’ve got to do things the way we’ve always been doing it because that’s how users are going to know how to use things.”

Jeffrey: “Blue underlined links!”

Jen: Yeah. It’s funny, sometimes when people say that to me, I think, “What do you think I’m advocating for? Do you think I’m advocating for some three-ring circus crazy-town of a layout?” I’m not. I’m advocating for: take the column of text and put it off-centered instead of centered.

Jeffrey: Right. Right.

Jen: Users are not going to be confused! It’s okay if the left margin is twice the width of the right margin. Or your navigation needs to be in a place where it’s expected to be, but it doesn’t have to be exactly the way that it’s been for the last ten years.

Jeffrey: Also, you were talking about film. With the first close-up, people ran in terror. They thought it was a giant severed head, they didn’t understand. And then they did. And when the sea waves were coming toward the camera, it was an ocean shot, they went out on a boat—people ran from the theater like they were going to drown. And then they got it. Today, if you think about the filmmaking we have now and imagine someone from 1910 watching just any modern film, they’d be terrified, they’d be hiding under their seat. Now audiences accept it and go, “That was fake. That was CGI.” People go in suspending their disbelief and yet looking for the CGI, right?

Jen: Yeah, and our users are smart, they’ve been evolving over time, and nothing is static.

Roger: They can find a “go” button, they can find the “okay” button if it’s on the left or right. It’s really annoying, but they can find it.

Jeffrey: Also, our generations are dying out, and, like, my daughter’s generation, they know how to use everything. I get angry, as a designer, I go, “This doesn’t make sense because the user interface was badly thought out.” But my daughter and her friends, they know how to do it. They look at it and go, “Oh yeah…” They can make mental models all day long. They can’t necessarily read, but they can make mental models… Actually, she’s a very good reader, that’s a stupid joke. But she learned this before she learned reading. She was slow to read, but she was using an iPhone at two.

Roger: Bringing up video is interesting, because in the current YouTube-standard world of video, video is its own layer that has nothing to do with anything else. If you want type in video, you put it in the video. You super it, or however you do it in your software that you’re editing the video in. One of the things I’m working on, and I do have a client in Myanmar who suddenly is starting a new publication that is going to be print, web, and video. So, it’s a 24-hour live-streaming news channel that’s over the top, it’s just on the web, and then it’s a print publication in Chinese and Myanmar, or Burmese. And the website has three languages: Burmese, Chinese, and English. How do you do all of that together? With a small staff? Because there’s still not a huge revenue stream, it’s in a small country and in a development stage.

So, we’re looking at ways, how could you separate the type… Because if you’re going to do video on the web, you need supertitles, you need to be able to let people read it if their sound’s off if they’re in a noisy place, or if they’re in their classroom and they want to watch video and not watch their teacher; you have to do it without sound. So, voiceover is not the answer. If you’re doing three languages, you have to have a layer of translation, and supertitles on top of that. So, how do we do that? And it gets very interesting, how do you know what the video is, or that the type is the right color, that they can read it, yada yada yada…

My friends in Holland are feverishly working on how you do responsive variable fonts that actually have server cues on what color, and other treatments—the outlines or shadows—they might, automatically in the font, take on. It’s very interesting stuff. So, I think that there are people willing to—I mean, this is not a first-world product, this is something happening in the developing world, where they really think, “Let’s make it really reassuring and great-looking, but at the same time, let’s forget about what video has been on the web and do something else.” I love that. It’s a big typographic challenge both for the programmers and the people who figure out the algorithms, and the type people, too. What are the fonts that can work in three languages together simultaneously just by flipping a switch?

Jeffrey: I’m really glad you said that, because I think supers in video are something that a lot of us don’t even think about, and should. I’m a web designer. I think about it because I have to, because of accessible video… I know I’m going to piss off either Netflix, Hulu, or Amazon. I don’t remember which. It’s either Netflix, Hulu, or Amazon, I was watching video and I discovered that, speaking of customizable, if you go into the supers, you can set the size, you can make it with a black outline, a white outline, you can make it yellow… My daughter went in and started making it like really crazy, like yellow type with an orange outline. But it’s like old Windows black metal jacket or whatever from Windows 3.1. Users can make stuff ugly as hell if they want to, which is my deal with customization, my concern with it.

But, I mean, there’s an opportunity. Setting type on video is going to be super important, and like with responsive design, some people are watching it on their little phone, some people are blowing it up to their full screen, some people are watching it inside a browser window in Firefox while they’ve got another browser window open doing something else. There’s a lot of complexity. Also, VR. Web VR is an emerging standard, and type for VR just for navigation, not enough people are thinking about it right now. I would love to see… Well, I’m sure the folks at Type Network are thinking about it. It’s type that’s experienced on a curve, and it’s lower res.

Roger: Well, that’s the interesting thing. I don’t think that the kind of customization you’re talking about is going to be done by users for the most part. I think that we’re happy to be able to make the type bigger, but how many people actually do that? 10 percent? I don’t know. It’s not a big number.

Jeffrey: People who need it.

Roger: People who are struggling. But at the same time, if you could find out what it is they like, if you can track their experience… And one of the things Matthew Carter said, “Readability is like 80 percent familiarity.” It’s like the web standards you’re talking about—or web conventions; they’re not really standards. If you go against the conventions, sometimes you lose people. At the same time, you can’t really expect them to fill out a form of their choices of design. But if you hear back from them in the same way we understand what device or what their viewport is, if we could find what they find easier to read, then we can make it more like that. And that’s an algorithmic problem more than it is a user decision.

Jeffrey: It’s almost a cross-site problem, too. Imagine if there were just a typography layer abstracted from your individual site which noticed after a while, “Wow, when this customer went to Type Network they boosted the font size, and then they went to A List Apart and they boosted the font size, and then they went to the New York Times and shrank the font size and changed it… So, what is it that they really seem to need?”

It would have to be really smart. Like, well, maybe they did this because of column width, or maybe they did this because of where they were viewing it or… But a sophisticated machine-learning layer… I mean, we have a primitive example of it now in, for example, I can tell my iPhone that I need a certain minimum type size in software that supports this, and then I use one Twitter client that supports it and my font is bigger. Let’s say I made it a little bit above middle because my eyes aren’t as good as they used to be, so I make it a little bit bigger than normal, and another software device doesn’t do it. But still, that’s the operating system extracting that.

Roger: The user.

Jeffrey: Yeah.

Roger: Well, I think you want the users to be complicit, but you can’t expect they’re going to do it.

Jeffrey: So, imagine a layer that exists… I don’t know where it exists, maybe the same place that—forgive me, I’m going to say AMP. Okay, I’m sorry, I hate AMP. But it exists somewhere, it’s being saved somewhere, or it exists where Google Fonts exists. Or it doesn’t have to be Google, it could be somewhere else. You opt in, it tracks you, and it starts adjusting font size to be better for you based on watching what you do. Would that be a boon for designers? Would that be a boon for users?

Roger: I think it’s inevitable. I think that in the same way that Amazon gives you stuff that you like, or that it thinks that you like—and it’s relatively successful at it—we’re going to see that affecting layout, too. And the typographical layers, also there’s some very interesting things that happen with language. Because, increasingly, your design has to go in multiple languages. The world is getting global and we want to be able to communicate with people who don’t necessarily speak English. So, then what happens? That’s another question of writing the rules so that layout can adapt to Chinese, which is really a functionally different thing. It doesn’t justify the same way; the whole thing is different. It’s these little squares that are very condensed. You can get much more text in Chinese in the same amount of space as you can in English or any Latin language. You know, one wag said, “Forget about icons. We could just all learn Chinese and we could put a Chinese glyph for every single thing that we needed touch on.” And it’s not a bad idea. I mean, we probably all should learn Chinese.

Jeffrey: Jen, in one of her talks, talks about we act as if design ended in the 1950s and 1960s in Switzerland and we’re all doing this one thing, this grid-based Helvetica approach to things. And that’s great, but there’s thousands of years of graphic design history from Asian cultures and Arab cultures and all these other places. It seems to me if you were designing for a Chinese website, that’s a perfect opportunity to not make a Western layout based on the grid, based on Swiss typographic design conventions, but instead actually look to Asian traditional graphic design, which was, after all, built around those languages, and use that on the web.

Roger: Yeah, and they had typesetting before we did.

Jeffrey: Indeed they did.

Jen: It’s interesting, because on the one hand I really want the kind of graphic design industry or whatever, the tradition of 20th-century graphic-design teaching and understanding, to come to the web because I think there’s a lot of power there. But on the other hand, I struggle with it a lot because it’s so incredibly arrogant and tied up in ideas of white supremacy and Western-culture supremacy, and, “This is the right way to do things,” and, “This is the way to do a grid, and this is the way to do typesetting, this is the way to use a font, and this is the way to do everything.” I don’t want to carry those ideas around. I don’t want us to all go, Hey, how should I use a grid? Oh, let me look at these experts, these particular people from this particular culture—

Roger: —from the Bauhaus… [laughs]

Jen: …and listen to them.

So, I’ve been really trying to educate myself around—because, also, I didn’t have a graphic design background, I didn’t have that kind of formal training, so I’ve been teaching myself over the last two years… But to balance out kind of, I don’t know, I have three feet of Western books and one foot of non-Western books; I really want that to balance back out even more. Trying to learn about Arabic design, learn about—like Japanese tradition of line grid, especially in vertical layouts, and all the rules and the details… It’s not like that happens separately. That’s definitely been cross-fertilized with modern ideas and cross-fertilized with the ideas out of the mid-20th century, lining things up and being rigid and having rules, and following the rules. All of this has been going back and forth the whole time.

But I do think it’s important for the web industry, when we are starting out on this new thing, to learn CSS Grid and to think about layout, and to learn entire new techniques for layout, to do so with a global perspective and to not fall into this idea of, “Well, this book I have on the Swiss use of the grid, or this use of the grid, that’s the way we should all do it.” No, that’s a way. It could be cool. There’s ideas we should look at, maybe we want to bring those ideas over, but let’s not get all, you know…

Roger: Typographically, there’s whole different conventions. In addition to reading the other way in Arabic, or the calligraphic tradition in the Indic scripts and in Arabic, and in very old Chinese or Japanese or Korean, you had to connect characters in a different way according to context. Most typesetting systems tried to force that into a Western model, which is not necessarily that successful. Now, in China there’s kind of a different thing going on where the square that all characters fit in, which started I think really when they started movable type, when they made wooden fonts, way before we did—that square made it easier for them. So, they kind of squished letters into that. Then after 700 years, people kind of get used to that, or 800 years, however long it’s been. So, then if you reintroduce Chinese calligraphy into the web, people get confounded. It’s like, “What is this? It’s dripping down the side, I can’t understand it, I can’t read it.”

Whereas in Devanagari, or Bengali, or Tamil, or the other big languages in India, the inability to have good ligatures makes it hard to read. I mean, the first fonts in the Indic world were so unreadable that Indian kids all did texting on their phones in Latin. They transliterated their own language in Latin because they couldn’t read the damn Devanagari. That’s been true in Myanmar, it’s been true in Cambodia, all the way through to the so-called Brahmic culture of lettering, it’s been very hard to adapt to electronic devices. It’s happening now. Google is actually leading the way, in many respects, on that. Google has 50 Devanagari fonts in Google Fonts. It’s kind of amazing. But it’s still setting types as separate glyphs.

With variable fonts, which we might not want to get into, there is an opportunity people like John Hudson have talked about, of using the hyphenation table in HTML to look up how you should connect ligatures in Indic languages. That would be great—and how much more fluid and beautiful we could become. For Westerners… I mean, I can’t speak any of these languages. I watched John Hudson at TYPO Labs Berlin, which you can see on YouTube. It’s an amazing idea of how this can happen. However, you need knowledge like his to be able to understand what it is, what we need to do. I think that’s the global challenge. We’re really moving quickly into a much more complicated world.

Jeffrey: There’s so much, again, to unpack, but I’d like to focus just on variable fonts for a minute, if you don’t mind, since I know you guys are working on them pretty hard. Tell me about that.

Roger: What do you want to know?

Jen: What is it?

Roger: I think the easiest way to understand variable fonts is that it’s several styles of a font, of a typeface family, pushed into one font file. So, you could have bold and light in the same font. Instead of having two or 12 or 15 or a hundred different variations of the weight of a font in different files, in your font menu to select, they could all be in one font. Using CSS, you could say, “Okay, I want a weight that’s 1/20th of that,” and the font will just respond—if the browser is up to it, which I think we’re seeing. All the browsers are making an interface that you can do this. So, the first iteration of variable fonts, so with these variations of weight or width or size, are happening in the kind of development versions of the big browsers right now.

Jeffrey: Are they doing it with fonts and some new CSS? Are they doing it with SVG? How do you control something like that that wasn’t envisioned when they wrote CSS?

Roger: Well, a variable font is a version of OpenType. It’s the next thing. So, the fonts are downloaded on the web just the way all TrueType or OpenType fonts are downloaded. The trick is to then specify how you want the variation to be issued on the page. That takes a little bit of a learning curve, but there are interfaces that people are working on to have slider bars for the three or four different axes that are in the font. Now, Google, Apple, Microsoft, and Adobe have embraced the first three axes of these fonts—weight, width, and size—because if you have one font instead of 15 fonts, the page loads faster. So, there’s an improvement of 30 percent of file size per font. Now, if you’re YouTube, you don’t maybe care too much about that. But for Google at large, the amount of text that’s being downloaded in the world simultaneously is a big thing, it’s a big number.

Jeffrey: Just so I understand: if I were using Adelle Sans and Adelle in a layout, in theory it could be one variable font that contained the right glyphs and serifs…?

Roger: Yeah, you could have serif axes. All of this started, we saw this with Multiple Masters that Adobe did years back.

Jeffrey: Right, ATM, 20 years ago.

Roger: Yeah. Then, right at the same time, there was a kind of untracked project called GX at Apple. If you look at the OS on Macs now, there’s a font called Skia, it was based on Greek inscriptions. It’s a beautiful font, and it is actually a variable font, it was done in TrueType GX. That’s the model of what we’re doing now. When Google heard about what GX had done at Apple 20 years ago, they said, “This could be a real savings on the web!” So, Google was the big impetus to make this happen.

So, they hired our company, Type Network, to make two demo fonts, all on GitHub. If you go to GitHub and look up Amstelvar, or Decovar, or if you go to the Type Network site, you can find these fonts, you can use them now, you can download them from GitHub. There’s a fairly interesting demo going on at the typenetwork.com site. Amstelvar uses these three main axes, and it’s quite exciting. And then Decovar uses lots of others, including the way that terminals and serifs are done on the letters, and decoration inside the stems and stuff. So, it shows you what the potential of variations might be for design, it’s really quite fun. These were both done by David Berlow.

Jen: Well, my understanding is that, for example, if I want to use Goudy right now, if I want to go and get myself a web font, download, and use Goudy on my website, for my body copy—like, okay, cool. Oh, I’ve got some type I want to do in italics? Well, the person who maybe doesn’t know as much about what they’re doing would just say, font-style: italic; and boom, you’re done. But if you really know a lot about typesetting, you’d realize, no, we don’t want to just take the regular font and make it sideways, like slanted. We want to download the italic font because the italic font is more beautiful.

Okay, so now you’ve got two fonts: you’ve got Goudy and you’ve got Goudy Italic. But then are we going to do some bolding? Okay, we’ve got the bold. Do we need the bold italic? Okay, well that would be four. But that’s too much data, so let me just… I’m not going to use bold on my website. Okay, why? Well, ’cause. So, I’ve got Goudy, I’ve got Goudy Bold

But now I want to do my H1 headlines in Goudy, too, but I really shouldn’t just take my font that was made for 14 or 16-point type and make it 36 points, because it’s not really nearly as beautiful as if I get the Goudy Display font. So, I get Goudy Display. But do I need Goudy Display Bold? Or, actually, they have a Black and they have a Light, and they have a… You could end up with…

And this would be, okay, we just have one font, and that one font knows, Hey, when you’re little, be like the little version of the font, and when you’re big, be like the big version of the font. And when you’re italic, the italics are actually computed and hand-coded into the same font and the bold is hand-coded into the same font.

Jeffrey: Is that what we’re looking at, Roger, for the future of something like Decovar?

Roger: Yeah. I think… Italic is the big challenge there. You’re probably going to end up with separate italic fonts. But in the simple italics, like something like Avenir italic, it’s mostly slanted anyway and just has some changes in some of the terminals to kind of make it more italic.

One of the things that Decovar shows is that you can change the x-height, you can slide up and down, or you can make other variations that are fun. And we hear a rumor that Adobe is going to support these fonts for desktop typesetting in the near future, maybe in the third quarter or maybe the fourth quarter of this year. That’s fun. I mean, that’s kind of interesting that they’re doing that. Because right now we’re talking about the web. But on the web we have a lot of SVG files for headings, for kind of static stuff that doesn’t have to be typeset, so there’s branding involved and all of that. And certainly in print it’d be fun to be able to make logos where you can make the text fit exactly in a rectangle that can be the same for different words—“baseball” and “basketball” could be fitted in the same rectangle…

Jeffrey: I want to make responsive logos, for instance, that’s just the graphic, and then above a certain size it’s the mark, and then above a certain size it’s the mark and type; and then the type, maybe there’s two different variants of the type. That’s coming soon; that’s gotta be coming soon.

Roger: Well, that I think is very, very possible. There’s an interesting site called Axis-Praxis, Laurence Penney’s site that you can go to—axis-praxis.org. You need a compliant browser, like the overnight build for Safari. He’s got some fun things like that you can play with right now. And I think you will—instead of using SVG, we could put fonts in there. What I was talking about is the desktop thing for an ad or something, or a publication design, that you want to print it, it’s not just web. So if Adobe gets in, and they’re one of the key members of this consortium that’s pushing this, this whole world could start taking place later this year. It already is happening, and all the browsers are working on it. I think the designer user interface, our interface for designing these things, is still up in the air.

Jeffrey: I think we have to wrap. We’re going to put Axis-Praxis in the show notes, and Type Network in the show notes…

Roger: That’s it?

Jeffrey: No, I could do this all day. You guys are so brilliant. I love chatting with you. It even makes me feel smarter, and there’s so much to learn and so much to play with. I hope that folks will continue to read. We’re going to have labs.jensimmons.com in the show notes, which is where Jen is showing the kinds of layouts that can now be done, for example, in CSS Grid, which we didn’t even get into. I would love to do this again in the future, because there’s so much. But I’m so sorry, my friends, I think we have to wrap things up.

Roger: It was fun.

Jen: Thanks so much for having me.

Jeffrey: Thank you both.

Roger: Thank you very much. Thank you for listening.

Jeffrey: Thank you, thank you.

from Sidebar https://sidebar.io/out?url=https%3A%2F%2Falistapart.com%2Fevent%2Fweb-typography-layout-past-present-future

Flickr’s Top 25 Photographs of 2017

This stunning photograph of the Milky Way over Harvey Dam in Western Australia was taken by Flickr user inefekt69 in February. It was selected as one of Flickr’s top images of 2017. So was this magnificent picture of Mont Saint-Michel in France, with its reflection showing in a puddle of water by Flickr user Loïc Lagarde.

To select the best images of the year, Flickr relied on user metrics, such as how many views and favorites the pictures received, to whittle the contenders down. Then the final 25 were selected by the Flickr staff. See all 25 of Flickr’s best photos of 2017 here. And if you’ve got time, there are 612 galleries of top photos broken down by category here. -via Metafilter

from Neatorama http://www.neatorama.com/2017/12/07/Flickrs-Top-25-Photographs-of-2017/

The Humanities Belong in Tech and UX

A Dialog on Why the Humanities is the Next Frontier

There were always definite no-no’s whenever people have to face the big world of technology and business.

Have a major on English, Philosophy or Theology? Time to worry about what job you’re pursuing after college! Most likely it’s door-to-door Sales, HR, or another job that sucks the life out of you. Pick your poison!

Want to discuss philosophy, religion, and politics with your co-workers? Oh wait. Isn’t that tantamount to social suicide because it’s taboo especially in tech?

I remember the words my father used to say,

“What’s the point? What are you ever gonna get out of the arts and humanities when it comes to your life?”

That was the voice of reason I listened to when I took a business major that catered to app development in college. Not graphic design or anything else (because it wasn’t practical). But then again, a lot of surprises happen.

Surprise 1: I got into user experience, the love of my life, the milk to my latte, the hakuna to my tatas. It was the Aha! moment that brought my previous talents in graphic design and the skills I learned in my major together in one magical hot potato.

Surprise 2: I came to a get-together full of user experience (UX) professionals talking about God, Trump, existentialism and cultural issues. And there I thought I’d only be discussing run-off-the-mill things like wireframes, prototypes, the weather, and maybe even the good Korean Barbecues in the area. Turns out, I was very wrong.

And from those experiences, I figured that the next frontier of UX lies in the strong integration of humanities into the tech industry.

Now, you might be wondering how on earth the humanities can augment the wonderful world of UX and tech. But here’s my take at it: with so many issues happening and with the nature of tech and UX now focusing on collaboration, merging humanities into a field already interdisciplinary really does makes sense especially when you consider the problems the industry currently faces (sexism, racism, and its overwhelming influence).

Why the Tech Industry has Problems

There are a lot of things we can consider rather concerning about the user experience industry, and by extension, the tech industry. Despite my short stint here in sunny California’s professional scene, I’ve heard and experienced my fair share of those concerns.

1. Racism

With its deep festering history heavily rooted in housing and loan opportunities (learn that here from Adam Ruins Everything), it’s no surprise to me that people still have gripes when it comes to interacting with people of different backgrounds.

Statistics from the report of U.S. EEO Commission about the Diversity of High Tech

Some of us may think that tech in itself is pretty much an accepting diverse community but if you go look at the regular average standard of participation across all industries, tech has less participation from people who identify as minorities with the exception of Asian Americans.

Statistics from the report of U.S. EEO Commission about the Diversity of High Tech

What’s so surprising for me is that it’s the same case in user experience. Go into any UX meetup in Southern California and you can certainly see these sort of numbers.

Sometimes, you even come across ambiguous conversations like this. Here’s one I heard in a big UX conference:

Guy 1: “Hey, bro, we have a token black guy in this activity!”

Guy 2: “Think he’ll end up disrupting the lecture or the speaker? He looks like the type.”

Guy 1: “I don’t know, but I do find that a black guy like him that wants to be a UX professional very weird”

What’s so weird about that?

2. Sexism

Here’s a sexist meme that struck a negative chord with me:

From the “9 Non-Threatening Ways Leadership Strategies for Women” by the Cooper Review

Sadly enough a meme (read: art) can imitate real life. And true enough women happen to have the short end of the stick when you look at statistics.

*Science, Engineering, and Technology. Statistics from the U.S. EEO Commission about the Diversity of High Tech

The same thing is clearly observable when you refer to the recent controversies on Google and Uber (Look through Susan Fowler’s negative experience with Uber’s HR here and Jason Damore’s argumentative memo on Google’s management here).

Both cases undermine collaboration and forced both companies into divisive environments (in Google’s case) and uniform ones (in Uber’s case) which can be both bad in different senses.

But the most notable cases of sexism lie in the war stories that we hear from our everyday people. You’ve probably heard of some.

Ever heard of the “You’re not technical enough because you’re feminine” story?

In an interview conducted, a career coach cites the story of her female black colleague who owned a software development company. When dealing with clients, she actually had to say that she was definitely technical and that she knew her stuff when it came to software development because the sexist assumption of her identity came first before the assumption of being experienced by virtue of her job history.

It’s understandable to argue that men and women are different physically but it’s an entirely different thing when you start to generally, and hence erroneously, underestimate a gender/sex’s capability in a work setting.

Why do we have to limit people by what demographic they belong to instead of what they can objectively offer? With a thousand ideas streaming through our head, you’d think we’d manage to balance both emotion and thought into a good business rationale that can be utilized.

3. Overwhelming Power and Influence

We all know that the tech industry is highly influential. By releasing a new phone, letting an app go viral, or even just releasing a new feature, people freak out because tech affects their lives on a daily basis.

But the tech world also knows a lot about us. It knows what we search online, what we’re like, and where we’re even located. Moreover, in different servers out there, bits and pieces of our personal information can be brought together by large companies like Facebook and Google to, as they call it, serve their user base better.

But what exactly can that mean?

Did tech finally go haywire and trap us in a perfect imitation of our world?

Aside from the usual mumbo jumbo that says that tech enhances the quality of life that we live, tech has a large potential for mess-ups. Ever thought of some designer robot taking over the world or living in a matrix built out by some crazy fool? But on a more serious note, can you imagine what happens when some c-suite of a tech conglomerate decides to create services with dark UX (read more about Dark UX Patterns through Rami James’ article), and slowly infect the overarching community with problematic cancer.

Tech as we know it, like human beings, is flawed and dangerous yet absolutely wonderful.

Tech is limitless and transformative. We’re constantly on our toes for better solutions. We find them and eventually make them. What we fail to notice is that what we make often shapes us back mentally, an observable phenomenon that we can see from our information and tech-reliant culture.

The Humanities is Important and Inescapable

With all that laid out in the open, I can’t help but question why the humanities is something we reject on a professional level.

Why do we look at people funny when they say they have a degree in History or Philosophy?

Why do we continuously undervalue the worth of graphic design and underpay freelancers who do it for a living?

One way or another we’ll be dealing with literature, philosophy, politics, linguistics, and all the other fields included in the humanities as we interact with objects and people of different lifestyles. Whether you’re reading a book, listening to music, watching a form of media, or even just plain out standing up for your rights in a courthouse, humanities is seemingly inescapable.

As such, I’d like to ask again: why is it considered taboo to talk about the humanities at all?

In an industry that champions forward-thinking and collaboration (especially in UX), why are we not channeling resources to break past biases and learn from all opinions?

With the problems I mentioned, UX and tech are only selectively collaborative. When conducting hiring and internal processes through a racist or sexist lens, tech-based teams (whether it be in design or development) bind themselves up into echo chambers and they lose the chance to hear valid opinions from different backgrounds, and in a sense, business opportunities.

If it’s a matter of romantic or personal preference, selecting with race and sex can be okay (depending on what sort of relative viewpoint you’re coming from) but when it comes to matters that deal explicitly with the intellect, what reason do we have to discount qualified people from other backgrounds despite the sheer amount of talent out there?

And that’s why a refocusing on humanities can be a good and refreshing elixir to the tech industry’s myopia.

I Make It and It Shapes Me

Isn’t it odd that kids ask the most mind-boggling questions ever?

The Humanities is all about examining what it means to be human in our everyday experiences and doing something about it by shaping the world we live in.

There was a time I had to watch over a toddler for an hour or two as a favor. I had him reading a book in his bag while I tried to absently browse the internet. But then he asked me something I couldn’t directly answer: “What does it mean to be alive?”

Explaining that to a kid can get difficult. Some people find the answer in halls of worship. Others find it on the road or in what they do for a living. It’s always a different experience. And humanities, in its own inescapable way, tackles the variable answer to that question through song, literature, history, politics, philosophy, theology and more. No matter the medium, we constantly express what it means to be human and alive in action and make. We make things in pursuit of our self-set goals and we soon find those things weaving a narrative of who we are through itself.

In the context of tech as a whole, which we have already explained to be highly influential and hence actually does form us back as a social phenomenon, we often find ourselves at a crux.

What do we make? For whom do we make it? Why do we make it?

It’s these sort of questions that the humanities answers that I hope tech and UX can keep asking throughout system development and maintenance. With tech tending to ground itself on earning money with social responsibility added only as a sideshow, maybe the humanities can offer a more critical look and take.

The “I Know Nothing” Mindset

“You know nothing, Jon Snow”

The Humanities actively examines multiples sides to concepts and prides itself in presenting a good understanding of perspective.

Now unless you’re listening in to how your native country is amazing through mandatory state education for children, avid discussions on the topics of humanities are not just limited to one viewpoint. Good teachers and curricula have you go through a whole spectrum of perspectives on one topic and it’ll leave you feeling like the intern that doesn’t know much.

But that’s the best thing about the humanities. Not knowing much. Because when we acknowledge that limitation, we allow ourselves to bask in the reality that there’s an entire world full of discovery out there even if we can’t understand everything about it. In this manner, we open ourselves to keep on learning and actively listening and I’m sure that is better than recklessly pushing a design decision, hiring someone new, or even just sharing insights without any attempts of creating a wholesome understanding.

Putting the Humanities into Action in Tech and UX

Now, imagine if we start injecting that “I know nothing” perspective into the industry whilst acknowledging that whatever we make can make us back.

Imagine how our hiring would be like. Probably a bit more diverse, a little bit more objective by challenging sexism and racism.

Imagine what it’ll be like to make and design applications. Probably will be less reliant on verifying our own assumptions and design decisions which still does definitely happen even on a professional level.

Imagine how it’ll be when we stopped thinking the humanities as taboo. Probably more open to discussing politics (heck maybe even integrate UX into it) among other things.

You might be wondering: “How do we actually do that in a practical sense?”

One answer is to foster that sort of thinking through diversity programs but there’s also so much data and experience out there that just invalidates its viability in a business setting. If you go take a good look at Harvard Business Review’s articles, some diversity programs tend to fail in the sense that its returns are often just temporary or just plain counter-intuitive.

From 2011 to 2016, diversity has lessened for companies that implemented the three most common diversity programs: mandatory diversity training, grievance programs, and job tests (Robert Dobbin’s “Why Diversity Programs Fail). As such Harvard Business Review really does make a good point when they say “we can’t just simply unlearn years of biases.”

From the stories of professionals I’ve heard, there always seems to be a gap from diversity (the numbers) to inclusivity (the behavior) and for them, it’s been a mind-boggling adventure since there isn’t any clear-cut solution to cross that gap as an organization. It’s here that perhaps a good understanding of how the humanities operate can be advantageous and helpful.

When we acknowledge that we know nothing and that we change our world with what we make, we start taking a hard look at how we think and do things.

It’s in this humbleness and openness-to-experience that we can truly be humanely objective. And frankly speaking, UX as a field is at a prime space and mindset to actually practice this.

As an industry that built on collaboration, UX has absorbed methods from marketing, sociology, business, tech, and info design. Moreover, it was built upon the humanities in itself. With its roots in the design of everyday objects and a desire to care for the human condition, user experience is already primed for better integration with the humanitarian. With UX as a young industry, changes can be easily introduced especially from an ideological perspective as there isn’t a common way of doing and teaching things as a whole just yet.

Here are a few ways that we can start:

1. Non-compulsory Exposure

The very base of the whole issue of diversity really just involves pointing out that there’s a problem. We shouldn’t force it and it’s actually very important that we don’t.

As prior research in sociology would explain, “in an effort to enforce their autonomy, people will often disobey rules.” And that rings very true, especially in diversity. One such example demonstrating this is a research effort by the University of Toronto. They had white testers read a brochure about prejudice against the black minority. When people felt pressure to agree with it, the reading strengthened their bias against blacks. When they felt the choice was theirs, the reading reduced bias.

If we want to change what people think of the minority and the taboo, we shouldn’t fight as if people chose to be biased. We should only, at best, share what we think as an equal.

2. Mentoring

Based on a couple of interviews with people who identified as minorities in the design and tech industry, a few excelled in their careers because of various mentors who valued inclusivity. A few of them also opened up that it was their mentors who helped them feel welcome as they try to connect with them on a genuine and personal level. It’s mentors like these that challenge their peers’ biases by presenting minorities they hired in a more objective and supportive light.

Do mentors like these have to be someone in your current company? “No. With the right mindset, you can find a mentor anywhere, anytime, no matter what skill level,” a former Google intern said. The important thing is that you connect, not network. This person is not just a new business card, resume, or contact. They are a human person with aspirations, fears, skills, and opinions just like you, knowable but unknowable as a whole. User experience as a whole already practices empathy in relation to the target personae they design for. What’s stopping companies to practice this internally?

3. Leadership Selection

In the end, it all comes down to selecting good leaders. Whether it’s a CEO, a UX evangelist, or a lead position, influence and change more often than not come from the top if we don’t have the strength of numbers at the grassroots. If we want organizations to be inclusive, we have to be certain that our leaders and influencers also are. According to Robert Dobbin from Harvard Business Review, inclusive leaders have at least three of the following behaviors:

  1. Ensuring that team members speak up and are heard
  2. Making it safe to propose novel ideas
  3. Empowering team members to make decisions
  4. Taking advice and implementing feedback
  5. Giving actionable feedback
  6. Sharing credit for team success

So in regards to what’s actionable, we can either share our concerns with our leaders and hope they follow suit, hire the right leader, or be that leader and influencer for everyone else.

And I invite everyone to follow that calling.

“I’m starting with the man in the mirror.”

— Michael Jackson

Change begins when we acknowledge that we know nothing in comparison to the wealth of perspectives the world has to offer. Change begins when we take a hard look at how we think and do things. Change begins when we acknowledge we have the capacity to do great things.

Change begins by designing the self before designing our make and our world knowing that these things will form us back.

And that, ladies and gentlemen, is what the humanities hopes to instill. Despite all the taboos and negative biases associated with it, humanities has the right tools to help dispel the racial and sexist biases in tech and design. With it, maybe we can finally have the courage to freely and proudly exclaim that tech and UX are collaborative and progressive.

If you enjoyed this article thoroughly, take that finger or cursor of yours and clap clap clap!


The Humanities Belong in Tech and UX was originally published in uxdesign.cc on Medium, where people are continuing the conversation by highlighting and responding to this story.

from uxdesign.cc – Medium https://uxdesign.cc/the-humanities-belong-in-tech-and-ux-dbe93170873f?source=rss—-138adf9c44c—4

10 UX Design Predictions For 2018


We’re living in a time when design and user experience have never mattered more. The past decade of change shows us that design must constantly adapt as a discipline in order to meet user needs.While it’s impossible to see the future, we can still make some educated guesses about it. In this article, I go through some of the trends that will shape UX design in 2018 and, possibly, for several more years to come.

1. Content-Focused Experiences

Recent trends like minimalism and flat design focus on one thing. They remove the distraction from what’s really important: content. Content-focused experiences are experiences in which content shapes design (or design emphasizes content). A designer’s mission is to make sure that nothing impedes a viewer’s experience of the content. In an attempt to follow this trend, designers focus on the following visual aspects of design:

  • Distinct visual hierarchy. Good hierarchy in design eases the task of content comprehension.
  • Functional minimalism. By removing unnecessary elements it’s possible to provide a cleaner, more focused experience.
  • Whitespace. Giving content more room to breathe greatly improves a user’s experience.

Medium is a prime example of the trend for content-focused experiences

A content-focused experience isn’t limited to the visual part of design; the content itself has to be more helpful and engaging. That’s why, in 2018, we’ll see a growing importance of content strategy. Well-curated content will be a huge part of a brand’s success in digital products.

2. Time Saving Design

Today’s most successful websites and apps provide much more than relevant information in an easy-to-consume format. They create an intuitive experience that reduces friction and saves user’s time.Time is of the essence for success in both mobile and desktop environments. Users want the products that help them reach their goal as fast as possible and time-saving designs are key in helping them with that. Time-saving design allows users to take a limited number of steps from the moment they install an app/visit a site until the moment they take an action.This design has following characteristics:

  • Clear Navigation. It’s possible to create clear navigation by using the most popular navigation patterns along with good information architecture.
  • Context-specific information and features.To deliver excellent experiences it’s important to design for context–providing only the most relevant information and features on each step of the user journey.
  • Guidance. Guidance can be found in many different forms, starting from direct suggestions to delightful nudges (small rewards that alter a user’s behavior in a desirable way).
  • Linear user journey.Linear design is a journey that has a fixed beginning-middle-end structure and allows users to do just one specific action at each step of that journey.
  • Anticipatory design.Anticipatory design tries to anticipate a user’s needs and serve them the best possible experience.

These elements represent only a portion of possible design features that can save a user time.

Time-saving design is all about designing in the interest of saving time. Airbnb is a great example of such straight-to-the-point design.

3. Smarter Personalization

While personalization is related to time-saving design, it deserves its own part of the list. We’re moving from one-size-fits-all experiences towards individually tailored experiences where technology is adapted to people. With the power of personalized data and significant progress in AI and machine learning, we’re leaning towards systems that are capable of changing user experiences based on users themselves.In an attempt to get to know users on a deeper level, businesses will continue to search for new ways to offer a more personalized brand experience. This will move personalization to a whole new level.

One of the most common examples of personalization in modern apps/websites is personalized suggestions based on user actions. They increase the likelihood that a consumer will take action during any given site visit.

4. Omnichannel UX

The trend of focusing exclusively on the mobile audience should be re-evaluated. The growing number of connected devices will push the industry to create more dynamic and continuous digital experiences. With the rise of Internet of Things (IoT) devices, we’re moving from mobile-first experiences towards omnichannel experiences.The root of this trend lies in the nature of user interaction. To a user, it doesn’t matter where or how an interaction occurs. In fact, the interaction itself is largely invisible because a user has a goal she or he wants to achieve using the most relevant medium. That’s why a true user experience is device-agnostic. Users need experiences that match a context, defined by a user’s current device. Omnichannel UX brings consistency to a multi-device world. A designer who wants to create an omnichannel UX should create a seamless flow for the user’s journey by making it possible for the users to transition smoothly between devices when they use the product.We already have a few good examples of omnichannel UX among today’s apps. Uber is one of them. Requesting a ride from Uber can start on an Amazon Echo and end on an iPhone. That’s a good example of an experience that crosses two platforms, from two different vendors, with two different interfaces, yet is seamless to the user.

Uber’s omnichannel UX. Image credits: Businessinsider

In 2018 we won’t necessarily be designing whole ecosystems, but we’ll pay more attention to the ways people transition from one touchpoint to the other. As users, we’ll see more digital experiences that are both dynamic and continuous.

5. Humanizing Digital Experience

People expect to interact with digital products the way they normally would with each other, and designers should prepare digital products to deliver on those expectations.

The trend of humanizing digital experiences is directly related to user emotions. The way a user feels about an interaction with a product has a great impact on whether or not they’ll use the product on a long-term basis.

Designers can focus on humanizing digital interactions by focusing on satisfying fundamental human needs (such as trust, transparency, and security):

The checkout flow in the Stripe app. The app uses animation to reassure the user: when the user clicks “Pay,” a spinner briefly appears before a user sees the success state. The checkmark animation encourages the user to feel like they easily completed the purchase. Image credits: Michaël Villar

As well as delighting users:

Humanizing mobile experiences with microinteractions. Image credits: Apple

The trend of humanizing digital experiences will result in more demand for psychologists, UX researchers, and other specialists who will help create more human experiences.

6. Voice User Interfaces

In 2018 we’ll continue moving away from designing for clicks and taps towards the domain of screenless experiences–a domain of Voice User Interfaces (VUIs). VUIs are already being deployed in a range of technologies: Apple has Siri, Google has OK Google, Microsoft has Cortana, and Amazon has Alexa. The rapid development of voice interaction capabilities in our daily lives makes it clear this technology will soon become either an alternative or even a full replacement to traditional graphical user interfaces (GUIs). According to Gartner, by 2018, 30 percent of our interactions with technology will happen through conversations with voice-based systems. At the same time, VUIs will likely to continue living alongside GUIs in 2018. There are two reasons for this. Firstly, it’s not always appropriate to use voice input (e.g. giving voice commands to devices in crowded place is socially unacceptable). Secondly, there is still a lot of improvement to be done in the conversational systems itself: VUIs require a better understanding of human’s conversation flow–not only the topics people talk about but how they talk about them.

Image credit: Samsung

7. Biometric Authentication

2018 will be the year we see how biometrics help make tasks like authentication and identity management easier for both businesses and end-users. Many progressive apps and services won’t require users to create and remember passwords, but will instead use biometric authentication methods for this purpose. As effortless authentication becomes a user expectation, other companies will overhaul the UI design of the authentication process.

With the facial recognition in Apple’s Face ID, your face becomes a password

8. Augmented Reality

AR will break through into mainstream culture. At the recent Facebook F8 conference for developers, Mark Zuckerberg claimed that soon all screens will be replaced by lenses for the ultimate AR experience. Considering the efforts of Google, Apple, Facebook, and Microsoft in this field, it sounds like a realistic possibility in the next few years. While the dominance of mobile phones won’t change anytime soon, we’ll see dramatic growth in augmented reality apps for mobile devices. There are three elements in mobile technology which will have a significant impact on mobile AR, and these are faster processors, higher quality displays, and better cameras.In the upcoming year, we’ll start to see more useful applications in augmented reality, like ones that aid translation between cultures and languages:

Google Translate app

Or ones that provide helpful details during complex procedures:

AR solution for the health industry. Image credits: oneyoungworld

Of course, there will be also a lot of apps for pure entertainment:

Image credits: Apple

9. One More Step Closer To Virtual Reality

One of the most significant changes in the future in the way we use our apps will be the emergence of virtual reality technology. However, there are a lot of challenges that must be addressed before VR becomes a standard way of interaction.2018 won’t be a year of VR, yet; while some of us will work on VR products, VR itself won’t’ be a mass-market effect. In 2018 we will see more progress in defining ‘best design’ practices for VR. Gestures will be in focus–natural gestures with similar meanings in the real world will help with translating actions in the virtual space.

VR gesture control by Leap Motion. Image credits: Techcrunch

10. Broader Role of UX Designer

UX has always been a broad category but, in 2018, a designer’s specialization will trend towards new technologies (like augmented reality, artificial intelligence, and virtual reality). The role of a UX designer is about to expand again.At the same time, being a UX designer in 2018 will be less about ‘doing all of the stuff yourself,’ and more about ‘connecting people together.’ This will put the focus on collaboration, fast prototyping, and automation in some steps of the UX process that previously were manual (such as the design handoff).

An emerging set of new tools like Adobe XD will significantly improve the workflow for designers.

Conclusion

As with trends of any nature, some come and go, whereas others stay the course and become fundamentals. But even though tools and ideas change and our understanding of design transforms, the mission of a designer stays the same: design exists to make people’s lives better.


Nick Babich is a developer, tech enthusiast, and UX lover. He has spent the last 10 years working in the software industry with a specialized focus on development. He counts advertising, psychology, and cinema among his myriad interests.

Originally published at blogs.adobe.com.


Learn about Adobe XD, our all-in-one design and prototyping tool:

from Sidebar https://sidebar.io/out?url=https%3A%2F%2Fmedium.com%2Fthinking-design%2F10-ux-design-predictions-for-2018-54bebb8d9767

IBM’s Quest To Design The “New Helvetica”

IBM is no stranger to icons. Over the years, it’s created quite a few: the mainframe computer, the ThinkPad laptop, the Selectric typewriter, the Eye-Bee-M logo. The company hopes its new bespoke typeface IBM Plex, which launched in beta this week (though the official version won’t be released until early 2018), could become just as iconic–a kind of Helvetica for this century.

“When I came to IBM, it was a big discussion: Why does IBM not have a bespoke typeface? Why are we still clinging on to Helvetica?” Mike Abbink, the typeface’s designer and IBM’s executive creative director of brand experience and design, says in a video explainer. “The way we speak to people and the conversations we need to have and we’d like to have, is that still the right way to express ourselves? We should really design a typeface that really reflects our belief system and make it relevant to people now. Helvetica is a child of a particular sect of modernist thinking that’s gone today.”

To uncover what the typeface should express, Abbink and his team took a deep dive into IBM’s archives. They were especially interested in the company’s history in the postwar years, when its design-led business strategy first took shape and the legendary practitioner Paul Rand, who defined design as a system of relationships, created its famous eight-bar logo. In Rand’s logo, Abbink and his team saw a contrast between hard edges–the engineered, rational, and mechanical–and curves–the softer more humanistic elements. It’s a reflection of the man-and-machine relationship that runs through the company’s history–a dynamic that is reflected in the final form of IBM Plex. Each of the letters and glyphs has those hard “engineered” edges and soft “humanistic” curves, just like Rand’s logo.

The Plex family includes a sans serif, serif, and monospace versions. The designers also created a rigorous style guide that’s akin to a digital standards manual and includes a type scale, which plays into responsive displays; eight different weights (a nod to how the IBM logo is composed of eight horizontally stacked bars); and usage guidelines, which dive into everything from information hierarchies to color and ragging. All together, it’s easy to see Plex as a gentler, friendlier, more casual Helvetica for a broad range of uses both digital and print-based.

[Image: IBM]

Historically, IBM has used design to distinguish itself, whether it’s creating a better typewriter by introducing the “font ball” or defining laptop computing through the “TrackPoint nub.” Now the company is throwing its weight behind its $1 billion artificial intelligence unit Watson and is–in an effort to allay fear about this technology–positioning it as an assistant to humans rather than a replacement for them. A design tool at its core, IBM Plex is an expression of that same intersection between humans and technology. IBM will make the typeface free for anyone to download and is encouraging its widespread adoption. “If shoe stores or coffee shops or small businesses are using it for their identity, awesome,” Abbink says in the video. “They’re agreeing they want to be part of a discussion around machines and how they’re going to evolve and progress our world.”

So far, the response has been mixed: a thread on Hacker News reveals that many commenters agree with IBM’s decision to create its own consistent visual language. “I think this is all about establishing a new distinctive look,” commenter Ged Byrne writes. “The current one screams ‘1990’ at anybody reading. Now they need something that is distinctly IBM while gently whispering ‘2020’ into the reader’s ear.” Others argue the execution isn’t as sharp as they would like. Some don’t agree with the decision never to use true black, some believe the lighter weights won’t work on screens with low resolution, some nitpick on the 75-character-per-line limit.

The typeface is still a work in progress, but the company is sure about what the end result will be, at least–as Abbink proclaims in the video, “IBM Plex is the new Helvetica.”

from Sidebar https://sidebar.io/out?url=https%3A%2F%2Fwww.fastcodesign.com%2F90150350%2Fibms-quest-to-design-the-helvetica-of-the-21st-century

How to Effectively Measure UX with Google HEART Framework


Gut feeling is good but data-driven UX design is better. Still, the collectible data can be overwhelming, and the product teams might be working toward conflicting goals. The problem here is not in data since people have more data now than ever before. The whole problem lies in managing that data.

And it’s not that only startups are facing this issue, large enterprises like Google also have to deal with this. So, Google’s UX research team has come up with the Google HEART framework to measure the quality of user experience. The framework is described as a set of user-centered metrics for web applications which can help measure progress towards key goals and product-related decisions.

Fact* Google HEART can be applicable to mobile apps and enterprise software too.

Fact* Google HEART can be applicable to the whole product or a specific feature!

It is a good way of measuring the quality of user experience to get actionable insights. User experience does not only need to be designed well, it should be measured well too.

Image source

Let’s now dive deeper into what Google HEART is and see how it can help you measure UX.

H for Happiness

Happiness is a measure of satisfaction and attitude towards a product or a feature. It gives insights into how people feel about what you offer. You can measure the satisfaction on large scale through conducting user surveys. More specific things to measure here include the user’s satisfaction, net-promoter score (NPS), the perceived ease of use.

One of the simplest scenarios of calculating happiness is conducting a satisfaction survey after a major redesign. NPS surveys can be a really good tool for doing this. An in-product survey can depict the satisfaction level more vividly than a survey conducted through email.

E for Engagement

Engagement measures how much a user interacts with your product in a given timeframe. Some specific things to measure include the regularity and the intensity of use, and the level of interaction over a period of time. Some examples include the number of visits per user per week or the number of videos/photos uploaded per user per day e.g. for a photo editing app.

But note that the right metrics will vary depending on your niche. For example, a QR code scanner app is unlikely to see the same depth of engagement as an email app. But still, scenarios might differ depending on different circumstances.

A for Adoption

By adoption, you measure the number of new users of a product or a feature. For example, at Inapptics, when we successfully added a new feature of creating visual funnels from existing user flows, we started measuring the number of users who ended up using that feature during the next two weeks of its launch.

However, there is a little controversy about this too. Some of you might argue that adoption is not so much related to user experience but rather marketing activity. We agree that a heavy investment in marketing can overcome UX problems. But in the longer-term, a poor user experience is very likely to prevent new users from installing your app or using the new feature since they read reviews and ask their friends. Thus, for adoption, it’s best to combine your UX and marketing efforts.

R for Retention

Making people return is one of the hardest tasks ever. By R, you will be measuring the rate at which your users return. For example, you might be measuring how many of your active users at a given timeframe are still present at some later time. The failure to retain or the so-called churn is another metric you will want to measure. In fact, it’s one of the most heated topics among apps.

Similar to adoption metrics, the retention metric is going to be pretty useful when coming up with a new feature or rolling out a new release.

T for Task success

This one looks like a more technical metric since you will be measuring the time to complete a task or the error rates in a specific task. Some more things to measure will include the time to create a profile or upload a photo e.g. in the case of Instagram.

Now that you know all the categories in Google HEART framework, make sure you choose one or two of them based on your product. But how can you decide which metrics to measure and which ones to skip? Everything starts with Goals. It is one of the GSM (goals, signals, metrics) processes that you need to identify. Also, make sure everyone on the team knows the direction you are moving to.

For example, everyone wants to have a high number of mobile app users. However, they should decide which metric they want to measure: engagement or new users.

The next step in the GSM process is mapping the Goals to Signals. Signals should echo the users’ actions. For example, a failure signal in the Task success category for Instagram can be selecting a photo from the device, adding a filter to it but not publishing it.

And lastly, you can refine the signals into Metrics. In the Instagram task success example, we might implement “users upload images, add filters on them but do not post the images” as “the average number of cases when users upload images, add filters but do not post the images on Instagram.”

Summing up

If you want your product’s design to be backed by large-scale data, Google HEART framework can be the answer. But how to collect the data you need? A good in-app analytics tool such as Inapptics can help you not only gather relevant data but also analyze it in order to get precious user behavior patterns.

Have you tried using HEART to measure UX? Or maybe you have your own methods for doing this? Feel free to add responses below.


Found this post useful? Kindly hit the 👏 button below to show how much you liked this piece of content! :)

Follow Inapptics: Medium | Twitter | Facebook

Originally published at blog.inapptics.com on November 3, 2017.

Read Next: 14 Mobile App KPIs to Take Your App to the Next Level


from Sidebar https://sidebar.io/out?url=https%3A%2F%2Fuxplanet.org%2Fhow-to-effectively-measure-ux-with-google-heart-framework-4a497631d224

AI and human understanding will win the war for talent

One of the most well known tropes in startup and tech culture is that your business is only as good as the team behind it. You can’t do anything without having a strong team, and the most important job for every manager is to hire quality talent that fits into the preexisting team dynamics. The HR and recruiting industry has dedicated itself to finding the people who are right for your company, but the process of skimming resumes and calling in highly rated candidates for an interview hasn’t changed for the past decade or so.

However, the newest trend, AI, is infiltrating all industries. While it might be a very good thing, you shouldn’t put all your hiring eggs in that AI basket. The best solution combines the strengths of HR and AI.

AI in the hiring process

We’ve all been hearing (and reading) about how AI will completely take over our lives. We’ve also been frightened into thinking it will soon replace all of us. While the job of getting people jobs will not be replaced by AI anytime soon, the tech can offer major improvements to the process.

To find the right talent, you need to have the ability to scan resumes quickly, read people immediately, and imagine the future of the applicant sitting in front of you. While some of that work can be replaced by AI, currently we are nowhere near an AI that can read people and assess their fit within the culture of the workplace. But some of the processes for finding the right people to join your company — such as immediately asking for more information, screening, and highlighting special candidates — can be done more quickly and efficiently with AI.

The integration of AI is not just about saving the company time and resources. It also saves time and uncertainty for the candidate. Getting back to top talent to set up an interview a week from now is the best way to have them move on to the next opportunity. If you can provide instantaneous feedback on every application, you get a leg up over other companies looking to snag that candidate, instead of wasting their time and missing a hire.

Onboarding with chatbots

The optimal way to maximize efficiency is combining human and technological resources. A chatbot can onboard new candidates as quickly as possible, as opposed to a form that might never get filled out. If you build a real AI chat bot, you can give candidates real-time feedback on their applications and ask questions to gather information before any interview is scheduled. The bot can even automatically analyze the candidate’s resume and information while onboarding and give them real-time responses relevant to them, making sure that the right people get called in for an interview and that the interviewer has the right information before even asking the first question.

After the chatbot has done its job and flagged the relevant candidates according to your parameters, the human element kicks in. Hiring managers don’t have to read the whole resume, supporting documents, and answers to a questionnaire because AIs can create a personalized summary of documents. The AI behind the hiring process can create a five-bullet summary of everything that’s important to know about each candidate. It can even set up the interview on its own. This means even small companies where C-level executives do the hiring don’t waste time on pre-interview screening, and interviewers have concise information about each candidate before they walk in the room.

The interview is where the human intelligence and expertise shine. Things like a candidate’s cultural fit, connection, and ability to work with others, along with the hiring manager’s overall impression of a person, are vital. Humans can focus on what they do best and automate the rest.

The future of AI in recruiting

At the end of the day, hiring a person doesn’t just hinge on facts and figures, it depends on who they are. And that’s something AIs still can’t assess. But the process of going through those facts and figures to see if someone is qualified can certainly be automated by an intelligent bot. The value is increased by the fact that you can onboard and convert candidates quickly, meaning top talent will be more likely to work for you and you’ll take less time filling important positions at your company. The combination of AI and human understanding is what hiring managers need to win the war on talent — and save a few dollars, as well as time.

Moritz Kothe is the chief executive officer of kununu, a place to find and share workplace insights.

from VentureBeat https://venturebeat.com/2017/11/01/ai-and-human-understanding-will-win-the-war-for-talent/

Blockchain courts will offer effective dispute resolution in smart contracts

Arbitration is a fundamental aspect of human relationships be it social, professional, or business relationships. The emotional and psychological composition of humans cannot be absolutely prevented from interfering during the execution of contractual agreements and processes.

Contractual disputes

Disputes over contracts aren’t always caused by ulterior motives or deliberate intentions to short-change another party. Sometimes, they may be as a result of honest mistakes or inadequate understanding of the original contract.

However, no matter the reason behind eventualities and disputes during the execution of contractual agreements, there is usually the provision for settlement systems that are supposed to interpret the terms and conditions of the given contracts and deliver fair judgment.

Weaknesses in existing systems

Traditional dispute resolution systems have been exposed to several deficiencies that make them inadequate for today’s business environment. Modern technology and the pace at which business processes move these days, do not permit the luxury of the relative setbacks inherent in traditional systems. This has led to the development of a decentralized arbitration platform that suits the ecosystem of emerging technologies as we have them today.

Some of the disadvantages of traditional arbitration systems that make them inadequate for emerging systems include:

• High price
Professional legal services are extremely expensive, with preliminary consultations alone costing hundreds of dollars, while lawyer’s fees for civil lawsuits can run up to thousands of dollars.

• Duration of proceedings
As a rule, it takes several court sessions at intervals of 1-2 months to solve a case. That, of course, is too long for most disputes.

• Judgment execution
Even if a judgment is delivered, its execution takes time and is carried out by third parties. The losing party may abscond, declare bankruptcy or otherwise avoid fulfilling its obligations.

• High entry requirements
Most often, only big cases are heard in courts, and few people are ready to start serious litigation for disputes over everyday matters like a poor-quality product or service. The cost and complexity of proceedings do not depend too much on the subject of the deal.

• Jurisdictions
Public courts administer justice under the laws of a certain state, which vary significantly between countries.

• Political engagement and bias
Courts are not always independent — they are often influenced by other institutions and people.

• Complexity
Few people can protect their own interests; for the rest, trials are very complicated.

• Lack of choice
There is no way to choose the specific rules to be used for dispute resolution. Usually, it is the national legislation of a certain country, which cannot be altered by the parties.

The blockchain solution

By implementing a decentralized arbitration system on the blockchain, issues are resolved by a panel of jurors resident on the Jury.Online platform. This system serves to eliminate the above-listed setbacks which are detrimental to business operations in the fast moving technologically empowered societies of today.

Users on this platform can create deals and have them registered on the blockchain as immutable and transparent smart contracts. This enables every fact and detail of the deal to be available and traceable in case of any dispute.

To settle eventual disputes, judges are chosen randomly from a pool of judges, unless the involved parties unanimously select a particular judge over themselves whose decision will be binding over the issue at hand. Anyone can apply for an arbiter within or without a pool to Jury.Online project with background and experience description and get a chance to become a professional arbiter.

A typical example

A simple real-life example of implementing the Jury.Online system can be in a deal involving two individuals, a business owner and a website designer where the business owner contracts the website designer to create a website for his business.

Assuming that both parties only agreed on the creation of a website without the mention of hosting it, a dispute may arise when the business owners assume that hosting is automatic and complimentary, while the designer thinks otherwise.

Jury.Online simplifies and speeds up the settlement process of such a case because every fact and detail of such a contract would be placed as a smart contract from the beginning on the open source protocol of the Jury.Online blockchain. These details remain constant and immutable and when jurors are chosen from a pool of arbiters by the disputing parties, they carry out their investigations independently on existing facts and details and deliver judgment immediately.

Once judgment is delivered, the execution aspect which involves sealing up the deal is carried out immediately and everyone moves on.

Lead developers

The Jury.Online project is pioneered by Alexander Shevtsov and Konstantin Kudriavtsev. Alexander is a mathematician and a high-qualified specialist in cryptography, who has a background in abstract and theoretical areas of mathematics, engaged in cryptography, and has written several educational articles for universities.

According to Alexander, his interest in blockchain technology and cryptography lies in the reality of its application in the real world.

“First of all I’m interested in blockchain because this technology, and cryptography in particular, are some of the very few spheres of abstract mathematics, its matchless beauty and elegance can be applied in the real world”, he says.

For Konstantin who holds a degree in Technical Cybernetics, and work experience in some of the world’s largest banks (PrivatBank, Alfa Bank, UBS London Bank), the innovation that blockchain brings into the technology circle should be embraced by everyone.

Konstantin says;

“In general, all the technologies separately (p2p Protocol, encryption, etc.) were already known, but by combining them together, the technical world has been disrupted with blockchain technology and this is a breakthrough which should not be missed by anyone.”

This post is brought to you by

The Cointelegraph

. Yes, TNW sells ads. But we sell ads that don’t suck.

from The Next Web https://thenextweb.com/money/2017/10/30/blockchain-courts-will-offer-effective-dispute-resolution-smart-contracts/

How AI Helps The Intelligence Community Find Needles In The Haystack

If you were an analyst in the American intelligence community covering terrorism issues related to Russia, that conclusion wouldn’t have interested you. What would have stopped you in your tracks, though, was that the next day the Russian consulate tweeted that the attack may have been terrorism involving Russians.

In the flood of news coverage of the attack and the countless other developments in the world, you might have missed the terrorism theory. After all, humans can only process so much information manually. But if you’d been using a new visualization tool from the artificial intelligence startup Primer, you would seen the intense interest in Russian media about the Little Rock attack. Though that theory eventually proved to be incorrect, you’d at least have been aware of the possibility, and been able to make some decisions about what you wanted to report to your superiors.

Today, Primer is coming out of stealth. The 35-person startup, which recently closed a $14.7 million Series A round of funding, has developed a machine learning system that is able to quickly search through tens of millions of data sources–news articles, academic papers, social media posts, and so on–to surface the kinds of information that is essential to both intelligence analysts and corporate analysts alike. The system is also capable of delivering the most salient data points in natural language that approaches the level of what a human analyst might write.

Primer’s initial customers are In-Q-Tel, a nonprofit venture capital firm that invests in companies developing technologies useful to the CIA and other intelligence agencies; Walmart, and Singapore’s $100 billion sovereign wealth fund, GIC.

“For us, the big goal is to build a technology that can read and write, and help us understand the world,” said Primer CEO Sean Gourley, “as it becomes increasingly volatile, uncertain, and complex.”

Primer’s pitch to corporate and government clients is its technology’s ability to sift through immense quantities of data. According to IDC, the total amount of data produced globally will grow from 16.1 zettabytes (a trillion gigabytes) in 2016 to 163 zettabytes by 2025. Of that, 5.2 zettabytes will be subject to data analysis by 2025, 50 times more than last year. Artificial intelligence systems are expected to touch about 1.4 zettabytes by 2025, 100 times more than last year.

Those are big numbers, and Primer believes its technology can help its customers find the meaningful information that lives at the far end of the long tail, things that might be hidden in, as Gourley puts it, the seventh paragraph on page 163 of an obscure report. A human analyst might never have the time in her day to uncover something so deep in the stack, but Primer’s system is meant to highlight it if matches the analyst’s interests–and do so in a way that’s easy to digest and pass on to others.

Part of what Primer is unveiling today is its visualization tool–built by a former New York Times infographic artist. As shown, the tool shows the evolution, over time, of tens of millions of Russian- and English-language articles on a map of the world, with color-coded geographical hotspots indicating media interest in topics related to terrorism. That’s how an American intelligence analyst might have first noticed Russian interest in the Little Rock attack.

Similarly, the tool can easily show how, in September 2016, there were a significant number of articles written in Beslan, Russia, about a new documentary film that reports on a massive hostage crisis that took place there in 2004. Or how last January, Russian media was obsessed with coverage of a court case in The Hague brought by the Ukrainian government alleging support by Moscow for terrorism in Crimea.

The visualization tool–which Primer clients can use to search for numerous topics of interest–is meant to be advanced day by day, which allows analysts to see, at a glance, where the daily hotspots of interest were in both Russian and English media. In essence, it’s about being able to quickly triage the most important pieces of information in a very messy mountain of unstructured data.

“Primer’s technology is poised to revolutionize the way our Intelligence Community Partners consume and prioritize information, helping them to identify emerging areas of interest from real-time data,” said George Hoyem, the managing partner of Investments at In-Q-Tel, in a statement provided to Fast Company by Primer. “Many enterprise companies claim they’re leveraging artificial intelligence to generate insights from unstructured content—but Primer is one of the few actually delivering on that promise.”

The same strategy applies to corporations, Gourley says. Although he wouldn’t spell out exactly how Walmart is using Primer’s tools, he explained that, for example, the retail giant might have an internal analyst covering the snacks or beverages businesses. That person would likely be spending part of every day searching for data on organic beef, or looking for consumer trends, new behaviors, or health studies that could help produce internal reports.

As with those in the intelligence world, these corporate analysts face an overwhelming amount of data on a daily basis, and Primer believes its tools can give its customers a leg up on those who rely on more manual approaches to sifting through the innumerable sources of information.

The system is also meant to be quick. Depending on how much computing power a customer wants to devote to it, Primer’s tools can generate reports in between five to 30 minutes.

Ultimately, Gourley argues, customers using Primer’s technology will find themselves with more time to devote to following hunches–something they may not have been able to do previously because they’d have had to be heads-down trying to digest the never-ending flood of data.

“As we automate, it starts to save time,” he says, “and then allows humans to say, ‘What happens if we look at this?’ We get curious, and we do that in ways that are cheap for machines, but expensive for humans. We like humans telling us stories, but we also like machines telling us stories at scale we can’t.”

from Fast Company https://www.fastcompany.com/40484861/how-ai-helps-the-intelligence-community-find-needles-in-the-haystack?partner=feedburner&utm_source=feedburner&utm_medium=feed&utm_campaign=feedburner+fastcompany&utm_content=feedburner