Page 1 of 2
Forum and Web Design
Posted: Fri Feb 09, 2007 11:32 am
by Vogateer
I'm not a proper designer, which I'm sure is obvious, but I did try my hand at styling the forum for my friends and me. Of course, Internet Explorer breaks it horribly, and it still needs a lot of cleanup, but I thought I'd get some opinions.
I asked them what they wanted, and only one person said anything, and he said he preferred dark themes, so that was pretty much all I had to work with. I'm an awful artist, but tried to make a header as an excuse to fiddle with Inkscape, since it's such a great program.
Changing the layout was—and still is—a time-consuming, horrible experience. Starting with the default template files, there were so many tables within tables that it made my head spin. I actually had to print out the code and take out some colored markers to figure out what everything was doing. Firefox+Web Developer+Firebug was invaluable in helping me see those blasted tables as well. The table would always start with the header, move on through the body, and continue with the footer. Table-based design really needs to be abolished. I'm hoping CSS3 includes the Advanced Layout Module, which should eliminate the desire to use tables altogether. I got rid of a lot of the tables, including the header, but still have to keep them around to get the rows to alternate colors.
Anyhow, I've always felt that phpBB had a cluttered look about it, so I decided I'd try to make it simpler, and try to give it a cleaner look. Anyone think I'm on the right track, here? I'll probably have to rearrange a lot of code in the template files to clean things up, since I can't keep the order of that sidebar clean with part of the "div" in one template file and the rest of the "div" in another. Once I do that, I'd like to make a lighter template with something to balance out that blank space at the top right.
I'll try not to get too long-winded. Before anyone asks, I don't know why people called us "the crew" back in high school, but I'm too lazy to come up with anything better. Here's a thumbnail:

Posted: Fri Feb 09, 2007 1:49 pm
by allix
that looks pretty clean, have you looked at
http://www.punbb.org/ , its a pretty minimal forum
Posted: Fri Feb 09, 2007 1:51 pm
by CptnObvious999
That looks awesome! It looks like you definately have the right idea, I will have to use inkscape more now.

Posted: Fri Feb 09, 2007 1:59 pm
by Vogateer
Thanks for the comment, Allix. I saw that there had been a few views and no replies, and always wonder if people had been raised as I had: "If you've nothing good to say, don't say anything at all."
I think I choose phpBB because before I started hosting it, a friend of a friend had been hosting it for us on vBulletin or something like that, and phpBB was pretty popular, had a converter for vBulletin databases, and was the first one I tested. While I was testing, the friend of a friend's server cut us off on disk space or changed something, but we had nothing for over a week. I already had phpBB working, and I wanted something up quickly, so I signed up for dyndns service and opened it up for the group.
You're right, punBB looks nice and clean, and I've seen some nice designs using punBB, too. I probably would choose it today if I hadn't already set up our current forum to use phpBB. I may switch over, but phpBB is supposed to release their big 3.0 release soon, so that may help me decide to stay or switch.
Posted: Fri Feb 09, 2007 4:18 pm
by riddlebox
I was just wondering if anyone could tell me what the name of the php calendar that tllts uses? I would like to put one up for my company.
Thanks
Posted: Fri Feb 09, 2007 4:37 pm
by allix
Vogateer wrote:Thanks for the comment, Allix. I saw that there had been a few views and no replies, and always wonder if people had been raised as I had: "If you've nothing good to say, don't say anything at all."
I tend to write something than nothing at all, its out of habit. Don't look at the opensuse thread, ive not said anything there
As i use various threads day-to-day, i can spot a ugly one without thinking twice.
Vogateer wrote:
I think I choose phpBB because before I started hosting it, a friend of a friend had been hosting it for us on vBulletin or something like that, and phpBB was pretty popular, had a converter for vBulletin databases, and was the first one I tested. While I was testing, the friend of a friend's server cut us off on disk space or changed something, but we had nothing for over a week. I already had phpBB working, and I wanted something up quickly, so I signed up for dyndns service and opened it up for the group.
Fair enough, phpBB was notorious known for security holes, its improved greatly on that side of things for a while, so you should not have any problems, i can see why you chose it, lots of people know it , how it works , so its good to go for something with those properties. vBulletin is good bb software, but not free in any sense plus its cluttered IMO. Security wise it was better than phpBB, now there both the same ..
Posted: Fri Feb 09, 2007 4:53 pm
by Vogateer
CptnObvious999 wrote:That looks awesome! It looks like you definately have the right idea, I will have to use inkscape more now.

