Snarkpit Forum Index » Art » Web site layouts
Web site layouts
1
23 next page »
Post Reply
Quote
 Re: Web site layouts
Posted by Naklajat on Wed Nov 9th at 11:30am 2005

My CS:S clan, [TGM], is going to get a website soon. I have taken it upon myself as the founder and least artistically retarded (that I know of) to design the layout. I fired up PS and looked up a tutorial... long story short, my third attempt is the only one I don't think is complete garbage. It's not quite done, but I'd like to know what you guys think I could improve on in it before I start going crazy and making it so uber-detailed that its crap. smiley

http://i3.photobucket.com/albums/y80/Naklajat/layout03.jpg



=o



Quote
 Re: Web site layouts
Posted by Crono on Wed Nov 9th at 11:51am 2005

Can someone explain this trend of having an overtly large banner at the top? Unless you plan on putting some navigation up there it'd be a good idea to make it smaller.

Personally, I think, navigation at the top or bottom (and since the bottom doesn't make much sense most times) is more intuitive and in general uses the space better than a left or right navigation. Just because it's intuitive to scroll up and down ... and not left to right, so, that potentially makes it so the navigation, which is suppose to be the visitors buddy, starts cutting into the content.

It's only when you get to fairly high resolutions (1600) that the content usually doesn't outweigh it as much, but most people don't run on 1600 <img src=" SRC="images/smiles/icon_smile.gif">

The colors are bland. Try more variations.
Usually, as a rule of thumb, you pick three or four main colors to stick with, make sure they blend together, but are at different points on the spectrum. One of which is background. Silver or Gray backgrounds are not too bad. Pretty easy on the eyes. But, you definitely need color variation (However, that could be done through links and text)

I would suggest, to finish making a static image of what a generic page will look like. Text and all.

It looks pretty though. Just not sure about how functional it can really be. Do you actually plan to use all that sidebar space? If not, find a better use for the area.


Blame it on Microsoft, God does.



Quote
 Re: Web site layouts
Posted by Naklajat on Wed Nov 9th at 12:43pm 2005

Exactly the kind of critique I was hoping for <img src=" SRC="images/smiles/icon_smile.gif">

I've been working on something much different in layout, taking your suggestions into consideration. I'll post again when I've got that done. Right now I mainly need practice and as much input as possible. Thanks



=o



Quote
 Re: Web site layouts
Posted by KoRnFlakes on Wed Nov 9th at 12:47pm 2005

Dont rely on images. The best sites are often 90% code



My Pit



Quote
 Re: Web site layouts
Posted by Crono on Wed Nov 9th at 1:36pm 2005

Yes, images are slow.

Add that to your check list.


Blame it on Microsoft, God does.



Quote
 Re: Web site layouts
Posted by Naklajat on Wed Nov 9th at 7:37pm 2005

The site isn't going to be very complex, just 6 pages and a phpBB forum. Home/news, roster, a 'join' page, our league stats, about/contact, and links. So far it looks like all of the images together will not break 60KB.

I'll get the style sheet done then post a pic of what this layout looks like.



=o



Quote
 Re: Web site layouts
Posted by Crono on Wed Nov 9th at 7:51pm 2005

Doing it as "code" is dynamic. It makes it very easy to change something visually. And, I imagine, there will be admin access, member access, and guest access. If you're not to reliant on images, they can all have different themes and stuff like that.

Not that I'm suggesting that exactly. But, Admins usually have different abilities, so it'd make sense for them to have differences in their interface.

Also, for my Software Engineering course we made an online library site and it consisted of maybe 8 pages. So, that has no influence on whether the site is complex or not.

SnarkPit appears to be less than ten pages or so. But it's all dynamic content so it seems like more.


Blame it on Microsoft, God does.



Quote
 Re: Web site layouts
Posted by Naklajat on Wed Nov 9th at 8:54pm 2005

The most I really know about making web sites dynamic is CSS. I don't know how to do the kind of stuff you're talking about, but I'd like to learn.
At the same time, I don't want to make this particular site more complicated than it has to be. Most of the content is going to be on the forum... now that I think of it I've seen several sites with the majority of their content on the forum end up with major headaches whenever something went wrong with the forum. There is no real deadline for this but I'd like to have the site functional in a week or two. So yeah, if you know of some good online resources I would appreciate it very much.

http://i3.photobucket.com/albums/y80/Naklajat/layout05_demo.jpg

Looking at it now it seems kind of bland. I think I'll try spicing the buttons up.

Edit:
No, its not the buttons... its the middle stuff. blah.



=o



Quote
 Re: Web site layouts
Posted by Crono on Wed Nov 9th at 9:36pm 2005

Oh yeah. One more thing:

DON'T CHANGE STYLES.

You pick one: you stick to it. Don't keep changing the navigation or page layout, that's annoying as hell. Also, most people get confused when their interface changes suddenly.

You'd use PHP and JavaScript and stuff like that to get dynamic content. CSS isn't dynamic ... at all. It's completley static.


Blame it on Microsoft, God does.



Quote
 Re: Web site layouts
Posted by Gollum on Thu Nov 10th at 9:58am 2005

I recommend against designing your layout in Photoshop, because it will encourage you to design in ways that cannot be coded effectively (at least, not by you). It's better to start with content and then organise your presentation via CSS. That way you are never extending your task beyond your ability!

Let me give you an example of how working in PS is bad for websites:

In your latest test, you have diagonal nav links. Why? Presumably because you wanted to make your site stylish, and you couldn't think of anything better. But it is impossible to create those links without using an image map. Using an image map creates two problems:
  • Reduced accessibility
  • Increased work for you
You will need to create the images. You will need to determine the coordinates. If you want to add or change a link, you will have to adjust these accordingly.

Alternatively, you could just choose a straightforward horizontal or vertical navigation bar. This should be created from a simple unordered list ( <UL> ), and styled with whatever borders, colours, or reusable background images you like. Your code will be clean, flexible, and accessible.

Or you can try to transfer your PS vision to the web :/

If you don't believe that a simple <UL> can look good, then try this: http://css.maxdesign.com.au/listamatic2/index.htm

Also read this for a good summary:
http://www.meyerweb.com/eric/talks/2003/commug/commug.html


? quote:
CSS isn't dynamic ... at all. It's completley static.


Not true.

Both javascript and CSS can contribute to the dynamic elements of a web page (the so-called DHTML). There is some overlap between the capabilities of the two, although javascript is by far the more powerful.

Conceptually, a web page can be divided into three layers:
  • The content layer
  • The presentation layer
  • The behaviour layer
Separation of these three layers is desirable. The HTML should contain the content, CSS should control the presentation, and javascript should control the behaviour.

But CSS can also control some of the behaviour, and sometimes it's more elegant than javascript (for example, pure CSS rollover links).

What should never happen is this: behaviour or presentation sneaking into the content layer (HTML).




Quote
 Re: Web site layouts
Posted by Crono on Thu Nov 10th at 6:41pm 2005

Dynamic means it can be changed at run time. So, no CSS (unless defined in a write command out of js or php, in which case, the js or php is dynamic) is not dynamic.

The "dynamic" part of DHTML is the javascript. :P

Roll overs and such aren't dynamic. Anything pre-defined isn't dynamic. It's static. That's what the words when regarding programming languages mean.

I guess you might be able to say they're dynamic because it looks better than normal html only pages? But that's a thin argument.

Working in PS is fine if you keep a grasp on your limitations. (Most people don't, I guess)

Leaving all performance to JavaScript would make a mighty slow site. JavaScript should have calculations and things only JS (or some other more complex language) can do. So, at times, saying js is the "behavior" I suppose is a big statement. Which can be argued.


Blame it on Microsoft, God does.



Quote
 Re: Web site layouts
Posted by Gollum on Thu Nov 10th at 11:43pm 2005

When I make a web page, I'm more interested in user experience than what generates the experience.

Consequently, I consider any part of the page that reacts to user action to be part of the behaviour layer. Rollovers are an example.

Does it change when I do this? If so, then it's part of the behaviour layer. Rollovers change: their appearance changes upon user action.

I suppose there is a useful distinction between "responds to user action" and "can be changed at run time". Thus, strictly, I expect you are right when you say that DHTML = javascript. But for the most part, I don't care about that

Of course, you always get grey areas. Are rollovers part of the presentation or the behaviour? Both. Perhaps, therefore, it should not be surprising that they can be accomplished using either CSS or javascript, or a combination of both.




Quote
 Re: Web site layouts
Posted by Crono on Fri Nov 11th at 1:40am 2005

Yeah, but, if you distinct it that way: what if you changed all the styles of links to exactly what a normal link looks like ... you can do it, and it's still using the CSS definition ... would that still be dynamic, even using your definition of it being a user interface element? (I didn't think so either <img src=" SRC="images/smiles/icon_smile.gif">)

But, that's just links.

I would hope most people who make pages are mainly concerned with the user experience ... however ... (not in this case, I imagine) ... the rest of it (behind the scenes) is very important as well. Because it doesn't just deal with this paper thin level called the user interface.

The user interface, honestly, is the least "intensive" portion of a web page. Making one "interface dynamic" by using CSS (Let's call it that? <img src=" SRC="images/smiles/icon_smile.gif">) can completely change the entire layout and everything of the site: it's a front end.

Anyway. For the most part: we agree. However, you should be well aware that the user doesn't want their information leaked :P Also, you don't want to allow input fields to allow access to the system the site is running on!

Also, why would you ever use js to define link styles? Just because that'd be "slower". CSS is just a list of definitions, so it's real fast. JS has to be "ran". PHP is technically slower ... but more secure (since it runs server side). I believe it's a little more efficient as a language, but I could be wrong there. (Or you could just use a sledgehammer and implement it all in Perl or something like that)


Blame it on Microsoft, God does.



Quote
 Re: Web site layouts
Posted by Gollum on Fri Nov 11th at 9:07am 2005

? quote:
Yeah, but, if you distinct it that way: what if you changed all the styles of links to exactly what a normal link looks like ... you can do it, and it's still using the CSS definition ... would that still be dynamic, even using your definition of it being a user interface element? (I didn't think so either )

If I make all the link styles identical, then nothing changes. So no, they are not dynamic (or "dynamic", if you prefer). But if I adjust the styles, so that the appearance changes on hover, then they are "dynamic". No inconsistency there in my "definition". From a technical point of view, both scenarios are the same; from a user experience point of view, they are different.

? quote:
Anyway. For the most part: we agree. However, you should be well aware that the user doesn't want their information leaked Also, you don't want to allow input fields to allow access to the system the site is running on!


Er..... Why would I want to do this, and what has it got to do with anything else? <img src=" SRC="images/smiles/confused.gif">

? quote:
Also, why would you ever use js to define link styles? Just because that'd be "slower". CSS is just a list of definitions, so it's real fast. JS has to be "ran".

Yes, I certainly prefer using CSS for exactly that reason (plus less code to handle, and I'm not really a programmer). But what if you want to do something like this with your links: http://www.gazingus.org/html/menuExpandable3.html ?








Quote
 Re: Web site layouts
Posted by Naklajat on Fri Nov 11th at 10:49am 2005

Okay, I've dropped photoshop (and tables) out of the layout equation, and the site design I'm currently working on looks neater and more professional if I do say so myself. The only real problem is that it shows up differently in IE and Firefox, but since it looks similar its not really a big problem. The most noticable difference is IE's refusal to display my logo PNG with #660000 as most of the image with the correct color. Now I'm trying to figure out how to add dynamic content like news posts, a list of members with profiles, and a clan application.

Thanks for all the help guys!



=o



Quote
 Re: Web site layouts
Posted by Crono on Fri Nov 11th at 11:05am 2005

? quote:
Er..... Why would I want to do this, and what has it got to do with anything else? image


You wouldn't want to do that. That's why I said it.

If you accept input from a user, you're setting your self up. Something people should be aware of is an input buffer. You can input text, into a form online, and if the site isn't checking the input for validation (which happens a lot) the data, no matter what is there, will be written to memory. You can do an overflow (write more than the site will use) and all of it will be stored in memory.

This means someone could fill up the buffer with garbage, then input some asm code to open a terminal to the computer.

There's also other things that can be done through buffer overflow, but none as harmful as allowing access to the server!

Obviously, a lot of people don't know about this because they think it's all taken care of or something like that. There are safety checkers and stuff on most servers ... but you should still check your input. Why take the risk?

It's a easy way to hack a site.

A reason you should limit tries is someone could load up a key generator ... based on your sites password rules ... and find the key for an administrative account on the site (assuming the site is large enough to warrant one).

You should note, I'm putting a distinction on the implementation level, which is where any web developer or programmer of any kind would put the distinction ... that's the big one.

There is really no reason to focus ALL of your energy on the User aspect, you have bigger things to worry about. Sure, UI is important. But, it's changeable in a blink of the eye.

If there's a "dynamic" link set and ... just because visually, not code wise, it looks the same is suddenly isn't ... "dynamic"? Well that's a flake way to categorize it! Why isn't it? because it looks the same? That means nothing to the person developing it, the UI can be changed. The extra data is still there and everything, so I think that should still be considered "dynamic" ... even though we're using the term incorrectly image

I don't think people should design the site strictly on layout ... I know that sounds weird, but, the layout is BS compared to the middle ground stuff.
User interfaces can change.

By the way, that's a menu. Even though they are links, it's considered a menu. It's even categorized that way. But, all the JS is doing is saying what elements to hide and on what event ... the CSS is still static and saying what the colors, widths, and all that visual stuff is.

Baron, dynamic content = Scripting language. If it's something ... crucial like passwords, or personal information, use something like PHP, since it is executed server side. JavaScript is executed client side, which is good for little interface things, or unimportant counters (popup windows, menus, clocks ... etc)

If you want a database, that's getting into a little more work. And I would definitely suggest PHP, because the security, efficiency, and effort are all pretty decent trade offs between one another. (As opposed to using something like C with a web-interface: secure as you want it to be, hard to implement)


Blame it on Microsoft, God does.



Quote
 Re: Web site layouts
Posted by Gollum on Fri Nov 11th at 11:55am 2005

I'm going to close my discussion with Crono because it is becoming increasingly technical and irrelevant. If we carry on like this it will be a case of "who can show off better", and I don't expect to win.

? quote:
Okay, I've dropped photoshop (and tables) out of the layout equation, and the site design I'm currently working on looks neater and more professional if I do say so myself. The only real problem is that it shows up differently in IE and Firefox, but since it looks similar its not really a big problem. The most noticable difference is IE's refusal to display my logo PNG with #660000 as most of the image with the correct color. Now I'm trying to figure out how to add dynamic content like news posts, a list of members with profiles, and a clan application.

Thanks for all the help guys!


Well done for making the switch away from tables

Crono can help you with the dynamic content. This is not my area.

As for using PNG images -- IE has problems with them. Specifically, you can't use alpha-channel transparent PNGs in IE. That's a fancy way of saying you can't get a nice "image fits on any background" effect in IE.

Actually, you can. You need a bit of javascript. Create a text file, rename it "pngfix.js", and put the following text inside it. Then add this line inside the <head> of you HTML:
? quote:
<!--[if gte IE 5.5000]><script type="text/javascript" src="pngfix.js"></script><![endif]-->


And here's the script text:

? quote:
function correctPNG() // correctly handle PNG transparency in Win IE 5.5 or higher.
{
for(var i=0; i<document.images.length; i++)
{
var img = document.images[i]
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
{
var imgID = (img.id) ? "id='" + img.id + "' " : ""
var imgClass = (img.className) ? "class='" + img.className + "' " : ""
var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
var imgStyle = "display:inline-block;" + img.style.cssText
if (img.align == "left") imgStyle = "float:left;" + imgStyle
if (img.align == "right") imgStyle = "float:right;" + imgStyle
if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
var strNewHTML = "<span " + imgID + imgClass + imgTitle
+ " style="" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
+ "(src='" + img.src + "', sizingMethod='scale');"></span>"
img.outerHTML = strNewHTML
i = i-1
}
}
}
window.attachEvent("onload", correctPNG);





Quote
 Re: Web site layouts
Posted by Naklajat on Fri Nov 11th at 12:51pm 2005

Bah, I'd recommend against using the "Check spelling" button to the left for anything other than testing the button

Thanks for the script, but it doesn't fix my problem. I don't have alpha transparency in the image, IE just won't display the color right. I'll probably just make a gif since the image is only 748 bytes and is the only one on the page so far.

? quote:
Well done for making the switch away from tables

I'm just glad I didn't finish the site using tables (sloppily) then have to rework every page when I got tired of my sub-par photoshop layout

Edit:
And as for the dynamic content, the host I'm looking at, ZZHosting offers mySQL and PHP with both of their plans.



=o



Quote
 Re: Web site layouts
Posted by Gollum on Fri Nov 11th at 1:15pm 2005

Sorry, I don't know what the problem is then <img src=" SRC="images/smiles/sad.gif">

But if a gif works, use it <img src=" SRC="images/smiles/icon_smile.gif"> Although png compression is slightly better, it hardly matters when you are using small images.




Quote
 Re: Web site layouts
Posted by Crono on Fri Nov 11th at 1:33pm 2005

Gollum, I was viewing it more as a discussion ... but okay.

Not much to know about the php aspect (php.net) Other than that ... you'll have to deal with mySQL. That'll be the harder part.

All I can really suggest on those fronts is to make sure you don't make simple exploitable mistakes. <img src=" SRC="images/smiles/icon_smile.gif"> (I know that's a big and open suggestion, but, try anyway)

If you have any specific questions, of course, ask away.


Blame it on Microsoft, God does.




1
23 next page »
Post Reply