Larger content pages - design question

They have: 4 posts

Joined: Aug 2008

I am building out a new website for an existing online academic journal. The older site serves up its articles (~5k to ~12k words each) via PDF only and my plan is to offer up the content in html form (while keeping the PDF downloads as an alternative).

The majority of magazine, newspaper and academic websites that I've seen like to split longer articles up into smaller bites with page number navigation at the bottom of each page. This is considered best practice, I guess, and probably for good reason.

I would really like to keep my articles on a single web page, however, in part due to the fact that I am working with existing publications that must remain citable. In my experiments, I am applying subtle borders and backgrounds to demarcate the individual article "pages" and so far I think it actually looks pretty good. Much better than I expected, actually. I just don't know if I am running the risk of losing my audience this way.

An alternative to consider might be the grouping of 1-3 "pages" at a time on a given web page, while continuing to demarcate "pages" using borders and backgrounds, and reducing the amount of text on a given web page. But I'm still not convinced something like this is really absolutely necessary, especially given the (largely) academic audience we are going for.

I'm interested in polling and soliciting the opinions of other and more experienced designers on this matter. Thanks in advance!

decibel.places's picture

He has: 1,494 posts

Joined: Jun 2008

Hi silurius,

It would help if you could post a link if the site is live.

I would say it depends on what your users expect - if they don't mind reading a lengthy document, that might be preferable to splitting it up.

However, a larger doc would take additonal time to load, another consideration...

I know that I often prefer a PDF download over clicking through HTML pages when there is a choice. Of course, most browsers will display PDF online too.

Also, why don't you post an Introduction so we can get to know you better?

One more thing - I ain't no designer, so I'd be interested to hear what the artsy aesthetic folk have to say on this!

pr0gr4mm3r's picture

He has: 1,502 posts

Joined: Sep 2006

With most of the people on broadband these days, I don't think it's necessary to split a page based on load time. I think it would save load time if anything because loading a few extra KB on 1 page is better than having to load 2 or 3 completely different pages.

I personally prefer articles to be on one page. I think statistically, most readers don't make it past the first page. I don't have a citation on that though.

They have: 4 posts

Joined: Aug 2008

Yes, you've pretty much summed up how I'm looking at it, at present. Unfortunately I do not have any usability studies/reports to analyze and won't be able to create any. And my audience is probably spread across several demographics and regions. I'll probably only have a decent perspective of their actual expectations and habits after I've rolled out the new website (which is currently not yet live).

