Development :  K-Meleon Web Browser Forum
K-Meleon development related discussions. 
Pages: Previous12
Current Page: 2 of 2
Re: Website layout
Posted by: Dorian
Date: April 03, 2010 04:33PM

Ah right.
I'm sorry JamesD but the color you're using doesn't fit at all with the red/green of kmeleon.

If you talk about readability I think the current menu could be even less readable smiling smiley

Options: ReplyQuote
Re: Website layout
Posted by: JamesD
Date: April 03, 2010 05:24PM

@ Dorian

Could be just my eyes. They are kind of old, just like me. I did get some work done on flags for language choice. I have the new version that I have done at http://dl.dropbox.com/u/1522294/Local%20Web%20Code.7z

One thing I wish to ask about is site maintenance. If you have the download information in the menu, on a button, and in the home page, does this mean many more pages need to be updated each time there is a new release of KM? Perhaps just the have download on the menu and a button and have both point to the download page would mean less items to change when a new release comes out.

Update:

I have returned to original colors. The 7z file is updated for that now. Can someone suggest a way to not use black on red that does not show up elsewhere? Not everypage has screenshot and download button yet.



Edited 1 time(s). Last edit at 04/03/2010 09:27PM by JamesD.

Options: ReplyQuote
Re: Website layout
Posted by: JamesD
Date: April 04, 2010 10:29PM

Dorian and jsnj have both indicated the menu colors should match the logo colors. With that in mind, I think a replacement text color for the black text currently used needs to be found. It has to show well when the background is green and also when the background is maroon. I have two pages which demo the colors on the backgrounds. The page for maroon is here. http://www.w3schools.com/tags/ref_color_tryit.asp?color=Maroon And the page for green is here. http://www.w3schools.com/tags/ref_color_tryit.asp?color=ForestGreen

All suggestions appreciated.

Options: ReplyQuote
Re: Website layout
Posted by: Dorian
Date: April 05, 2010 11:51AM

Quote
JamesD
One thing I wish to ask about is site maintenance. If you have the download information in the menu, on a button, and in the home page, does this mean many more pages need to be updated each time there is a new release of KM? Perhaps just the have download on the menu and a button and have both point to the download page would mean less items to change when a new release comes out.

Yeah, but the home page with the download button will not be used, unless we redo all the main page of the site, using a cms or something. And it's not like kmeleon has a lot of release rate :p

Quote
JamesD
Dorian and jsnj have both indicated the menu colors should match the logo colors. With that in mind, I think a replacement text color for the black text currently used needs to be found.

It will be difficult to find a color that can be read at the same time on white, red and the textured green background. When I made the menu I never thought about using a popup menu. So I think the popup should be avoided, or a different design for the menu should be used.

Options: ReplyQuote
Re: Website layout
Posted by: JamesD
Date: April 08, 2010 05:51PM

@ Dorian

I have made a new version. It still uses both red and green. No button is on the page. Menu method is still the same. The red is the popup menu border. No change to text colors. Code is in the same place. http://dl.dropbox.com/u/1522294/Local%20Web%20Code.7z

Hope this helps.

Options: ReplyQuote
Re: Website layout
Posted by: JamesD
Date: June 22, 2010 12:43PM

Question on other browser's display

Does the HTML tag <h1> not mean the same size display in both ie and km?

I have the following line of code.
<h1><big>K-Meleon</big> - The Browser You Control</h1>

It looks reasonable in KM here. http://dl.dropbox.com/u/1522294/Site_in_km160.jpg

But it is too large in ie 6 here. http://dl.dropbox.com/u/1522294/Site_in_ie6.jpg

I have completed some new code for the heading/menu of the web site. I was testing in both KM 1.6.0a4 and IE6 when I noticed the difference. I hope to be able to post some new code soon.

Update:
I think my IE has been modified for font size. I was checking aginst a raw install of KM. Looked at file with my regular KM and it has same large fonts.



Edited 1 time(s). Last edit at 06/22/2010 01:17PM by JamesD.

Options: ReplyQuote
Re: Website layout
Posted by: jsnj
Date: June 22, 2010 04:33PM

That's either IE7 or IE8 in that screen cap. IE6 may render differently, not sure though. I don't keep up w/trident's development.



Edited 1 time(s). Last edit at 06/22/2010 04:34PM by jsnj.

Options: ReplyQuote
Re: Website layout
Posted by: desga2
Date: June 22, 2010 08:07PM

@ JamesD:
Read this about big tag in HTML 4:
http://www.w3schools.com/tags/tag_font_style.asp
http://htmlhelp.com/reference/wilbur/font/big.html

Your IE image is IE7 or 8 but not seem IE6.

Big is a standar tag but IE not use the standars.

K-Meleon in Spanish

Options: ReplyQuote
Re: Website layout
Posted by: JamesD
Date: June 22, 2010 08:53PM

@ desga2

You are right, the IE that I have is # 7. I have not used it since KM .7 was latest version. Only using now to test website code. I must have made a minimun font size in IE at some time. I find IE very hard to use after being with KM for so long. I guess one of the MS automatic updates changed it from 6. I have the change to 8 blocked now. I don't need all the extra code for something I never use.

I checked the website code on my regular KM 1.6.0a4 which has a minimun font size of 14 and they look about the same. I have been testing on a raw install of KM so that my KM changes will not influence the site design.

Options: ReplyQuote
Re: Website layout
Posted by: JamesD
Date: June 23, 2010 01:39PM

I have some new code for the web page. It seems to work find on KM but you have to allow blocked code on IE 7. The files you need to run this site locally are in http://dl.dropbox.com/u/1522294/Local%20Web%20Code.7z

1) I have been able to keep the green and red colors by using a red border around the dropdown menu items. I have a "skin" background in the header.

2) The translations are incomplete. I am not the one to do this as I only know English.

3) This needs to be tested on other browsers. I have only KM and IE7. IE7 seems to have problems with the flags for nations in the dropdown and also direction of menu dropdowns before I allow blocked code to run. I don't know how to fix the my IE7 because I don't use it except for this testing.

4) All the screenshots are old. Do I need a screenshot of each language or would just one of English for all pages be enough?

All comments and suggestions are welcome.

Update:

I have just updated the code with an experimental change for English page. The screenshot will change size if the window size of the browser is reduced below 700.

Only the English page is changed so far. I am still awaiting answers to 4) above before I continue.

The code for that came from http://buildinternet.com/2009/07/quick-tip-resizing-images-based-on-browser-window-size/



Edited 1 time(s). Last edit at 06/23/2010 06:28PM by JamesD.

Options: ReplyQuote
Re: Website layout
Posted by: JamesD
Date: August 24, 2010 06:29PM

I have put a public test site for my code at http://members.perigee.net/jmd8421r/KMtest/~switchlang=en.htm

I hope the user community will have a look and make suggestions. The code is unfinished. I use only English so the pages for other languages may be quite wrong. I used Google translate on some and on others, I just kept what was in Dorian's original code.

I am still not sure of the menu system. Black text does not show well on the red background of the original. I have a different background but I kept some red by putting it in a border.

I added a picture of all the language flags above the dropdown for languages.

I did use the left and right borders around the text. They were commented out in the original. They did not line up correct before and I changed the end of a division.

A screen shot has been added. There is code to reduce its size if the window width is greatly reduced. The screen shot used is of the English page, but I think we would want to each screen shot be in the correct language for page being displayed. Png type files are clear enough that they can be read. They do, however, take more space on the server to store than do Jpeg files.

I am not sure of the status of this project. There has been no input since my last post which was in June.

Comments, suggestions, and translation help appreciated.

Options: ReplyQuote
Re: Website layout
Posted by: Doon
Date: August 27, 2010 04:15AM

Hiya James. I have no part in KM's future (I use Win98 and understand very little of what goes on around here administratively) but for what it's worth I can offer you my opinion about the basic look of things, focusing on the front page. I apologise in advance if my criticism seems unkind as I have no wish to discourage anyone.

I compared the following three test sites using my default KM on Win98 and with IE7 on Vista:

JamesD: http://members.perigee.net/jmd8421r/KMtest/~switchlang=en.htm (Modified August 24, 2010)
Dorian: http://kmeleon.sourceforge.net/tryout/ (Modified March 13, 2010)
Desga2: http://kmeleon.110mb.com/enlaces/KM.html (Modified June 6, 2010)

Screenshots of the Dorian and James versions in each browser: kmx4.jpg
Desga2's:kmx2.jpg
(very large images)

Dorian's header background graphic certainly has some serious issues in IE7, and all sites have small issues in IE7 with the large text (using the H1, H2, etc. tags, which I seem to recall are known to render differently in different browsers).

I won't address the header problem, though I'd suppose it's css related, but I will address the look of the background graphics. I prefer the look of the header in the second screenshot in either image (Dorian/KM) although I'm unclear about how it's displayed compared to how the base image looks (css tricks again I suppose). I know there is also an overlay of a png with alpha channel transparency which gives a gradient shadow effect, which does look good but fails in IE7. So, multiple browser testing will be in order.

James, I'm afraid your header graphic needs to be scrapped, it's too coarse as displayed (too much light/dark contrast for optimum text readability), it shows unpleasant tiling artifacts and has suffered seriously from jpg compression. You are on the right track however, by using a simple image displayed without unnecessary css tricks which can lead to failure like the original header in IE7. An image like Yogi's in the third post in this thread might be the best choice, it has the right color and contrast and smoothness and such. How the transparency overlay might come into play in the final choice I couldn't say.


Quote

I am still not sure of the menu system. Black text does not show well on the red background of the original. I have a different background but I kept some red by putting it in a border.

The black on red in the original is horrible, in fact the red on every aspect of the original menu is horrible. Theme be damned, it needs to look good and be very readable. Your textured background on the popup menus is certainly better, and while I understand why you did it I still dislike the red border.

The truth is I like Desga2's menu the best of all, the bold text in the menus definitely looks the best. And yet, while setting the browser to an 800x600 size (a minimum target in my opinion) his menu breaks and wraps, being too long, while yours and Dorian's fit comfortably.

I also think Desga2's horizontal layout of the exe/7z packages looks best, his footer with copyright/sourceforge logo looks best (a minor issue). Worthy of mention is the difference in the rounded edges (or not) of his button in KM vs. IE in my screenshot, more css stuff I'm sure.

Desga's obvious big-button download link looks great to me, the way it sits below the intro and next to the screenshot, pushing the latest news to the 'next' section of the page.

I personally like the look of the original single flag/country drop down menu but having the array of flags as you do looks good and is a nice gesture considering the multi-country effert behind this browser.

Some kind of vertical lines/borders on the sides might be good idea, I'm not sure, but I don't think they're looking good enough as is.

Finally James, earlier you wrote about having larger text but your latest version has the smallest text of all, which is too small in my opinion.

I wish you well, and apologise for being so nitpicky. I drive myself crazy when I attempt graphical projects like these, and I've learned in the past that I stink as a web designer.

Options: ReplyQuote
Re: Website layout
Posted by: JamesD
Date: August 27, 2010 11:50AM

Quote
Doon
I apologise in advance if my criticism seems unkind as I have no wish to discourage anyone.

Don't apologise, we will never get anywhere if users don't speak up and point out problems. In truth, I don't much like the page myself. I am not a web designer. My current knowledge of CSS is more like copy an existing line, comment the original, change the copy, and then run it and hope.

I have just been trying to follow requests previously posted about background, download items, and colors.

Maybe I should have asked the obvious question which is do we need to change from our current design?

I will try to put something together to address each of your points. I am slow, so that may be days instead of hours.

Options: ReplyQuote
Re: Website layout
Posted by: JamesD
Date: August 27, 2010 06:16PM

I made a couple of changes. New code at same web site as before.

Changes:
Main graphic
Remove image
insert color to match langmenu

Menu font size
Make larger
Changed from 1.2em to 1.6em

Menu dropdowns
Removed border
Removed image
Insert color to match langmenu

I will have to study some CSS to see how to vertically center that line in the footer.

Options: ReplyQuote
Re: Website layout
Posted by: disrupted
Date: August 27, 2010 06:46PM

test: http://kmext.sourceforge.net/tests/k-pending/k-index.htm

colour-blind support (except for logo/protanopia)
legacy browsers support
no jquery

src: http://kmext.sourceforge.net/tests/k-pending.zip

Options: ReplyQuote
Re: Website layout
Posted by: JamesD
Date: August 27, 2010 08:09PM

@ disrupted

There seems to be a problem with the menu and language selection if running at less than 1024 width.

Looks fine to me, but some will surely request the red and green colors.

I know we want people to download KM, a download menu item, a download button, and the downloads all on the page seem to me to be overkill. But that is just me. Others seem to like it that way.

Options: ReplyQuote
Re: Website layout
Posted by: disrupted
Date: August 27, 2010 08:55PM

it's just an alternative/layout navigation.. whatever content is placed there is up to dorian.

the main core change is enabling a constant nav menu with css instead of jquery/js. i think the front/download page should be fully accessible with js disabled.

the small screen resolutions bug has been fixed plus partial support for ie6(without language menu)
opera 8 -gecko 1.5 are fully supported

i don't think a green navbar with red/maroon menus is a good idea..it's basically telling a colour-blind person to go away

Options: ReplyQuote
Re: Website layout
Posted by: desga2
Date: August 27, 2010 10:30PM

disrupted layout is a good alternative, but I don't think that white and black contrast is good option.
You have to use color more neutral, white more dark and black less dark, because white and black are very bright in the last laptop and monitors.

K-Meleon in Spanish

Options: ReplyQuote
Re: Website layout
Posted by: disrupted
Date: August 28, 2010 07:35AM
Options: ReplyQuote
Re: Website layout
Posted by: SoerenB
Date: August 28, 2010 09:46AM

Hi,

I just want to give one vote for almost black font on just a bit off-white BG. Better for my old eyes on my old monitors .. I really hate white on black.

On a different note: I would strongly support JanesD:
Quote

I know we want people to download KM, a download menu item, a download button, and the downloads all on the page seem to me to be overkill. But that is just me. Others seem to like it that way.

As I recently wrote in a german thread: this, our, K-Meleon site holds a vast treasure of information, but the way it is organized is - in my humble opinion - outright deplorable. I'd like to start a discussion about that - but probably this is not the right place for that.

Just to clarify my point two small issues, the conclusion of which MIGHT influence this page design thing:

a) I personally would NEVER mention the word "NEWS" (let alone latest news ..) in the title of a page that most likely will not be edited within the next 3 months.

b) concerning the menu:

What I would expect there:

- Home (aka welcome, and nothing to be said against some news being spread there. Even better if someone finds the time to remove the "news" word some 4 or 5 weeks after an item's first appearance.)

- documentation

- downloads

- help (holding FAQs, link to the forum, newbie tutorial on "HowTo search for relevant info")

Why not "Screenshots" - well, that's a very prominent link on the "documentation" page? Being linked to from the bottom right corner of the Welcoming screenshot, too (-> more screenshots)

Why not "Resources" - well, there's exactly 2 kinds of resources I can think of: documents to view/read, and downloadable files.
To give each of these a (ONE!) well structured and linked Table of Contents should make things easier to find. And the places to put those toc's: see above.

If many agree that this is too minimalistic, I'd sug*gest adding a "First Steps" section, which then really should be organized along the lines of what a newcomer with .....

Well, I'll stop here, continue elsewhere soon ...

Just one last aside: what finally triggered this rant, was this
Welcome page I realised:
Can anybody explain to me why the original authors of that wanted a "Home", a "Welcome", PLUS a "News" page?

Sorry, das musste mal gesagt werden.

Cheers
SoerenB


Back again ...



Edited 3 time(s). Last edit at 08/28/2010 09:51AM by SoerenB.

Options: ReplyQuote
Re: Website layout
Posted by: desga2
Date: August 28, 2010 01:21PM


I like this test2 much more than your first test. smiling smiley

K-Meleon in Spanish

Options: ReplyQuote
Re: Website layout
Posted by: jsnj
Date: August 28, 2010 03:56PM

Quote
SoerenB
a) I personally would NEVER mention the word "NEWS" (let alone latest news ..) in the title of a page that most likely will not be edited within the next 3 months.

Agreed. It wasn't like that originally. This was the front page.

Quote
SoerenB
Just one last aside: what finally triggered this rant, was this
Welcome page I realised:
Can anybody explain to me why the original authors of that wanted a "Home", a "Welcome", PLUS a "News" page?

I created the bullet style Welcome page many moons ago as an alternative to the paragraphed original wiki page that I think Ulf(developer pre v1.0) created. I never liked hunting through paragraphs for relevant links and the left-side green link section was not part of wiki to be edited. I'm glad that the site's being redesigned now. It's badly needed.


I'm very partial to this one smiling smiley Not surprising though since my entire desktop theme and KM skin is dark & black-based. Might be polarizing though. I think the younger generation tends to prefer darker themes, not sure about the rest. More than just the look, I also like the link structure at the top and the site search box. IMO, the page is complete at the download box. The stuff below it isn't needed and is provided at the links atop.



Edited 3 time(s). Last edit at 08/28/2010 04:27PM by jsnj.

Options: ReplyQuote
Re: Website layout
Posted by: JamesD
Date: August 28, 2010 07:40PM

Quote
disrupted
test2 [kmext.sourceforge.net]

I like the way the menu items wrap to two line when the screensize is narrow.

I have a little trouble with the dark stuff. On at least one menu item, I cannot tell the last dropdown item from a text item of the same color in the first paragraph.

Options: ReplyQuote
Re: Website layout
Posted by: disrupted
Date: August 28, 2010 08:25PM

i got the css menu from a free templates site, it's working beautifully..my menu wasn't working very well with old internet explorer's which doesn't support css menu lines, this one detects old ie and displays the same menu using jscript..all other browsers including ie7+ work without any js.

backwards compatibility is what got me started as doon suggested.. the original design has many problems with ie which i cant fix and got me started from scratch

ie5 failed to render properly:



the new one renders fine on both ie 6 and 5 and compatibility goes as far back as ie3 and netscape 2 without displaying any errors or crashes and display the site in text..all links are viewable and clickable

the dark theme can be easily changed with a css theme selector like in multipagine, so isn't really a problem if it does get approved

for testing only, i made a new logo similar to netscape's gecko (jungle kmeleon)
http://kmext.sourceforge.net/tests/k-pending2/k-index-n1.htm

source and more variations there:
http://kmext.sourceforge.net/tests/k-pending2/

Options: ReplyQuote
Re: Website layout
Posted by: panzer
Date: September 02, 2010 09:20AM

To the right of download (latest release) it should be download (latest portable release). No discrimination, please. grinning smiley

Options: ReplyQuote
Re: Website layout
Posted by: panzer
Date: October 15, 2010 05:46PM

New site should be (or have):

- no scroll page (I do not think this is possible)
- 1 sentence explaining what is Km
- one screenshot (or just link on top to screenshots)
- 5 or less facts why should anyone use Km and not some other browser (beside its speed it should have bold link to latest speed tests, made by some respected member of forum)
- huge download "button"
- under it small link to all old version
- link to Kmext should be on the first page (on top)
- it should have some mild version of green color than we have now
- more information, latest news should go away from first page. Just put links on top of the page. Or just publish one latest news.

It should be something like this page:
http://bvckup.com/
but with less facts



Edited 2 time(s). Last edit at 10/15/2010 05:53PM by panzer.

Options: ReplyQuote
Pages: Previous12
Current Page: 2 of 2


K-Meleon forum is powered by Phorum.