Skip ⬇

Long-form reading on the web

Facilitator: Juan Corona

Speakers: Kaleeg Hainsworth

Previous: EPUB 3 History and Future All breakouts Next: All your spec are belong to us! Irrigating dev resources from specs

Skip ⬇

Skip ⬇

Transcript

All right everyone, Hi I'm Juan Corona.

I work for a company, a new startup company called Legible.

You may have seen the teaser video at the W3C.

And I was not involved in that, but it was very nice to see that there, and I hope you all enjoyed it.

I thought it was it was very comical and really awesome.

So yeah, Legible.

We want to do reading on the web.

You can check it out at our website.

We have a lot of information there @legible.com.

That's the small, tiny little plug that'll have.

Just to know what my organization is and where I come from.

But a little bit about me.

I've been a reading system developer for digital published content, specifically e-books, ePubs.

And by my profession, I like to call myself a web developer.

And yeah so let's begin.

I'm gonna share my screen.

Let's see if that works.

Let me go confirm here.

Yes it does.

Perfect.

So yeah, welcome to my breakout session.

Part one is just kind of me going to be throwing you off, throwing you some user stories from my perspective.

And maybe we can come up with some user stories, but really put on your hats as like we have the perspective, I have the perspective of a web developer reading systems.

So I see, I know how the, I think I know how the sausage is made.

But I really want to see it from like the out, the external perspective or someone coming new to this.

So I collected some of my user stories that for all of us here in the room might be a little obvious and, you know, with a lack of a better term, we might take things for granted, but I wanna kind of just explore some of these things.

We do it together.

So I'm gonna go and swap the background.

So it's less distracting.

I hope that's a little better.

So let's begin with this little talk slide that I have here.

And part one of this, I hope I go by pretty quickly, so we don't take up, I don't take up the whole session so we can have a lot of time for this discussion.

But here are my basic user stories.

I want to, well, actually, first of all, I should explain what this is about.

So long form content versus short form content really here is what I'm getting at.

When you're reading something, you have news articles, blog articles, maybe a recipe, something, anything like that.

Long form content is a lot more substantial.

It takes a lot longer to write and there's a lot more content like 700 to 2000 words.

You need to sit down and read it and really, you know, get immersed in it.

It's not something quick like a snack or something that you're reading or skimming or you're reading just to like find out some quick news update or something like that or a microblog.

Long form content is more like a book.

Like, you know, a featured article from a prominent news magazine media.

So when I'm looking at these things, let's take a look at the New York times.

So the New York times has an article here.

And as you can see my, you know, actually one thing I want to do before we begin, I need to change my display settings so things a little bit bigger.

All right.

I hope that made it better.

But yeah, we got the New York times as an example, we got Wikipedia long form.

And there's actually a website which I encountered during the research for this talk called longform.org.

And it's just a collection of articles that are in long form.

Like this one from the Huffington Post.

It's great.

So going back to it, every time we come forth at these things as a user, I have these kinds of things, these stories.

I want to see the table of contents, the outline of what I'm going to read.

It's long form so there's going to be a lot of content.

I wanna bookmark the page.

I want it to remember my location and I wanna dislocation and I want to share with others.

And this is just an overview of my use cases.

And I want to go through them one by one to show you some examples, to see where I'm getting it.

I want to increase the text size, the font size, maybe the line height, so it's a little bit more pleasant to read.

I wanna read this, maybe like a book, my screen, you know, I have a lot on the screen real estate.

I don't wanna have to scroll something a lot.

And maybe I just don't like scrolling that much.

Maybe scrolling isn't working that great.

Maybe I wanna flip pages side to side, like a news or maybe I wanna go even more complex, like a newspaper, think of three columns, a magazine.

Think of, you know, rich laid out texts, but with a lot of rich layout, I mean.

Maybe I wanna read this with a sepia tone or like with dark theme or light theme.

Maybe I want to also highlight some text and share that highlight to myself or with others.

Maybe I wanna cite something.

If I'm looking at a paper, or maybe I just want to cite anything 'cause I'm a researcher.

