CSS modifications/ suggestion

basilmaven · 24 Dec 2001, 09:55 AM

I've been tinkering with the FM Style Sheets for a couple of hours and it's kinda fun, but also quite laborious even in a WYSIWYG editor. There are a LOT

of selectors for say, the Mailbox page. More than I would have thought are needed, but hey, I'm not a web designer

If customization by users is a serious consideration for future development, it would help to um, simplify if possible...

Just a thought...

Jeremy Howard · 24 Dec 2001, 10:12 AM

Tenekun (the guy you wrote the nice default style sheet) has been looking into exactly this--see this thread: http://www.emaildiscussions.com/...&threadid=1487

Maybe you'd be able to help him out. BTW, you'll see one of the links in that thread is this handy screen that he created: http://www.nukenet.com/mailcss.html

If you've got any suggestions for how we should change what class we use for what widgets, please just ask and we'll do it.

Glad to see you're checking out the style-sheets--good on you!

Hopefully you'll find it an interesting challenge and will come up with some good stuff.

basilmaven · 24 Dec 2001, 10:38 AM

An interesting and labour intensive thread! I can see much good work has been done already. I'll keep tinkering for kicks and see what develops...

**psalzer** · 24 Dec 2001, 10:56 AM

I'd like to suggest that there be a thread with a sticky for people to post stylesheets they'd like to share. I figure you can only use just so many choices for the interface, but people could download them and change their custom.css to suit themselves even if they don't do any kind of web design at all. Also they're a big help to us who aren't as good with css as others but want to create our own anyway. I've searched for and downloaded infiniteblackness because I love the styles, but at my age a light on dark interface isn't easy to read - it's just something that happens to most people's eyes eventually. So I'm hoping to do something with it with lighter colors when I have the chance, but the person who did it is lots better at css than I am. I hope that's all right with the author. If not, I won't do it of course. But anyway, I just thought being able to see any of them that come along, whether you use them as a selection or not would be very interesting.

basilmaven · 24 Dec 2001, 11:09 AM

Good call. Having a specific location for a CSS showcase/demo is a nice idea. As you say, there's a limit to the useful variations you can get, but at this stage it would be nice to have a central repository to get everyone on the same page, so to speak...

Jeremy Howard · 24 Dec 2001, 11:29 AM

It's a good idea, but I don't think a sticky is the best way to achieve it. Let me think about whether I can come up with something. In the meantime just email them to webmasterATfastmailDOTfm.

tenekun · 24 Dec 2001, 12:59 PM

I am indeed still working on the blanket CSS sheet that we can fill up with variables. It is slow going, just because it's hard to determine where a certain colour should be used again, and where a completely new variable should be used. It's really confusing, because there are so many things to be coustomised, but we don't want users to have to choose a value for every single variable in the entire sheet. I counted, and there are exactly 154 different places to enter a value - we certainly don't want the user to have to enter 154 different options. Many of these can be re-used; for example, the header background colour can be used whenever we need a dark background (or if the header background is light, whenever we need a light background). It's hard to decide.

I'll try to finish it soon - but I am also in the middle of converting my website's UBB boards to VBulletin - since there is no conversion script for the lite version, I am copying and pasting data manually into phpMyAdmin (if anyone does have a script for this, it would be greatly appreciated!).

I noticed the "Preview" is gone from Fastmail's main page... Are we out of preview? If so, are we planning on replacing the yellow any time soon?

--Brandon

Jeremy Howard · 24 Dec 2001, 03:05 PM

We're kinda out of preview. In the sense that the platform is pretty stable now, we're out of preview. In the sense that we're still not charging, it's still kind of a preview... The terms that are now on the About screen are pretty close to finalised, so I decided that the 'Preview' tag was unnecessary (and I know from email that it was scaring a lot of people off, because they thought that meant we could disappear any day...)

Yes, I'd like to replace the yellow on the front page. For new users the Professional Blue is already the default (and everyone who hadn't changed from the default had it changed for them a couple of weeks ago--apparently most people hadn't noticed the Styles option, because I got a lot of "hey, love the new look" email!)

I just need a few spare hours to check how all the docs, about, signup, and front page look. Also, I was waiting to hear back from you about whether you want to make the 'Welcome to FastMail.FM' an H1, and create an appropriate H1 style for it.