Thanks, man! After working on that theme during my spare time for a few weeks (blasted spaghetti-coded table layout...) it feels really good to hear that someone else thinks it ain't half bad.
I love Inkscape, though it takes me ages to do something because I don't really have the drawing talent that some of my friends do; so even that simple graphic looked pretty rough at first. But really, a rounded corner rectangle, a gradient here and there, and you have a relatively simple 3D effect that doesn't look too gaudy or distract from the content.
I'm still focused on lessening the cluttered feeling that phpBB can have. If you were to view the rest of the forum, I think you'd agree that the actual posts still look cluttered, particularly in comparison to the rest of the theme. Of course, seeing all the administrator buttons doesn't help, either.
I feel that moving a lot of those links to the sidebar really helps matters tremendously, even if it makes trying to figure out where to put the markup really difficult.

If I get that markup placement sorted out, I feel that I could make other styles that at the very least keep that part of the layout, and hopefully improve the rest, make variations for people who don't like dark themes, and have a decent base to work from.
Here's a question, though. Would any of you guys bother trying to make this work in Internet Explorer? Honestly, the lack of transparent png support and constant CSS breakage is killing me. The pages I've styled look decent in Firefox, Safari, Konqueror, Opera. Barely had to change any code to get those working. IE? I imagine it will quadruple the time it takes me to make the theme...

The nice thing about a forum is that people can pick their own style, otherwise I'd feel obligated to make it work for my poor Internet Explorer using amigos. As it is now, I'm thinking about telling them to either load up Firefox or Opera or stick with another theme...
Posted: Fri Feb 09, 2007 8:27 pm
by Linc
riddlebox wrote:I was just wondering if anyone could tell me what the name of the php calendar that tllts uses? I would like to put one up for my company.
Thanks
http://acalproj.sourceforge.net
Posted: Fri Feb 09, 2007 11:09 pm
by CptnObvious999
Vogateer wrote:Here's a question, though. Would any of you guys bother trying to make this work in Internet Explorer? Honestly, the lack of transparent png support and constant CSS breakage is killing me. The pages I've styled look decent in Firefox, Safari, Konqueror, Opera. Barely had to change any code to get those working. IE? I imagine it will quadruple the time it takes me to make the theme...

The nice thing about a forum is that people can pick their own style, otherwise I'd feel obligated to make it work for my poor Internet Explorer using amigos. As it is now, I'm thinking about telling them to either load up Firefox or Opera or stick with another theme...
You are lucky to have this freedom whenever I work on a website for my internship it has to work with IE.

I honestly wouldn't bother and just tell them to use another browser. I am still kinda shocked IE still doesn't support transparent PNGs, firefox supported it from basically the begining.....bastards. Always slowing down the evolution of the internet, if it weren't for them we would all be going to Web 5.0 instead of 2.0.

