This is my feedback for the e621 redesign.
I'd like to start out by saying that I am a web developer. I am not, however, a designer. I'm able to identify issues and provide solutions, but my specialty isn't designing layouts.
Now, please understand that I'm trying to to be constructive when I say this, but for having been built from the ground up, the site itself isn't very well built. There's very strange practices being used that create a lot of problems. CSS alone isn't going to be able to fix it, a lot of the actual site is going to need to be rethought.
So first let's deal with this forum page. It's too wide. This is applicable in many other areas, as well.
The issue is that this spreads out text and decreases general readability. Stick a max width and center via margins. For example, with this snippet,
.c-forum-topics div#page > div {
max-width: 1200px;
margin: 15px auto;
}
.c-forum-topics .forum-post {
padding: 15px;
}
.c-forum-topics #a-show {
margin-top: 15px;
}
It's obviously not perfect, but theres a lot less glaring contradictions in spacing, and its a bit more readable.
Now it should be noted that this only really works with forums posts. Obviously on image pages, where you want the full width of the page, you need to use a different layout.
And now, onto "rethinking point" number one. The site notice. First thing to note is that the "Dismiss" button is unevenly placed within the element.
This is caused by two issues:
- The fact that "Dismiss" is a floating element
- The hacky way that the site notice is built to begin with
How this dropdown has been implemented is by utilizing max-heights to clip out the content that should be hidden. Which is good! Except... the max-height is being applied to the parent element, not the element thats being clipped.
This makes it extremely difficult to do any adjustments on the title part of the dropdown, without inadvertently showing content that should be hidden. Instead, you'd probably want to do something like this (pseudocode)
<div class="ui-state-highlight site-notice">
<div class="title">
<h6>Click to show.</h6>
<div>Dismiss</div>
</div>
<div class="newsbody">
<div>Your content here</div>
</div>
</div>Apply your max-height to the .newsbody element. Now, you can resize it as needed, and the parent will resize with it.
I put together a simple codepen to demonstrate the concept: https://codepen.io/ratismal/pen/zYGEVov
Here's another issue. In the sidebar, you've allocated a space of 210 pixels. This is calculated from 15em in the aside#sidebar styling. However, using inline styling, you've explicitly set a child element to 240px. This leads to a spacing issue where "Official sites and social media" is pretty much touching the content on the page.
I'm pretty sure I know what the thought process of whoever did this was. They were filling out the sidebar, and noticed that one of the items was so long that it wrapped.
But instead of fixing the underlying issue, they just slapped an inline 240px on and called it a day.
So to fix this, we can just extend the width of the sidebar itself. Instead of 15em, 20em should be roomy enough.
...except it's not. This brings me to "rethinking point" number two: floats. In general, don't use them, and definitely don't lay out your page with them. They're finnicky at best, and extremely annoying to work with - you'll end up painting yourself into a corner, exactly like what happened here.
In the world of modern CSS3, there are two absolutely invaluable layout tools: flexboxes and grids.
Flexboxes are fantastic when you want to roughly lay out a list of items on the page. Guide
Grids are amazing when you want to have a static layout on your page. Guide
In this case, assuming we're only laying out the sidebar and content on the page (not the header), either would be suitable. Here's a codepen that demonstrates both: https://codepen.io/ratismal/pen/bGdoPqQ
Image pages suffer a lot from the same kind of things I've already talked about, but my biggest issue is the navigation bar on them.
(apologies in advance, I swear I'm not shilling this persons art or donation pages, it was just the first sfw image in a pool I found)
First of all, as always, spacing.
Second of all, width. On the old site, the navigation bar was located in the sidebar. And just by looking at this, you should be able to tell why. It's super stretched across the whole page, which makes it not only difficult to use, but difficult to even tell what's going on with it.
Next, the font color for links doesn't have enough contrast to the background, making it very difficult to even read it. I'd recommend going over it with Chrome's content inspector, they give you a warning if the contrast is too low!
And finally, the next/prev buttons are of inconsistent sizing, and the size isn't that big to begin with. I'd recommend using a more blocky button styling to make them easier to press.
Here's a rough scaffold I threw together purely in content inspector.
Here's the code grabbed from content inspector, but it ain't pretty or good.
<style>
.sbbtn {
display: block;
background: rgba(0, 0, 0, 0.25);
padding: 10px 3px;
font-size: 14px;
font-weight: bold;
}
.sbbtn:hover {
background: rgba(0, 0, 0, 0.15);
}
/* I also had to manually disable the garish pink from `.pool-category-series a, a.pool-category-series` (and hover) */
</style>
<div id="nav-links" class="ui-corner-all nav-notice">
<div id="search-seq-nav">
<ul>
<li class="active center" style="
display: grid;
grid-template-columns: 50% 50%;
grid-template-areas:
"header header"
"prev next";
/* grid-gap: 10px; */
box-sizing: border-box;
">
<span class="search-name" style="
grid-area: header;
margin: 10px;
">Search: inpool:true</span><a rel="prev nofollow" class="prev sbbtn" href="/posts/2171452/show_seq?q=inpool%3Atrue&seq=prev" style="
grid-area: prev;
">‹ prev</a>
<a rel="next nofollow" class="next sbbtn" href="/posts/2171452/show_seq?q=inpool%3Atrue&seq=next" style="
grid-area: next;
">next ›</a>
</li>
</ul>
</div>
<div id="pool-nav">
<ul>
<li id="nav-link-for-pool-19303" class="pool-category-series pool-selected-false center" style="
display: grid;
grid-template-columns: 15% 35% 35% 15%;
grid-template-areas:
"header header header header"
"pprev prev next nnext";
"> <span class="pool-name" style="
grid-area: header;
margin: 10px;
">
<a title="page 3/3" href="/pools/19303">Pool: Tree of Life - by Zummeng</a> </span><a class="first sbbtn" title="to page 1" href="/posts/2163919?pool_id=19303">«</a>
<a class="prev sbbtn" title="to page 2" href="/posts/2171441?pool_id=19303">‹ prev</a>
<span class="next sbbtn">next ›</span>
<span class="last sbbtn">»</span>
</li>
</ul>
</div>
</div>That's all I'm going to talk about for now, but it is by no means the full extent of my issues. Please let me know if this is helpful, because if it is, I'd be glad to keep going.
Thank you!