Web Design/Development

Originally Posted by S_K

Chances are almost everyone here will pwn me at web design, but my only excuses are I'm a student and I'm learning the graphics side more rather then things like coding entire databases,(not to mention spending over half the time writing how I build things as evidence rather then actually building them... ) I appreciate handcoding sites is important, but coding every last bit by hand these days is just madness imo.

clickage

If the intro pisses you off there's a skip button in the bottom right corner. The design's getting another rehash for obvious reasons hence the lack of updates, but it would be nice to know how clueless I am compared to the GFFers I guess ^^;

*waits for various people to say Flash = fail*

You know it already. Flash = fail. I don't want to be harsh or anything, and please remember it's just a point of view.

First of all, intros are way stupid. (most of the time) You enter a website to SEARCH INFORMATION, not to see a damn 20 second movie made with flash. Then, perhaps I'm way too much into this web2.0 and semantic content, but flash movies really shouldn't be used to build entire websites. Actually, flash shouldn't be used at websites at all. The only reason I find for using flash to create your site is to make it more "dynamic", but then again, it depends on your definition of dynamic. If by dynamic you mean stupid sounds (that distort the music I'm listening to), shinny effects when switching pages and lots of stuff moving from time to time all around (that most of the times are quite disturbing), then go ahead. If you are not doing all what stated before, then you don't need to use flash at all, it can be done with (X)HTML. Heck, even some stuff that you would think only possible with flash can be done with (X)HTML/Javascript/CSS. Flash sites also can rank low at googlerank and stuff like that, because the spider can't read the movie, it only reads HTML tags and content; they usually take longer to load than normal HTML pages; they are NOT accessible; you can't select text at flash sites, nor you can link directly to a specific section of a website, etc. etc. I just found Flash way lame at creating websites. Use it for presentations or funny movies/games like the ones found at Newgrounds; not for your website.

Again, it's only my opinion. Flash is just not for websites.

Oh, and please, if you'regoing to add a "skip" button, do so in the HTML. Making people load something they do not want to see only to skip it is just plain mean.

Most amazing jew boots

Was that flash video HUGE or was it a crappy connection? It took about two minutes to load :/ And even after the fact, once it was loaded, all of the site's content wasn't preloaded. Flash isn't for websites, anymore. Any no, Metal, you're not taking Web 2.0 too seriously. The logic behind it was created for a good reason: accessibility, truer dynamic content, and just less annoying web browsing. I'm not gonna lie here: A Flash video for a website is really annoying.

My suggestion: Stick with HTML, CSS, and JS.

This thing is sticky, and I don't like it. I don't appreciate it.

I understand your train of thought, unless you get a lot of meta tags in there google isn't going to know what the hell it is, not to mention most the flash websites can be like learning a whole new interface just looking through them.

I'm planning in the long run to keep a flash based portfolio for kind of 'bling' purposes drawing buissness types in, but also have something else in html probably more for entertaining more mainstream visitors, I also have a html CvS2 tribute website but I haven't tried hosting it since it uses pretty much the entire OST on a flash jukebox.

Is there any particular web broswer you guys recommend for testing design problems? I'm finding websites that work fine on PCs are pains in the ass on macs and vice versa even if I use the same broswer in both.

Lastly I have a more technical question with websites like newgrounds which have update logs on the frontpage, do they just update the html or is it referring to some kind of log entry database?

edit: Render I'm hoping it was a crappy connection because the main swf was just over a meg ^^;

How ya doing, buddy?

For debugging purposes, I ensure that the page renders correctly in firefox, and IE 6, at the absolute very least. Anything else, like safari, etc etc, I'll test when I get the opportunity, and fix as best I can, but there's only so much you can do to have compatibility everywhere.

I dunno about saying flash has no place on websites. Yeah I hate entirely flash driven websites, but for the occasional effect here and there, it works great. I have to say I think the flash intro that we put together for our site www.renaissanceconsulting.ca was done quite well, not much to it, loads damn fast, and yes I have a link to skip the intro inside the html. Maybe I just happened to actually use flash as it was intended, dunno. LOL

There's also the issue of dialup friendly issues. If your site takes too long to load, that still is a large audience you're either inconveniencing, or cutting out completely. A 1MB flash might not seem like a lot to you, but that can take 10 minutes or more on dialup, so keep that in mind.

Also something like newgrounds would have a database backend, so anything is possible at that point.

I was speaking idiomatically.

Originally Posted by Qube

I dunno about saying flash has no place on websites. Yeah I hate entirely flash driven websites, but for the occasional effect here and there, it works great. I have to say I think the flash intro that we put together for our site www.renaissanceconsulting.ca was done quite well, not much to it, loads damn fast, and yes I have a link to skip the intro inside the html. Maybe I just happened to actually use flash as it was intended, dunno. LOL

Odd really I thought that intro was barely worth the effort because you could practically make it in powerpoint but that's probably my love of animation talking there over web design logic, at the same time however it's far more in context then mine which was abstract to say the least ^^; I guess I tend to explore flashs limits more then I need to for web design, that and intro's can end up more like a showreel if you get carried away, I'll be sure to bare this info in mind on my next designs

