Allegro.cc - Online Community

Allegro.cc Forums » Off-Topic Ordeals » Web Site Design -- Feedback, Tips, Color Suggestions

This thread is locked; no one can reply to it. rss feed Print
 1   2 
Web Site Design -- Feedback, Tips, Color Suggestions
bamccaig
Member #7,536
July 2006
avatar

Although I'm sorta ticked that you didn't acknowledge my posting here at all.

Sorry. :-X I appreciate all constructive responses, regardless of whether I acknolwedge them. Sometimes I just have nothing to say or don't know what to say. :P

In terms of PNG versus SVG, I don't have the practical experience to speak on it, but it seems SVG is more user-friendly. It doesn't seem the browser support is there yet, but it still seems easier than dealing with scaling raster graphics. In general, as a programmer with very limited graphical ability, vector graphics seem much more attractive.

The Web site you found for generating round-corners CSS seemed poorly designed. I stumbled across it through Google, but couldn't understand how to get it to "work". I managed to "generate" CSS, but didn't know what it would do. In any case, it seemed to require markup to support it, and that would clutter the markup, obscuring the semantics of it. Ultimately, I decided to leave well enough alone (I might ultimately remove the rounded corners, or leave in equivalent standard CSS and leave it to the browsers to catch up).

And what is Castopulence/what does it mean?

--verbose

A few years ago, I was going to a community college and the local university had recently partnered with a Scottish university to offer a video game oriented degree. As part of that, they decided to include our local university in Dare To Be Digital. However, to participate, our local university needed at least two teams to propose their game ideas to a board of judges. The better team would be picked to go to Scotland for the competition. Since the degree was new at our local university, an arrangement was made to allow willing students from the local community college too, as long as at least 3/5 members on a team were from the university. A friend of mine, who is also an A.cc member, and I both became part of a team with 3 random university students. I think we needed a team name so I began brainstorming at home one night after one of the first meetings. I tried various things that came to mind, and used an online thesaurus to shake things up[1]. I think influence from Final Fantasy VII lead me to "cast", as in "cast a spell". Another way to describe it is "to launch"[2]. I guess I was being optimistic at the time because I found myself at "opulence", which roughly means "wealth". In other words, Castopulence roughly translates to "cast wealth" or "launch wealth". I think of it almost as ironic because I prefer the FOSS model and would like to find a way to operate the "business" (or organization) that way. I'm not too sure though. I think there is room in for-profit for open source and FOSS can probably have a strong influence on other business ventures, so maybe it isn't ironic at all.

In any case, that's how I came up with the name. It had a bit of a ring to it. It ended up being chosen as the team name. For trivia's sake, I think my main contribution for our game proposal's name was "G'd Up: Gravity Dearth" or something like it. The game idea itself was originally my idea as well: an astronaut simulator. I imagined a non-flashy experience where you'd be in a low or zero gravity environment inside and outside of NASA's space shuttle and/or the ISS (the game would have begun with an exciting launch and ended with a return to Earth). You would be asked to complete "grunt work" tasks, like fixing malfunctioning satellites or the shuttle itself or whatever. I guess the main influence was the low gravity, something that I myself didn't know how the player could realistically maneuver in without making them feel like "press X to not die". I imagined free movement, which is obviously complicated in low gravity, but I digress.

For reasons we won't discuss here, it was blown way out of proportion by other team members and became ridiculous before presentation day. We were ill-equipped to be sent to Scotland regardless, but the ridiculous proposal we ended up making made us seem like complete amateurs (we were in terms of game development, but this made us seem like we'd never written a program worth of code in our lives). The judges described it as 4 mainstream games all in one, but we only had 10 weeks, according to Wikipedia, to write it. Our hotshot team member would apparently develop the engine from scratch in two weeks[3]. ::) As anyone can imagine, even a plain astronaut simulator would be more than enough work for 10 weeks, let alone the ridiculous ideas that were thrown on top. Needless to say, we had no chance as far as Dare To Be Digital went.

I liked the name though and I held onto it. At the moment, Castopulence is just my own pet project or whatever. It's the name I give to my "organization", which is unofficial currently and consists primarily of me. I don't know whether it has a second member or not, but it's up to him. :P In any case, it's nothing official yet, but I'd like to turn it into my own company or organization or whatever.

