News:

Want to praise Simutrans?
Your feedback is important for us ;D.

Technical discussion for portal website (Was: Should Simutrans have a new site?)

Started by paco_m, February 19, 2011, 12:30:32 PM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

paco_m

Quote from: TheUniqueTiger on February 19, 2011, 11:09:57 AM
I would myself volunteer to put up a design/layout complete with css and may be javascript as required.
The site should be available for everybody from everywhere so please no javascript, flash, etc. - also it is completely unnecessary as you can make good pages with plain html/css ;)

Mod note: Split from [Survey] Should Simutrans have a new site? How is the site going? at reply #6. --VS

An_dz

I hate flash on sites, flash is only for games. ;D
HTML5 can do most of those effects everybody uses on sites.

TheUniqueTiger

I dislike flash too... The attempt would comprise of XHTML Strict & CSS. I was thinking about very simple Javascript for certain things, but let it be, no JS at all!

TheUniqueTiger

A sample mockup of the portal index page has been done by me by changing just a few lines of html & css and adding a few images. It can be seen at http://www.hosthifi.com/simutrans/index.htm

Minimum width is 1280px which is almost taken for granted these days. Also it adjusts according to screen width if larger. For the header I would need 6 images (330 * 150px) pasted together horizontally into one large image about 1980*150px. This would be behind the Simutrans logo, which would remain in the center. The logo would be separate from the header image consisting of screenshots. Someone please provide me such a large image to be inserted for preview!!!

Please let me know if I should continue or not. In my opinion it looks warmer & should draw attention. Works good on Firefox 4, Opera 11, IE 9. Requires minor tweaking for Chrome & IE8.
Also I see that although the original portal site has XHTML strict declaration it uses target="_blank" for opening new tab/window, which is invalid. It requires javascript to retain strict & still open new tab/window.

Please note: I also need 32*32 PNG images with transparency as icons for Paksets, Wiki & Project page similar to the download icon.

Ashley

Sorry, far too wide. 1280px isn't in any way taken for granted these days - plenty of people still using 1024x768 screen res and that translates to less than 1000px wide when you take scrollbars/side panels into account. Many people don't keep their browsers maximised too. I'd design it to look good on an 800px wide display, but to grow if there is more space.

With my browser on its default settings (how I use most websites) I have to scroll on that page by almost 50% of the page width.
Use Firefox? Interested in IPv6? Try SixOrNot the IPv6 status indicator for Firefox.
Why not try playing Simutrans online? See the Game Servers board for details.

paco_m

Quote
/* Generated by KompoZer */
@charset "utf-8";
body {
 background-color: #60742b;
 color: black;
   padding: 20px 40px 20px 40px;
   min-width: 1280px;
 background-position: center top;
 background-image: url(../images/bckg_gras.jpg);
}

Please turn all px definition in % values and then check the behaviour by resizing your navigator window (stretching into heigth and width) - if you manage that this looks good for high and wide windows it will be ok with any screen resolution ;)

Consider that people with old, new PCs, with laptops, notebooks and even mobilphone devices want to access your page, hardcoded pixel values are tabu for modern and dynamic webpages.

isidoro

Quote from: Timothy on February 19, 2011, 10:45:27 PM
Many people don't keep their browsers maximised too.

I'm one of those.  I've even suppress the maximize button on the window manager.  I don't like my screen to be filled by only one window.

VS

IMHO pixels are good when you deal with decoration pictures, you can't really give them up there. Still, it doesn't hurt to be very careful.

Javascript is good as long as it has a justifiable use and some graceful fallback. So, what good will it do for us? Loading svn logs is one good thing, perhaps...

Agreed for resolution - it's something you can work around, even if you feel as if it's not the case.

Regarding colours, you could keep these used on blog, to maintain some sense of uniformity...

To toot my horn a bit - try this: http://128.simutrans.com/ Perfect on widescreen, but resizable down to 500 px without major breakage. If possible, javascript loads some redundant eye candy that disappears as needed.




Also, who is for splitting thread? Me...

My projects... Tools for messing with Simutrans graphics. Graphic archive - templates and some other stuff for painters. Development logs for most recent information on what is going on. And of course pak128!

sdog

Vladimir, it's a pretty good idea to let the "vehicle of the day" column dissapear when the width is too low.

quite a lot of people also change the zoom of their pages, including me. It works so seamlessly in chrome and firefox that i do it automaticaly (alt + scroll-wheel) it should translate to a smaller screen width.

in regard to other devices, ipad has 768 width for it's browser screen. I expect the site should be good for a couple of years, ipad like devices will most likely be a very widespread way to surf.

Addition Please als check if all important links or buttons are large enough and sufficiently spaced to use them easily with touch screens. Those are much more fuzzy than precise mouse or touchpad operation. When using an ipod (not mine! :-) i always have problems hitting the 'new' button in this forum, to get to the last posting in a thread.

TheUniqueTiger

