UX audits and their importance in the design process

When getting started on a new design sprint it can be easy to want to hit the ground running by sketching or drafting wireframes, but an important first step that can sometimes be missed is the UX audit.

What exactly is a UX audit you might ask? When I say UX audit I am referring to the surveying the competitive (and sometimes not-so-competitive) landscape — seeing what others are doing, how they are doing it, and, potentially, why they are doing it that way.

UX audits are an important step in the design process because they allow the designer to:

  1. See what the landscape is like for a particular component or workflow. How are others doing it?
  2. Identify what works, what doesn’t, and what might be missing. Where is there opportunity for improvement?
  3. Understand what’s considered “best practice” and why. Why reinvent the wheel if there is already a standard convention that users are familiar with?

But auditing is not as simple as browsing the web and taking mental notes of what you see. As designers, that’s something we do all the time anyway. When actually conducting an audit, you need to keep a record of everything you’ve looked at to see the big picture. Insights and recommendations should come from documented findings, not fuzzy memories.

So how should you conduct a UX audit? I’ve outlined my steps to complete a successful audit below. These should help in your research and development of user-centered components and workflows.

1. Figure out what you’re auditing

Are you auditing a component like buttons, search boxes, or date pickers? Or maybe it’s something more complex like an account creation flow? Either way, nailing down what it is exactly that you’re looking for will help you stay focused with your audit.

2. Figure out who you should audit

Are you designing strictly for enterprise or is it consumer-facing? Or maybe it’s for something geared toward teens? While you’ll want to look at a mix of websites and apps to help understand best practices, you should definitely spend some time looking at other players in your space as well. There might be trends by industry, demographic, or device that you need to pay attention to.

I like to get as big a sample size as possible, but depending on what I’m auditing that might not always be possible. If what I’m auditing is more of a common component, I’ll try to target a pool of 10–20 samples (using a combination of apps, websites, and/or operating systems, depending on what I’m auditing).

3. Screenshot everything

Shift + Command + 4 is your new best friend. You’ll want to grab a screenshot of everything you see — every state, every page, every interaction. This will make it easier to remember and document for others later. If you don’t do this, I guarantee you’ll go back and end up doing it at some point later, so you might as well do it now.

I like to organize all my screenshots into a folder, organized by product, so I can refer back to them when putting together my research into a final document. File organization is easy to overlook but a true time saver in the end!

Capture everything you’re auditing with a screenshot

4. Review everything you’ve captured

By now you’ve looked at at least 20 apps or websites, if not more (because chances are you didn’t find what you were looking for at each place you looked).

It’s hard to remember what was what, who did what and in what order, so take some time to review what you’ve screenshotted. Looking through all your screenshots will help you prep for the next couple of steps.

5. Organize into buckets

See what categories emerge when you start to organize your samples into buckets. What features does each product have? What characteristics or traits are common?

I’m not typically a big Excel fan, but a spreadsheet definitely comes in handy here. I’m also more of a visual person, so being able to see a breakdown that way can help with understanding too.

Breaking down search features by product

6. Look for patterns

Use your matrix you’ve created to look for commonalities. You’re basically using it as heat map of sorts to help surface patterns. These patterns can help you determine what is a common convention that users are already familiar with.

Emerging patterns from characteristics of a search box component

7. Document and synthesize to share with your team

Now that you have some insights and recommendations you might want to share it with your team; this can help them understand why you made certain decisions. Formats for your audit documentation can range from a Keynote presentation to something more like a UX framework guideline, depending on what works for you.

Even if you don’t end up sharing it immediately, creating a document that can be referred to later is extremely valuable for future-you and/or other designers on your team, saving them from the re-work of having to conduct their own audit.

And remember how initially you figured out what you were auditing exactly? Well now that you have all this information, it might be a good time to actually define your component or workflow so to set the scope of what something like “search” actually means. For others reviewing this later, extra clarity can be extremely helpful for understanding and alignment.

Basic anatomy of a search box component defined

8. Use what you’ve learned

