Arpia.be » Webdesign

Tutorial: Multi-page, multi-column web pages

Peter Craddock — Mon, 01 Feb 2010 16:08:08 +0000

At some point in the redesign process of Arpia.be, I started to consider the idea of a “book-like” feel, where the content would be presented in two columns, and users could flip to the next page of content seamlessly.

The way I see it, this is something that has so far only been done using Flash, so it may be of interest to web designers & developers to see how they can achieve this without Flash, in a cross-browser compatible manner.

Our aim? To use CSS3 native support for multiple columns on the most “advanced” browsers (here: Safari, Chrome and Firefox), and to find a backwards-compatible technique for the others (in this case, Opera and Internet Explorer).

Basics: sources, …

These annotated files are used in this article:

CSS: ie_multicolumn.css (for IE), main.css (for all browsers), multicolumn.css (for Opera)
Javascript: css3-multi-column.js (for IE and Opera), pageturn.js, stylesheet.js

The web page that helped me the most with this design process was an article on A List Apart: “Introducing the CSS3 Multi-Column Module”, written by Cédric Savarese. In this article, Cédric not only explains the CSS3 multi-column module, but also the manners in which to emulate this behaviour using Javascript on browsers that do not support this CSS3 module. Cédric wrote a script in Javascript for this purpose.

There is, however, one issue with this article: the website to which it links, CSScripting.com, does not seem to respond (I’ve tried often). Using Google (or your favourite search engine), you can nevertheless easily find other websites using the script (“css3-multi-column.js”).

The HTML – containers

This may sound ugly, but the best way I’ve found to implement this trick, after much trial & error, involves as many as 4 DIVs around the content.

First, the DIV you would normally have used for the content. Second, the first DIV required by Cédric Savarese’s Multi-Column system (there must be a difference between these two, for reasons linked to the page turning effect – see below). Third, a DIV used for the transition between pages, for non-Internet Explorer browsers (this is linked to a fade effect, which doesn’t work as smoothly in IE – see below for the page turning effect). Fourth, the second DIV required by the Multi-Column system.

The HTML doesn’t look all that pretty, but I didn’t want to change the JS code too much, hence the remains of the “one” and “two” classes from the Multi-Column system:


	
	
		
			[put content here]

The CSS – all browsers

There is one major issue with the CSS3 multi-column module: so far, the browsers implementing it are Firefox (since v3), Safari (since v3.1) and Chrome (since v2). Neither Internet Explorer nor Opera support it.

- Source

We will therefore define general CSS rules for all browsers, and then add some stylesheets specifically for respectively Opera and IE, as the latter will use the Javascript method of multi-column, whereas the others will not.

The first element for you to think about is the total amount of content you want visible. In the case of Arpia.be, I wanted two columns of a height of 430px and of a width of 330px to be visible, with a separation of 60px, i.e. a total width of 720px.

In experimenting, I found it better to add some “padding-top” to the columns, for better display of certain typefaces with a higher baseline. The height of the containing DIVs therefore takes into account this “padding-top”.

Non-annotated CSS:

div.one {
	height: 435px;
	width: 720px;
	overflow: hidden;
}
div#columniser {
	height: 435px;
	width: 720px;
	overflow: visible;
	opacity: 1;
}
div.two {
	column-count: auto;
	column-width: 330px;
	column-gap: 60px;
	-webkit-column-count: auto;
	-webkit-column-width: 330px;
	-webkit-column-gap: 60px;
	-moz-column-count: auto;
	-moz-column-width: 330px;
	-moz-column-gap: 60px;
	height: 430px;
	overflow: visible;
	display: block;
	padding: 0;
	padding-top: 4px;
}
#columnified {
	margin-left: 0;
	width: 15540px;
}

See the annotated CSS here.

The CSS – IE & Opera

Because of the way the Javascript method for multi-columns work (see below), some additional CSS entries are necessary for Opera and IE. In addition, IE and Opera do not handle the multi-column Javascript in the same way, so it is necessary to have different CSS for each, in addition to the main CSS file.

