[H] Consumer

haiku

n00b
Joined
Jan 25, 2004
Messages
38
Hello again

Last time I left you, we had finalized the new landing page design for [H]ard|OCP.com and since then everything has gone into full production. The new [H]ard|OCP site has been completely put into xhtml and css and it looks perfect to the pixel. Actually better since there is no image artifacting from the entire thing being a massive jpeg.

We're still on track to launch everything sometime around Thanksgiving, and given that, I thought I would show everyone what one of the new [H] brands will look like.

We started with [H] Consumer, which will focus on Desktop computers and things like HTPC and other stuff that Kyle can expand on.

Here is what it will look like (470k png)

A few things to note:

  • The big button that says Main Menu will be a fly-out menu for easy access into the categorized sections of the site. So there will be links for Desktop, Printers, HTPC, etc. On the [H] Enterprise site the list may be Rack Servers, SANs, and things of that nature.
  • [H] Consumer, [H] Enterprise, [H] Enthusiast, and [H] Console will all use this exact same layout, except they will have their own respective logos and color schemes.
  • Under the Featured items, you will notice one has a border and background treatment. This is to illustrate what will happen when your mouse is over that area. Instead of just having a tiny text link, that entire area will be a link. More accessible, and for browsers that don't support it, well back to text link city.
  • [H] Enterprise will use more of a grey/metallic color scheme, [H] Enthusiast will use the same exact color scheme as the new [H]ardOCP.com, and [H] Console will use a yellowish and darker grey theme. [H] Consumer is by far the lightest of the bunch.
  • You'll notice that the layout of the content is almost identical to how things are on the current [H]ardOCP.com, and this is because if it's not broken.... you know.
  • Don't get too hung up on the names and orders of the links next to Main Menu. Those are subject to change.
  • I still haven't designed the footer for homepage or the sub-sites. OOPSIES
  • The general article layout will not change too much from how things are done now, it will just look a bit nicer.

Special bonus: If you want to take a peek at what the new [H] root page will look like produced in xhtml/css, you can check out a version here

This is not the final one. This is an older one. There are things missing like the left side fade, the footer, and some other minor decorative things and sIFR tweeks. But it will give you an idea of how things are being produced.

Pedantic as always,

haiku
 
We're all very excited about this...can't wait to move into our new home!
 
Very, very nice.

Looking forward. Keep up the great work and thanks!!!
 
Freakin' Awesome :eek: :cool:

it's 3:30AM, so i got nothin better to say right now ;)

EDIT: err...i just noticed something when looking at the temp site for the [H] root site, the +RSS links seems a little dark to me, hell i didn't even notice they were there until i looked throught source code and noticed it...just a small gripe is all...

and now i'm off to bed...
 
Not bad at all!

I'm just curious to see the final CSS file, I can see where I'd make some tweaks to increase performance, but I'm always curious to see what short cuts other people use to make their life easier and/or decrease bandwidth consumption.
 
nismo_r34 said:
[H]OT! Does this mean 4 times the content too?
I don't know the exact multiplier but I'd say at least that by the time things go full tilt boogie.
 
animeguru said:
I'm just curious to see the final CSS file, I can see where I'd make some tweaks to increase performance, but I'm always curious to see what short cuts other people use to make their life easier and/or decrease bandwidth consumption.

The final is barely any different than the one I linked. Maybe an added class or two for some minor decoration.

That said, go ahead and mention what you think would increase performance based off this one I linked.
 
haiku said:
The final is barely any different than the one I linked. Maybe an added class or two for some minor decoration.

That said, go ahead and mention what you think would increase performance based off this one I linked.
Cross-indexing the thingamajiggy and compressing the hyperlinks, DUH!
 
haiku said:
The final is barely any different than the one I linked. Maybe an added class or two for some minor decoration.

That said, go ahead and mention what you think would increase performance based off this one I linked.


I didn't know how close to final the one you showed was, but upon looking at the XHTML and CSS, I'm amused by some of the things you decided to do. I particularly like the way you handled the rollovers. Not many people that I see will do all the graphics as a single one and just move the positioning around. I see it for individual rollovers, buy rarely for an entire site. I was just thinking of things like that.

Also, on the [H]Consumer page, I'd probably reverse the gradient of the article headline to match the latest boxes so as to simplify the necessary image for tiling.

On the whole though, the brief run through of your CSS file was quite straightforward. Curious, why did you decide for strict XHTML rather than Transitional?? I tend to code Transitional since most of the people that wind up doing maintinence on my sites never remember to close out their empty tags and such. :p

One other question, I assume you guys use a CMS, just wondering if you've used a drop in system or if it is a custom designed one. I've been poking at Joomla lately and it's looking pretty nice.
 
nice.. i do have a question though (sorry if it was asked before). The font used for the article headers isn't a standard font everyone will have on their machines. How are your rendering them? I can't imagine they are going to be images. :confused:

Edit: nevermind.. i just looked at the live demo (not the screenshot) and figured it out.
 
maw said:
nice.. i do have a question though (sorry if it was asked before). The font used for the article headers isn't a standard font everyone will have on their machines. How are your rendering them? I can't imagine they are going to be images. :confused:

Edit: nevermind.. i just looked at the live demo (not the screenshot) and figured it out.


Yeah, its an Inman Flash Replacement; a technique that uses a script to scan the HTML looking for specific tags and replacing them with Flash titles instead. It's a nice tool since it allows designers to finally break away from the safe haven of Times or Arial that have become the standard. The only downside is if the user does not have the Flash plugin installed.

For that reason, I use a PHP replacer instead. It generates images on the fly in a similar manner, but uses PNG images instead. The downside to it is an increased use of bandwidth since the images have to be transfered to the client, as well as a brief period of unstyled content while the images are being downloaded and placed inline. For me, the tradeoff is worth it; but there are pros and cons to any trick like this one. Besides, it makes me want to tweak things more, I'm trying to work out a proper cross browser compatible version that will only replace the first letter of a paragraph similar to what you see in books a lot of the time.

Still, properly used, they can really add to a websites overall appearance, plus no more creating titles for yourself everytime you update.
 
I like the colors better then the [h]portal version of the site. Although if it is dedicated to consumer grade gear you might concider a way to increase the font size without everything breaking. The [h]portal site, I guess that doesn't matter since your user-base is young and all.

with 1 click up on the font size I started to lose text to overflows with 2 clicks overflows became more apparent and the floating content started to seep outside the borders.
 
i'm kind of on the fence about the new design. one one hand, it really does look awesome: very modern looking and well laid out.

but on the other hand i am to the opinion that light text on dark background has always been a major plus of the existing site, it is so much easier on your eyes / easy to read.

my only suggestion would be to condiser some different fore and background color schemes along those lines

i'll read the ocp and any subsidiaries no matter what they look like, but that's because of content, not fit and finish. you could make the site look like a freakin coach bag and i'll still keep on readin. but it is nice to have a good lookin site though, so whatever i'll just shut up now :)
 
Why are the colors slightly diffrent when viewing the website in IE6 as opposed to firefox/opera?

First time ive seen that (the gradients are off).

Anyway, the new sight is harder on my eyes then the old one. In my view you botched up the colors........ but you can't please everyone... now can you ^_^.

Good server side software though! When I view it in IE6 with all advanced features turned off, it still is quite interactive (moseovers, stuff like that). I just hope when the time comes, when I click a link it actually takes me some where.

I like the colors of the [H] consumer. almost reminds me of anandtech.

Be proud of yourself, it is a great honor to work for a site like [H]ard|OCP.
 
Why are the colors slightly diffrent when viewing the website in IE6 as opposed to firefox/opera?

IE6 displays png's incorrectly, i forget why though...
 
=Vector= said:
IE6 displays png's incorrectly, i forget why though...

because it's old and it sux? sorry, i had to get that in
:p
 
I like the new layout... it looks really nice. So [H] is trying to create seperate sites for different people... thats kinda interesting. Same news and stuff going to be posted on all the pages?

edit: Thanksgiving... 06?!
 
Tengis said:
I like the new layout... it looks really nice. So [H] is trying to create seperate sites for different people... thats kinda interesting. Same news and stuff going to be posted on all the pages?

edit: Thanksgiving... 06?!

Bascially yes. To start off with we will divide the sites into three main groupings, [H] Enthusiast (which we hope to bring back to its enthusiast roots with more "hardcore" content), [H] Consumer (which will lead off with our current desktop, laptop, and HTPC reviews with more PC-centric consumer electronics devices down the road), and [H] Console (which will focus on console hardware, games, and accessories).

The main news page will generally remain the same, and be a veritable poo poo platter of news. :) The news author will have an option to assign each news story to a specific home page site as well. So say if Steve posts a link to something on the main page like Xbox 360 Water Cooled, that news item would likely show on the Console and Enthusiast site, but not the Consumer site.
 
so, when's this coming out exactly?

i thought it was gonna be changed around new years or somethin... :(
 
=Vector= said:
so, when's this coming out exactly?

i thought it was gonna be changed around new years or somethin... :(

Yes, that is correct.
 
HHunt said:
The best part is that you've only confirmed that it'll either happen very soon or "somethin". :D

Can I guess that you're currently testing it with live content?

Yes, please feel free to guess that.
 
There's a small graphical glitch on that page when using konqueror (and probably any other khtml browser, like safari): When hovering over the tabs on top, the replacement image is either placed a few pixels too high, or a bit of the bottom is cut off. (You decide.)
Like this:
h_new.png


edit: Comparing it with firefox, it seems like the new picture is placed correctly, but missing a bit at the bottom.
 
Back
Top