PDA

View Full Version : Whoooey. Website Work-In-Progress


Phopojijo
April 3rd, 2012, 01:04 AM
Hey guys, I know I've been relatively quiet lately... been busy.

Among other things, been working my ass off on my website. What do you guys think?

http://www.loosescrew.ca/themetest/

If you're not running it in a late version of Firefox, Chrome, or Opera and using a good videocard with recent drivers you're missing out.

Also, the background takes a little while to load even if you are capable of seeing it. It'll be tweaked soon. (Made more efficient, notify the user what's loading or failed, etc.)
Cortexian
April 3rd, 2012, 01:10 AM
BG loaded instantly for me.

Looks neat.
TVTyrant
April 3rd, 2012, 01:17 AM
Does it come in a real language?
Phopojijo
April 3rd, 2012, 01:23 AM
That's just some Lorem Ipsum for layout purposes.
TVTyrant
April 3rd, 2012, 01:25 AM
That's just some Lorem Ipsum for layout purposes.
Ahh okay my bad lol.
Limited
April 3rd, 2012, 11:13 AM
Does it come in a real language?
Pfft learn Latin you noob...jk :D

I havent touched any 3D stuff yet for HTML5 but I suggest you sort of, add some compability code for your requestAnimationFrame line.



var requestAnimFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.msRequestAnimationFrame || window.oRequestAnimationFrame || function(callback){
window.setTimeout(callback, 1000 / 60);
};


Then you'd use requestAnimFrame( animate ); This basically adds a bit more backwards capability as it will use the correct browser specific calls and has a fall back for older IE (using setTimeout).

You include a xml reference attribute yet you don't use xml? So you don't need it:
<html xmlns="http://www.w3.org/1999/xhtml">
Change to:
<html>

Oh and just for your information, you don't actually need to close a lot of HTML5 tags, e.g </html></body> aren't actually required, however if your like me I really like to close my tags as its easier to follow code.

Not bad, I'll have to get you to test my HTML5 stuff :)
Phopojijo
April 3rd, 2012, 01:31 PM
I'll check on that with the middleware maker about the implications of that. I originally hand-coded the background but figured instead of crushing a few bugs... I'd just use Three.js to handle my stuff. It would have been more efficient to hand-code it, but I was/am intending on using Three.JS for other parts of the site anyway soooo there goes my advantage.

Though I'm really not concerned about IE support... the animation is based on OpenGL so Microsoft said they will not support it "for security reasons". You know, the same security reasons that crop up with Silverlight and such.

For browsers incapable of WebGL, I'll eventually get around to rendering the background in Javascript (non-animated) and re-render on resize (caching a few sizes in RAM like recent ones and some of the largest ones so that fullscreening will only be slow to update the background the first time, etc.)

And obviously... a settings page to user-customize it.
Amit
April 4th, 2012, 12:20 PM
Makes text hard to read with moving BG.
Futzy
April 4th, 2012, 06:27 PM
Hey guys, I know I've been relatively quiet lately... been busy.

Among other things, been working my ass off on my website. What do you guys think?

http://www.loosescrew.ca/themetest/

If you're not running it in a late version of Firefox, Chrome, or Opera and using a good videocard with recent drivers you're missing out.

Also, the background takes a little while to load even if you are capable of seeing it. It'll be tweaked soon. (Made more efficient, notify the user what's loading or failed, etc.)

Text book terrible web design. Scrap it and start over.
Limited
April 4th, 2012, 06:50 PM
Text book terrible web design. Scrap it and start over.
http://ishtml5readyyet.com/

heh
Futzy
April 4th, 2012, 08:03 PM
http://ishtml5readyyet.com/

heh

Irrelevant. Your UX is terribly convoluted and loading times are terrible.
Phopojijo
April 5th, 2012, 02:17 AM
He didn't make the site, I did. He was just trollin' in general.
Limited
April 5th, 2012, 05:12 PM
He didn't make the site, I did. He was just trollin' in general.
Oh no, I wasnt trolling.