BTW, everytime someone said 'love the new look' I told them that I didn't write it, and that they should add a post to the forum thread saying what they thought. I don't think anyone got around to that, so let me summarise all the feedback I got by saying "GOOD JOB"!

**psalzer** · 24 Dec 2001, 09:53 PM

Hmmm..in IE professional blue was the default when I got the account. At the moment I have it set to custom.css. Last night I upgraded Netscape to 6.2 which I guess netscape doesn't see but it didn't go to the default, but instead to the yellows. I guess that's just netscape's thing, though.

Jeremy Howard · 25 Dec 2001, 05:48 AM

On a browser that has a problem with the style-sheet, it uses the colors in the HTML itself, which is the yellows. We haven't got around to changing those colors.

tenekun · 25 Dec 2001, 01:18 PM

Quote:

Originally posted by Jeremy Howard
Also, I was waiting to hear back from you about whether you want to make the 'Welcome to FastMail.FM' an H1, and create an appropriate H1 style for it.

So far, I think that using the HdrDsc to define the colour for the title as it does now looks just fine - however, I _would_ like to make it something a bit different or special. I have no good ideas at the moment, but I'll keep playing with it to see what I can do. If anyone has any ideas, please let me know. The best ideas I have had so far are viewable here (with white space) and here (without white space). Note: I changes the HTML in the main page quite a bit - the "welcome" header table was changed substantially (I love rowspan and colspan), and I encourage anyone who is interested to view the source and compare the welcome line to that of Fastmail's current page. I updated the stylesheet to include an H4 element, and to have no margins on the H1 or H4 elements. Also, the stylesheet still needs to be re-uploaded in order to fix the footer links not being bold problem. Thanks.

Hope everyone has a safe and merry Christmas, even if you are not Christian ;-)

--Brandon

Jeremy Howard · 25 Dec 2001, 03:17 PM

Thanks for those mockups--I think they're very smart. I wonder about a compromise between the 2 versions--how about just a top and bottom border to join the left cell to the right cell of the top row (the whitespace version looks a bit empty, the non-whitespace version looks a bit heavy, to my eyes).

I'm inclined to use a serif font for the text, for the reasons I've discussed before.

I meant to ask earlier about the bold footer hyperlinks idea. Why do we want this? It made sense when they weren't underlined, but I'm not sure if it makes sense now... I'd be interested to hear comments on this, since I'm not convinced either way.

I think that the 'Signup' top-right link should be bold, but the 'Help' should not be, to make it stand out.

I like the idea of having a tagline under the header ("Fastest E-Mail on the Planet"). Anyone else got suggestions for a suitable tag-line? The meta-description tag in our HTML has been "The fastest web-based email in the universe" for a couple of years--I guess Brandon's conservatism that there might be faster systems on other planets is acceptable...

BTW, Rob and I are talking about greatly simplifying the right-hand side text. Maybe just:

Quote:

Fast powerful reliable email, with both free and paid options.

See what our users say
Learn about all the powerful features
Review our prices and levels of membership

Or just sign up now!

...or something like that. The current screen is a bit too busy. By the way, the 'see what our users say' hyperlink will point to a page of customer quotes. If any has got any nice comments that we might be able to add to this page, please add a post to the 'testimonials' thread at the top of the forum so that we can add it to our page!

tenekun · 25 Dec 2001, 11:34 PM

Quote:

Originally posted by Jeremy Howard
Thanks for those mockups--I think they're very smart. I wonder about a compromise between the 2 versions--how about just a top and bottom border to join the left cell to the right cell of the top row (the whitespace version looks a bit empty, the non-whitespace version looks a bit heavy, to my eyes).

This sounds like a good idea to me - i'll have to try it and take a look.

Quote:

I'm inclined to use a serif font for the text, for the reasons I've discussed before.

Do you mean for the title or for the page text? I think the page text certainly should be serif - if I didn't put that in, it was just an oversight.

Quote:

I meant to ask earlier about the bold footer hyperlinks idea. Why do we want this? It made sense when they weren't underlined, but I'm not sure if it makes sense now... I'd be interested to hear comments on this, since I'm not convinced either way.