Ok folks... Thanks for the reviews & criticisms...

1. I have set minimum width to 800px. I hope one doesn't expect lesser than this. The page still looks fine after some minor tweaks. The header nav bar may flicker on Firefox but thats a browser issue not seen with others and to accommodate the extensive nav bar its necessary to keep table-layout as 'auto'.
2. I'm myself a web designer & I surely know the importance of % vs px for setting margins & padding. However certain places required px exclusively due to the nature of shadows overlying the elements. If my designs are accepted, just adding a few lines of CSS for Chrome compatibility won't be difficult (unless Chrome implements box shadow by its correct name). Some values were changed though.
3. The blog has a completely independent CSS, and besides its Wordpress. This particular design that I tweaked has very simple CSS without the semantics of & without matching with the blog. Most of the things were pretty much from the original CSS itself. If one wishes to implement the Blog CSS it would be time-consuming as well as a bit complex. I hope members agree that having the design I proposed is quite good enough. I guess the portal site & blog can have mutually exclusive designs as it has been for such a long time. The blog looks good, but I'm only making an effort to raise the Simutrans.com portal site which is the frontend for receiving prospective players & game fans.
4. Most of the repetitive sections of the blog is dynamically generated through PHP whereas the HTML site requires the same HTML code on every page. This makes code maintenance difficult and non redundant, especially on bigger sites.

These are my best efforts at modernizing a traditional looking site without major changes.

I'm going ahead with the "About" page as well... Will let you know when its uploaded.

EDIT: The About page is uploaded as well. The flicker issue with Firefox solved too.

sdog

I think VS meant to take some of the colours from the blog, not necessarily the design.

The background colour of both the new site and the block are quite good. However if taking the colour from the blog, the background image from the site shouldn't stay green, i feel.

I like both, the colour scheme of the blog and the new site, very much. Good choices indeed!

Off Topic: Who made the blog, it looks splendidly, never looked at it before. Only small point i'd like to critizise is the smallcap font for the heading. It really doesn't work for small caps and scaled up so much. A good large size font also allows to get rid of the small caps alltogether. (I think it's possible to embed fonts in css, never tried though)
Example: http://www.dafont.com/motor-oil-1937-m54.font?text=Simutrans+Blog

ps.: i like futura :-)


edit clarified a part as off-topic

TheUniqueTiger

@sdog, I was trying to find a suitable size for accommodating the wide header nav bar. I've changed font size from 0.8 to 0.9em. Any bigger and it won't accommodate.

sdog

When looking at the mock-up one stylistic element is, i think, a bit problematic:

The central logo is rather high and centred. This creates some large blank areas on both sides. At the bottom, this blank area is cut of by the nav bar, with hard edges. The lower side of the nav bar has rounded edges however. I'm not sure if this nav bar would be suited more to be attached to the lower edge of a frame or large logo. On the right side, the highlighted 'Home' gets an U shape, since it is open on the upper side now.

Having the logo on the left side, would fix the nav bar. The blank issue could become a bit bigger though. It would also force the "Welcome" head-line to be moved to the left.

Perhaps having the logo on the left, not centred and filling the blank space from centre to right with some low visibility artwork/logo/ornaments (greyscale with high transparency?) Something that fits to the wonderful modernist simutrans logo (have i expressed already how much i like it?) and does not distract at all.

update
logo left, and "Simutrans" in a fixed, wide letter spacing light font would work well -- but i don't think the logo would work without it's text below.

disclaimer
please completely disregard this, if it is silly. in fact i don't know anything, i just live in the belief i would be intuitively sensitive to design, colour and fonts. Been proven wrong more than once.

TheUniqueTiger

@ sdog,
I am expecting somebody to give me a large horizontal image by joining various screenshots. I need at least 1920 * 150 px image which would sit on top of the nav bar. Thus the top should be flat and not rounded. I also expect the Simutrans logo to stand out at either left or right with the large screenshot bar behind it or at least not interfering with it. That way I would want both screenshot bar as well as the logo at the top of the nav bar. The hard ends have now been rounded and I have almost completed 6 of the 9 main pages. Will be uploading soon.

Frank

Quote from: Timothy on February 19, 2011, 10:45:27 PM
Sorry, far too wide. 1280px isn't in any way taken for granted these days - plenty of people still using 1024x768 screen res and that translates to less than 1000px wide when you take scrollbars/side panels into account. Many people don't keep their browsers maximised too. I'd design it to look good on an 800px wide display, but to grow if there is more space....

Nettops/Netbooks are smaller 1024 width

sdog

i like your design very much, it's quite elegant. The missing screenshot bar explains very much the nature of the top of the bar.

I'm a bit unsure if a bar of screenshots is a bit heavy? I'm looking forward to see the solution you work out. It's interesting to watch your progress with this.

Trying to join a rounded logo to a edged screenshot is something where i would give up and flee to minimalism and subtlety, as an excuse for inability. I'm always impressed by people creative enough to have style without resorting to this, even being colourful and expressive.

