Emerald Editor Discussion
August 23, 2017, 01:38:54 am *
Welcome, Guest. Please login or register.
Did you miss your activation email?

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
Pages: 1 [2] 3
  Print  
Author Topic: Website Design  (Read 29798 times)
0 Members and 1 Guest are viewing this topic.
Arantor
Site Administrator
Administrator
Master Jeweller
*****
Posts: 618



« Reply #15 on: May 20, 2006, 04:53:30 pm »

I think I know who that someone is... Cheesy If anyone has any better ideas about the HTML and CSS than what I've already done, please let me know. Meanwhile I'm still wrestling with a bash script to update (I haven't checked it in yet)

On PNG images: IE 5.x from experience either fails to load PNGs entirely, and certainly doesn't support transparency. IE seems to be variable with transparent or partially transparent PNGs, so I took the easiest solution and applied it that way, as a non transparent image.

On forums: I originally picked PunBB to be a small, fast forum - I wasn't looking particularly for masses of features, but a couple that would have been nice aren't available (e.g. polls) I know that mods are available but I haven't had much success with the ones I've tried. I'll have a look into SMF shortly (before my holiday) and probably aim to implement shortly after I get back.
Logged

"Cleverly disguised as a responsible adult!"
Zhrakkan
Official Mascot!
Beta Testers
Gem Cutter
***
Posts: 177



WWW
« Reply #16 on: May 20, 2006, 05:26:54 pm »

I know I have used phpbb and vb before...
Logged

News Manager and Unofficial Mascot
Join the Emerald Editor Project - Message Me!
Emerald Editor - "A Jewel of an Editor"
-----by the way, that name is pronounced "Za-Rack-In"
Feldon
Gem Cutter
****
Posts: 106


« Reply #17 on: May 20, 2006, 07:37:04 pm »

Re the main page...

These are just some comments I have based on my web design experience.

a) The banner should be smaller in terms of height.  At 179px it takes up about a third of the height in 800x600 or even 1024x768 resolution.

b) Add a bit of space below the footer.

c) CSS has some nifty shortcuts, so feel free to learn/use them.

For example:
Code:
.active { border-top: 2px solid #4CCE54; border-left: 2px solid #4CCE54; border-right: 2px solid #4CCE54; border-bottom: none; padding-top: 2px; padding-left:5px; padding-right:5px; padding-bottom: 7px; background-color:white; color:black; }
could be replaced with
Code:
.active { border: 2px solid #4CCE54; border-bottom: none; padding: 2px 5px 7px; background-color: white; color: black; }
(I can't rememer but 'border-bottom:none' might not work and have to be 'border-bottom-width:0px'.)

The way padding works is like this:
-padding:1px will apply 1px padding to all sides
-padding:1px 2px will apply 1px padding to top/bottom and 2px padding to right/left
-padding:1px 2px 3px will apply 1px padding to top, 2px padding to right/left and 3px padding to bottom
-padding:1px 2px 3px 4px will apply 1px padding to top, 2px padding to right, 3px padding to bottom and 4px padding to left.

Remember, on every page the css file gets sent to the user and so the shorter the file, the faster loading the page will be and the less load on the server.

d) There are lots of arguments about what css sizing to use.  I wouldn't use 'pt'.  I'd replace it with 'em' instead.

e) This is another argument.  If you can, use HTML strict, instead of transitional.  I don't think we're using any html elements that aren't part of strict, nor do I think we'll be doing anything that would dramatically change the html on the pages (i.e. if you were allowing random people to dynamically update content or something).

f) This is somewhat related to e, but you should be able to replace all the width="", height="" and align="" with similar CSS.  Take this code snippet for example:
Code:
You should be able to add 'text-align: center;' to either #headerimg or #header and achieve the same effect as align="center".  In fact, does this eliminate the need for having a
??  Also, adding '#header img { width: 397px; height: 197px; }' (yes, there is a space between #header and img there) should have the same effect as adding the width and height entries to the html.

g) Every website should have a robots.txt file.  What this does is allows you to allow/deny various web crawlers (assuming the particular crawler obeys the command, obviously bad-bots won't).  I recommend this one here: http://tc.paing.com/robots.txt .  Just put it into the first public directory.

h) You may have to apply the css to both html and body.  The reason is because certain browsers get confused otherwise.  If you view the page in Opera for example you'll notice that there is some padding showing up to the left and right of the page.
Logged
Arantor
Site Administrator
Administrator
Master Jeweller
*****
Posts: 618