As for more advanced html like that update log or data arranging are those features covered by xhtml

What kind of toxic man-thing is happening now?

I think Flash is great for Flash-driven sites that feature Flash games or Flash multimedia in general. Now, I'm not saying it should be over the top, but depending on where you utilize Flash, it can benefit.

A site with simple Flash effects works nicely and we're not talking about those annoying button rollovers that go DOOT DOOT DOOT every time you roll over them (MegaUpload for example has those).

Flash does have its place on websites (if you're showcasing videos, Flash files tend to be smaller and easier to view online, because of the preloader), but they are not a requirement to bring out really nice looking websites.

I made a very simple Flash project for my class. It's supposed to be a comic book shop, but I just made the layout and usability function. It does look pretty good in my eyes (without the bias ^_^).

I'm personally an XHTML, CSS and JavaScript user. It's what I like using best. I love using Dreamweaver to do all of that in.

If there's one thing I can't stand, it's Framesets. I've used IFrames before, which are probably the only "frames" I'll ever use if at all. But, those complete framesets just seem to get in the way. I want easy and smooth browsing on sites, not cluttered junk or cluttered looks with cluttered junk. It was fun at first when I was experimenting with HTML, but not so much anymore. That's just me though.

Anyway, screenshots of all my "practice" websites are here.

FELIPE NO

Well, I have to say, yeah I could've made that in powerpoint, but you can't really put a powerpoint on the web that easily. <_<

Also yeah, I think frames are utterly useless, I have yet to find a home for them. More likely to break the site then anything else.

What, you don't want my bikini-clad body?

K, I got a problem, and I am just curious if anyone could help me.

I am redoing a website (www.rrdfl.ca) and I have a problem between IE and Firefox. If you look to the right, there is a dark blue banner, in IE, the space between the banner and the images underneath is bigger than the one in Firefox. Firefox is displaying the code correctly, IE is not...

Any idea?

Jam it back in, in the dark.

Have you tried trimming down both the "schedule" blue bar and the dark blue bar so that they match on both browsers? I would feel that it would be a trial and error thing where you have to tweak the heights of the images, not the height attribute.

Maybe another alternative would be to resize the original dark blue image (if you have it saved) so that it's a bit lengthier than the one that you're using on the site and then to cut an inch of the bottom and putting that in the background, so that it shows up underneath where the image cuts off in IE and just make sure they look properly connected? That way when you're looking at it from Firefox, you can't see the background image, because the main dark blue image is covering it due to its correct rendering of the code, while in IE, you can see the background image and it gives off the illusion that there's nothing wrong with the dark blue image. I don't know. Something like that I guess.

I'm sure someone else has a far easier way of doing it though.

Most amazing jew boots

Flash works on websites, but only in extremely rare cases where the person has a very clear idea of what they want and how to accomplish it. Mainly, only professional websites and portfolios really have decent web designs using Flash. And I'm not talking intros, the whole site has to be made with it. I'll post examples later.

This thing is sticky, and I don't like it. I don't appreciate it.

Erisu, the CSS works in firefox, what you're suggesting is way more work than is required to make that work. The CSS hacks that are on the web for this type of issue are far cleaner and easier to implement, and are a lot more kosher I would think. I know some of the issues I came across like that involved vertical align issues, or just a matter of floating elements, and actually I had issues where formatting the code nicely didn't work, I had to butt the elements together in the html for IE to get it to be seen right
aka:

<span>this</span><span>that</span>

instead of

<span>this</span>
<span>that</span>

Believe me I was pissed off when that fixed things for me, but grateful that it did fix things.

So basically, no image editing should be needed, it's all in the css.

By the way, if you ever need IE to see a css code bit that you don't want firefox to see, put an underscore in front of it.

background-color: #000000;
_background-color: #FFFFFF;

If you put that bit of code into the body element, it would render as black in firefox, and white in IE. Kinda freaky how that works, but it's saved my ass a few times.

I am a dolphin, do you want me on your body?

Well, I played around with width and height and it just made things worse....

I was speaking idiomatically.

Originally Posted by Qube

<span>this</span><span>that</span>

instead of

<span>this</span>
<span>that</span>

Believe me I was pissed off when that fixed things for me, but grateful that it did fix things.

As a rule, I only use block-level syntax for my page elements. For instance, all text gets wrapped in <p> tags. It's a good idea since it doesn't let the browser decide where to put stuff on the page; the CSS code tells it exactly where to go.

What kind of toxic man-thing is happening now?

IE is a pain in general though. That's why I hate it. If this were inside of a table, it would've been trial and error. Since it's straight CSS, I don't know. See if you can find some CSS hacks like Qube said. I've only created a blog with pure CSS and graphic-wise, I've put the top header image together instead of slicing it into two or more pieces.

FELIPE NO

That intro Qube posted could've been done entirely using DHTML; when people don't exploit Flash to it's maximum potential it's no wonder it has a bad reputation.

I've been considering learning Flash, unless someone can tell me how I could convert my website (posted earlier) from using tables and javascript to pure CSS. The frames are just a hack I used recently to save me having to learn the Firefox DOM (I was in a hurry >_<). I get pissed off when Dreamweaver tells me all my image rollovers and such are no longer allowed, or that I MUST have alt-text on EVERY image ;_;.

Most amazing jew boots

Alt text on images is required for standards compliance

Jam it back in, in the dark.

Just go alt="" for images that are supposed to be in the header or footer sections. Dreamweaver won't bother you then. I have a question for people here though. Do a lot of you use JavaScript for rollovers or CSS? I find CSS much easier and better.

There's nowhere I can't reach.

Are you talking about the background offset trick? I did it in this page, and it was a huge pain in the ass. Note that the <span> wrapping is a deprecated workaround. I've had it with browser-specific css hacking though, so it's Javascript from now on.

How ya doing, buddy?

Are you saying <span> is deprecated or just "out of style"? I find the <span> tag quite useful, despite what others say. I mean if it works, the design looks cool and it validates, right on. I used to use JavaScript for inline image rollovers, but I don't know. It's preference and whichever you find easier I guess. I just find that doing it through CSS avoids the hassle of using preloaders at the top.

I am a dolphin, do you want me on your body?

I use CSS for the hover effects on my buttons. Take metal.ize for example. The hover effects on the top blue menu and on the category buttons is all CSS. No span needed, just a simple list (which helps for accessibility and complies with the semantic code rule).

I tend to stay away from Javascript as much as I can. Using javascript for the design itself is a no. It's a nice plus, though; with all this AJAX scripts and effects, but that's it: a plus. I may be crazy, but a website that NEEDS javascript to WORK is just wrong.

Websites should be able to work with just HTML. No need of Javascript, Flash... not even CSS. That's what I aim for when creating a website (of course, when I make a website for another person, even if I hate what they ask for, I have to do it... give the customer what they want [no, customer's are not always right ¬¬]).