And then I want to read more.

Is this long form content part of a series?

What's the next part?

What's the next chapter?

Where can I navigate to that related content?

So those are my use cases, user stories.

Let's go right to the beginning again.

I want to see the table of contents.

Most of these sites, like you think of Wikipedia, you have a table of contents.

So let's take a look at that.

This Huffington Post article, scrolls.

And I'll go slowly to show you what it looks like.

And then I'll get to the meat of the main body of the content.

The body matter here, if you wanna call it.

Let me wait first, catch up.

Introduction on the left we can see there is a resemblance of a table of contents, an index.

That's great, I can jump around.

Awesome, everything is working.

I get to feel like I know that, you know, these are kind of related to each other.

There's this content that is linked together in a series and a table of contents, which is great.

Now let's take a look at the original article that I posted of the New York times.

You know, this is kind of a cover page or a cover image.

The cover of the content I get to read.

I don't really know immediately where the table of contents here might be, but that maybe that's okay.

But I wish maybe like my user agent or a browser here could kind of maybe generate one for me, based on some of the semantical information of the headings and so on.

And some of you may be thinking HTML outline.

I think of HML outline.

Anyway, before going really deep, I don't really wanna go really deep on this.

But let me move on to the next, my next use case, which is bookmarking.

And I noticed here that the New York times site has a bookmark option right on the site.

And that gets saved to my account, but does this satisfy my requirement that I need, I wanna share this with others?

Probably I can, by naturally I just can copy and paste the URL.

Well, so let's copy and paste the URL in a new window, but I get taken right back to the beginning and I'll wait for the screen to catch up.

So yeah, I get taken right back to the beginning and I lost where I was.

I didn't know, so I'm sitting here, maybe I don't have enough time to read this whole article on one sitting.

And I want to remember that I was reading about, you know, the outbreak chart or I was reading about where the outbreaks began.

So I really wish maybe that we could have some kind of anchor here, that I could then, like us, like we know we know how the sausage is made.

So we see that maybe we can have an anchor here and then we can have this in a fragment with an identifier.

And then maybe that could be shared that way in the URL.

But not all sites offer this as me, as going back to the reader as a user.

So let's take a look at something else that may could offer that.

Oops, this is not what I meant to lick.

Let me go back to my article here.

So there's been, so let me show you some more to like, maybe, I'm a researcher as well, and there's a journal article on Wiley, that I could read.

There's a table of contents here, which is great.

But I still, I see footnotes.

I see, but I really don't have anchors.

So maybe I can solve that with a Chrome extension.

So I found a Chrome extension that could display anchors.

I'll enable this.

Go back to where I was.

I don't know how well it'll work here, but probably it'll fail to work.

I'm not sure.

So let's take a look at a site that may have anchors.

Let me remember.

Let's take a look at maybe, well, let me show you something that will have anchors for sure, which is one of our publications at the W3C.

We have this little link here and I can then share and create bookmarks to this as well.

So there is that for me here, that this content is providing to me with this link and I can kind of, and it's an importance because I can kind of, as a user on the web, I can kind of see that if there's a pound sign or this section symbol, and then right next to the header and it's clickable.

I can probably right click it, copy the link and send it over to my friend.

and I could share with my friend the same thing I will see.

So this is kind of like deep linking.

Now let's take a look at a reading system that reads a format of publication and ePub.

So I'm gonna show you here, video style.

It's just one reader reading system that I like, to show you the next user story that I have, which is I wanna read this like a book.

I can flip pages, there's a table of contents, I can increase the font size.

That's great.

It's automatically generating as I move.

It's changing the anchors on my, the fragment in my URL dynamically as I go.

So if I go a copy of this and share it again, I'll go exactly right back where I was.

So, all right, let's step back a little bit since this is very on the fly here.

Now I wanna increase the text size.

You've probably seen me throughout this, as I'm showing you this, that I can easily increase the font size, the text size is in a browser.

Let's go back to that, that Huffington Post article.

And I'm going to go and make this bigger.