« Reply #18 on: May 20, 2006, 11:30:40 pm »

Thanks for the feedback.

To answer those:

a) I was simply going on the original work by Nick, but having looked at it I think this will be a good idea. I can make a gradient myself in GIMP and merge in the transparent logo we already have.

b) Do you mean below the main page content and above the line for the footer (and copyright), or do you mean below the copyright notice?

c) In my limited CSS experience, I've found that shortcuts don't always get used properly by some browsers (mentioning no names of course!). I don't see why I shouldn't cut the CSS down, though, I just hacked it together very quickly, so there will be room for optimisation.

There are further issues with caching of CSS files - some browsers cache them unless the header suggests they have been modified (in the same way a static HTML file or image might be cached), while some download it every time. One thing I have noticed, though, is if an image is specified with an IMG tag (more on this later), it can be cached properly by the browser, while if trigged by a CSS file, the browser will tend to reload it each time and each page. (This behaviour seems to be true of both Internet Explorer and Firefox, judging by the access logs)

d) pt is the more consistent of the sizes (em, while more common, is actually dependent on the font being used, since it is the width of a lower-case M, while pt is a point, being 1/72 of an inch)

e) Can do. I just inherited code from my other project which involves (potentially) some HTML mangling, hence the Transitional DTD. There was also some talk of opening the source up to be in the SVN tree, so in theory several people could modify it.

f) There was a reason for that, actually.

#header contains the background for the header, i.e. the gradient, as background-image, while #headerimg concentrates solely on the logo image itself. I couldn't see earlier how to add in the image any other way, and I just figured I should include the width/height there - it didn't occur to me to include it in the CSS. As for alignment, text-align doesn't seem to affect it, as strictly speaking IMG is not a block level element. I've only just remembered that you can tell it to be treated as one, so in theory yes I could control it via the stylesheet.

g) I just never got round to putting one on EE's main site. It's ironic really, as having written a robot myself, I should have remembered sooner to put one in (The Voices of Many does parse robots.txt itself) There is one on the SVN site, though.

If we have any trouble from other robots hammering the server, I'll know about it and can put things in place to stop it happening (either at ipchains/iptables level, or filtering at Apache's level)

h) Strictly speaking this should not be required since the HTML tag is not intended to have markup applied to it, it should (especially with XHTML) be a container tag only, for semantic rather than visual processing. (I'm going on Firefox and IE behaviours, here, I haven't used Opera for a very long time, so I'd largely forgotten about it as a contender, to be honest) It's not a huge change so I can implement that very quickly.
Logged

"Cleverly disguised as a responsible adult!"
mytreo
Miner
**
Posts: 35


« Reply #19 on: May 21, 2006, 12:11:09 am »

Looking good! Can we have the same header in the forum please?

I'm glad you will consider the forum change, punBB is a nice software but limited.

(PS - the middle bit of the "e" in the logo is white when it should be transparent.)
Logged
Arantor
Site Administrator
Administrator
Master Jeweller
*****
Posts: 618



« Reply #20 on: May 21, 2006, 12:18:55 am »

Since my last post:

a) Sorted. It's now 100 pixels high.

b) I have increased the border between the "footer" and the copyright/slogan. It did look a bit cluttered, but please let me know if this needs to be altered.