What I was saying is the finalized standard of HTML5 is due in that time. In other words we have that amount of time to perfect our craft at development and then we can release fully functional pages that conform to those standards. Anyone with an older browser? Well to be honest fuck them. The only real issue nowadays is old IE builts, which quite frankly I am sick of having to spend most of my time making workarounds so pages work in them.

Its just like game companies now have stats etc about the next generation of consoles, they need time to play with it. Thats simply what Phopo is doing.
Timo
April 13th, 2012, 09:47 AM
As pretty as the background is, I agree with Amit. A moving background makes it a tad annoying to read the text.
Phopojijo
April 14th, 2012, 03:19 PM
It's still early stages. Current plans are to freeze the animation when the page flips to one tagged "text-heavy" in the CMS (by default).

((Current plans also have non-WebGL browsers rendering the background in Canvas as a static image -- redraw only on canvas resize. (Caching a few renders in RAM so it won't need to be redrawed if you return to a size you drew, like fullscreen... or two monitors of different resolutions.) Still subject to change -- but I need to build something to change it, right? :p))

But yeah part of posting it here was to see how annoying the animation is to read. (And, of course, how pretty).

And in case you're wondering: Drupal.
Phopojijo
April 15th, 2012, 02:17 PM
http://www.loosescrew.ca/themetest/

Did a minor update with an example "tile". I'm still deciding whether I want the link to be whole-tile or parts of the tile. ((The titles will also be clickable if the tile goes somewhere))

Parts will get people used to clicking on the part of the tile which makes the most sense to click on in case I want to have multiple actions in a single tile. Wouldn't need to retrain people if I need to change.

Having the entire tile be a single action makes more sense from what people are used to and will progressively be more used to with Windows 8. Wouldn't need to train people ever... though it'll be harder to retrain if I must.

Depends on whether I want interactivity to be modeled after a widget or a tile... I'm thinking widget.

-----

And before you mention iframe -- they're local/relative links and I'm going to try to get the final workflow be with a DIV. May be after I launch the site even, I don't know.

-----

And I know the envelope is ugly/doesn't fit the site aesthetic. It's only for the template technical mockup anyway.
Donut
April 15th, 2012, 02:49 PM
i know next to nothing about the terms used in website development, so you may have already addressed this, but in the upper left hand corner, theres a name. i assume its your name. next to it theres a little arrow pointing down. i was drawn to try to click that, but there was nothing to click. you should probably get rid of that little arrow if your name isnt going to be clickable.
Phopojijo
April 15th, 2012, 02:54 PM
That's a drop down menu handle for user account preferences/etc... like when you click on a name on this forum.

It'll be properly linked/functional when it becomes a Drupal template... at least that's the plan. It could be cut if it's unnecessary.

I suppose for the time being I could have it drop down an example menu. I'll get working on that soon.
Phopojijo
April 24th, 2012, 12:29 AM
http://www.loosescrew.ca/themetest/

I think I'm just about ready to clean it up and get it into Drupal for a test run.

What do you guys think now? (Keep in mind, nothing is linked yet... and I still didn't do the drop-down menu stuff for the login stuff yet).

(still haven't optimized anything yet, so load times will decrease a LOT)
Timo
April 24th, 2012, 12:48 AM
Hate the popup text. Reminds me of all the really bad powerpoint slides i've seen over the years :s
Phopojijo
April 24th, 2012, 01:09 AM
Yeah that's going to change (especially that god-awful checkmark slide-reveal.)

That one tile isn't so much there to showcase itself... rather just the style that I envision for double-width animated tiles.

I just needed *a* showcase animated tile and whipped that one up in about 15 minutes.

Did you like *the concept* that it represented? Simple Flash-esque (but HTML5) animations/applets for certain tiles?
Timo
April 24th, 2012, 01:24 AM
I do like the concept, websites with minimal amounts of text that are still able to convey a lot of information are great.
Limited
April 24th, 2012, 05:10 AM
.BoxTitle - I really hate the way the dark colour is added to the boxes. What I'd prefer is making this transparent black so that the background colour blends nicely making it a darker colour of that tile. Your using HTML5, why not use a black box with an alpha??

Also border-bottom-color on that box I feel also should be black with some transparency, at the moment the #222 is killing it. I like the look of: rgba(0, 0, 0, 0.1)

I hope in final you won't butcher the inline style tags like you have Mr!

I don't really like the yellow text, its quite a clashy colour. Have you tried white?

For unannounced projects do you plan to have their own symbol (similar to settings/forum), it doesnt really match the flow of the design to use symbols in some and text in the other.
Phopojijo
April 24th, 2012, 12:38 PM
.BoxTitle - I really hate the way the dark colour is added to the boxes. What I'd prefer is making this transparent black so that the background colour blends nicely making it a darker colour of that tile. Your using HTML5, why not use a black box with an alpha??

Also border-bottom-color on that box I feel also should be black with some transparency, at the moment the #222 is killing it. I like the look of: rgba(0, 0, 0, 0.1)

I hope in final you won't butcher the inline style tags like you have Mr!

I don't really like the yellow text, its quite a clashy colour. Have you tried white?

For unannounced projects do you plan to have their own symbol (similar to settings/forum), it doesnt really match the flow of the design to use symbols in some and text in the other.Yeah they'll be icons... some will have little bits of text in them pulled from various parts of the site similar to how Windows 8's Weather tile shows current weather in them.

Good idea on the bottom border -- I was thinking of ways to make it better. It blends too much in some cells but not enough in others. boxTitle is a great idea too.

As for inline style -- that's testing. The gradient might need to be kept inline (despite it being a block of *crap*) because I need some procedural way for Drupal to drop the gradient in unique for each cell. The intent is to have a Hue slider in the CMS and it'll choose the right color scheme based on that Hue.
Ryx
April 26th, 2012, 01:07 AM
Might want to consider revising the third icon (satellite dish or thumbtack?) to make it more recognizable.

Also, that background is the sex. Wondering why it isn't eating up my cpu...
Phopojijo
April 26th, 2012, 01:17 AM
Might want to consider revising the third icon (satellite dish or thumbtack?) to make it more recognizable.

Also, that background is the sex. Wondering why it isn't eating up my cpu...Because it's eating up your GPU.

It's programmed in "OpenGL" (WebGL/OpenGL ES 2.0) -- just a shader effect applied to a polygon square.

Working on tweaking it still. Probably will drop the image altogether.
Phopojijo
May 3rd, 2012, 02:48 AM
Now that I got a colourimeter for my monitor, I started fine-tuning the colours. Feedback on the color aspect of the design?

http://www.loosescrew.ca/themetest/
Timo
May 3rd, 2012, 04:16 AM
Might want to make them a bit more muted to be inline with the background (which seems a bit desaturated).
Limited
May 3rd, 2012, 09:02 AM
I still think the background is destracting me and trying to hypnotise me! I would prefer a solid colour but I know you've worked hard on it :)

Regarding the colours, I think they are nice. The faded black background box I feel now doesnt fit the design. Although only one corner of the inner boxes is rounded I feel it throws off the other one. Perhaps increase the size of the transparent box and increase the padding.
Phopojijo
May 3rd, 2012, 12:46 PM
I still think the background is destracting me and trying to hypnotise me! I would prefer a solid colour but I know you've worked hard on it :)

Regarding the colours, I think they are nice. The faded black background box I feel now doesnt fit the design. Although only one corner of the inner boxes is rounded I feel it throws off the other one. Perhaps increase the size of the transparent box and increase the padding.Again, the user will have the option to choose *and* the animation will default off at some points if I flag the page category as "requires a lot of attention" in the CMS.


Might want to make them a bit more muted to be inline with the background (which seems a bit desaturated).Yeah that's what I was wondering. I'm going to try to resaturate it a bit except for the shimmers, but yeah.