59 replies to this topic

[Alice]

Remade website, here's a link.
Adding more information about projects ASAP, can't push changes at current location.

OP

I finally got around to hosting my website. If anyone wants to check it out, visit it at http://108.246.54.244/index2.html.
If you have any suggestions, please, tell me them. I'm fully open for suggestions
Languages I plan on building the site in are Lua and jQuery. I'll try to implement minimal PHP.

Credit to Liam Stanley for a lot of the design.

Edited by Death, 12 March 2014 - 07:04 PM.

[theoriginalbit]

buttons/links definitely need some kind of rollover styling

EDIT: also the "welcome" div is sitting in a strange place that sits over text
EDIT 2: also be aware that the way you've positioned your footer — the text "death" — will be problematic when you get more content on the page, I suggest having a read of this tutorial and making use of its techniques as then the footer will either be at the bottom of the screen or the bottom of the content, whichever is greater.

Edited by theoriginalbit, 04 February 2014 - 09:04 PM.

[Alice]

theoriginalbit, on 04 February 2014 - 08:57 PM, said:

buttons/links definitely need some kind of rollover styling

EDIT: also the "welcome" div is sitting in a strange place that sits over text
EDIT 2: also be aware that the way you've positioned your footer — the text "death" — will be problematic when you get more content on the page, I suggest having a read of this tutorial and making use of its techniques as then the footer will either be at the bottom of the screen or the bottom of the content, whichever is greater.

The welcome div, I've never seen it be a problem, but I'll minimize the size of it.
What do you mean by rollover styling?

Sorry if it does seem a bit noobish of a website, I'm not that good at designing things.

Edited by Death, 04 February 2014 - 10:23 PM.

[theoriginalbit]

Death, on 04 February 2014 - 10:23 PM, said:

The welcome div, I've never seen it be a problem, but I'll minimize the size of it.

Well now it's sitting in a completely different spot than before! http://puu.sh/6KrVf.png

Death, on 04 February 2014 - 10:23 PM, said:

What do you mean by rollover styling?

As in when hovering the mouse over them they look different. Take a look at the links in the navigation on my site to see what I mean. btw if you do want to see how I've done something on my site it'll be easier if you look through the repo than trying to explore the source in the browser.

Edited by theoriginalbit, 04 February 2014 - 10:42 PM.

[awsmazinggenius]

I wonder why BIT chose the iOS 7 (or one that looks like it) don't, or maybe that's just my iPad Air. Anyways, nice site BIT. Looks different then I saw it yesterday, or that could be my Ad Block.

[theoriginalbit]

awsmazinggenius, on 04 February 2014 - 10:49 PM, said:

I wonder why BIT chose the iOS 7

what? o.O

awsmazinggenius, on 04 February 2014 - 10:49 PM, said:

Anyways, nice site BIT. Looks different then I saw it yesterday, or that could be my Ad Block.

Thanks. you probably saw the main non-computercraft site yesterday.

[awsmazinggenius]

Oh, yes, I did. The font looks like iOS 7 to me, but that might be my iPad Air.

Edit: Screenshot from my iPad: http://imgur.com/v5qonQ4

Edited by awsmazinggenius, 04 February 2014 - 11:13 PM.

[theoriginalbit]

awsmazinggenius, on 04 February 2014 - 11:09 PM, said:

Oh, yes, I did. The font looks like iOS 7 to me, but that might be my iPad Air.

Oh I see, yeah well its an Apple font
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;

[Alice]

theoriginalbit, on 04 February 2014 - 10:31 PM, said:

Death, on 04 February 2014 - 10:23 PM, said:

The welcome div, I've never seen it be a problem, but I'll minimize the size of it.

Well now it's sitting in a completely different spot than before! http://puu.sh/6KrVf.png

Death, on 04 February 2014 - 10:23 PM, said:

What do you mean by rollover styling?

As in when hovering the mouse over them they look different. Take a look at the links in the navigation on my site to see what I mean. btw if you do want to see how I've done something on my site it'll be easier if you look through the repo than trying to explore the source in the browser.

I don't understand why it twists like that, I edited it to fit closer to the top left corner. And yes, it's different because I was testing some things.



I'll get working on rollover effects sometime soon

------

New reply -- IP.Board would probably combine the two
Made a nice little button animation on hover, changing a couple colors and the borders.
Still not sure why it did the thing in Safari or whatever browser BIT's using -- if someone has a fix please PM me or reply!

Edited by Death, 05 February 2014 - 12:51 AM.

[theoriginalbit]

Death, on 04 February 2014 - 11:49 PM, said:

I don't understand why it twists like that, I edited it to fit closer to the top left corner. And yes, it's different because I was testing some things.
-image snip-
I'll get working on rollover effects sometime soon