Most amazing jew boots

Originally Posted by Erisu Kimu

Are you saying <span> is deprecated or just "out of style"? I find the <span> tag quite useful, despite what others say. I mean if it works, the design looks cool and it validates, right on. I used to use JavaScript for inline image rollovers, but I don't know. It's preference and whichever you find easier I guess. I just find that doing it through CSS avoids the hassle of using preloaders at the top.

What I meant was that there's already new method(s) published which do away with the need for the <span> tags. They're not supposed to be there anyway, since from a structural standpoint they're meaningless when used in such a manner.

And Javascript is fine if you follow good coding principles. Always specify the href for an alternative page, for instance, if the browser does not follow an onlick event.

What kind of toxic man-thing is happening now?

The problem with CSS-only websites is that (as far as I have seen these last few years) they all follow the same page format. Columns. Just a bunch of bloody columns; it seems really boring to me. Can anyone point me to a site built with CSS and no javascript that has an unusual layout? Can CSS do everything that javascript can? That's a genuine question, since I haven't done anything web-related for a long time and would love to know if I can show/hide/reposition layers or do linked rollovers with CSS, and what mouse events are supported by it.

Most amazing jew boots

http://www.csszengarden.com/

^ Pure sex.

Also, blah, <span> is not a deprecated element, wtf?

What, you don't want my bikini-clad body?

I kind of do think that pure CSS-based sites are limited in everything else besides visual. CSS is after all for style and design of the layout. I think the whole purpose of using pure CSS is to get away from table layouts. Why? I have no clue. I think with tables it's way easier to structure things in proportion. With CSS, it just feels like one big pain in the ass, because you have to pretend to think that there are tables, but really you're using divs and margins. In the end, I would say that it's obviously geared towards the graphic designers. CSS has its place like all the other web elements, but they're only effective if used for the right things.

Jam it back in, in the dark.

Lets split this...

Originally Posted by Ulysses

The problem with CSS-only websites is that (as far as I have seen these last few years) they all follow the same page format. Columns. Just a bunch of bloody columns; it seems really boring to me.

That's just a tendency. CSS can do whatever you want, not only columns. Columns only happen to be the most accessible and easy format to do.

Originally Posted by Ulysses

Can anyone point me to a site built with CSS and no javascript that has an unusual layout?

After class, I'll try to find some. Look at the CSS-Zen Garden to begin.

Originally Posted by Ulysses

Can CSS do everything that javascript can?

Of course not. Javascript is a programming language. CSS is not. You can, though, create some of the most common uses of javascript with plain CSS/(X)HTML.

Originally Posted by Ulysses

That's a genuine question, since I haven't done anything web-related for a long time and would love to know if I can show/hide/reposition layers or do linked rollovers with CSS, and what mouse events are supported by it.

I have something like what you ask for. Here, take a look at this page. You see the menu labeled "planteles" on your right? Use your mouse to hover through the items there. A rollover effect! And it's CSS!

There's nowhere I can't reach.