btw, the rendered castle ruin at the bottom of the about page is a neat idea, looks good. Zeno has a lot of high quality renders of ships and rolling stock for pak128 in his blog, those might look good on some of the other pages too.

TheUniqueTiger

Thanks sdog... Those graphics were just picked up from the portal site and just used for illustration of my example site. If there are more, I'll suggest one for every page of the 8. Nice eye-candy!
The rest of the pages have been uploaded now and they don't contain images as I haven't downloaded them. Once admins put it up on the main site they'll look as they should. I have also added float clearing so that floating images don't go beyond the div boundaries. I would request you and all the admins to visit the example site and post your views.

I'm waiting for three things:
1. The screenshot bar, pretty much like the present header bar.
2. The 32*32 icons for Paksets, Wiki & Project page like the download icon.
3. Approval to use Javascript to point external hyperlinks (target=_blank) using Javascript and thereby maintain a valid XHTML Strict declaration.

The code for external hyperlinks using Javascript, which is to be run on load, is as follows:

//set all external hyperlinks as class="external"
if (!document.getElementsByTagName) return false;
anchors = document.getElementsByTagName("a");
for (i = 0; i < anchors.length; i++) {
    if (anchors[i].getAttribute("href") && anchors[i].className && /\bexternal\b/.test(anchors[i].className)) {
        anchors[i].target = '_blank';
    }
}

IgorEliezer

Besides, if you all want to get rid of green-tiled background, feel free to do so.

To be honest, consider the possibility of entire lay-out being replaced, only text and illustrations would be kept. I say so because I desire you the freedom to propose whatever you all think could be better for the site. :)


TheUniqueTiger

Thanks Igor, but now it seems the green background is seen very less and its going very well with the warm color scheme of the example site. I feel its looking well even without a major makeover.

I have now also uploaded the CSS with compatibility for Chrome. The logo is the same but I've added some CSS effects for background & shadow. The proposed screenshot bar will be actually 'overshadowed' by the logo. Some hi-def graphics for the screenshot bar would be great...

I've done my bit... Now its upto the graphics suppliers for the above mentioned two-three points in my last post.

Please let me know if my name could be added to the credits as well...!!!  ;)

Ashley

Are those the final colours? I am not sure I like that fleshtone colour - the inverse gradient on the menu for mouseover also looks like something from the 90s.

The way that the menu text has a different mouseover effect to the box surrounding it is also quite strange. There need only be one mouseover effect for both surely? Also the hitbox for the menu items is constrained to the text, not to the entire menu item - this is confusing and makes it feel broken.

Same for the download/other links in blue boxes. The combination of fleshtone pink and blue is also quite a poor colour choice IMO.

Also you're using a table for the navigation? Why not a list - it is a list of items, not a table. Single-line tables imply that you are using tables for layout purposes, which I believe is a somewhat outdated web design practice.

I think if better colours were chosen (no pink), the navigation were replaced with a list and the hitbox issues fixed (and the horrible gradient effect on the navigation replaced by something more modern-looking) then the overall effect would definitely be improved.
Use Firefox? Interested in IPv6? Try SixOrNot the IPv6 status indicator for Firefox.
Why not try playing Simutrans online? See the Game Servers board for details.

VS

I'm not a big fan of the "flesh tones" either...

But it's certainly better. More empty space = less crammed :)

My projects... Tools for messing with Simutrans graphics. Graphic archive - templates and some other stuff for painters. Development logs for most recent information on what is going on. And of course pak128!

TheUniqueTiger

@ Timothy,
I'll surely incorporate the suggestions you've given. The flesh tone was the toned down version of a dull-orange shade, which looked too bright. I had predetermined the blue to go with the flesh/orange tone as both colors look brighter over such a background. Believe me or not even I'm not satisfied with the navbar and I've already changed it several times. I'm still thinking of various options for a modern looking navbar, which includes an alternative to the single line table. As I was presented with a fully-working existing design, I did not make sweeping changes at once, just going step by step with everyone's approval.

Please wait for the next set of updates.

wlindley

Grammar correction: Heading should be, "Simutrans is a free and open source transportation game."

It could be "Simutrans is freeware" but "freeware" describes a different type of software than "free software".  And there is no such thing as "a freeware" or "a hardware" or "a firmware" or for that matter "a clothing" -- those are collective nouns. 

TheUniqueTiger

@ wlindley, I suppose its upto the admins to decide whether they wish to change the text.

A newly done header nav bar has now been uploaded. It now uses a list instead of single-row table. The download button etc colors have been changed to match the scheme (same as h2 color). Besides now I just need a 800 * 150 px screenshot bar and not a really large one as said earlier, or may be if admins are happy, we can omit the screenshot bar for good. The icons for paksets/wiki/project-page are remaining which I expect the good graphics crew to handle.