Opera:

#article {
	width: 720px;
	text-align: justify;
	overflow: hidden;
}
div.one,#columniser {
	max-height: 435px;
	width: 15600px !important;
	overflow: hidden;
	margin: 0;
}
div.two {
	column-count: auto;
	column-width: 330px;
	column-gap: 60px;
	max-height: 430px;
	overflow: hidden;
	margin: 0 0 0 0px;
	padding: 0;
	padding-left: 0px;
	padding-top: 4px;
}
div.two .columns, div.two .wrapper {
	width: 330px !important;
	height: 430px !important;
}
.columns {
	padding-left: 0 !important;
	padding-right: 60px !important;
}

See the annotated CSS here.

IE:

Disclaimer: I have only attempted to get this to work on IE7 and IE8, as IE6 would most probably require a whole lot more work (I found that IE6 crashed using the current, modified multi-column JavaScript – I did not seek to find the source of the issue).

#article {
	width: 740px;
	height: 470px;
	text-align: justify;
	overflow: hidden;
}
div.one {
	max-height: 435px;
	width: 15600px;
	overflow: visible;
	margin: 0;
}
div.two {
	column-count: auto;
	column-width: 330px;
	column-gap: 60px;
	max-height: 430px;
	overflow: visible;
	margin: 0 0 0 0px;
	padding: 0;
	padding-left: 0px;
	padding-top: 0px;
}
div.two .columns, div.two .wrapper {
	width: 330px !important;
	height: 430px !important;
}
.columns {
	padding-left: 0 !important;
	padding-right: 60px !important;
}
div#columnified {
	float: left;
}

See the annotated CSS here.

The Javascript – Adapting css3-multi-column.js

Now that those basic CSS properties are defined, we must examine the multi-column script, to see how it will be used in Opera and IE, before looking at how we switch between pages.

Cédric Savarese’s script is brilliant at enabling multi-column layouts on browsers not supporting this CSS3 module. However, it was made with the idea of a fluid layout in mind, and one where all the content is visible. We, on the other hand, wish to hide some of the content.

There are some issues with the multi-page adaptation of multi-columns that led me to change certain elements within the code of the Javascript I use.

First, Cédric’s script creates DIVs within an “available width” generally limited to the browser window’s horizontal length. It is our aim, however, to have all these DIVs sitting right next to each other on a horizontal line, for as long as it takes to display all the content. It is therefore to fix the available width to an amount far greater than the browser window width. In the Javascript, the line is “var availableWidth = 15600;”, but you can choose to make it far larger. In my case, it was because I did not believe I would ever go beyond 40 columns of text (at 330px for a column, 60px for the gap between columns).

A second important change was fixing the height of the columns within the Javascript. I found this to be necessary, as the reading of data from the CSS did not seem to force the Javascript to create the DIVs exactly as I wished them to be (see “var newHeight = 430;” in the script, az well as all the instances of “430″, which force the value instead of “newHeight”).

These values, “430″ and “15600″, are the two main points in my modified version of the script that you will want to change to your own values.

As regards height, another important change was to replace “findSplitPoint(elem, newHeight*i, wrapper);” in the “processElement” function with “findSplitPoint(elem, newHeight, wrapper);”, to avoid the creation of DIVs greater than the newHeight limit (430px in my case), even if there are only 10px more to complete a tag (a “P”, a “DIV”, …).

Furthermore, whereas in Cédric’s script, the containing DIV, the “wrapper”, could have a random ID, in our case it is necessary to define this ID for the purpose of sliding it in Internet Explorer (see below for the page-turning effect). Therefore, ‘if(!wrapper.id) wrapper.id = “columnified”;’. On a similar note, to allow better control of the columns, it is useful to define a class: “elem.className = “columns”;” (I also defined the wrapper class: “wrapper.className = “wrapper”;”).

Finally, at the top of the script, there is a list of “splitableTags”. I expanded this list to contain table-related elements, because I use tables in certain areas.

You can find this adapted script here: css3-multi-column.js.