[Edit: Whoops. The above was directed to decibel.places' post #2]

To pr0gr4mm3r: Your point is what my gut is also telling me, that designers/developers split pages for load time and for extra ads and clickthroughs, and that people are probably less inclined to click again and again to keep reading the same article they already indicated an interest in.

decibel.places's picture

He has: 1,494 posts

Joined: Jun 2008

Good idea to test it-

You can have a couple of long articles and a couple split up and check click throughs and time on page etc

Good point about the additional ads too - like About.com, the info is good but you haveta click like 5 times to get it, just for all those ads to display

I wonder if additional pages can be optimized for better SEO?

I just found this interesting table and graph (a bit off-topic): World Internet Users and Population Stats : 1,407 Million Internet Users!

Internet by country stats

More on-topic:

According to data provided by Nielsen and reported on Web Site Optimization, home dialup users in January 2008 made up 12.51% of active connections

(from Taming The Beast)

Dial-up and DSL may be more concentrated in certain populations, particularly the lower income brackets, and perhaps extreme rural users (who cannot afford their own satellite)

Megan's picture

She has: 11,421 posts

Joined: Jun 1999

silurius wrote:
I would really like to keep my articles on a single web page, however, in part due to the fact that I am working with existing publications that must remain citable.

This is good way to think about it. You want it to be easy for people to cite and link to the articles. It's better for SEO this way too. Also, you don't have to bother with implementing a printer friendly version with all the pages together. Just put in a good print stylesheet and that's all you need. Better for you and easier for the users.

Quote:
In my experiments, I am applying subtle borders and backgrounds to demarcate the individual article "pages" and so far I think it actually looks pretty good.

Why?? Why try to make it look like there are physical pages? What's the point? A web page is not the same as a printed page - no point in trying to make it behave like one IMO.

What you should focus on is the typography and other content elements (displaying figures, pullquotes etc.). Make the web page easy and comfortable to read. Also put some attention into the print stylesheet. With long, academic articles many, perhaps most, readers will print the article instead of reading it on screen.

decibel.places's picture

He has: 1,494 posts

Joined: Jun 2008

I agree with Megan

Why?? Why try to make it look like there are physical pages? What's the point? A web page is not the same as a printed page - no point in trying to make it behave like one IMO.

It is really helpful to place anchor tags within the document (sections, chapters, whatever makes sense) and link to them from a top or side menu

Megan's picture

She has: 11,421 posts

Joined: Jun 1999

That makes more sense. That would really enhance a printed publication with tools that aren't available in print.

They have: 4 posts

Joined: Aug 2008

@Megan & @decibel.places - True, true. I was merely struggling with the visual demarcation effort. It wasn't obvious whether a given page number between two blocks of text was referring to the block above or below. So it occurred to me that a white web page background and a very light gray article page background would resolve that and might even look OK. But when I tried it out it felt like a crutch, even if it resolved the problem somewhat nicely.

I've been playing with the jQuery LocalScroll plugin and it's pretty nice. If I were to place two instances of the article above one another on one web page (one in a LocalScroll box near the top of the web page with horizontal scroll buttons and jump navigation in the sidebar, and the second instance being the full, long article, below) do you think I'll take a major performance hit? The amount of content text would roughly double and users would be loading two additional JS' (jQuery.LocalScroll also uses jQuery.ScrollTo).

The great thing is, in my early prototype it barely changed my visual layout at all, until you scroll down to the second instance.

Megan's picture

She has: 11,421 posts

Joined: Jun 1999

silurius wrote:
@Megan & @decibel.places - True, true. I was merely struggling with the visual demarcation effort. It wasn't obvious whether a given page number between two blocks of text was referring to the block above or below. So it occurred to me that a white web page background and a very light gray article page background would resolve that and might even look OK. But when I tried it out it felt like a crutch, even if it resolved the problem somewhat nicely.

I still really don't understand why you're trying to make it look like there are "pages". A web page isn't divided that way, by nautre. Why force it? There's no reason to.

silurius wrote:
I've been playing with the jQuery LocalScroll plugin and it's pretty nice. If I were to place two instances of the article above one another on one web page (one in a LocalScroll box near the top of the web page with horizontal scroll buttons and jump navigation in the sidebar, and the second instance being the full, long article, below) do you think I'll take a major performance hit? The amount of content text would roughly double and users would be loading two additional JS' (jQuery.LocalScroll also uses jQuery.ScrollTo).

Why do you want to do this?

I think you need to keep in mind that academics are pretty traditional folk. They're not techies. Depending on the subject matter they may not be strong computer users at all. They want to get their information quickly and in a usable form (most likely printed). They will also be more comfortable if the interface resembles what they're used to seeing in other publications.

Really, I don't think this funky interface stuff is going to server your audience. Keep it simple. Also, having two copies of your text on the same page could be an SEO problem.

They have: 4 posts

Joined: Aug 2008

Megan wrote:
silurius wrote:
@Megan & @decibel.places - True, true. I was merely struggling with the visual demarcation effort. It wasn't obvious whether a given page number between two blocks of text was referring to the block above or below. So it occurred to me that a white web page background and a very light gray article page background would resolve that and might even look OK. But when I tried it out it felt like a crutch, even if it resolved the problem somewhat nicely.

I still really don't understand why you're trying to make it look like there are "pages". A web page isn't divided that way, by nautre. Why force it? There's no reason to.

You know, you're absolutely right about that, and this truth was very evident after trying it out. I only experimented because I was imagining scenarios where a portion of text spanning 2+ pages was quoted or cited somewhere else, and brainstormed for ways to help to ensure that the person citing continued to be aware of this demarcation. But on the web, as you say, it looks ugly and clumsy in actual implementation.

Megan wrote:
silurius wrote:
I've been playing with the jQuery LocalScroll plugin and it's pretty nice. If I were to place two instances of the article above one another on one web page (one in a LocalScroll box near the top of the web page with horizontal scroll buttons and jump navigation in the sidebar, and the second instance being the full, long article, below) do you think I'll take a major performance hit? The amount of content text would roughly double and users would be loading two additional JS' (jQuery.LocalScroll also uses jQuery.ScrollTo).

Why do you want to do this?

I think you need to keep in mind that academics are pretty traditional folk. They're not techies. Depending on the subject matter they may not be strong computer users at all. They want to get their information quickly and in a usable form (most likely printed). They will also be more comfortable if the interface resembles what they're used to seeing in other publications.

Really, I don't think this funky interface stuff is going to server your audience. Keep it simple. Also, having two copies of your text on the same page could be an SEO problem.

[/quote]

Yep, I totally agree with these points and the spirit behind them. Just to play devil's advocate, it was surprisingly impossible to tell that anything fancy was running at all in a little jQ.LS proof-of-concept. It resembled the non-jQ version in every way until you scrolled down to the second instance. But the tradeoff was bad design, I ultimately felt, and of course probable SEO issues.

Looks like I've come full circle, but the whole exercise has definitely been instructive and helpful.

demonhale's picture

He has: 3,278 posts

Joined: May 2005

Extra navigation would greatly improve site accessibility, but merely displaying two full-length articles at a time defeats your original purpose of showing off your main article page.

The Magazine/Newspaper layouts are setting up a trend now on site design and layouts, and most of them provide full article views after the excerpt. The only thing I noticed are the visual cues to mark up the articles and make it attractive and easy to read. One thing I experienced in article driven academic sites however is the ample amount of use of the search function. These are just some of my thoughts to share...

They have: 2 posts

Joined: Sep 2008

Of course, most browsers will display PDF online too

Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.