Site Design

[Cthulhu]

Well, it's a web page, and not a simple list of posts - a lot of rules is kinda to be expected there, . I can't judge if there's "too many" definitions though, how is that even defined?

Also, if your phone freezes, it's probably more to do with client-side performance - the amount of content it has to download, large blocking downloads for things like JS and stylesheets, JS execution, CSS rendering, that kinda stuff. If that is the case (again I'd have to test), then one, mobile style fail, and two, there's a few things we can do to optimize that - a bit, anyway. mod_pagespeed should already provide a considerable improvement, it does automagic things like critical path optimization (so it only loads stuff needed to render what's "above the fold"), that kinda stuff. I'll have a glance at the VB support forums, see if there's anything horrid there.

Edit: unleashed my toolkit (chrome dev tools and shit) on the vbulletin forum:

* CSS is loaded from a .php script, which has a 200ms delay at least - that's rather shit, but I'm sure that can be cached and served statically. There's a good 300KB of it (uncompressed), which is a bit steep but not outrageous.
* There's about 600KB of Javascript, which will probably take a considerable amount of time to process and execute.
* A total of 46 requests to load the board index, which can be optimized; installing mod_pagespeed will more than halve all of that.
* Note that when I mention size, I mean uncompressed and uncached; their server (and ours) gzips all output and reduces it to about 614 KB actually transferred, which is reduced to 120KB with browser caching enabled.
* It doesn't seem to have a separate mobile skin, so it'll try and do the same. Although it does come with a popup asking the user to use the mobile app, which should have a more optimized experience.
* I don't experience the blocking or lag you describe on my phone, but, it depends entirely on the phone and what the site is optimized for.

 

[Ⓐaron]

There are literally hundreds of them. I can't imagine that many are actually necessary. By contrast, the style for vB3 has probably about 30 of them.

I'm not using the mobile style, which might be part of the problem, but the mobile style for vB4 sucks. It leaves out too many features I use regularly, even on my phone.

 

[Cthulhu]

Oh, small (but important) thing I forgot, our current home page is about 200 KB uncached, 34 requests, 54.4 KB cached. So VB 5's page is about three times as big, by default .

Re: CSS, you're right actually, o_O. I was gonna blame tables taking care of layout for VB 3, but they're still in use in 5. IDK where that difference is from. I'm sure / I hope the base styles don't need that many changes though.

 

[Ⓐaron]

I told you vB5 was bloated

 

[Cthulhu]

I'm sure they call it "More feature-rich", . Marketing!

 

[Flintlock]

Two conversations going on at once here, but: Obsidian, that looks good. I think we should action those changes.

 

[Obsidian Fire]

I think I'm going to start fiddling around with the CSS on the indexes to see what I can come up with that way. It's mostly just different header levels anyway.

As Index 2 is pretty much Index 1 with out the duplicated page title I went right to Index 3. This time around I had to change the headline font back to Verdana (that's the one we're using for front page stuff right?) and changed it's color from gray to green.

We also have multiple link styles floating around between the indexes. The ones on this page use a dash and then the link, while the ones on Index 1 use a square bullet point and then have the link. Still other indexes simply have the link. Personally I like the plain link for the index pages, but I haven't changed anything yet.

Also, what are we going to do with images? They're kinda everywhere while the text is all left aligned for the most part. My main problem is that they're not consistent across the site, not where they are on the page.

Spoiler: Index 3 current

Spoiler: Index 3 fixed

Spoiler: Index 3 notes

 

[Lex]

I'm not in favour of left-aligning the pictures. I think it should be left up to the author or the page of the article where they go, and I think they look better either centred or text-wrapped.

The rest of it looks good though.

EDIT: Having looked at it again, the best way for that page to look would be for the text to be aligned on the left and the image to be aligned on the right, both on the same section.

 

[Flintlock]

^ I'm not sure I'd agree with leaving it up to the author - we should at least have a recommended style, even if we allow deviations - but I agree about the image not being left-aligned. I like to left-align almost everything, but pictures look good with float:right á la the weekly roundups. That wastes less space, too

 

[Fangu]