Posted: Sat Feb 10, 2007 1:39 am
by Vogateer
Isn't that the truth? It's nice to sort of work at your leisure, and not be forced to support a broken browser. I'm trying to use IE7 in linux now, and as far as I can tell, my transparent pngs are working. About time, Microsoft! It still fails to center the page as it should, but there's actual progress being made.
Looking back at the posts, it sounds like I was just fishing for compliments. Maybe I was doing that, too; but I also wanted to guage the forum's interest in my attempt at phpBB design, and see if it might eventually be worth trying to design a style for this forum, since, after all, people would be able to keep the one they currently have and I wouldn't be forcing anyone into it. If there's not much interest, though, I'm rather use my time on something else.
Posted: Sat Feb 10, 2007 6:03 am
by allix
Vogateer wrote:
Here's a question, though. Would any of you guys bother trying to make this work in Internet Explorer?
Since other browsers that use standards are available for windows , i would not spend too much time.
Posted: Sat Feb 10, 2007 8:59 am
by mowestusa
Vogateer wrote:Looking back at the posts, it sounds like I was just fishing for compliments. Maybe I was doing that, too; but I also wanted to guage the forum's interest in my attempt at phpBB design, and see if it might eventually be worth trying to design a style for this forum, since, after all, people would be able to keep the one they currently have and I wouldn't be forcing anyone into it. If there's not much interest, though, I'm rather use my time on something else.
I think that would be a great idea, but here is a real challenge. For the TLLTS forum design a style that we can use that looks good in lynx and firefox
Now that would be cool. The more I surf the internet the more I discover how sites don't consider the needs of those using screen readers or those who are limited to a text only experience. Although I am not blind, I know blind people who would benefit from a text only experience and it would work better with their screen readers. I also delve into the dark side of using Linux in CLI only, and websurfing with Lynx can be enjoyable if you find sites that consider the all text experience.
A forum is all text content really, so wouldn't it make sense to design a style that caters to text only browsers (no javascript, no flash, and a super simplified table design).
One site that does an interesting job is the GeeXboX project. They have a little link that uses a cookie to drop their site into text only. I have no idea how they make that work, but it is cool. I also find this amazing that a project whose primary goal is to create a multimedia jukebox would consider such a function for their website. Hats off to their webdesigner.
I also like the job you did on "The Crew" site. My HTML skills are a little too rusty. I'm mostly HTML 3.2 still, very basic CSS, and no PHP. I'm hoping to change that by the end of this year. One of my hobby goals.
Posted: Sat Feb 10, 2007 10:09 am
by Vogateer
I just looked at our forum using lynx and links, and it's more cluttered again, but it's not too bad. I can get around well enough, anyhow.
My inspiration to even attempt such a design came from a brilliantly designed book written by Andy Clarke (
http://stuffandnonsense.co.uk/), who is one of the staunch
web standards supporters.
Molly Holzschlag, Group Lead for the Web Standards Project (WaSP) wrote the foreword and edited the book, while Dave Shea of CSS Zen Garden wrote the introduction, and Jeffrey Zeldman was listed as well.
The book I'm reading champions the use of proper semantic markup of XHTML and the use of CSS to acheive designs that will work reasonably well across all browsers and media, including screen readers and cell phones. Trying to get rid of unnecessary
divs for clean code, and trying make sure that without a speck of CSS, the page still makes perfectly good sense.
I feel like I'm getting a decent handle on XHTML, and CSS is pretty amazing, too, even if I reallly have to work to learn how to use selectors and all that fun stuff. I've certainly done nothing special or fancy, and anyone here could do it given some spare time (probably a problem for most people here), a few links on the w3 website, and some time to play with Inkscape.
I do have a problem trying to figure out how to markup the actual topics, and deciding whether it's really tabular data or not. Without tables, I'm not sure if phpBB will change the colors on alternating rows, which in my striving for simplicity, I've used as the main way to distinguish where a post starts and ends. Would an <ol> of each post consisting of <cite>, <blockquote>, and <p> be better? That might offer a better semantic markup than a table of author data and post data.
Oh yeah, some other people here have styled phpBB before, maybe someone here knows. What file do I go to so I can change that little quick screen you get after you submit your post and before you are redirected to it? Having a rough time finding that...
Posted: Sat Feb 10, 2007 11:13 am
by tom_mc
I love the look! It is clean and easy to read. Good job.
Now as far as the making it work with Internet Exploder, I have to vote yes, it needs to work with IE. They still own 90% of the market share (unfortunately). That is a very large audience that will see your creation as broke.
just my 2 cents

tom_mc
Posted: Sat Feb 10, 2007 11:22 am
by CptnObvious999
tom_mc wrote:I love the look! It is clean and easy to read. Good job.
Now as far as the making it work with Internet Exploder, I have to vote yes, it needs to work with IE. They still own 90% of the market share (unfortunately). That is a very large audience that will see your creation as broke.
just my 2 cents

tom_mc
Working in IE is one thing, getting it to display correctly is another. Like this forum, the transparent logo doesn't look to bad with the Cobalt 2.0 theme but in IE it becomes white and it looks much worse but everything is functional hence if you are somehow forced to use IE there is no problems. Although this a Linux forum so maybe we are the only exception.

I'd say it depends on your audience, if they are all techies I say don't bother with IE support.