The HTML – Turning pages

Now that the infrastructure is there, it’s time to work on allowing the user to go between pages, i.e. to slide the content so he/she can view the hidden columns.

We’ll be using Javascript for this effect, so here is the HTML for calling the page-turning function:


	
		Previous page
		Next page

In the function “changeColumns()”, the first value shows the direction, while the second is the title of the ID of the element clicked.

Why “-1″ for “Next”? When the user clicks on “Next”, we want the two visible columns to go left, to leave space for the next two columns. Because we’re playing on “margin-left”, as you’ll see in the Javascript file, we want the value for “Next” to be negative.

The Javascript – Turning pages

To turn pages, one can proceed in several steps. First, we must ensure that when the user clicks on the “Next” or “Previous” button/link, the content moves, and it moves to the correct place. Second, to create a better experience, we can animate this change.

The essence of the sliding of the content is that we’re playing on “margin-left” of the relevant DIV (if IE: columnified; if not IE: columniser – this is linked to the animation).

For my website, I chose to do a “fade out/slide/fade in” animation, but found that it was sluggish on Internet Explorer. This is the reason for which IE users do not need the “columniser” DIV.

Other animation choices are possible: you may choose to fade out the entire content and show a page-turning effect, if you have a book design. This is what I did for a “book” proof-of-concept design on which I worked earlier (here, it seems as though the user is actually flipping through pages of a book).

Here are the three sets of functions (4 functions in total) we shall be using:

changeColumns()

In our HTML for turning pages, we defined the function as "changeColumns()", with two values: first, a value showing the direction, and in second instance the ID of the element clicked.

animateSlide()

animateSlide(), as its name indicates, will animate the transition between two pages by sliding the content. As was seen previously, IE users are not faced with this function, because of the transition lag it causes.

setOpacity() and fade()

The two last functions relate to the fading in/out of the content. These are very standard, and work in all browsers (through the use of "filter" for IE – I have retained this here for the sake of completeness, but it is not used, as IE users do not see the fade animation).

Full pageturn.js

As the JavaScript involved is long, I have not reproduced it in this post. You may view an annotated "pageturn" script to see the functions with explanations for each step.

Serving the CSS and the Javascript

Finally, how do we combine all of this? We want Opera users to have the main CSS file and the Opera one, as well as the multi-column Javascript, but we don’t want Safari users to have the additional Javascript, given that they have CSS3 Multi-Column support.

The solution is to feed different files to different browsers, using Javascript:

if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)) { //test for IE x.x;
	document.write("");
	document.write("");
	document.write("");
	document.write("

Then, the “pageturn” script must go in the footer:

Adding page numbers

It may be useful in some cases to add page numbers. In my book demo, I achieved this by adding the following line in the HTML to “div class nav”, right before “ul class arrows”:

Next, in the CSS, I added the following lines:

.pagenumbers {
			position: absolute;
			width: 630px;
			z-index: 1;
			top: 30px;
			left: 80px;
			font-size: 1em;
			letter-spacing: normal;
			font-weight: normal;
			color: #000;
		}
			.pagenumbers #pageleftnumber {
				float: left;
			}
			.pagenumbers #pagerightnumber {
				float: right;
			}

In the “pageturn.js” Javascript file, the following bits of code needs to be added twice:

leftPage = (changeValue * -2) + 1;
rightPage = (changeValue * -2) + 2;
document.getElementById('pageleftnumber').innerHTML = leftPage;
document.getElementById('pagerightnumber').innerHTML = rightPage;

It goes right after the following line:

document.getElementById("columnified").style.marginLeft = newValue + 'px';

… and right before the following one (or its equivalent, basically the “fade back” animation):

fade('columniser', 50, 100, 500);

Finally, please note that it may be necessary to adapt the IE- and Opera-specific CSS stylesheets.

Closing comments

And… there we go, a fully functional multi-page, multi-column layout, applicable to any number of web pages, without the need to resort to Flash. See a demo, without all the graphics of Arpia.be and using these files only, or a "book" proof-of-concept design on which I worked earlier.