So I'm going to use the keyboard shortcut, Ctrl++, which maps to the zoom feature of my user agent, my browser.

And now I can do that.

I can, I can increase the font size.

That's great.

We have that.

It may not work the best in all kinds of content, but in general, it's very well made for almost all general content.

Now, how do I increase the line length?

I don't have that in my browser, but we, again, I can go on the Chrome web store and install an extension.

And I know this one will work.

I tried this out myself.

Line height adjuster.

Awesome.

So I'm going to go back to where I was with that Huffington Post article.

And I'm gonna go and use that line height adjuster to increase my line height.

And now I have a little bit more, like I can read this a little bit in a more pleasant manner.

There are some sites that offer a great line heights by default through the content.

Like they really took care of that and they made a great, there are some content where I wish I could go as a user and tweak it because I feel a little bit more comfortable with the spacing here.

So let me show you that one more time.

And it works this I don't, I personally have not looked at how this Chrome extension does it, like the technical details behind it, but as a user, it works great.

It works on everything.

It doesn't mess around with the layout of this website or this particular article.

It works on Wikipedia.

You know, maybe it's picking up on some of the semantic HTML tags and just targeting those, just maybe just going by what's the article tag or the body tag.

Maybe has some heuristic, there's logic way to do it, but it works pretty well.

So I've shown you a little bit about some of these things broadly.

I wanna bookmark the page, increase the text size.

I want to read this like a book, lets go a little bit more into that.

And then, yeah.

So let me show you a little bit more as we are almost going past the 50 minute Mark.

All right.

Final.

So for examples that I have here, I'm a web developer, so I read a lot of documentation.

So let's go into the React website.

Let's get started with React.

I'm now going to initiate a long form reading in a documentation site.

Great.

There is a table of contents on the right.

I got everything.

I have the links, I have that pattern here with the anchoring, a shedding level.

I can scroll down and at the very end of the bottom, I can go to the next article in this series.

So it's very pleasing to read like this.

I can read through all of this, and I know what the next article to read, and I know the previous article to read, which is great.

Let's see, as well, so that this, this web content satisfies that user story of mine.

Okay.

So we were looking at, want to read more content, as related in a series.

So let's take a look at something else I am now going, I wanna read something like, like a newspaper, or like, I wanna fill the screen that I have here with a lot of texts.

And I want it to be laid out in a way that makes sense for the content.

So let's look at what this, maybe the style example for a scholarly HTML file that is paginated and laid out like this.

Multiple columns.

Well, let me check, let's see if now, let's pretend that I going to a smaller screen device, and resize this window, and it adapts, this content adapts to my screen size, my preferred reading, viewport, if you could say, which is great.

Wish we could do this kind of stuff everywhere as a great evolution, because if I go back to some other sites, I don't, I don't get something like this.

We have also like a newspaper or like a magazine and same thing as well.

So these are the, and it's pretty awesome.

Now, the final thing I wanna show you before I open it up for discussion, or if you wanna talk to me more about what I've shown you here is that, I've been working on my own reading system as part of Legible.

And it allows me to read an ebook.

This is Moby Dick.

I can scroll down and I can go to the next article in this series, the next chapter.

And if I, and this, when I increase the window size, it adapts to reading like a book.

So I'm kind of stretching here between reading like a book, reading like a website.

Now, I don't know if that's the best case, if that's the best thing to do, providing this user experience, but that's the user experience that I have decided to play around with right now.

So, yeah, I mean, these have been all the things that I have as a user on the web reading long form content.

And I will also take, I will also show you some very last few things here.

And I've said last for a long time, and it's about highlighting.

And I just want to acknowledge two specifications that I recently found, which make a lot of sense to me as a user, as a web developer, as a reading system, developer.

custom highlighting API, really awesome, color adjustment, awesome too.

So I want to see, so I feel like the longer I wait, the more of these things are going to come together.

But it's great to be able to have this forum, this audience, and for somebody to take a look at this from this perspective of mind.

So, yeah, that's all I had as a talk.

And let me switch over to IRC and see what's been going on over there.