c) I have done this now, but the border one throws a warning on the validation, since border-bottom is defined under border, then redefined. It is still valid CSS, however. I did try putting it as one massive border definition but it failed validation.

d) Everything is currently specified either in pt for general things, or px where images etc are used.

e) I have altered the limited source to be XHTML 1.0 Strict. /bugs and /forum haven't been touched, nor have I touched the SVN browser at all (since I applied the original style to the ViewVC templates, and that's not a quick job to rewrite - although it does need to be done, and soon.

f) I have altered it and it works better now. If it can be improved, please let me know.

g) Done.

h) Done.
Logged

"Cleverly disguised as a responsible adult!"
Arantor
Site Administrator
Administrator
Master Jeweller
*****
Posts: 618



« Reply #21 on: May 21, 2006, 12:23:06 am »

I've had a chance to look at SMF now, and it is doable, although converting posts will be a minor issue. When I have installed it, I will of course apply the theme to it.

As for the middle bit of the 'e', it looks white but is pale green, from the gradient, I couldn't find any where I'd missed it. I know it is a bit off, but the only transparent image I have, wasn't antialiased, so I took it from the previous logo on the white background, where it was antialiased, and pasted it in.

Despite the border being slightly off, it doesn't look too bad.
Logged

"Cleverly disguised as a responsible adult!"
Nick
Miner
**
Posts: 37



« Reply #22 on: May 21, 2006, 12:53:45 pm »

Ok, I've had a bit more time to play with the code, based on what Pete had come up with, this is how I think it should be :

deep header or shallow header

Even though it does take up a lot of space at lower resolutions (Stats say that only 1/5 users are still viewing at 800x600), I really like the feeling of space the deep header provides.

It's not a wasteful, it's an efficient use of blank space! Wink

If the header is to be smaller then I think it should be closer to the second template I put up, using the slightly smaller logo.

Sorry I wasn't too keen on the emeralds as bullets, I think it's cute but that the effect wears off quickly...

Apart from the header and the padding space for the main content, ALL sizes are in em to allow full scalability by the browser and by a "master" font-size in the 2nd line of the CSS. The main content padding is set in %, again: for better scalability.

I've reduced the overall width of the page because long lines of text are harder to read. In fact, I would even consider reducing the width a tad more.

I've also changed the HTML in places but nothing drastic, just a few bits and pieces in the interest of semantics. ie: taking the footer out of the main content div, using H1 as the top-level header, cutting down some of the class names...

Checks out fine on Firefox & IE6, haven't tried any other browsers or validated the HTML/CSS.
Logged
Arantor
Site Administrator
Administrator
Master Jeweller
*****
Posts: 618



« Reply #23 on: May 21, 2006, 01:04:19 pm »

Looks good to me. I just liked the extra green line around the black menu, though I don't know how many people noticed...

Space is one of those things that people will always debate over - what looks cluttered to one person will look spare to another. I think the about page, currently, has the best balance of style - it's not too cluttered, nor too spare, but that's my opinion. On my 1280x1024 screen, the second template looks about right in terms of the height of screen, but the logo feels a bit small in comparison. Thoughts, anyone?

The bullets as emeralds is cute (and not quite right on IE6, but we'll gloss over that), and personally I like it. If, however, the common consensus is to remove it, it's certainly doable. I just thought it was cute, appropriate and a little distinctive.

Some of the semantics were a bit of laziness on my part - by putting the footer in the main div, it made it fit within the brought-in margins.

To be honest, graphic design/HTML isn't my thing, the behind-the-scenes programming is more me.

When we have a website template we can work with that everyone has pronounced "good" (and I'm happy to go with the majority, I'm simply coding simply to get it there and functional - tidying it up was always second the list to getting it running), I'll make sure it's properly implemented, validated XHTML/CSS and then it'll get checked into the SVN. I know I've said this several times, but I'd rather have the right stuff in the SVN to start with - then check it out to the web-accessible tree.
Logged

"Cleverly disguised as a responsible adult!"
Nick
Miner
**
Posts: 37



« Reply #24 on: May 21, 2006, 02:25:36 pm »

Quote from: Arantor
Looks good to me. I just liked the extra green line around the black menu, though I don't know how many people noticed...
Sorry, I didn't like that at all!  Shocked
Logged
Feldon
Gem Cutter
****
Posts: 106


« Reply #25 on: May 21, 2006, 02:38:39 pm »

Arantor:

a) much better!