Make use of your new insights to inform how and what you do for your product and users. Test your designs, iterate if necessary, and always keep an eye open for changing trends!


UX audits and their importance in the design process was originally published in UX Design Collective on Medium, where people are continuing the conversation by highlighting and responding to this story.

from UX Design Collective – Medium https://uxdesign.cc/ux-audits-and-their-importance-in-the-design-process-55264e55ffd1?source=rss—-138adf9c44c—4

UX & Psychology go hand in hand — Introduction to human attention

A handy article about human attention from a psychologist’s and a UX Designer’s view.

As a UX designer, we design digital products that people interact with. When we designing these products, we spend a lot of time on different research to understand the behavior, habits, and needs of our users. However, there is a couple of general patterns that characteristic of all people. To be consciously used, we need to understand the process of human cognition.
The purpose of this article is to understand the concept, function and types of visual attention and to use this knowledge in everyday product design.

What does psychology say?

In this section one of my friend, Anikó Tőzsér helps us to clarify the basic principles of human attention.

What determines what we pay attention for?

Attention is an ability which helps to select the information between different stimuli and process. Our attention can decide that we want to deal with the stimuli or ignore it. Sometimes this process is automatic and sometimes we focus our attention on a problem which we have to solve.

Psychology of attention deals with mechanisms of perception which form the behavior, and how consistent behavior is created. Psychological researchers of attention concentrate on audition and sight.

Spatial attention vs feature-based attention

There are two ways of visual attention: spatial attention and feature-based attention. Spatial attention means that we direct our attention to a particular region. Feature-based attention means that we direct our attention to a particular feature, for example colour.

Human Information processing

For the sake of design products, which grab people’s attention, we need to understand the processing of human information.

However this is a debated issue.

  • When one period is finished, the next one starts, and the periods contain more and more complicated feature of the stimuli.
  • Others argue that it’s continuous, which means that every stimulus is transmitted immediately.

Types of attention

There are different types of attention, which are determined by the situation and the intensity of the stimuli.

Selective Attention: it is an automatic process, which chooses between important and less important stimuli depending on the situation. As we can attend to only one thing at the same time, this kind of process helps to select the most important stimuli in the given situation.

As a UX designer we need to be aware of the fact of intensive changes: intensive changes of the environment draw the user attention. With this fact under our belt, we can consciously design user experiences that truly fit the users.

Divided attention: if a process is automatic, more process can happen simultaneously. A great every day example is driving and talking at the same time. We can pay attention only to one action at the same time, that’s why if something happens on the road in front of the driver, the driver will stop talking and concentrate on the driving. In this moment the attention becomes Focused, when the attention is limited to one object, action or stimuli.

Focused attention is the brain’s ability to concentrate its attention on a target stimulus for any period of time.(cognitivefit)

Sustained Attention: Sustained attention is when we keep our focus on one subject for a long time, even if we need to repeat the given action or activity.

As a UX Designer, we need to know that during the learning and working activities (listening to a teacher or reading an online lesson) the users need to use their sustained attention. It means that everything on the user interface should serve this goal.

Attention is a limited cognitive resource

As a UX designer we need to reduce cognitive overload.
Each sense modality has some separate attentional resource. An auditory task interferes less with a secondary visual task would.
”It is much easier to monitor the road ahead while talking on a cell phone than when looking at the navigation system.” (Visualexpert)

In one moment 5–9 (7+-2 The magical number) objects can be detected, which means that the area of spatial attention is not constant, it can be broader or smaller.

Cocktail Party Effect:

Cocktail party effect is the ability to tune into a single voice and tune out all others during a crowded party. This also could happen in the digital environment. Web party effect is the cocktail party effect in the web environment.

As Dr. Susan Weinschenk explained in her article, you can use the senses to grab attention. Colours, contrast, fonts, white spaces, beeps, and tones are helping to capture attention.

Too Many Options (Hick’s Law)

More choices need more cognitive load. “It describes the time it takes for a person to make a decision as a result of the possible choices he or she has: increasing the number of choices will increase the decision time logarithmically.”

Change Blindness

