Track this topic | Email this topic | Print this topic

I know I posted about this a while back, but I have been doing some tweaking to my upcoming site's layout. I have fixed all issues with windows i.e. (or so I think... last time I checked it was working fine).

If you all could, do you think you could comment on my layout? Currently, I am working on a new splash page so I have replaced the old with my beautiful.boy avatar from i90east's site. Click on it to enter the site.

Changes
–» widened the table in which the content sits.
–» changed the menu style (added the dividers for different section)
–» fixed alignment issues with windows i.e.

I view the page in FireFox but also have Mac I.E., Safari, and Omniweb and it works properly in all of them. I did all the coding myself in HTML with no editors to help me. I am looking for a server that will let me use PHP and MySQL as they would make updating the site easier. Alas, I can find no free ones so until I finish the page's content I do not want to spend money on hosting.

Any suggestions would be lovely. Thanks.

P.S. Do you think I should add a section for my sprite / animated .gif files?

This post has been edited by Stephen the Third on 18th May 2004 03:17

--------------------

Je ne t'aime plus,
Mon amour...

Je ne t'aime plus,
Tous les jours...

Really nice site, Steve. I'm always impressed with nice layouts, and this one impresses me. Great job! I may come to you for some help when I create my own site.

And yes, make a section for your animated GIFs. They're really cool.

--------------------

Wow. 1,000 posts.

I miss you all now that I'm in boarding school! ;_;

Alright, I also have made an alternative layout for the site which is not fully done, but done enough to be uploaded. The fact that the top of the page is taken up by an ad sort or ruins this one, though, as it is supposed to be right against the top of the page. So, just pretend that it works out that way.

Which do you favor?

Original ––» [link]

or

Alternative ––» [link]

I would really appreciate comments. Thanks.

--------------------

Je ne t'aime plus,
Mon amour...

Je ne t'aime plus,
Tous les jours...

The same comment applies to the second as I gave to the first, really: if you can make the central area expand to fit the full width available, it won't leave so much blank monitor space sitting around. Also, if you're using images for layout purposes, it's a good idea to make them background images in divs or table cells instead of inserting them with img. This is largely a semantic thing, but it also helps with page loading since Mozilla seems to load background images as a lower priority.

I'll also suggest making the font just a little larger. It's quite hard to read large amounts of text in a small font, especially using a serif on a screen display.

I think I do prefer the second one. The colour seems nicer, if nothing else. Can't really decide without some sample content in it, of course.

Personally, I really, really, really dislike splash pages. I've yet to see any point in them other than wasting time, except in two cases:

• The entry link opens a popup window. This is rubbish. My current window looks like I want it to look; I don't want to open some new window of strange proportions just because the author can't be bothered to write HTML that works properly.
• A list of pre-entry "system requirements" is given. If a site has system requirements, it is inherently broken and I'm probably not going to bother coming in anyway (unless the requirement is "Not Netscape 4", which I actually do sympathise with).

So I'd find a way to use the animated GIF on the "real" main page somewhere, personally.

This post has been edited by Tiddles on 18th May 2004 06:41

Quote

Also, if you're using images for layout purposes, it's a good idea to make them background images in divs or table cells instead of inserting them with img. This is largely a semantic thing, but it also helps with page loading since Mozilla seems to load background images as a lower priority.

I actually DO use them as background images. In the first, the only ones that are not background images are menu buttons. As far as making the central area expand, that is a simple idea to implement, but I don't really know if I want to. I tend to enjoy having it at a fixed size as it allows more control in its appearance. True, I can easily make it so that it will extend within the entire window... but I don't really see the need to make it fill up an entire window.

--------------------

Je ne t'aime plus,
Mon amour...

Je ne t'aime plus,
Tous les jours...

I preferred the first one, but that might be the disliking for pinkish colours the society has forced upon me.

Anyway, Oh Beautiful Boy, don't you think it's about time you gave us some proof of you splendor? Some photographs or something? I'm sure I'm not the only curious one.

--------------------

The Collapse of Heaven and Earth

Pastels don't do it for me in general. Additionally, I loaded the new one in both IE and Moz and found that it is horribly butchered in IE. It's always good to design for Moz, since it is more standards-compliant, but to have it not work in IE before you show it publicly won't look good, because 90% of your visitors will still be coming with IE.

You can do fixed width or you can do variable, whatever you like. I don't think you're going to have so much content that you will absolutely need to fill the whole window.

I'm with Tiddles regarding splash pages to an extent. I differ in the fact that I don't mind them provided they serve a real purpose. Real purposes, to my mind, contain login pages for the whole site, preloader pages for flash-based sites, language selectors for multi-lingual sites, and other useful information that benefits the user. Simple click-throughs only make it harder and longer for the user to access the data, which is what they came for in the first place.

Finally, a few comments about the width as it pertains to my monitor:

1. I use 1280 resolution, so I end up with a relatively small content area and a LOT of pink.
2. At smaller window sizes, the content and the lower bar end up touching.
3. Put a one-pixel stroke on the top of the top bar, and it will look more natural until you can get rid of the ad.

--------------------

"To create something great, you need the means to make a lot of really bad crap." - Kevin Kelly

