Website redesign - Technologies used

[saint]

This thread will discuss technologies used for the new web site. I have two goals:

1. A balance between speed and features
2. Compatibility between browsers (sticking to standards)

With the ever growing percentage of users with broadband, I no longer feel as obligated to design for 56k. I still like using features like small thumbnails for images with larger images viewed by clicking, but I would like to consider a more graphically oriented site where it makes sense and is helpful.  The somewhat work in progress "eye candy" page found at http://www.arcadecontrols.com/Sections/EyeCandy/eyecandy_thumbs.shtml as compared to the less graphically intense version found at http://www.arcadecontrols.com/Sections/EyeCandy/eyecandy.shtml is a good example of what I mean. I do not want to be maintaining multiple version of a page though, so unless it's somewhat automated (i.e. we design one page, and a user chooses via a cookie or some such if they get graphics or not which is all handled automatically) then I prefer the graphically oriented page.

I do not want to use any technogies/techniques that are proprietary.  No Internet Explorer specific designs for instance. I also would prefer not to use any client-side technologies, such as Java/Javascript. In my experience support is different between browsers and it tends to give unexpected results at times, including crashing. Not to mention, many people prefer to have java support turned off for security reasons. I would also prefer not to rely on plug-ins on the user's side, meaning no technologies like Macromedia Flash (although a Flash splash screen isn't out of the question,).

Technologies I would like to see considered (feel free to suggest others):

PHP
MySQL
CSS
XHTML
Perl?
Python?

I do not want to use:

ASP
Macromedia Flash (except as mentioned above)
Java
Javascript

----------

I'd like to use database backed pages where it makes sense. For instance, the downloads page would be a good candidate for a databased backed page. Changes could be made simply by editing the database (either via editing the databased directly or even better, a companion "edit" page). Fields would include "category", "home page", name", "description", etc....  The news page, examples page, and donations page are currently MySQL/PHP backed pages.

[SirPoonga]

I wouldn't rule javascript out completely, though for this website it probably isn't needed.  For the controls.dat is is very much needed.  You don't have too many forms to fill out so it probably won't effect you anyway.  Javascript is the only way to verify a form before the request is sent to the server.  Also it is the only way to make a popup lookup list when filling out a form.

If you are going to be using php then perl isn't of much use.  Unless you grabbed a cgi script from somewhere and there wasn't a php equivilant.

Your 56k comment is rather funny these days.  You actually have a large bandwidth design.  xHTML and CSS will fix that if done correctly  Since I moved controls.dat to that my bandwidth and server space has greatly decreased.

As for being database driven, good idea.  Your downloads page is perfect for this like you said.  Check out http://fe.donkeyfly.com/controls/controls_dat.php
All the info about the files is stored in a database like file location, controls.dat version number, and date generated.  That page is basically a dump of a database table to an xHTML table using CSS to control the look and feel.

You can do something simular for your artwork page too.  you'd have a database table that contains artwork type (bezel, cd cover, etc), file location of preview pic, file location for download, file size, home page.  In css you'd make classes for each type like #ARTWORK_BEZEL, #ARTWORK_CD_COVER, etc.. if you wanted to control the look and feel of each section.  Otherwise if you wanted them to all look the same just make a #ARTWORK container class in CSS.  It would be simulare to this controls.dat page
http://fe.donkeyfly.com/controls/gamesbycontrol.php
Though that page isn't CSSed yet.  It's still using a table to do the look and feel.  But I can make it look like that (and better) with CSS.  The data is coming from the database though.

Now, I have found out IE and Mozilla handle CSS differently.  It can take some patience to get something that looks simular on both browsers. Again, http://fe.donkeyfly.com/controls/controls.php as an example.  

So, basically what I have found is just betweem xHTML output and CSS I have reduce my server space and bandwidth useage almost by 30-40 percent.

As for the graphically orientated version of a page vs not graphically orientated it would be easy to dump a variable to the cookie.  If the variable is set to not show the pics.  Of course this would all be done in php.

Now, most of your pages are usually a menu at top that links to the data below.  That's great.  This can be database driven, sortof.  This is actually one of the things XML is suppose to be able to do but I haven't found a cross platform way of doing this clientside OR a fast php xml parser.  Though the new PHP that came out recently is suppose to have a fast one.  For now I would modularize it.  Meaning this.  Let's use this page as an example
http://www.arcadecontrols.com/arcade_cabinets.shtml
I;d put all the information of the Finding Cabinets in a findingcabinets.php file.  Same for Building Cabinet - buildingcabinets.php.  This way you can edit just individual sections easily.  In your main php file for that page you'd just do an inlclude('findingcabinets.php'); where you would want to output the information.

Well, I have more to talk about but not right now.

Oh yeah, and ditch frames.  They are horible.  There are only a few instances where they are good.  The major drawback of frames is bookmarking a site.

[Jakobud]

Okay I suggest building the site using XHTML, CSS, PHP and mySql.  That is the winning combination.  I would also not use Java or Javascript or Flash.  No Flash intro page please.  I would end up skipping it everytime.  People do not come to this website to be entertained.  They come here to learn and build and have have fun after some work.  Not to sit and stare at the pretty flash intro on the page.