b) I meant below the footer.  If you look at the FAQ page and scroll down to the bottom you'll see what I mean.

c) yah, thats normal for it to complain if its redefined.  Remember, they're called "Cascading" style sheets for a reason.  The intent is to define something overall, then redefine for particular sections, hence the cascade effect.

d) I tend to agree with Nick on this one.  You're better off with a percentile base, with em adjustments.  However, Nick, I think you'll find its easier if you make the base font-size: 100/120%, and then adjust with em's from there.  Don't be afraid if it looks too big at first.  It will look fine on a larger resolution, while people with smaller resolutions (like me), are tired of squinting and like the larger font sizes anyways.  Besides, we can always adjust to make it smaller if necessary.

f) Whatever works best. Smiley

g) Cool.

h) Hmmm... that didn't do it for Opera.  Maybe it needs a padding:0 as well?

I've left e) to last because its the one I have real comments for, lol.

One of the confusing things with xHTML is that it isn't intended to be served as simply text/html or text/plain.  Its supposed to be served as 'application/xhtml+xml'.  Of course, to confuse matters, IE doesn't like that.  The result is that you need to serve it one way for Gecko browsers, and another way for IE.  There's two ways of dealing with this.  One is you can just serve it as regular HTML, which avoids the problem.  Or, alternatively, you can use some PHP scripting to serve it correctly.  If you want, I have a script that does that automatically.  What you do is you make all the site pages as PHP pages, you don't include a doctype header or tag, and instead just put in a "" at the top.  It will add the proper doctype and tag and serve the file as either xhtml for gecko browsers, or html for IE.  (make your site as xHTML, the script will convert the tags back to html for IE).  The script is as follows:

Code:
$charset = 'iso-8859-1';
$mime = 'text/html';

function fix_code($buffer) {
   return (str_replace(' />', '>', $buffer));
}

if(stristr($_SERVER['HTTP_ACCEPT'],'application/xhtml+xml')) {
   # if there's a Q value for "application/xhtml+xml" then also
   # retrieve the Q value for "text/html"
   if(preg_match('/application\/xhtml\+xml;q=0(\.[1-9]+)/i',
                 $_SERVER['HTTP_ACCEPT'], $matches)) {
      $xhtml_q = $matches[1];
      if(preg_match('/text\/html;q=0(\.[1-9]+)/i',
                    $_SERVER['HTTP_ACCEPT'], $matches)) {
         $html_q = $matches[1];
         # if the Q value for XHTML is greater than or equal to that
         # for HTML then use the "application/xhtml+xml" mimetype
         if($xhtml_q >= $html_q) {
            $mime = 'application/xhtml+xml';
         }
      }
   # if there was no Q value, then just use the
   # "application/xhtml+xml" mimetype
   } else {
      $mime = 'application/xhtml+xml';
   }
}

# special check for the W3C_Validator
if (stristr($_SERVER['HTTP_USER_AGENT'],'W3C_Validator')) {
   $mime = 'application/xhtml+xml';
}

# set the prolog_type according to the mime type which was determined
if($mime == 'application/xhtml+xml') {
   ob_start();
   $prolog_type = '';
} else {
   ob_start('fix_code');
   $prolog_type = '';
}

# finally, output the mime type and prolog type
header('Content-Type: '.$mime.';charset='.$charset);
header('Vary: Accept');
echo $prolog_type;