I think I'm going to start fiddling around with the CSS on the indexes to see what I can come up with that way. It's mostly just different header levels anyway.

As Index 2 is pretty much Index 1 with out the duplicated page title I went right to Index 3. This time around I had to change the headline font back to Verdana (that's the one we're using for front page stuff right?) and changed it's color from gray to green.

We also have multiple link styles floating around between the indexes. The ones on this page use a dash and then the link, while the ones on Index 1 use a square bullet point and then have the link. Still other indexes simply have the link. Personally I like the plain link for the index pages, but I haven't changed anything yet.

Also, what are we going to do with images? They're kinda everywhere while the text is all left aligned for the most part. My main problem is that they're not consistent across the site, not where they are on the page.

Obs, are you familiar with WordPress' style sheet? Or larger style sheets in general? Just wanted to hear a little bit about your level of knowledge when you're fiddling with it. Making new custom classes and adding them into the mix is something we'd prefer not doing as it makes maintaining (upgrading WP) a nightmare.

 

[Mage]

IMO text-wrapping around images makes more sense as it doesn't feel like something was omitted at the last minute. Doesn't really matter if it's left or right (though putting on my now-retired fanzine editor hat I'd say an image should never be left-justified at the start of an article because that's where a Westerner expects to see text). That void where there isn't anything just shouldn't be there.

Having said that, it's my only niggle and I love the improvements (Verdana is a eye-friendly font for me so bias an' shit ).

 

[Cthulhu]