Why aren't you shopping AmaCoN?

Quote (Rangers51 @ 18th May 2004 12:45)

I differ in the fact that I don't mind them provided they serve a real purpose. Real purposes, to my mind, contain login pages for the whole site, preloader pages for flash-based sites, language selectors for multi-lingual sites, and other useful information that benefits the user.

Granted, I didn't think of those, though that's probably because I only think of them as splash pages if they don't contain anything useful like that. It absolutely must be something functional IMO: there's no reason "other useful information" can't just sit atop the front page proper unless it absolutely requires some interaction before that other data is presented.

And yeah, fixed or variable width is really up to you. Bear in mind that absolute author control, especially in terms of pixel sizes, isn't always the best option: like R51, I use a 1280-width resolution, and sites designed to pixel-fit in 800x600 look pretty annoying on my screen (even more so 640x480 -- hello, original CoN4! Though admittedly it was a different era.) Width-fixing isn't usually a big mistake, but personally I vastly prefer sites that are fluid, which is why all the CoN styles have had special efforts made to ensure that they are, including the recreation of good old CoN4.

I take back my background image comments, because on closer inspection I see that you did indeed implement them as backgrounds. What threw me was that I saw a ton of image placeholders on first load, which are apparently spacers when I look closer. Try specifying width="1" and height="1" on them to avoid them showing up and causing potential oddness during load, in case they load after the backgrounds for some stupid reason. Or better, just use   instead where that doesn't create too much space.

Quote

1. I use 1280 resolution, so I end up with a relatively small content area and a LOT of pink.
2. At smaller window sizes, the content and the lower bar end up touching.

I have three computers in which I have looked at the site on: One is a 1280 widescreen, one is a 1280, and one is a 1600x1200. So, Tiddles, nothing was designed to in 800x600, I assure you. I can see that the font looks a tad small on the 1600, so I may bump the message font to be the same size, just not bold, as the headline for news posts. Of course, the "posted by" line will remain small. Any suggestions regarding the font size? Does everyone think I should increase it or are there those who think it is fine at its current size?

I admit that the orange and blue pastel one is not as nice and not full tweaked for all browsers yet as I threw it together yesterday. I am a bigger fan of the first, as I like the colour scheme of light grey and green a lot *notices that his Kirin avatar enjoys a similar colour scheme*.

Quote

Pastels don't do it for me in general.

Boooo, Rangers51! Pastels are very soothing colours, in my opinion. Especially during the summer. I have been known to sport many a pastel as far as clothing during the summer.

This post has been edited by Stephen the Third on 18th May 2004 17:44

--------------------

Je ne t'aime plus,
Mon amour...

Je ne t'aime plus,
Tous les jours...

I'd use an absolute minimum of 8pt or 11px for body text, personally, and these days I think even that's too small in many cases (see a very slowly emerging option to change font sizes on CoN styles, currently only Digi), especially with a serif. Maybe it's because my eyesight is getting worse. Try at least 10pt/13px for decent readability. If it's any kind of guide, I find it quite difficult to read your posts on CoN because of the font size. Not wanting to have a go at you, since nobody bothers to think about font size, but you can put your site a cut above if you do.

EDIT –» I changed the font on my page to "Century Gothic" as it matches the page better (the menu buttons). Suggestions about its size would be wonderful. Currently, the headers are 10pt, text is 9pt, and post information is in 8pt. Better?

Well, I have started to implement the font sizes that you suggested. They should be viewed at 10pt (for headers) and 8pt (for body text) in font Lucida Grande (decently sized, which is why I opted for 8pt).

You'll also notice that if you click on the links they currently take you to nice "under construction" pages that I put up. Heh.

Is Lucida Grande a font that most have? Or should I add a backup font in the tag?

This post has been edited by Stephen the Third on 19th May 2004 00:43

--------------------

Je ne t'aime plus,
Mon amour...

Je ne t'aime plus,
Tous les jours...

hey stephen i am new to this forum but what is this layout your talking about?

Tyrantdragon, the layout that is being discussed currently within this topic is that of my website [link], more appropriately a website in progress.

Click through the temporary splash image (initially there to warn about the lack of a completed page, Tiddles) to look at the layout we are discussing.

Welcome to the forums.

--------------------

Je ne t'aime plus,
Mon amour...

Je ne t'aime plus,
Tous les jours...

thanks and a very good wedsite it is good work

Could still use being a touch larger, IMO, but it's all pretty subjective.

I like the fonts you've chosen. Definite readability improvement. For Lucida Grande, fall back on Lucida Sans Unicode and then Lucida Sans (I reckon LSU is pretty much LS misnamed, since specifying "Lucida Sans" without the Unicode always gave me an italic font until I installed new fonts recently; I assume LSU was meant to be the non-italic, default form of LS), which are pretty much the same font. Century Gothic tends to work better at larger sizes because of odd pixellation, but for all that it's still pretty readable, so nothing to worry about. You might specify Futura and Trebuchet MS as backups. The last fallback font in the list, in CSS at least, should be an unquoted keyword (sans-serif, serif, monospace etc.) in case someone has a really broken, fontless system.

Nice work.