References

  1. In the past, when I'd write raps, I would often use a thesaurus to find words that rhyme or flow better and still mean what I'm looking for. It's not as easy as it may sound.
  2. On top of the Final Fanatasy magic influence, I think the thesaurus entry also lead me to think of the rocket launch in Final Fantasy VII. I don't know what you call it, but everything has a mood to me. Positive or negative. Both FFVII references and the word "cast" feel positive to me so that's one of the reasons why I continued working with it instead of moving on.
  3. When I heard this during the presentation to the judges, my chin hit my chest.
Derezo
Member #1,666
April 2001
avatar

Very clean, but I'm not a fan of the colors. Red on gray has been known to cause me to vomit. ;)

I like slight gradient backgrounds with low contrast borders as a easy way to add a minimal amount of aesthetic appeal. I also like nav's that are just plain text with underlining hovers.

Something like:
600168

Your current setup feels like a comic book/news paper though, but I would personally ditch the red for something else.

[edit: attachment image link fail... I'm missing critical information ;)]

"He who controls the stuffing controls the Universe"

Felix-The-Ghost
Member #9,729
April 2008
avatar

@bamccaig
Did you notice that in this thread the post order keeps getting shuffled? Your argument for .svg is that is user friendly, but you also say the browser support is not there. If it helps you make a decision on png, I design for normal zoom, and then the browser resizes things on higher text sizes and it looks fine. But if everyone you know can use .svg go ahead. Anyone using a higher text size can expect some sites to be have error on large sizes anyway.

Also, I knew what cast and opulence are, I guess I should've pieced the two together when you were talking about FFVII.

Edit: For lulz, I attached a web project I was working on when school closed for Christmas...Haven't touched it since though. I don't know what you use to edit html, I used to use Mac's TextEdit in school but MS Notepad doesn't appear capable of opening it...correctly. Browsers open it though. Note that I'm missing any kind of header, and for strict I'd probably have to change some names to lowercase, but all my tags are closed to my knowledge. Don't remember if strict allows for tables, but since I don't have a strict header yet go ahead and see what happens. Browsers sorta anti-alias the scaling so it looks fine. I did notice that there's a problem to fix in IE, and some smaller view sizes in Firefox are weird. Probably because I couldn't get margins to do what I expected them to do--make a margin inside the border--it adds them outside the border instead so I had to resize my divs. If you can get the css open and see it (my Notepad won't do) you (should) see everything's in ems. The site itself isn't really finished. There's only one page and I wanted to implement hover buttons for the links but never got to it.

==========================
<--- The ghost with the most!
---------------------------
[Website] [Youtube]

bamccaig
Member #7,536
July 2006
avatar

Derezo said:

Very clean, but I'm not a fan of the colors. Red on gray has been known to cause me to vomit. ;)

I agree completely. The color situation is one that I'm ill-equipped to fix on my own. I just don't know what colors would go well. Maybe I should pull them from the white materia in the above "logo". I like those colors (normally, I prefer red, white, and black... I don't care as much for other colors. At least not on a regular basis, though sometimes I do like certain shades). :-/

Derezo said:

I like slight gradient backgrounds with low contrast borders as a easy way to add a minimal amount of aesthetic appeal.

Yes, that sounds good. I'll just have to figure out how to do that. :P

Did you notice that in this thread the post order keeps getting shuffled? Your argument for .svg is that is user friendly, but you also say the browser support is not there. If it helps you make a decision on png, I design for normal zoom, and then the browser resizes things on higher text sizes and it looks fine. But if everyone you know can use .svg go ahead. Anyone using a higher text size can expect some sites to be have error on large sizes anyway.

My actual plan was to handle it server-side. I would create all graphics in SVG, but then make PNG conversions for unsupported browsers. I would figure out what to serve based on either request headers or known supported browsers. In theory, everyone would be covered this way, but browsers that support it would get the benefits of SVG. This is of course only theory for me at this point.

For lulz, I attached a web project...

Thanks, I'll take a look at it. :)

I don't know what you use to edit html, I used to use Mac's TextEdit in school but MS Notepad doesn't appear capable of opening it...correctly.

I use Vim. ;D Your problem is probably newline related. IIRC, Mac's use \r as the newline character. Linux (and I guess UNIX) uses \n. Windows uses \r\n. Notepad only supports \r\n. Either single character alone will just be non-visible whitespace. Notepad++ can open all of them though.

Derezo
Member #1,666
April 2001
avatar

bamccaig said:

I just don't know what colors would go well.

I suggest playing with a color theme generator of sorts, or just rip colors from a theme you like. You may find this tool handy.

As for getting the gradient, you may want to find a nice graphics editor that you're comfortable with.

"He who controls the stuffing controls the Universe"

BAF
Member #2,981
December 2002
avatar

bamccaig said:

In terms of PNG versus SVG, I don't have the practical experience to speak on it, but it seems SVG is more user-friendly.

And in terms of TXT versus DOCX, it seems DOCX is more user-friendly. You're comparing apples to oranges, and calling a file format more user-friendly. When you say things like this, it makes my head spin.

MiquelFire
Member #3,110
January 2003
avatar

Using the object tag for SVG, and img inside the object for the PNG, you don't need to handle it yourself.

---
Febreze (and other air fresheners actually) is just below perfumes/colognes, and that's just below dead skunks in terms of smells that offend my nose.
MiquelFire.red
If anyone is of the opinion that there is no systemic racism in America, they're either blind, stupid, or racist too. ~Edgar Reynaldo

bamccaig
Member #7,536
July 2006
avatar

Using the object tag for SVG, and img inside the object for the PNG, you don't need to handle it yourself.

^ Even better plan. Thank you. :P

---

I've gotten an XSL stylesheet mostly working and created XML stubs for the various pages. With a browser that supports XSL via the <?xml-stylesheet ... ?> directive you should be able to view it here:

http://castopulence.org/devel/index.xml

I plan to eventually implement a server-side transformation system (based on URL rewriting) so that client-side support isn't an issue, but for now it's good enough to demo and work on. It seemingly works in up-to-date Windows versions of Firefox, Chrome, Opera, and Safari. It should surprise no one that Internet Explorer displays only an XML tree. :P

The only known issue is that the entry/body markup is lost as per here. I'm pretty lost as far as fixing that. So the paragraphs for the entry stubs become one big paragraph of text. :( I'm working on a solution to that... :-X

Neil Walker
Member #210
April 2000
avatar

Why is the title (e.g. 'News' in the screenshots above) of the current page off-centre to the right?

Neil.
MAME Cabinet Blog / AXL LIBRARY (a games framework) / AXL Documentation and Tutorial

wii:0356-1384-6687-2022, kart:3308-4806-6002. XBOX:chucklepie

bamccaig
Member #7,536
July 2006
avatar

I just noticed an error in the stylesheet that breaks the content header's (i.e., "News") background. It appears to have been there for a while based on the tarball backups I have. I'm guessing it was another substitution failure. :P It's odd because it seemed to display fine at home, but maybe it was just using a cached stylesheet. :-/ In any case, it could be the off centering is related to that. It might also just look off center because the page isn't perfectly symmetrical.

Tobias Dammers
Member #2,604
August 2002
avatar

bamccaig said:

It seems the only way to currently get rounded corners in Opera and IE (and maybe others) is to use ugly h4x, such as JavaScript or image overlays.

No need for javascript. Hell no.

IE at least has conditional comments, so you can serve image-based rounded corners for IE only. Instead of using overlays, however, I'd recommend spans with a special class set on them, containing a single space; float them to the left and right respectively, set their background color to transparent, with a fixed size, and a png background image for the rounded corner.
Opera unfortunately provides neither conditional comments, nor experimental versions of the border-radius property. If you're not afraid of a bit of browser sniffing, you can embed some very simple SVG into your XHTML to provide rounded corners that scale well. This of course won't work if the user agent string is spoofed, but the worst things that can happen is a false negative (in which case you'll get no rounded borders) or a false positive (which will produce two sets of rounded borders next to each other).
As far as other browsers go: The graphical ones I know of are based on either webkit or gecko, so the latest versions should support rounded corners; other browsers are probably too obscure to really care about, or they are text-based, in which case clean HTML is your best bet.

bamccaig said:

In any case, it could be the off centering is related to that. It might also just look off center because the page isn't perfectly symmetrical.

The heading is off center because its container has a margin of 40em to the left and right. At this text size, a total of 80em is more than a typical screen can accommodate, so the container is laid out as having zero width, and the left margin at least seems to be honoured. The h2 itself, as a result, also has zero width, and is positioned at 40em to the right of the left of the content area, but because its overflow doesn't clip, you can still see the whole text.
Install firebug and play around with the "inspect" tool for a while, and you'll see what I mean.
A better solution would be to give the h2's container element a margin that is just enough to keep it clear of the rounded border (something like 3em should do); the h2 should then use something like:

display: block;
text-align: center;
margin: 0em;
padding: 0em;
background-color: transparent;

This will make the h2 use the entire width of its parent container, and center the text in it.

---
Me make music: Triofobie
---
"We need Tobias and his awesome trombone, too." - Johan Halmén

bamccaig
Member #7,536
July 2006
avatar

I appreciate the round corners suggestion, but I'm not very "graphically inclined" and prefer to stay away from image hacks. It doesn't bother me if certain browsers see square corners. That's those browers' users' and developers' problems. :P It's readable and usable so that's enough for me to worry about. I think caring about Gecko and WebKit is enough. :-/

I have Firebug installed, but I don't have much experience with using it. Most of the Web application work I've done has been h4xy IE-centric stuff where Microsoft debuggers were primarily used. Non-IE support has been flaky at best. I intend to full circle with my own projects. I'll have to investigate the off center header. :-/

Another weird oddity is that at j0rb I noticed that the background of the content header (i.e., News) isn't white as it should be. I tried hard refreshes and that didn't seem to help. Now I'm back home and notice that even with hard refreshes it still works... :-/ I'm using the Windows port of Firefox 3.5 in both so I don't know why they differ (architectures differ, but that seems like an odd thing to attrbute to architecture)... It seems logical that it must be that they're loading different stylesheets, but I assume hard refreshes should have updated them... :-X

Tobias Dammers
Member #2,604
August 2002
avatar

bamccaig said:

Another weird oddity is that at j0rb I noticed that the background of the content header (i.e., News) isn't white as it should be. I tried hard refreshes and that didn't seem to help.

There are other variables in the equation than the stylesheet and the browser version. There's at least the screen resolution to consider, and probably also the system-wide font scaling setting and the browser's default fonts.
One possible explanation would be the 40em margin; if one system has enough screen real estate to accommodate 80em worth of margin plus the actual heading, then you'll see the white background you expect. If it doesn't, however, the h2's box width is calculated as zero pixels, but since the overflow property defaults to "visible", you still see the text, running out of the zero-pixel sized (and thus invisible) box.

Quote:

It doesn't bother me if certain browsers see square corners. That's those browers' users' and developers' problems.

Perfect attitude for a tech-community site, or one where people can't choose whether they use the site or not. Bad idea for a showcase or web show, where you want to look good to the largest possible part of the target audience. For people who don't know the details, a "plz download a better browser kthx" notice looks very unprofessional - to them, IE is a very good browser, so the problem must be on your end. The rest of the internet works fine, after all.

---
Me make music: Triofobie
---
"We need Tobias and his awesome trombone, too." - Johan Halmén

bamccaig
Member #7,536
July 2006
avatar

There are other variables in the equation than the stylesheet and the browser version. There's at least the screen resolution to consider, and probably also the system-wide font scaling setting and the browser's default fonts.
One possible explanation would be the 40em margin; if one system has enough screen real estate to accommodate 80em worth of margin plus the actual heading, then you'll see the white background you expect. If it doesn't, however, the h2's box width is calculated as zero pixels, but since the overflow property defaults to "visible", you still see the text, running out of the zero-pixel sized (and thus invisible) box.

Touché. That sounds very worth looking into... :-/

** EDIT **

That did it. Swapping the margins for a relative width seems to have fixed it. I'm not sure what the best units of measure for the width would be though. I'm currently using percentage.

Perfect attitude for a tech-community site, or one where people can't choose whether they use the site or not. Bad idea for a showcase or web show, where you want to look good to the largest possible part of the target audience. For people who don't know the details, a "plz download a better browser kthx" notice looks very unprofessional - to them, IE is a very good browser, so the problem must be on your end. The rest of the internet works fine, after all.

Those users will never know there are round corners because they'll probably never see the site in other browsers. In any case, for the time being, I don't really have a target audience. If anybody, I guess it would be technically minded people. Maybe in the future I might be able to offer services to the world, but I'll consider that possibility when I get there. Even then, I'd still rather be honest with people and tell them their browser sucks. ;) Besides, there's always Google Chrome Frame (IE users are unlikely to have JavaScript disabled). I don't think it works with XHTML 1.0 Strict though. I don't recall the details...

 1   2 


Go to: