Jump to content

Sky Slate Blueberry Blackcurrant Watermelon Strawberry Orange Banana Apple Emerald Chocolate
Photo

New Website (Getting Close)


  • Please log in to reply
40 replies to this topic
MacroMan!
  • Members
  • 604 posts
  • Last active: Mar 20 2012 11:40 AM
  • Joined: 28 Aug 2009
Hi everyone,

I'm getting fairly close to a working model. The Content Management System (cms) is operational (if still a little buggy) and can produce pages. The homepage and related pages in the new design are all created by the cms.

<!-- m -->http://test.autohotkey.com/<!-- m -->

You will notice some changes from the previous design.

Due to an overwhelming response to my last post about variable vs fixed with design:
[*:20cmqk4d]The whole website is skin-able. That is, you can change the look and feel of the website at the click of a button.[*:20cmqk4d]The default skin is variable width, but can be changed using the link in the bottom right hand corner 'Change Style'.[*:20cmqk4d]The skins are now just called 'Variable' and 'Fixed'.[*:20cmqk4d]You can even load the pages with your own CSS file as the style.[*:20cmqk4d]You are encouraged to make you own skins (CSS) and send them to me for inclusion (if they are good enough).Other Information:[*:20cmqk4d]A lot of the links are broken, simply because I haven't created the pages yet, but about 20 or so pages are created at the moment.[*:20cmqk4d]There is no command list on the command pages as of yet, but I am working on it.[*:20cmqk4d]The background colour of the code segments is much nicer now: <!-- m -->http://test.autohotk...ds/AutoTrim.htm<!-- m -->[*:20cmqk4d]There will be User Contributed Code (ucc) sections on each command page. At the moment it just shows the text: 'User contributed code goes here.'[*:20cmqk4d]How the ucc will work in detail is out of the scope of this Topic, but I'll post a Topic about that when the time is right.Now I'm looking for some feedback about the design and how it can be improved. All feedback welcome and encouraged.

For another day
David


EDITS:

I have taken all your feedback on board and here is my current ToDo list for the design (in no particular order):

See the Current ToDo list here: <!-- m -->http://www.test.auto...ey.com/todo.php<!-- m -->

Any thing anyone else can think of, let me know.

MasterFocus
  • Moderators
  • 4322 posts
  • Last active:
  • Joined: 08 Apr 2009
1) Please create a "Tutorial" submenu beneath "Quick Start" for the Quick Start Tutorial itself. People new to AHK and the website may suppose "Documentation" is the Quick Start Tutorial, since it's highlighted when "Quick Start" parent menu is clicked.

2) When trying to read commented pieces of code, the actual color/contrast hurts my eyes. :(

MacroMan!
  • Members
  • 604 posts
  • Last active: Mar 20 2012 11:40 AM
  • Joined: 28 Aug 2009
Does it hurt your eyes on the current documentation?

It's exactely the same colour that is used in the current documentation. Compare:
<!-- m -->http://www.autohotke...ds/AutoTrim.htm<!-- m -->
<!-- m -->http://test.autohotk...ds/AutoTrim.htm<!-- m -->

David

EDIT:
Hmm, the font is a bit smaller on the new design which could be causing you to strain your eyes. Increase in the font size is now in my ToDo list.

MasterFocus
  • Moderators
  • 4322 posts
  • Last active:
  • Joined: 08 Apr 2009
Really?! The words definitely look brighter... Maybe it's the contrast.

Also, I have just realized the Quick Start / Support menu part is messy. You could leave only Support as a parent menu and put Quick Start as its first submenu, before Documentation.

Eedis
  • Members
  • 1774 posts
  • Last active: Feb 07 2014 01:11 AM
  • Joined: 12 Jun 2009
I think that the link to the forum should be very easy to find. I do not like the fact that it's under the Quick Start submenu. To me, when I go to a new site like this, I only look at the main page. If I saw no forum link, I'd think that there is no forum and probably look no further. Just a suggestion.

MacroMan!
  • Members
  • 604 posts
  • Last active: Mar 20 2012 11:40 AM
  • Joined: 28 Aug 2009
Having a Quick Start link that is instantly visible has been decided since inception and is important to have it obviously placed. I will however make the Quick Start page have it's own menu item highlighted when loaded rather than the support->documentation menu items.

Regarding the forum link. I was thinking maybe condense the flags down into a single link and have the forum link on the top menu. But then it won't be obvious for foreign language speakers that there are translations available. It's a tricky one to balance.

David

sumon
  • Moderators
  • 1314 posts
  • Last active: Jul 06 2014 06:26 PM
  • Joined: 18 May 2010

Having a Quick Start link that is instantly visible has been decided since inception and is important to have it obviously placed. I will however make the Quick Start page have it's own menu item highlighted when loaded rather than the support->documentation menu items.

Regarding the forum link. I was thinking maybe condense the flags down into a single link and have the forum link on the top menu. But then it won't be obvious for foreign language speakers that there are translations available. It's a tricky one to balance.

David


I said that some time ago, I also dislike the multiple flags due to the colors. It is no problem at all condensing them into one flag - either make it the "Current language" (with a dropdown or similar for the other choices - then you can also have the names of the languages, for those who are not familiar with world geography) or multiculturally - some kind of mishmashed flag. I can make a suggestion if you want.

I also agree that FORUM is one of the top #1 most important links, no doubt. (Pun intended)

Edit: Really, really good job this far! And it's now close. I say this as a web designer (hobbyist).

  • Guests
  • Last active:
  • Joined: --

It's exactely the same colour that is used in the current documentation. Compare:
<!-- m -->http://www.autohotke...ds/AutoTrim.htm<!-- m -->
<!-- m -->http://test.autohotk...ds/AutoTrim.htm<!-- m -->

...no it's not...
AutoTrim.htm - ███ #00A000 (Green) - CSS: .CodeCom { color: #00A000 }
AutoTrim.htm - ███ #3EDB3E (Bright M-Fing Green) - CSS: .CodeCom { color: #3EDB3E }...also the code isn't using a fixed-width font. Granted, the old (current) isn't either, but I think it should be.

Also, the current docs don't waste space with a site header, I think you should make some option for that, we want to read the docs, not see the same (really huge) site header over & over. I just used DOM Inspector to remove #layout_top & #navigation & then the docs look much better! (nit: why is #navigation under #layout_body, when it's really part of the "header")