How are you doing the rotation? CSS? Did you also add the browser specific transformations?

EDIT: Also you're getting a 404 on the file result-light.css

Edited by theoriginalbit, 04 February 2014 - 11:58 PM.

[Alice]

I know I've got a 404 - I'll fix that later.
Yes it's CSS - I'll need to do some modifications for that.
I'll fix the CSS and I'm currently adding in a way to have webchat implemented into the page. The way I'm working on isn't working so I'll do it another way.

Edited by Death, 05 February 2014 - 01:01 AM.

[theoriginalbit]

Death, on 05 February 2014 - 12:51 AM, said:

Yes it's CSS - I'll need to do some modifications for that.

Browser specific rotations

transform: rotate(45deg);
-o-transform: rotate(45deg); /* Opera */
-ms-transform: rotate(45deg); /* IE 9 */
-moz-transform: rotate(45deg); /* Firefox */
-khtml-transform: rotate(45edg); /* Can't remember */
-webkit-transform: rotate(45deg); /* Safari and Chrome */

[ingie]

i really like it. nice and clean.

i like the buttons as they are now, with the corners curling into the radius nicely.

but yeah, you're not using browser-specific radii [edit: me derpa] transform css... but personally, i'd keep it that way, i'd rather just have fallback to something that looks ok [which it does], than use browser specific css myself, but that's just my personal feelings on it... so long as the fallback still maintains enough contrast to be accessible.

don't like the Welcome side strap though... it doesn't seem necessary. i'd be more inclined to use a font based illuminated text image as the corner strap, like a single corner border of a frame - using the font from your signature at the bottom but more embellished ... but that'd need a graphic illustrator to get looking right...

Edited by ingie, 05 February 2014 - 01:41 AM.

[theoriginalbit]

ingie, on 05 February 2014 - 01:34 AM, said:

i'd rather just have fallback to something that looks ok [which it does], than use browser specific css myself, but that's just my personal feelings on it...

browser specific CSS looks the same as the standard, so it may as well just be included.

[Alice]

I think I added them all except -khtml-, which I shall add if anyone encounters a problem.

EDIT- I'm going to remove the webcome side strap, just leave that area blank
EDIT- removed. Please test for bugs in the IRC area, or if you want any modifications to it. No I'm not going to stop using webchat.
EDIT- Do you guys like the button rollover animation?

Edited by Death, 05 February 2014 - 01:49 AM.

[ingie]

theoriginalbit, on 05 February 2014 - 01:39 AM, said:

ingie, on 05 February 2014 - 01:34 AM, said:

i'd rather just have fallback to something that looks ok [which it does], than use browser specific css myself, but that's just my personal feelings on it...

browser specific CSS looks the same as the standard, so it may as well just be included.

as i said - personal opinion - in that it shouldn't be included as it makes for more possible errors, and the whole concept is basically evil in my mind - all major browsers support enough ACID compliant non-specific tags to make a perfectly nice website without any specifics... anything which falls outside that should be reconsidered and designed without it, rather than made specific or excluding... again, that's just how i feel about it [ and many designers and devs i've worked with in my job ] - i know others think otherwise and i'm happy for them

Death, on 05 February 2014 - 01:40 AM, said:

EDIT- Do you guys like the button rollover animation?

yup, i said that... i think - assuming what i described with the radii changing is what you mean

[Alice]

Totally didn't see that - sorry

Anything else you think I should add?

[ingie]

Death, on 05 February 2014 - 02:02 AM, said:

Totally didn't see that - sorry

Anything else you think I should add?

s'okay

um... not really, i think it suits what i imagine you want, judging from your avatar and tag
of course, once you get content in, this sorta thing can change how the page really looks
- you should perhaps put some lorem ipsum in there to see how the pages flow when more full of content.

or use a suitable alternative


edit: one thing i did think was just that you should move the CSS into a separate file, and the javascript perhaps - it just makes it easier to manage later or apply an alternate theme quickly...

Edited by ingie, 05 February 2014 - 02:14 AM.

[Alice]

I'll probably do some kind of placeholder somehow. I can't really use bacon ipsum as it's an ordered list-type thing

[ingie]

Death, on 05 February 2014 - 02:25 AM, said:

I can't really use bacon ipsum as it's an ordered list-type thing

there's 21 others to choose from on that link

but i see what you mean if your intended content is to be OLs. There's a few of those on that link that generate with custom tags, but don't think there's any LI options from what i saw... but you could easily do a fast search-replace on the generated ones to replace the DIVs or whatever with your OL

but no biggie... 'twas just a thought to aid the layout judgement. you get what i mean anyway; the method is immaterial