What Fangu said; what I remember (it's been a while) is that as an author you can set an image to left, right, center, cleared or with text wrapping, etcetera - not something you'd want to override with CSS. I'm pretty sure you can change the alignment of that particular example by editing the article, and IMHO and as has been said that should be left up to the author.

 

[The Twilight Mexican]

It should be up to the author, yes. Ownership of the layout of their articles may be necessary to achieving their vision and feeling satisfied with/proud of their work.

 

[Obsidian Fire]

When I say Indexes, I'm talking about the pages that contain the links to other indexes or articles, not the individual articles themselves. I don't want to mess up people's custom stuff. The general site appearance on the other hand... I don't have a problem trying to make all the non-article (index) pages match up to each other as there's a finite amount of them. The articles though? I don't want to go back and fix those, that'd take way to much time.

WordPress itself I haven't done much fiddling with (which means I should probably start doing that). I have had to get used to working in HTML and CSS itself though as that's the only way to make sure custom styles work right on deviantART.

What I have done is take a look at the styles we already have. The main problem I'm seeing is that we aren't really using them. Instead we're adding in bolds and underlines wherever we think we need them and using random headline styles (some pages use <h2>, some pages use <h3>, some pages use <b> etc.). Fortunetly, it turns out that our <h2> style is almost exactly what I've been changing all the headlines to in the mock ups (it's a bit bigger then what I've been using, but that's no biggie). So we probably won't need to make any new styles. We just need to use the ones we have consistently.

 

[The Twilight Mexican]

Sounds good to me.

 

[Obsidian Fire]

Oh yeah... why have i been doing web design in Illustrator instead of with the Firebug add-on!!!! This saves so much time!!!

Compare contrast between the Illustrator changes and the HTML changes on Index 1.

Main HTML changes:
Replaced a bunch of <font><b><u> nodes with the <h2> node.
Changed some <p> nodes to make the spacing consistent.
I am saving the changed HTML file if you guys want to see it.

Spoiler: Index 1 Illustrator changes

Spoiler: Index 1 HTML changes

 

[Mage]

I like the subtlety of the Illustrator version, but the HTML looks suitably punchier and focuses the eye on the headers. Nice.
Your Engineer set has never been so appropriate!

 

[Fangu]

What I have done is take a look at the styles we already have.

Now when you say this - where did you pick out that info? From HTML code in the articles in WordPress, or did you 'view source' in your browser?

iirc, those index pages are all custom made in Edit mode in WordPress, in which case - carry on, it's not something our source code has produced, and you're free to mess up that HTML as much as you'd like By which means that when you refer to CSS, you refer to inline CSS, I guess? (<p style="font-weight: bold; color: red"> etc...)

The main problem I'm seeing is that we aren't really using them.

You mean... not using classes you've found in the CSS sheet? Or, that we skip h2 and go straight to h3, etc. Because that, again, Edit mode, hack'n'slash

 

[Obsidian Fire]

I like the subtlety of the Illustrator version, but the HTML looks suitably punchier and focuses the eye on the headers. Nice.

The funny part is that the main difference between those two pages is one font size setting.

Your Engineer set has never been so appropriate!

Ironicly I was studying engineering before I studied graphic design, and people thought I was good with procedural computer programing.

Now when you say this - where did you pick out that info? From HTML code in the articles in WordPress, or did you 'view source' in your browser?

Probably a mix of both. Firefox has a lovely little add-on that lets you view (and edit) both the HTML and the CSS at the same time. It even tells me where all the CSS originates from.

iirc, those index pages are all custom made in Edit mode in WordPress, in which case - carry on, it's not something our source code has produced, and you're free to mess up that HTML as much as you'd like By which means that when you refer to CSS, you refer to inline CSS, I guess? (<p style="font-weight: bold; color: red"> etc...)

No. I'd be messing around with this type on the actual CSS sheet (and I don't think I'll have to mess with it at all):

#author-description h2 { color: #000;
font-size: 15px;
font-weight: bold;
margin: 5px 0 10px;
}

And right now I'm just messing around and editing the HTML code by hand (and saving it). I don't even have WordPress editing privileges at this point so there's no way I can mess the actual page up.

You mean... not using classes you've found in the CSS sheet? Or, that we skip h2 and go straight to h3, etc. Because that, again, Edit mode, hack'n'slash

Both depending on what index page it is. CSS either isn't used at all in favor of maual <b> and <u> nodes and h2 is often skipped for no reason. There's a few index pages where h2 is used, but even those have some weird <u> tacked onto the h2. Long story short, all our index pages look different, it's all pretty easy to fix (so far) and it's whacking out my OCD tendencies...

 

[Mage]

The funny part is that the main difference between those two pages is one font size setting.

 

[Lex]

Thanks Tres <3

I think there should be a uniform standard across the index pages though, but I don't think left-aligned images should ever happen at the beginning of an article.

The index in question would look better if the title was centered (and therefore above the image). I think the reason it looks a bit meh is because there's space below the title.

EDIT: That awkward moment when you hit "post" on a tab that's been opened all day and your post is almost irrelevant to the rest of the discussion XD

 

[Obsidian Fire]

Index 3 with HTML changes.

Main HTML changes:
Replaced all <h3> nodes with the <h2> node.
Changed some <p> nodes to make the spacing consistent.
Added in a margin that was present on other indexes.
Changed the top image to alignright instead of aligncenter. I'll probably have to play with it to get the lower text to flow around it correctly.

Spoiler: Index 3 Illustrator changes

Spoiler: Index 3 HTML changes

 

[Obsidian Fire]

Question: do we still have the mock-up/back-up site around?

'Cause at this point, if we're happy with how I've been doing things so far, it's just more of the same. And I can probably start editing stuff in Wordpress.

It would be a lot easier to fiddle with things on the mock-up/back-up site though as that way I can just link stuff here instead of having to make screen shots and I don't have to worry about screwing up the actual pages until we think they're done. Then we can just copy/paste them into the real site.

 

[The Twilight Mexican]

+1 to that idea.

 

[Fangu]

You mean the test server? (It's not much of a back up really. Back ups are copies of the code and DB of the production server that Yop automated.)

You're making changes to the index pages only, aye? In that case, you can just make new index pages on the production site and fiddle with them there. As long as they're just drafts, they won't show up on the site itself. But you can still preview them. (Sometimes preview mode is funny though.) iirc you can set rights so people can see the previews. (Might require them to have a certain status on WP (editor etc.))

Spoiler: And re: fiddling with WordPress code on the test server

The problem with the test server is, it's not a true copy of the current production server, so it would need some work. Also, it's where all my changes are stored, so you'd have to revert those first anyway. Which is boring.