I don't know how much you know about XHTML and CSS and PHP, but you should talk to KC over at Mameworld.  He is a freakin pro at this stuff and he hails CSS all the time.  He has given me great tips and some great resource links for learning a lot of it.  CSS is awesome awesome stuff.  Don't do any tables or frames.  CSS makes it so you don't have to.

I would suggest not using very many images if any on the layout design.  You can do some many cool things with CSS you won't need images to make it look good and clean.  The only place that images need to exist is in the different subsections.  There needs to images of joysticks, buttons, trackballs, etc.  It doesn't do much good to talk about some great joystick when you don't really know what it even looks like.  That's important! Oh this reminds me...

                  /
         --->X   /
         .----:/      :--------.
         :                     :
         :    CIRCUIT OPEN     :
         :                     :
         `---------------------'

          <--- electricity <---

No offense to whoever made this... but come on.  LAME.  I feel like I am surfin the local BBS on my 9600 baud modem back in 1993 when I look at this.  I think we have some people around here who are skilled enough to draw a freakin circuit diagram in a real image.  I think we can spare the 1k of bandwidth for it.  Once again, no offense to whoever did it

Also, regarding what you were saying about the 'graphical eye candy page' vs. no graphical, I would also lean toward the graphical.  It's not THAT much bandwidth nowadays.  And no graphical pages are just difficult to find what you want.  Like if you had a page that listed every single joystick and every detail about them and it was all just text... ugh it would be an eye sore finding what you want.  The very LEAST you could do was have an image or two of each joystick in its respective section so its easier to find exactly what you want.

Overall saint, I think you are on the right track regarding the technology and mindset you are shooting for here!

[AmericanDemon]

I think the tech discussed here is what I would personally use.  I can not agree more with using more graphical designs.

[Darkstalker]

I would also prefer not to rely on plug-ins on the user's side, meaning no technologies like Macromedia Flash (although a Flash splash screen isn't out of the question,).

Skip the splash screen, since that's what most frequent users will do anyways.  No sense wasting time on something people don't look at.

Technologies I would like to see considered (feel free to suggest others):

PHP
MySQL
CSS
XHTML
Perl?
Python?

PHP and MySQL is a good path, and with the exception of a CSS that's probably all you'll need.  I can tell you right now though, doing tables through CSS and having them look right in both IE and Mozilla is a PITA.  IE likes to put spaces in where they don't belong.  I don't see the website needing XHTML if you are using PHP since you can use Smarty and get your templating that way.  Perl is fantasic if you plan on having server side ASCII text management features, but I don't see that.  Skip Python, again there's not much point behind it for this site.

I do not want to use:

ASP
Macromedia Flash (except as mentioned above)
Java
Javascript

I like Flash, but it is really designed for websites that don't have a lot of content and need to make up for that graphically.  ASP is fine if you know it, it is server side just like PHP, so there's no real reason to avoid it unless you are steering away from Microsoft (Which I wouldn't blame anyone for).  Java is too slow IMO unless you need a specific app.  JavaScript however is different, and can be pretty usefull.  It works well for form validation as an example.  Instead of submitting the content to a CGI script or PHP page and having the server do all the crunching, you let the client do all the work on their end like SirPoonga said.
 
I personally use PHP/MySQL/CSS on my sites and wouldn't dream of anything else.  The nice thing about PHP is the fact that you can tie in other sources.  For example, my homepage news items come straight out of the phpBB forums I use.  If you look at scl.warlorcentral.com  you'll see what I'm talking about.  That's my DAoC related website, but you can see how we use the combination of the forum import and XML parsing (Which sucks with PHP 4) to create the news page.

[Jakobud]

PHP and MySQL is a good path, and with the exception of a CSS that's probably all you'll need.  I can tell you right now though, doing tables through CSS and having them look right in both IE and Mozilla is a PITA.

Uh... you know that the entire point of CSS is so that you dont' have to use tables at all right?  Tables slow down page rendering more than most html code.  CSS makes it so you can build a site using CSS's layout styling and NOT have any tables at all.....

[Darkstalker]

"Uh... you know that the entire point of CSS is so that you dont' have to use tables at all right?  Tables slow down page rendering more than most html code.  CSS makes it so you can build a site using CSS's layout styling and NOT have any tables at all..... "

Yea, but it is a nice way of explaining it, even though it isn't technically accurate.  

Besides, with machines being as fast as they are now, comparing CSS to HTML tables for rendering time is like arguing about the 2D rendering speed between the ATI x800 Pro and GeForceFX 6800.  It just doesn't matter anymore.  That, and it will take longer to download the page graphics than it will to render frames.  After that, if you use PHP and Smarty templates, it's all cached.

[AmericanDemon]

Ok so I do have something to say about the splash screen.

I love to see a Kickass Flash intro to a site that I have never been to before.  I compels me to look deeper.  I personally would love to see a nice lengthy splash flash movie, even if we are all going to skip it after one visit.  

Kinda like a sweet commercial for the site.  You know what I mean?

[Jakobud]

Ok so I do have something to say about the splash screen.

I love to see a Kickass Flash intro to a site that I have never been to before.  I compels me to look deeper.  I personally would love to see a nice lengthy splash flash movie, even if we are all going to skip it after one visit.  

Kinda like a sweet commercial for the site.  You know what I mean?

I just don't think I can visualize some sort of 'REALLY COOL' kick*** flash intro about building arcade cabinets and joysticks and buttons that would really pump up anyone  I mean it's exciting and fun, but no one is gonna look at a 5 second flash intro flashing some joysticks and buttons on the screen and gonna get super excited all the sudden! lol

[AmericanDemon]

Well what if it showed classic cabinets with people playing them.  Then someone playing a console and then show them dreaming about owning one.  The music changes and then you see a flash of saw blades and parts then the music downtones again and you see a finished Cabinet, finish it off with the image fading and the BYOAC logo appearing.  Have it automatically link a person to the rest of the site.

[WakingJohn]

"Uh... you know that the entire point of CSS is so that you dont' have to use tables at all right?  Tables slow down page rendering more than most html code.  CSS makes it so you can build a site using CSS's layout styling and NOT have any tables at all..... "

Yea, but it is a nice way of explaining it, even though it isn't technically accurate.  

Besides, with machines being as fast as they are now, comparing CSS to HTML tables for rendering time is like arguing about the 2D rendering speed between the ATI x800 Pro and GeForceFX 6800.  It just doesn't matter anymore.  That, and it will take longer to download the page graphics than it will to render frames.  After that, if you use PHP and Smarty templates, it's all cached.

Another advantage with using tables in css is that it makes backwards compatibility alot nicer imho.   There are still lots of folks running older browsers whose css support is... well... lets just say it leaves things to be desired.

Ok so I do have something to say about the splash screen.

I love to see a Kickass Flash intro to a site that I have never been to before.  I compels me to look deeper.  I personally would love to see a nice lengthy splash flash movie, even if we are all going to skip it after one visit.

Kinda like a sweet commercial for the site.  You know what I mean?

Yeaaah, but  if they are already going to the site, aren't they wanting to look into it anyways?

Splash screens are horrible.  They are a burden on bandwidth, design, flow... Really everything.  They have their place on entertainment sites or maybe art/personal sites, but for a site designed to get people information we should worry instead about getting people information as fast and easily as possible.  This means as soon as they click the page the should be drawn to what they want.  The people we are targeting are likely already buildinng their cabinet or wanting to.  We don't need to lure them into our site - thats what our resources are for.  

But yes, css/php/mysql is definitely the route to go.  Also as mentioned in the other thread, maybe using these via an open source kit like mambo or something.

[rampy]

i'm a big fan of php/mysql

standards compliant xhtml/css that degrades nicely is a good goal to have

I'm a fan of some CMS's out there (like postnuke, but don't think that would be a good fit) or MAMBO which may be a better fit  ( planetjay has gone nuts on mambo-efying his sites saint for point of reference, or i've used it for sites at my work)  

I wonder for the purely FAQ part if it would be worth it to look at even a pay for knowledge base/ automated FAQ thingie...  soemthing that did the tree-ing and structuring nicely (or a good php/mysql open source one, but i never found one that met all my needs in the past)

rampy

[Crazy Cooter]

Whatever you decide, keep it simple.  Test is with the default IE settings set to high.  If it doesn't work, you'll start losing people.  I run with all the extra crap turned off.  If I get to a webpage and don't see anything, I move on.  I've always preferred php/mySQL.

"I feel like I am surfin the local BBS on my 9600 baud modem back in 1993 when I look at this."
I like that.  All this flash this, high bandwidth that, etc. etc.  I long for the good 'ol days when people had stuff to say rather than "show".  Unless it's a pic of a cab or something...

[Matt, GoC]

Please take into consideration people like me running a crappy 700MHz laptop with a crappy video chipset.  Flash is my worst enemy.  I think a simple layout with highly optimized images where needed would be best.  This would save saint bandwidth.  As far as features go, I'm all for a database-backed site.  Nothing like wading through a huge table of broken project links, when we could search for what we're looking for.  It's hard for me to remember what a cab is called on the examples page when I can remember what it had and search on that.  I also would like to see project hosting at a reasonable cost.  You could set up a template to use to set up the page for those who don't wanna spend all day designing a page.

[Xphile]

Whatever you decide, keep it simple.

[planetjay]

2. Compatibility between browsers (sticking to standards)

So we're gonna care how it looks in Safari?

With the ever growing percentage of users with broadband, I no longer feel as obligated to design for 56k.

Yeah, who doesn't have broadband? They can move.

I also would prefer not to use any client-side technologies, such as Java/Javascript.

I predict you WILL have JavaScript. It will creep in there. The message board is FULL OF IT! It'll always be there. Accept it. Use it spareingly.

I would also prefer not to rely on plug-ins on the user's side, meaning no technologies like Macromedia Flash (although a Flash splash screen isn't out of the question,).

Flash all you want. But use a Javascript to detect and bypass. I have it removed. Some stupid car companies have no website if you have no Flash. Idoits. No cars from them.

Technologies I would like to see considered (feel free to suggest others):

PHP