?>
If you want to see that in action you'll notice that the headers for http://www.locoyofo.com are different in Firefox than in IE.
Logged
Arantor
Site Administrator
Administrator
Master Jeweller
*****
Posts: 618



« Reply #26 on: May 21, 2006, 03:28:33 pm »

More good comments.

b) Is it any better now? If not, I'm not sure what exactly you're referring to.

c) Fair enough. I just figured that a valid CSS sheet that is properly written shouldn't flag up warnings on the CSS validator.

d) Fair enough, really. It is one of those debates that will run on, and also it depends on what you're doing. Here, it probably should be ems rather than pts, but I hadn't gotten round to sorting that.

h) I'll have to get Opera to have a look. Which version were you using?

And, finally, e).

I have had this discussion before with a colleague whereupon his sagely advise was to write HTML 4.01 transitional stuff, instead of XHTML 1.0 Strict. He is a lot of a geek, and more knowledgeable about such things than me, hence I've used HTML headers.

Since the entirety of the code is already in PHP, it should be trivial to add that (it can go in the top include without any problems that I can see). I can add this in quite quickly, although I'm not sure I need to bring in output buffering. I'll have a look shortly.
Logged

"Cleverly disguised as a responsible adult!"
Feldon
Gem Cutter
****
Posts: 106


« Reply #27 on: May 21, 2006, 05:54:40 pm »

b) Sorry, if you go to http://www.emeraldeditor.com/faq/ and scroll down to the bottom, you'll notice that there is absolutely no space between the copyright/slogan and the browser status bar beneath it.  I think an extra little bit of space there would be nice.

h) I'm just using the latest version of Opera.  If its just the padding: 0px thats missing you may find that you only have to apply it to the body tag as before, instead of doubling up with the html tag like I suggested previously.

e) Yes, there's advantages/disadvantages to writing in strict versus transitional.  Writing in strict (whether xhtml or html) is more limiting and more challenging.  However, I've found that its made my code cleaner, easier to read, etc.

Re: the output buffering and the mimetype.php stuff.  I'm not sure, but I think the output buffering is required for the mimetype to convert all the /> self-closing tags to simply >.

Also, I made a very small change in the mimetype.php file above.  I just noticed that the code was producing instead of .  I think double quotes are more appropriate.

Re: the unordered lists...

Personally, I like the gems.  I think maybe they just need to be a little smaller is all.


Finally, I'd just like to say that I think the site is looking great.  All the stuff I've been mentioning has been real nit-picky and/or just a matter of personal preference so you've been doing a great job.
Logged
Arantor
Site Administrator
Administrator
Master Jeweller
*****
Posts: 618



« Reply #28 on: May 21, 2006, 06:01:27 pm »

b) It all fits on one screen for me, so I didn't think of it. I expect the pages will grow anyway, so I'll put that in.

h) I'll download a couple and have a look.

e) Since PunBB and SMF both use XHTML 1.0 Strict, I don't see why we shouldn't use Strict for the main site, thinking about it.

I hadn't read the code that thoroughly earlier, so I hadn't picked up that that's what was going on. Some form of output buffering would be required, whether manually in a variable, or through ob_ functions.

I'll implement those changes now.
Logged

"Cleverly disguised as a responsible adult!"
Arantor
Site Administrator
Administrator
Master Jeweller
*****
Posts: 618



« Reply #29 on: May 21, 2006, 06:21:40 pm »

b) Implemented. Hope it's OK.

e) Implemented. Runs fine on both IE and Firefox as far I can tell (it generates the appropriate headers etc)

I can try making the gems a little smaller, which is probably the best balance between the green square Nick was using, and the images we've already been using.

I'm just trying to put something together to suit the project... I know my HTML/CSS isn't perfect, and does need work, but I'm sure we as a team will hammer out something good.
Logged

"Cleverly disguised as a responsible adult!"
Pages: 1 [2] 3
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.19 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!
Page created in 0.216 seconds with 19 queries.