It's just that the active and hover links _are_ bold now, so its either make them normal weight or make the normal footer links bold. I personally like the links bold, because the links in the header are bold (and the header looks just like the footer, in terms of style), and I think it helps them stand out from the text more than with just an underline, so that people who can't see that well will be able toi find them more easily. It's up to you, but my preference is bold.

Quote:

I think that the 'Signup' top-right link should be bold, but the 'Help' should not be, to make it stand out.

That's up to you - I only changed the main page's HTML enough to make the tables look right, I didn't play with any other code.

Quote:

I like the idea of having a tagline under the header ("Fastest E-Mail on the Planet"). Anyone else got suggestions for a suitable tag-line?

I just thought of something off the top of my head, because I needed something to put there. Feel free to put whatever you like there.

--Brandon <-- A true geek, working on code on Christmas... :-)

neerav · 26 Dec 2001, 01:42 AM

Quote:

Originally posted by Jeremy Howard
I like the idea of having a tagline under the header ("Fastest E-Mail on the Planet"). Anyone else got suggestions for a suitable tag-line? The meta-description tag in our HTML has been "The fastest web-based email in the universe" for a couple of years--I guess Brandon's conservatism that there might be faster systems on other planets is acceptable...

I liked fastest in the Universe too, but I also agree with Brandon. However, we can be sure Earth is the only planet in our solar system with intellegent life, but I don't see "Fastest email in the solar system" as very catchy.

Quote:

BTW, Rob and I are talking about greatly simplifying the right-hand side text. Maybe just:...or something like that. The current screen is a bit too busy.

I agree that the right side is busy. On the other hand, since this screen is the first anyone sees of fastmail, there should be some mention of the most catchy feature for the average user: no graphics, no ads, no taglines.

How about reversing the left and right sides? The sign in screen looks "backwards". It would automatically look less busy. Then again, it could be the unduly influence of all of the other email providers.

--Neerav

***Edwin*** · 26 Dec 2001, 07:00 AM

I think Jeremy's idea of shortening the info on the right is a good one, especially since some of the features listed are/will be only for people who pay for their accounts. Causes too much confusion with people saying "But it was on your front page...!" when it comes time to pay for things, otherwise.

24 Dec 2001, 09:55 AM	#1
basilmaven Senior Member Join Date: Dec 2001 Posts: 196	CSS modifications/ suggestion I've been tinkering with the FM Style Sheets for a couple of hours and it's kinda fun, but also quite laborious even in a WYSIWYG editor. There are a LOT of selectors for say, the Mailbox page. More than I would have thought are needed, but hey, I'm not a web designer If customization by users is a serious consideration for future development, it would help to um, simplify if possible... Just a thought...

24 Dec 2001, 10:12 AM	#2
Jeremy Howard Ultimate Contributor Join Date: Sep 2001 Location: Australia Posts: 11,501	Tenekun (the guy you wrote the nice default style sheet) has been looking into exactly this--see this thread: http://www.emaildiscussions.com/...&threadid=1487 Maybe you'd be able to help him out. BTW, you'll see one of the links in that thread is this handy screen that he created: http://www.nukenet.com/mailcss.html If you've got any suggestions for how we should change what class we use for what widgets, please just ask and we'll do it. Glad to see you're checking out the style-sheets--good on you! Hopefully you'll find it an interesting challenge and will come up with some good stuff.

24 Dec 2001, 10:38 AM	#3
basilmaven Senior Member Join Date: Dec 2001 Posts: 196	An interesting and labour intensive thread! I can see much good work has been done already. I'll keep tinkering for kicks and see what develops...

24 Dec 2001, 10:56 AM	#4
psalzer Moderator Join Date: Dec 2001 Location: Long Island, NY Posts: 2,654	I'd like to suggest that there be a thread with a sticky for people to post stylesheets they'd like to share. I figure you can only use just so many choices for the interface, but people could download them and change their custom.css to suit themselves even if they don't do any kind of web design at all. Also they're a big help to us who aren't as good with css as others but want to create our own anyway. I've searched for and downloaded infiniteblackness because I love the styles, but at my age a light on dark interface isn't easy to read - it's just something that happens to most people's eyes eventually. So I'm hoping to do something with it with lighter colors when I have the chance, but the person who did it is lots better at css than I am. I hope that's all right with the author. If not, I won't do it of course. But anyway, I just thought being able to see any of them that come along, whether you use them as a selection or not would be very interesting.