Depending on our focus, our brains can be fully blind to changes going on around us. We need to design our products according the main user goals and tasks. UX is a treasure box full of with useful methods and techniques. Creating user journey map or conduct task analysis could help us to avoid the ‘change blindness’ effect.

Thank you! ❤️


UX & Psychology go hand in hand — Introduction to human attention was originally published in UX Design Collective on Medium, where people are continuing the conversation by highlighting and responding to this story.

from UX Design Collective – Medium https://uxdesign.cc/ux-psychology-go-hand-in-hand-introduction-to-human-attention-a70ffd2c4289?source=rss—-138adf9c44c—4

Chermayeff & Geismar: 60 years of logos

Honoring Chermayeff & Geismar: 60 years of logos

This year, the world of logo design has lost one of its most prominent representatives, Ivan Chermayeff. In the odd case you don’t know who that is let me break it down for you really quickly. 60 years ago this man, Yale graduate, along with his Tom Geisman, founded the legendary firm Chermayeff & Geismar. It would become to be known as the creators of logos for such companies as Pan Am, Chase Bank, NBC and Xerox; channels such as Showtime and National Geogrpahic; and brands like Armani Exchange.

Chermayeff & Geisman

In 1979  Ivan Chermayeff and Thomas Geismar were awarded the AIGA Medal and in October 2014 they received the National Design Award for Lifetime by the Smithsonian’s Cooper-Hewitt, National Design Museum. Since, 2006 another designer joined forced in the firm, as a partner, Sagi Haviv. Apart from logos, they also deal with motion graphics and art in architecture.

Unfortunately, Chermayeff died this year, on December 3rd. He left behind a true legacy that will most likely be continued by its remaining two partners.

This is the man that said: “It is usually a two-month process, but it should look like it took five minutes.” That’s exactly what everyone in the business knows to be true. Only they’ve been doing it so successfully for 60 years, and counting.

To honor the two pioneering professionals, Dan Covert of Dress Code created the video below, which also features the last interview Ivan Chermayeff gave. The world of design has definitely lost a legend.

 

The post Chermayeff & Geismar: 60 years of logos appeared first on Tshirt-Factory Blog.

from Tshirt-Factory Blog https://blog.tshirt-factory.com/chermayeff-geismar-logos.html

Framer Launches Fresh New Design Tool









Framer is known as a prototyping app, but in an unexpected move they have just announced the launch of a fully integrated, browser-based, visual design tool.

Aimed at creative professionals, the new Framer is designed to rival established options including Creative Cloud and Sketch, new kids on the block Affinity and Figma, and is timed to steal the thunder of InVision, whose own much heralded design app is expected next month.

We’re betting on something that our competitors aren’t — that designers will want a tool which does both high-fidelity design and prototyping.

—Koen Bok, co-founder, Framer

Framer claims that this latest release makes it the first prototyping app to fully consolidate the entire designer toolkit—at least for screen based design.

The new app allows you to design everything from icons, through to hi-fidelity interactive mockups. Unlike some competitors, who are promising the moon in 2018, you can use Framer’s design tool now. The not unfamiliar interface is simple to use, and initial reactions have been broadly positive.

Framer’s approach has been a little…interesting, to put it succinctly. They have integrated AI [facepalm] so that you design something once, and Framer ‘intelligently’ reshapes and resizes the design across any device. I’m not saying this is a dubious approach, I’m not saying that responsive design is about more than making shapes fit a viewport, I’m not saying that this goes against a mobile-first methodology; I’m not saying any of that because we should be positive about any new tool that people have worked hard on.

Perhaps the best news for designers is that the tool is being released at all. We all saw the stagnation in design apps—and the corresponding impact that had design work—when Adobe was the only player in town. The more companies are forced to compete to win your custom, the better the tools on offer. It seems that 2018 could feature a design tools ‘space race’, with a dozen or more developers vying for an established slot in designers’ workflows.

Framer’s evolution into a full design tool, is on the one hand ambitious, and on the other inevitable. Framer won’t be talked about as an Adobe killer, it’s a different beast altogether; it may be that designers anticipating InVision’s new tool are tempted away. A creative process is a very personal thing, some designers will love Framer, others will not; it’s always nice to have a choice.

