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. -- Adam Hooper <adamh densi com>
Attachment:
sandy-stripes.png
Description: PNG image
Attachment:
epiphany.xhtml
Description: application/xhtml
/* Basic tags */
h2 {
color: #7cbe31;
margin: 0;
}
li {
margin: 0;
padding: 0;
}
img {
border: none;
}
html {
background: white url("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.left {
margin: 1em 14em 1em 1em;
}
#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: 17.5em;
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:
signature.asc
Description: This is a digitally signed message part