24 Dec 2001, 11:09 AM	#5
basilmaven Senior Member Join Date: Dec 2001 Posts: 196	Good call. Having a specific location for a CSS showcase/demo is a nice idea. As you say, there's a limit to the useful variations you can get, but at this stage it would be nice to have a central repository to get everyone on the same page, so to speak...

24 Dec 2001, 11:29 AM	#6
Jeremy Howard Ultimate Contributor Join Date: Sep 2001 Location: Australia Posts: 11,501	It's a good idea, but I don't think a sticky is the best way to achieve it. Let me think about whether I can come up with something. In the meantime just email them to webmasterATfastmailDOTfm.

24 Dec 2001, 12:59 PM	#7
tenekun Member Join Date: Dec 2001 Location: Off the deep end Posts: 87	I am indeed still working on the blanket CSS sheet that we can fill up with variables. It is slow going, just because it's hard to determine where a certain colour should be used again, and where a completely new variable should be used. It's really confusing, because there are so many things to be coustomised, but we don't want users to have to choose a value for every single variable in the entire sheet. I counted, and there are exactly 154 different places to enter a value - we certainly don't want the user to have to enter 154 different options. Many of these can be re-used; for example, the header background colour can be used whenever we need a dark background (or if the header background is light, whenever we need a light background). It's hard to decide. I'll try to finish it soon - but I am also in the middle of converting my website's UBB boards to VBulletin - since there is no conversion script for the lite version, I am copying and pasting data manually into phpMyAdmin (if anyone does have a script for this, it would be greatly appreciated!). I noticed the "Preview" is gone from Fastmail's main page... Are we out of preview? If so, are we planning on replacing the yellow any time soon? --Brandon

24 Dec 2001, 03:05 PM	#8
Jeremy Howard Ultimate Contributor Join Date: Sep 2001 Location: Australia Posts: 11,501	We're kinda out of preview. In the sense that the platform is pretty stable now, we're out of preview. In the sense that we're still not charging, it's still kind of a preview... The terms that are now on the About screen are pretty close to finalised, so I decided that the 'Preview' tag was unnecessary (and I know from email that it was scaring a lot of people off, because they thought that meant we could disappear any day...) Yes, I'd like to replace the yellow on the front page. For new users the Professional Blue is already the default (and everyone who hadn't changed from the default had it changed for them a couple of weeks ago--apparently most people hadn't noticed the Styles option, because I got a lot of "hey, love the new look" email!) I just need a few spare hours to check how all the docs, about, signup, and front page look. Also, I was waiting to hear back from you about whether you want to make the 'Welcome to FastMail.FM' an H1, and create an appropriate H1 style for it. BTW, everytime someone said 'love the new look' I told them that I didn't write it, and that they should add a post to the forum thread saying what they thought. I don't think anyone got around to that, so let me summarise all the feedback I got by saying "GOOD JOB"!

24 Dec 2001, 09:53 PM	#9
psalzer Moderator Join Date: Dec 2001 Location: Long Island, NY Posts: 2,654	Hmmm..in IE professional blue was the default when I got the account. At the moment I have it set to custom.css. Last night I upgraded Netscape to 6.2 which I guess netscape doesn't see but it didn't go to the default, but instead to the yellows. I guess that's just netscape's thing, though.

25 Dec 2001, 05:48 AM	#10
Jeremy Howard Ultimate Contributor Join Date: Sep 2001 Location: Australia Posts: 11,501	On a browser that has a problem with the style-sheet, it uses the colors in the HTML itself, which is the yellows. We haven't got around to changing those colors.

26 Dec 2001, 07:00 AM	#15
*Edwin* Administrator Join Date: Aug 2001 Location: UK Posts: 3,118	I think Jeremy's idea of shortening the info on the right is a good one, especially since some of the features listed are/will be only for people who pay for their accounts. Causes too much confusion with people saying "But it was on your front page...!" when it comes time to pay for things, otherwise.