Hi, Adam, nice job, it looks really good! I have a few suggestions to make it work better with some browsers and also some improvements (maybe). The files are attached and are based on http://www.cs.vu.nl/~reinout/epiphany.xhtml . * I removed some duplicate spacing and added a space before self closing tags, so that <br/> becomes <br />. This helps some non xhtml browsers understand the code better. * Made the top Ephy logo clickable!. * In the css the left and right bars use "14em" and "17.5em", which makes the content overlap when using bigger fonts in the browser. This seams to go away when using percentages. * Also, I quite like the way it looks when the left side is aligned on both sides... What do you guys think. * Reinout, I'm curious, how do you handle the mime type? Are you sending "application/xhtml+xml" to all browsers as the XHTML1.1 standard says, or give older browsers "text/html" ? * Adam, any particular reason to specify the width and height of the epiphany screen shot (screenshot.png)? It sometimes forces browsers to show a big empty space if the image is not shown. Try it in epiphany with the option to use the theme colours set. * Is there a reason to use the "en-US" language instead of the more generic "en"? OK, I'm done. Do you think this will "make this web a better place to live"? Feel free to throw something at me if you don't ;-) . > Oh and if anyone could GIMP up a few nice shaded screenshots > like evince has, that would be most welcome. http://vic.pmc.md/misc/screenshot_shadow.png Thanks, Victor On Ma, 2005-02-08 at 20:41 -0500, Adam Hooper wrote: > On Tue, 2005-02-08 at 21:00 +0100, Reinout van Schouwen wrote: > > Ok, I went ahead and made a mockup on > > http://www.cs.vu.nl/~reinout/epiphany.html . > > > > If you approve, just tell me what to do to get it on the GNOME www > > server. Oh and if anyone could GIMP up a few nice shaded screenshots > > like evince has, that would be most welcome. GIMP just doesn't like me.. > > :-/ > > cc'ing the Evince list in case they actually care what I think. Not all > these criticisms apply to Evince's website, but some do. > > Naturally, Evince people shouldn't really care as much about how > "perfect" their website code is; Epiphany, however, should hold itself > to a much higher standard. First of all, the frigging thing has to > *validate*. (Shame on you Evince guys!) > > Anyway, Reinout, I've gone and edited your mockup as I saw fit. Feel > free to ignore or apply as many changes as you like. Below are the > changes I made, more or less in the order I made them. > > - The <br clear="all"/>'s don't make sense. Should have <div > class="feature"> surrounding each feature instead. > > - text-align: justify; just doesn't look good. > > - "<div id="title">" really makes no sense, nor does it validate. That > whole block should be changed to use h1 and h2, with the <div> *outside* > the <a>. And since "left" and "right" are classes and not ids, might as > well do the same thing with title. > > - (this is a big one) what's with fixed pixel sizes? Having div#left at > 525px and div#right at 225px -- with three margins of 15px -- won't fit > in an 800x600 window (because of the scrollbar and window border) but > will be too small for any other screen resolution. We're developing a > web browser, so we should go out of our way to conform to standards; > fixed-width web pages are pure evil. The exception is the feature image > sizes: we know they'll all have the same width, so it's less evil to put > that as an absolute value in the CSS. I substituted a few px's for em's. > > - Why, oh WHY does every single fucking web page out there make its font > size *smaller* than what users choose? I'm picking specifically on the > "div.left { font-size: 80%; }". This is simply wrong. Completely wrong. > SO completely and utterly wrong. Let's not copy all those damned web > pages out there that force people to browse at 125% text size. > > - That "Last updated" thing at the bottom of the page doesn't work if > the content is served as application/xhtml+xml (this isn't so much a > problem for Evince people, but we really ought to be using XHTML 1.1 > Strict since we're coding a *web browser* here... so if we change the > doctype, it won't work). Besides which, we've got a handy "Page Info" > dialog for that information; no need to write it at the bottom of the > page, too. > > - The page border is clever for Evince, but not for Epiphany. > > - Made the background 100% width. Since CSS can't scale images, I had to > eliminate the gradient-ness :(. So the image is 1px wide now. > > - "float: bottom;" doesn't exist. > > - I got rid of the float-happiness a bit, using absolute positioning for > the right navbar. And with some careful math (and an ugly hack), I > aligned the top of the screenshot with the top of the navbar. > > - "sans" isn't a valid font family. "sans-serif" is. > > Anyway, that's my list of changes. It looks the same and the content > hasn't changed. But it looks pretty from around 600px wide to fullscreen > on Epiphany. > > I've attached all the files I changed. > > _______________________________________________ > epiphany-list mailing list > epiphany-list gnome org > http://mail.gnome.org/mailman/listinfo/epiphany-list -- Victor Osadci <victor osadci gnome vic pmc md>
/* Basic tags */
h2 {
color: #7cbe31;
margin: 0;
}
li {
margin: 0;
padding: 0;
}
img {
border: none;
}
html {
background: white url("images/sandy-stripes.png") repeat-x;
background-position: 0 10em;
color: rgb(68,68,68);
font-family: Bitstream Vera Sans, sans-serif;
}
body {
margin: 0;
}
div.title {
border-bottom: 1px solid black;
padding: .5em;
height: 4em;
color: black;
}
div.title a {
color: black;
text-decoration: none;
}
div.title h1, div.title h2 {
text-align: right;
margin: 0;
}
div.title h1 {
font-size: 2em;
letter-spacing: .3em;
}
div.title h2 {
font-size: 1em;
font-style: italic;
font-weight: normal;
color: #4b503b;
}
div.title img {
float: left;
}
div.left {
margin: 1em 30% 1em 1em;
text-align: justify;
}
#features h4 {
margin-left: .5em;
}
#features img {
margin: .5em;
float: left;
}
#features p {
margin-left: 200px; /* XXX: Image width */
}
#features div {
clear: both;
}
div.right {
position: absolute;
font-size: 80%;
/* Multiply sizes by 1.25... */
right: 0;
top: 6.25em;
width: 30%;
margin-top: 1px; /* Hack: same as .title border */
}
div.right h2 {
color: #3e601e;
font-weight: normal;
}
div.right h4 {
margin: 0;
}
div.right div {
padding: .5em;
background-color: #ffeeaa;
color: #4b503b;
border: 1px solid #cc9999;
margin: 1.25em;
}
div.bottom {
margin: 1em;
font-size: 75%;
text-align: center;
}
Attachment:
epiphany.xhtml
Description: application/xhtml
Attachment:
signature.asc
Description: This is a digitally signed message part