For example...load any new doc page & run this JavaScript on it...

javascript: document.getElementById('layout_top').style.display = document.getElementById('navigation').style.display = 'none'; void(0)
...much less wasted space & easier to compare with current docs.

Hmm, the font is a bit smaller...

...ahem, a *LOT*...smaller.

Increase in the font size is now in my ToDo list.

...thank God, I hate websites with 1px fonts.

One more thing: the example in the Parameters table for AutoTrim has a large space between the 2 lines of the example, this large space is not present on the current/old docs.

guest3456
  • Members
  • 1669 posts
  • Last active: Jul 11 2014 03:37 PM
  • Joined: 10 Mar 2011

Does it hurt your eyes on the current documentation?

It's exactely the same colour that is used in the current documentation. Compare:
<!-- m -->http://www.autohotke...ds/AutoTrim.htm<!-- m -->
<!-- m -->http://test.autohotk...ds/AutoTrim.htm<!-- m -->

David

EDIT:
Hmm, the font is a bit smaller on the new design which could be causing you to strain your eyes. Increase in the font size is now in my ToDo list.


yeah its harder to read the new code for sure. probably font size issue

tidbit
  • Administrators
  • 2595 posts
  • Last active: Yesterday, 09:40 PM
  • Joined: 09 Mar 2008
I think the syntax box on the top of the commands needs to be a different color then the other code and samples.
Also a bigger font for the code samples. Not everyone has good eyes :wink: (Yay force minimum font size in Opera!) and it seems like a waste to have all that vertical space. the current font/size seems just fine to me.

otherwise pretty good so far :)

tank
  • Moderators
  • 4227 posts
  • Last active: Today, 12:09 AM
  • Joined: 21 Dec 2007
the page loads and then V E R Y S L O W L Y applies the CSS and images??

Uberi
  • Moderators
  • 1118 posts
  • Last active: Apr 04 2014 01:20 AM
  • Joined: 23 Aug 2010
The site's CSS does not seem to be applied if JS is disabled.

Other than that, the color scheme looks nice, a lot more modern, but this rule's color is slightly too bright in my opinion:

li.current_page_parent a {
background: url('img/nav1_arrow.png') no-repeat center bottom;
color: #ADE7F6; <- This color
}


Edit: Oh yeah, I'd recommend Courier New for the code samples, or some other monospace font.

MasterFocus
  • Moderators
  • 4322 posts
  • Last active:
  • Joined: 08 Apr 2009
Possibly relevant:
- <!-- m -->http://www.webpagetest.org/<!-- m -->
- <!-- m -->http://pagespeed.googlelabs.com/<!-- m -->

randomLurker
  • Guests
  • Last active:
  • Joined: --
+1 to increase font size for code samples.

I also agree would be good to use fixed-width font for code. It makes it so much easier to differentiate an actual space from font kerning.

It's too bad that almost the only fixed-width font that is loaded on almost everybody's pc is Courier New. It seems too light to me unless I set it to bold. I have poor eyesight, and prefer stronger fonts like Lucida Console or Bitstream Vera.

just my $.02

  • Guests
  • Last active:
  • Joined: --

It's too bad that almost the only fixed-width font that is loaded on almost everybody's pc is Courier New.

...multiple fonts can be listed, for example...
Andale Mono, Lucida Console, Bitstream Vera Sans Mono, Fixedsys, Courier New, monospace...each browser will take the left-most specified font that it has available. However, on top of a default list of fonts, it'd be nice if we could set a cookie pref to override the font we want in the docs code examples (might already be possible with that "Change Style" button, tho).

Also, by "Bitstream Vera" did you mean "Bitstream Vera Sans Mono"? I currently use Fixedsys in Notepad2 for coding (& would probably want the same font in the docs code examples), but I've been meaning to install Andale Mono & see if it's as good as alot of people on the forum (a few years ago) were saying it was.