The only issue, as far as I can tell, is that it’s impossible to determine in advance how long the content will be, and one cannot therefore avoid having the “Next” button still visible beyond the end of the content. My workaround, as can be seen on Arpia.be, is to add “easter eggs” for those who click beyond that limit.

Perhaps you can come up with another solution…

Arpia.be design refresh

Peter Craddock — Mon, 18 Jan 2010 11:30:35 +0000

As 2010 kicks off, it is time for me to unveil a new website design on which I have been working for a few months. It was a long process, involving several radically different ideas and long hours getting it all to work (especially on Internet Explorer), but here we are, finally.

I recommend trying things out, to find the hidden easter eggs and so on, to get used to the new functionality.
[Tested in Firefox 2-3, Safari 4, Google Chrome 4, Opera 9-10, Internet Explorer 7-8]

But to truly understand the design, I think a more extensive portrayal of the design process is in order.

In August 2009, I was working on a design for an online store of digital photos, based on the idea of a memory box. For one iteration of the design in question, I had the idea of scanning a paper file and using it to convey the idea of a file containing the photos. This idea was set aside for the project in question, because it did not perfectly fit the idea, but the design felt very well done (and I put some effort into it).
I therefore decided to slightly alter the design, and use it for my own website.

This “Arpia File” design boiled down to showing pages on documents linked to a file on a desk. See the design in action on the Arpia File design demo.
While working on this design, I realised that it did not fit the idea of science-fiction, so I attempted to make a specific page for the ARPIA2 plug-in, more “technical” through the use of a “blue prototype paper” pattern (click on “Game” on the Arpia File design demo).
I was somewhat pleased with it, and had the idea then of making a different page for the “Novels” section, closer to the idea of novels, creating an “old paper” effect (click on “Novels” on the Arpia File design demo).

Still, the Arpia File design didn’t feel right, not for my website.
I then had another idea, inspired by my last touches to the Arpia File design: to create a book-like experience, through the use of a “multiple column” layout.
This was the “Arpia Book” design, on which I poured yet more time and resources, making it look like an old book, with classical typography.
Getting this effect to work on CSS3-capable browsers, such as Firefox, Safari and Chrome, was easy. Getting it to work on Opera and, worst of all, Internet Explorer, was a true challenge. See the design in action on this webpage.
Once I had worked on it for some time, my enthusiasm was yet again damped by the realisation that it did not fit the website. I adored the layout, but most people visiting Arpia.be itself do so for the ARPIA2 plug-in and the iTunesque Mac themes. Why present them with an old book?

The latest version of this website is an attempt to reconcile the feel of a book with the science-fiction (and therefore more modern) setting of the Arpia universe.
It tries to look like a tablet, and with the constant rumours about an Apple tablet about to change the computing landscape, I hope the “Arpia Tablet” design brings an appropriate look to Arpia.be for 2010.

Of course, I’m sure it will undergo refinements as the year progresses.
And if you want to have a hand in that, just let me know what doesn’t work, what should be changed, what you like, what you don’t. After all, without feedback, a design is not worth anything!

PS: about being able to click beyond the last page, that is unfortunately a limitation of the design. Why not take a look at what it leads to?

A new webboard design: critique?

Peter Craddock — Sun, 17 May 2009 09:19:22 +0000

Now that I have defended my Master Thesis, I “only” have three exams to prepare (one of which is basically a 15-page paper). As such, the Master Thesis was by far the largest work to be done for university, and I therefore took a small break from working.

That break turned out to be spent on another kind of work, web design. In July, I will normally become the administrator for our Law Faculty student webboard & website, and I grew somewhat tired of the Cobalt theme for phpBB2, which is currently used.
I therefore got to work on another design, something fresh.

The result is a working board on www.arpia.be/droides/, only a test so far. The board is in French, but I’m looking for feedback on the general design, which shouldn’t require a great deal of linguistic skills. There’s a test user, “Test”, with the password set as “testpass”.
Anything that desperately needs changing? Suggestions? …?
There are two working themes, and you can switch between them in the footer (“Droïdes – Droïdes2″). Just click, and a whole new layout appears.