Framer is available now as a 14 day free trial, plans start from $12 per month.




from Webdesigner Depot https://www.webdesignerdepot.com/2017/12/framer-launches-fresh-new-design-tool/

The golden rule of A/B testing: look beyond validation

A/B tests provide more than statistical validation of one execution over another. They can and should impact how your team prioritizes projects.

Too often, teams use A/B testing to validate bad ideas. They make minor changes and hope the test will produce big wins. But these tests can be counterproductive. Results that are a product of random variation (e.g. not statistically significant) yield unhelpful insights, and even good results are not guaranteed to hold true when your winning variable is shipped to a full audience.

If you adhere to A/B testing best practices and ask the right questions before running a test, you’ll learn what types of changes are actually worth your time and focus on projects that produce meaningful insights.

The impact of statistical power

There’s a lot written on frequent A/B testing mistakes. The most common error is calling tests too soon based on statistical significance. Sometimes your test result is significant because there’s an actual effect, other times it’s due to sheer noise. After all, a random sample is never going to be a perfect representation of the full population.

In order to differentiate an effect from noise, you not only need statistical significance but also statistical power. If you have more statistical power you can be more certain the lift is actually real.

To get enough power and run a test correctly, ask yourself:

  1. How much do you think the change will increase the associated key performance indicator (KPI)?
  2. Given this desired effect, how long will you need to run the test to get accurate results?
  3. Is it worth the wait?

1. How much do you think the change will increase the KPI?

Say you want to improve your signup flow. You have a list of ideas and are trying to decide which ones to work on. You’re not happy with the UI, but a complete overhaul will take a month to design and build. On the other hand, you could try out a different color scheme, which won’t take long to change. Your team hypothesizes that the complete redesign can boost conversion from 10% to 15% whereas the color scheme change may boost conversion from 10% to 11%.

2. Given this desired effect, how long will you need to run the test to get accurate results?

Take your answer to the question above and plug it into this sample size calculator. Under the hood there’s serious statistics involved, but the basic logic is smaller effects take longer to detect whereas larger effects will be obvious sooner. This is an important insight: detecting small changes is expensive. In our example, the color scheme change only takes two days to build, but we’ll need 24x more data to test a 1% versus a 5% absolute lift.

3. Is it worth the wait?

With sample sizes in mind, you should consider how long a test would need to run to achieve reliable results. Say your signup flow gets 600 visits per day. The complete redesign will require two days to gather enough data while the color scheme change will take much longer. So the larger project takes 32 days to develop and test, while the smaller project takes 49. They both take a lot of time, but the complete redesign has more potential.

Focus on projects with bigger potential upside

Late last year, we thought our signup flow could do better. The layout on our previous signup page (shown below as the Control) was not logically organized. The integration methods were not displayed in an order that was most likely to be relevant to new users. And since our signup flow doesn’t see hundreds of thousands of visitors, we knew we had to test something that we thought was much better.

We wanted our signup conversion to increase by 10%. And after getting enough data, we looked at the signup rates between versions. Disappointingly, the difference was small and not statistically significant. The test was a wash, but that’s okay. We still decided to use the new version, because the signup experience was cleaner and put us in a better position to iterate and improve in the future.

What this approach means for startups

For young companies, small optimization projects just don’t make sense. Tests take a long time to run and distract you from working on projects that matter. You might see a slight uptick, but you’re likely working towards a local maximum. To get on the path towards the global maximum, young companies need to make big changes.

Larger companies have spent a lot of time working on flows and understanding their customers. They’re better suited for small improvements because they have the traffic to conclude tests faster. Plus, a 1% improvement means a lot more when you have hundreds of thousands of visitors a day.

Once you’ve made several large tests, have a good understanding of your customers and have large traffic volume, you can work on small optimizations. Remember, not every A/B test is going to yield the result you want. What’s important is that you determine your improvement goal and account for how long you need to run the tests to get the right kind of results. Otherwise you risk spending a lot of resources only to get back a negative ROI.

