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 <[EMAIL PROTECTED]>
<<attachment: sandy-stripes.png>>
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;
}
signature.asc
Description: This is a digitally signed message part
_______________________________________________ epiphany-list mailing list [email protected] http://mail.gnome.org/mailman/listinfo/epiphany-list