Edit: updated.

Having fun with maps

Peter Craddock — Wed, 15 Apr 2009 12:33:55 +0000

The subject of my “Mémoire”, the 60-page “Master Thesis” I have to write for university, is linked to European law, and I therefore use the europa.eu portal a lot (read: the EU institution websites and EUR-Lex were by far the websites I visited the most these past weeks).

The problem is, they all use text to get users to select their language. If it were a bilingual website, it would be easy. But there are 23 official languages in the EU, and so it takes time to figure out which string of text is “yours”.
The worst front page, in my opinion, is the Council’s homepage, which I find impossible to use under five seconds.

I therefore decided to try (during a small break) my hand at another system: maps.

I may be crazy, but I’ve taken a liking to webdesign and coding, and I’m starting to brush up my Photoshop skills in the hopes of coming up with fresh designs (for my personal website, as I don’t go around offering my services to others).

So… I started playing around with a bunch of maps pulled from the web, and put my CSS and HTML knowledge to the test.
The result is the following:
www.arpia.be/europa/
www.arpia.be/europa/europa2.html

Opinions?

I like it a whole lot more than the version they have over at the Consilium website, so I contacted the webmaster to suggest taking a look. Who knows, someone over there might read the e-mail and like the result!

Edit:
Well, I got an answer:

Nevertheless, having in mind the linguistic divesity within the European Union, I have a strong preference for a list of languages.

Too bad!

Speeding things up

Peter Craddock — Fri, 05 Dec 2008 16:47:34 +0000

I decided to take a look at possible optimisations for this website, in order to make it load faster, and so on. I’d already done a bunch of this some time ago, but I rediscovered the Firebug plug-in for Firefox, and in particular its YSlow extension.

YSlow is a set of guidelines that Yahoo! published a while ago to help web-designers in their quest for the optimal code, and WordPress hasn’t ever been very YSlow-friendly.

So, what to do to clean things up?

The first step involved trying to see what I could change on my own (CSS & HTML validation, compressing CSS and Javascript files, removing unnecessary code, downloading & configuring the “Super Cache” plug-in, …). Fortunately for me, I’d already done that kind of stuff. So now I could sit back and rely on what others had found out!

After a few searches of the web, I stumbled upon this post, which happens to contain most of the information I needed to get this done.
Steps 2 to 4 were by far the most valuable to me, because I’d found similar results, but none that were this complete.

Next, I decided that the “WP-Polls” plug-in needed some work. I only downloaded and used that plug-in for a post concerning Google’s then-new favicon.
[For some reason, though, it seemed no longer to work (perhaps because of the latest version of WordPress, no idea) - this, however, has no bearing on the steps I shall now mention.]

See, many WordPress plug-ins that add features to posts are only used within posts, and sometimes, you really don’t need them on many posts. The solution was simple: change a few lines of code to make the plug-in only be active for these posts, i.e. make sure that the extra CSS/Javascript/… files aren’t called up for all the other posts & pages.

If you’re somewhat comfortable with code, here are a few steps you could follow:
- edit the main PHP file of the plug-in to add an action to “wp_extra” instead of “wp_head” (do a search for “wp_head” for that)
- edit the “wp-content/includes/general-template.php” file to add the following:

function wp_extra() {
do_action('wp_extra');
}

- add the following to the template’s “footer.php” file (with “postnumber” being the relevant post’s ID):

< ? php if (is_single('postnumber')) { ?>
< ? php wp_extra(); ?>
< ? php } ?>

(for some reason, I couldn’t post this as “< ? p h p" without the spaces, but just remove those two extra spaces per line)
If you want to do that for several posts, just change the "is_single('postnumber')" into "is_single(array('postnumber1', 'postnumber2', 'postnumber3'))" (and so on).

Theoretically, this should work. At least, it worked for me.

Feels snappier!