The post The golden rule of A/B testing: look beyond validation appeared first on Inside Intercom.

from The Intercom Blog https://blog.intercom.com/why-ab-tests-should-yield-more-than-results/

Students solve a 60-year-old space radiation mystery

The students uncovered the origin behind energetic particles that exist in the inner areas of Earth’s radiation belt. Scientists have long theorized that highly charged protons in these areas originated from cosmic ray albedo neutron decay (CRAND), which is what occurs when cosmic rays smash into neutrons in the Earth’s atmosphere. It results in charged particles, which become trapped in the Van Allen Belts. However, scientists did not extend this theory to cover the electrons on the inner edge of the belts.

Now, students have confirmed that CRAND is also responsible for the presence of highly charged electrons. It’s satisfying to have this mystery resolved, especially because these charged particles have a practical impact on space travel. They pose a hazard to both satellites and astronauts leaving the protective shell of the Earth’s magnetosphere to travel to the moon, Mars and beyond. Understanding where these particles come from can help us predict them.

But this discovery is also powerful because of the way it was made: by students through the use of CubeSats. CubeSats are small satellites, about the size of a loaf of bread or a shoebox. They are inexpensive to manufacture, and thanks to rocket startup companies like Vector and Rocket Lab, will soon be relatively cheap to launch as well. This particular satellite was funded through an NSF grant, and as space becomes increasingly accessible to high school and college students, you can bet that more discoveries like this are in our near future.

from Engadget https://www.engadget.com/2017/12/13/students-solve-mystery-electrons-van-allen-belts/

When AI gets in the way of UX

Don’t let your fascination for AI get in the way of your fascination for solving real problems from real people.

Interest for “Artificial Intelligence” over the last 5 years, according to Google Trends.

Artificial Intelligence is the big buzzword of today. If you are a digital designer, there are good chances that a quick scroll through your RSS reader, Twitter feed or Slack channels will show you more instances of the term “AI” than you would see just a year ago. New products being launched, journalists speculating how many years it will take for robots to take over the world, experts giving their opinion about how to design for AI.

Our entire industry is rushing to launch the world’s first AI-powered _______ (insert a product category here), without a proper use case or business case for it.

It doesn’t matter how it is going to be used, or by whom. What matters is to be the world’s first. Whatever it is. As long as there’s AI powering it.

In the next few months, every vertical of every industry will start to attach the AI-powered label to all its products — as well as its variations “AI-enabled”, “AI-driven”, “AI-controlled”. It’s a process that has been happening in the last 1–2 years and will only intensify moving forward.

On the other hand, products that are proudly created by humans (not robots), will start to attach labels that sit at the extreme opposite of the spectrum: “hand-made”, “hand-crafted”, “curated by humans”, “human-made”.

But what does that mean for UX Designers?

To create anything that will be powered by AI, technologists inherently have to start with the data that will be used to train the AI and ultimately create these amazing AI-powered tools and services. This process is usually driven by engineers — the experts that actually know how to model the intelligence and enable it to take action based on data.

The problem with that is that teams usually pick the first problem that technology can be applied to, without validating it with real users. Is that technology solving a real user need?

Just because something is possible doesn’t mean it should exist in the world.

It’s the same story when the concept of mobile apps came up in the late 2000s. Hundreds of apps were being launched every week, solving problems no one ever had. The vast majority died; the ones that were relevant for people persisted.

As UX Designers, our biggest challenge will be to participate as early as possible in these types of projects. To be designing along with developers, as soon as data is available to be looked at. And to bring the good old design methods of user validation and user research to the moment decisions are made — so companies don’t spend millions of dollars solving problems that don’t exist.


When AI gets in the way of UX was originally published in uxdesign.cc on Medium, where people are continuing the conversation by highlighting and responding to this story.

from Stories by Fabricio Teixeira on Medium https://uxdesign.cc/when-ai-gets-in-the-way-of-ux-17de95f40772?source=rss-50e39baefa55——2

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/