Any Website Designers Willing To Help?

[Caboose]

It's going to be hard to make this brief, but I'll do my best.

Back in September, I managed to snag the website domain: www.rainbowdash.com
Instead of sitting on it, I've decided to actually do something with it, and turn it into a Rainbow Dash themed personal website.
The site is hopefully going to consist of:
-Entry page
-Home
-Information
-Art
-Webmail
-FA profile link
-Forums profile link (GiTP and other forums)

The only problem is, that my knowledge of HTML5 and CSS is less than what my dog probably knows. So I'm asking if anybody here can help me develop the site into a snazzy modern site. I'm willing to pay, not extortionate amounts like some people have been demanding, but hopefully enough if you wish.

Hosting and nameservers are sorted. It's only the page that needs working on.

[Force]

You might want to post this in the MLP thread in Media Discussions.

[Caboose]

I knew I should have posted it elsewhere. I just wasn't sure where.

[WalkingTarget]

Well, I'm not a professional by any means, but I know a bit. Do you have content ready for, say, the home page (i.e. do you have the text you want and/or ideas for how you want site navigation to be organized)?

I can whole-heartedly recommend this (http://www.amazon.com/Dont-Make-Me-Think-Usability/dp/0321344758/ref=pd_bbs_sr_1/002-0407563-4429653?ie=UTF8&s=books&qid=1175111239&sr=1-1) book as a starting point for webpage design and this (http://www.amazon.com/Dont-Make-Me-Think-Usability/dp/0321344758/ref=pd_bbs_sr_1/002-0407563-4429653?ie=UTF8&s=books&qid=1175111239&sr=1-1) one as a quick read on usability/design philosophy.

[Caboose]

Well, I'm not a professional by any means, but I know a bit. Do you have content ready for, say, the home page (i.e. do you have the text you want and/or ideas for how you want site navigation to be organized)?

I can whole-heartedly recommend this (http://www.amazon.com/Dont-Make-Me-Think-Usability/dp/0321344758/ref=pd_bbs_sr_1/002-0407563-4429653?ie=UTF8&s=books&qid=1175111239&sr=1-1) book as a starting point for webpage design and this (http://www.amazon.com/Dont-Make-Me-Think-Usability/dp/0321344758/ref=pd_bbs_sr_1/002-0407563-4429653?ie=UTF8&s=books&qid=1175111239&sr=1-1) one as a quick read on usability/design philosophy.

That book looks interesting. And simple, which is the good thing.
I have (nearly) everything, as in how it needs to be laid out and what the pages will look like. I can pretty much explain how every page should be laid out to the finest detail.
I might have someone who will do it for $15, but he's not exactly from one of the most trustworthy of sites.

[Drolyt]

It's going to be hard to make this brief, but I'll do my best.

Back in September, I managed to snag the website domain: www.rainbowdash.com
Instead of sitting on it, I've decided to actually do something with it, and turn it into a Rainbow Dash themed personal website.
The site is hopefully going to consist of:
-Entry page
-Home
-Information
-Art
-Webmail
-FA profile link
-Forums profile link (GiTP and other forums)

The only problem is, that my knowledge of HTML5 and CSS is less than what my dog probably knows. So I'm asking if anybody here can help me develop the site into a snazzy modern site. I'm willing to pay, not extortionate amounts like some people have been demanding, but hopefully enough if you wish.

Hosting and nameservers are sorted. It's only the page that needs working on.
Have you considered doing it yourself? You really don't need to know HTML or CSS to make a website these days, at least not one as simple as you are describing (and once you do cross the threshold where knowing those things could help, you suddenly need to know a lot more, and people capable of doing that don't make websites for 15 bucks). I could probably make it for you, but it sounds like you aren't offering enough to make it worth my while. Help and advice I'll offer for free though. I'd first recommend looking into content management systems (http://en.wikipedia.org/wiki/Web_content_management_system).

[WalkingTarget]

Have you considered doing it yourself? You really don't need to know HTML or CSS to make a website these days, at least not one as simple as you are describing (and once you do cross the threshold where knowing those things could help, you suddenly need to know a lot more, and people capable of doing that don't make websites for 15 bucks). I could probably make it for you, but it sounds like you aren't offering enough to make it worth my while. Help and advice I'll offer for free though. I'd first recommend looking into content management systems (http://en.wikipedia.org/wiki/Web_content_management_system).

CMS's can be useful, but some of them have a somewhat steep learning curve (Drupal or Joomla!, for example). Things like WordPress, on the other hand can be simple to learn and once you get your basic theme set up, adding content can be fairly painless. If you're only looking for a few, fairly static pages, they're kind of overkill.

[Dr.Epic]

I can do make art:

(Warning: Images are HUGE)
http://img64.imageshack.us/img64/8308/carrotknightdigitalphot.jpg

http://img819.imageshack.us/img819/5629/braindigitalphotoshopa.jpg

http://img230.imageshack.us/img230/3629/halloweendg.jpg

http://img171.imageshack.us/img171/1948/mudmonsterdigitalphotos.jpg

http://img18.imageshack.us/img18/4329/elephantlocnessday8.jpg

http://img255.imageshack.us/img255/4021/diabolicdruid.jpg

http://img860.imageshack.us/img860/417/skullsquidday3.jpg

[Drolyt]

CMS's can be useful, but some of them have a somewhat steep learning curve (Drupal or Joomla!, for example). Things like WordPress, on the other hand can be simple to learn and once you get your basic theme set up, adding content can be fairly painless. If you're only looking for a few, fairly static pages, they're kind of overkill.
Overkill? Perhaps, but I would call hiring a web designer overkill too. The OPs issue was that he doesn't know anything about making websites, and something like WordPress hides all that stuff and lets you just upload pages. I would recommend something like Dreamweaver, which is WYSIWYG and can handle the uploading of the files, but unless he has a free copy lying around that is also overkill.

I can do make art:
Okay, those are really good, but please shrink them before putting them in a forum. I had to right-click save as to view them properly anyways.

[Caboose]

I haven't paid anyone anything yet.
I've had a delve into HTML and it's not that complicated at all.
CSS is a whole different thing though. It appears a lot more complicated.
I might be able to get a copy of DreamWeaver from my IT teacher in September, but this is more of something I want to get done over the Summer.

[Drolyt]

I haven't paid anyone anything yet.
I've had a delve into HTML and it's not that complicated at all.
CSS is a whole different thing though. It appears a lot more complicated.
I might be able to get a copy of DreamWeaver from my IT teacher in September, but this is more of something I want to get done over the Summer.
CSS is a lot more complicated than HTML, but I don't know why you would need it for the website you are describing. What CSS does is tell your browser how you want everything to look. HTML can do the exact same thing, and much simpler. The advantage of CSS is you can do it once and then use it on every page so they all have the same (or similar) consistent look to them, which is indeed a huge benefit but... do you even want every page to look the same? On the topic of DreamWeaver, a quick google search turned up this (http://blog.webdistortion.com/2008/04/12/webdesign-on-a-budget-six-free-alternatives-to-dreamweaver/) list of free alternatives. I can't vouch for any of them, but there you go.

[Caboose]

CSS is a lot more complicated than HTML, but I don't know why you would need it for the website you are describing. What CSS does is tell your browser how you want everything to look. HTML can do the exact same thing, and much simpler. The advantage of CSS is you can do it once and then use it on every page so they all have the same (or similar) consistent look to them, which is indeed a huge benefit but... do you even want every page to look the same? On the topic of DreamWeaver, a quick google search turned up this (http://blog.webdistortion.com/2008/04/12/webdesign-on-a-budget-six-free-alternatives-to-dreamweaver/) list of free alternatives. I can't vouch for any of them, but there you go.

Thanks for the links! They'll be a great help.
All the pages are going to look more or less the same, but I guess I can just copy the HTML across and edit it as I see fit to suit the page. I don't really need all the text space for the profile link pages, so I'll just crop them down.
The one area I'm going to find fairly hard to do are the buttons.
I'm going to try and make them so there is text, and when you hover over the text, it is replaced by an image. I have no clue how to do that at all.

[Drolyt]

I'm going to try and make them so there is text, and when you hover over the text, it is replaced by an image. I have no clue how to do that at all.
I'm not sure I'm fully understanding you here. Do you mean like what google does, when you hover over the link a preview of the page pops up? I'm not sure how to do something like that without scripting, and it doesn't sound like you know how to script.

[Caboose]

I'm not sure I'm fully understanding you here. Do you mean like what google does, when you hover over the link a preview of the page pops up? I'm not sure how to do something like that without scripting, and it doesn't sound like you know how to script.

I'll see if I can explain it.
Imagine this is a button: [I am a button]
When it's left alone, it looks like this: [I am a button]
But when you hover your mouse over it, it changes to [:smallsmile:]
And when you take your mouse off the button it reverts to: [I am a button]

That's probably the best way I can explain it.

[Drolyt]

I'll see if I can explain it.
Imagine this is a button: [I am a button]
When it's left alone, it looks like this: [I am a button]
But when you hover your mouse over it, it changes to [:smallsmile:]
And when you take your mouse off the button it reverts to: [I am a button]

That's probably the best way I can explain it.
Like these buttons? (http://www.w3schools.com/tags/tag_button.asp) There is a tag you can add, OnMouseOver, but then you need to write a script to show the image, and I'm not sure how to write a script to show an image like you are describing. You could ask on a more technical forum, or maybe later I'll figure something out.

[Caboose]

Like these buttons? (http://www.w3schools.com/tags/tag_button.asp) There is a tag you can add, OnMouseOver, but then you need to write a script to show the image, and I'm not sure how to write a script to show an image like you are describing. You could ask on a more technical forum, or maybe later I'll figure something out.

Okay. I'll have a gander around Google too to see if I can find something which might help.
I really appreciate the help I'm receiving on this.

[WalkingTarget]

You could probably also do something with the "hover" pseudo class in CSS. I'm still figuring some of this stuff out, though.

[Caboose]

You could probably also do something with the "hover" pseudo class in CSS. I'm still figuring some of this stuff out, though.

I've found this:Here. (http://www.zoomcities.com/forum/showthread.php?tid=6856)
It might be helpful to someone who can code with CSS, but most of it sails right over my head for me.

[WalkingTarget]

Something like this?

Edit - removing link now that OP has had a chance to look at it.

[Caboose]

Something like this (http://hades.grainger.illinois.edu/jesse/caboose/test.html)?

Yeah, exactly like that. That's awesome! I wish I could do stuff like that that quickly >.<
Did you get the pack I sent you yesterday? It has all the button icons in it somewhere. Those are the ones which'll be replacing all the buttons.

[WalkingTarget]

Yeah, I got the files. I haven't had a chance to start playing around with any of it yet. Maybe later this afternoon after I get off work.

[Caboose]

Yeah, I got the files. I haven't had a chance to start playing around with any of it yet. Maybe later this afternoon after I get off work.

Okay, take you time. :)
I'm also going to have a look around in Notepad+ and one of those DreamWeaver emulators in an hour or so once I have less things to do.

[Caboose]

Good news!
I've actually managed to do some coding (and a small bit of not-so-great GFx).
The site now has an entry page. (http://rainbowdash.com)

EDIT: I'm so tired, it's nearly half 3 in the morning. I've been working on the Homepage for 3 hours straight, but I'm happy to say it's nearly completed. The WIP Homepage is on the site if anyone wants to check and give constructive criticism. But for now, I'm going to sleep. Thanks to everyone who's helped. G'night.

[Gabe the Bard]

That looks pretty good so far, but you should give the positions of the buttons as pixels rather than percentages so they don't slide around when the window is resized.

CSS isn't very hard, it just requires more organization. You're using it already with the style tags in the buttons.

Once you get comfortable with HTML, you should look into SHTML (http://www.asrvision.com/web-design-tutorials/headers-footersn-in-shtml.htm) (server side includes) or PHP. It will allow you to reference blocks of code in other files, so you'll only need to make one header, footer, and menu that you can use for all your pages. This is preferable to copying and pasting, which can lead to inconsistencies since you have to make changes to all the pages.

[Kuma Kode]

Well, if you need any help with anything, I've got CSS, HTML, and PHP experience [work example (http://linebreak.linuxd.net/)]. Seems like you've already got something set up for yourself, though, but you're free to PM me for some help or whatever.

[Caboose]

That looks pretty good so far, but you should give the positions of the buttons as pixels rather than percentages so they don't slide around when the window is resized.

CSS isn't very hard, it just requires more organization. You're using it already with the style tags in the buttons.

Once you get comfortable with HTML, you should look into SHTML (http://www.asrvision.com/web-design-tutorials/headers-footersn-in-shtml.htm) (server side includes) or PHP. It will allow you to reference blocks of code in other files, so you'll only need to make one header, footer, and menu that you can use for all your pages. This is preferable to copying and pasting, which can lead to inconsistencies since you have to make changes to all the pages.


Thanks about the tip on the percentages. I've just gone and changed them all now on both pages.

[Aeglewaygate]

I suggest using a free website service, like angelfire etc-- to START with. Even if you don't intend on sticking to a certain rpg forever, you'll have knowledge to access it when necessary.

[Caboose]

I suggest using a free website service, like angelfire etc-- to START with. Even if you don't intend on sticking to a certain rpg forever, you'll have knowledge to access it when necessary.

I would try that, but everything seems to be happening fine if I put enough work into it. I also have fairly cheap hosting thanks to a friend on another forum.

[WalkingTarget]

Ok, I got something mocked up per the sample layout I was given. See it here.

Edit - took page down after OP got a look at it.

[Drolyt]

CSS isn't very hard, it just requires more organization. You're using it already with the style tags in the buttons.
CSS always bugged me, so I can see where the op is coming from. Mind you, I've learned Python, Java, C/C++, and even some assembly (among others, but those are the main ones), so in general I don't have a problem with markup/scripting/programming languages, and yet I still found CSS hard to learn. Although maybe it was just because HTML was so easy in comparison...

To the OP, good job. If there is anything I can do to help go ahead and PM me (or post in this thread, I'll probably keep it subscribed).

[WalkingTarget]

CSS always bugged me, so I can see where the op is coming from. Mind you, I've learned Python, Java, C/C++, and even some assembly (among others, but those are the main ones), so in general I don't have a problem with markup/scripting/programming languages, and yet I still found CSS hard to learn. Although maybe it was just because HTML was so easy in comparison...

To the OP, good job. If there is anything I can do to help go ahead and PM me (or post in this thread, I'll probably keep it subscribed).

I'm coming from a CS background as well, and I've found that html/css approaches things from a different direction.

Programming languages are designed, primarily, to do something. There's an implicit understanding that you're trying to make the machine perform some task from start to finish.

HTML (when being used properly) is just there to mark up a document so that the plain text is labeled with some sort of semantic meaning (headings, paragraphs, lists, hyperlinks, etc.) and the appearance of things is handled separately.

CSS is all about visual presentation. There's a hierarchy to how individual style rules are applied (the "cascade" in "cascading style sheets"), and you have to keep that in mind when you're telling things what to do, but there's nothing procedural about it like there would be with a program.

[shawnhcorey]

I do know something about HTML and CSS but I haven't played around with HTML5 or CSS3 much. Also, I get to plug my home page (http://web.ncf.ca/shawnhcorey/). WARNING: you may want to put on some dark safety glasses first. ;)

[Dr.Epic]

Okay, those are really good, but please shrink them before putting them in a forum. I had to right-click save as to view them properly anyways.

You could have also right-clicked view image too.

[Kuma Kode]

You could have also right-clicked view image too. Or you could have... ya know, posted them at a reasonable resolution. Making sure the subject is presented correctly is the presenter's responsibility.

[Dr.Epic]

Or you could have... ya know, posted them at a reasonable resolution. Making sure the subject is presented correctly is the presenter's responsibility.

Well maybe I'll just build a time machine and tell myself to do this. I can't think of a simpler way of changing it.

[Kuma Kode]

Well maybe I'll just build a time machine and tell myself to do this. I can't think of a simpler way of changing it. Reupload them at a reasonable size and edit the post? Link to them?

[Dr.Epic]

Reupload them at a reasonable size and edit the post? Link to them?

I like my time machine idea better.

[Kuma Kode]

I like my time machine idea better. Me too. :smalltongue:

[Reinboom]

Good news!
I've actually managed to do some coding (and a small bit of not-so-great GFx).
The site now has an entry page. (http://rainbowdash.com)

EDIT: I'm so tired, it's nearly half 3 in the morning. I've been working on the Homepage for 3 hours straight, but I'm happy to say it's nearly completed. The WIP Homepage is on the site if anyone wants to check and give constructive criticism. But for now, I'm going to sleep. Thanks to everyone who's helped. G'night.

Never ever EVER autoplay music on a webpage whose content focus has anything other than music.

The location of your music player is off. Try to contain such elements.

There's a stray " in your player's tag.

I don't recommend using javascript for hover effects. A-Grade browsers can actually handle such actions with pure css.

Avoid strong contrast behind text. The sudden shifts from white to blue can be difficult on the eyes.

Entry pages with only a single link in are generally considered taboo and useless. Most of your constant user base will just favorite the home page. Most people coming in will come in from search engine spider findings or links friends send over in the form of "check this out!", generally, these links go to content first.

Use sans serif on webpages that focus on text information. (Note: Try to avoid comic sans.)

On flowing websites, try to avoid using absolute measurements to the body.

You appear to have some styling in a style section and some in the markup itself. This is not recommended in most cases. Try to get used to just using style sections. Or external style sheets if you plan on reusing your layout on other pages.

Your content div is placing itself over many of your links, this is breaking some of the onmouseover/onmouseout events.



Finally:
Your website domain name is that of registered IP of Hasbro. Be careful.


I hope that helps. :smallsmile:

[shawnhcorey]

Avoid strong contrast behind text. The sudden shifts from white to blue can be difficult on the eyes.

...

Use sans serif on webpages that focus on text information. (Note: Try to avoid comic sans.)

More about fonts:

Use sans serif on web pages; use serif for the printable version, if you have one.

Most of your content should be black on white. Some will recommend dark grey on white being easier to read, which is true for CRTs. But nowadays, most people have LCDs which have a lower contrast ratio than CRTs.

All font sizes should be percentages and none should be smaller than 100%. If someone changes their default font size, it's because they need a bigger font to read. Respect their choice.

Maximum width of your text columns should be 42em. You can add 5em for 1½ line spacing, 10em for double-line spacing.


On flowing websites, try to avoid using absolute measurements to the body.

Only use absolute measurements for images.

[Kuma Kode]

^ What they both said are very good suggestions.

The reason for the font styles is because it has been found that sans-serif fonts are easier to read on a screen, but serif fonts are easier to read on a page. Sans-serif goes with a more "fun" appearance, as well, so there's that. For professionalism, it can be effective to mix and match the styles.

For instance, I am fond of using sans-serif fonts for the main text, then using serif fonts for the header.

As you've probably noticed, learning the basics are rather easy, you did that in an evening. It's the ins-and-outs of how to do it right that you'll have to slowly pick up over time.

If you really want your HTML PEACHed (to use a forum phrase), go here (http://validator.w3.org/) and feed your site into the HTML validator. This checks to make sure your code is done properly according to usage standards, well beyond simply "does it show up?" The benefits to doing this are subtle but immense. If you conform to standards, it should render properly in everything (should. It won't, but that's the browser's fault, not you). This also means that no matter where HTML technology goes, it will always be backwards compatible. Your page will always look that way, even in the future and HTML8.

Your homepage in the validator (http://validator.w3.org/check?uri=http%3A%2F%2Fwww.rainbowdash.com%2Fhome% 2F&charset=%28detect+automatically%29&doctype=Inline&group=0&user-agent=W3C_Validator%2F1.2).

[shawnhcorey]

Well, if you want to be picky, download tidy (http://tidy.sourceforge.net/) to validate HTML and csstidy (http://csstidy.sourceforge.net/) for CSS. With them, you can validate your site before you post it on the web (makes you look more professional if you catch your mistakes before they become public :smallsmile:).

[Caboose]

I've read through all the replies and there is lots of help. I'm really grateful.
I've corrected the autoplay and the stray " in the homepage already, that was fairly basic.
I'm not entirely sure of how to fix the button mouse-over problem because I have been noticing that. I don't know how to change the text type either.
I probably won't be able to do much today since I've got a virus(not a computer one) of some sort and I can barely type for a few minutes without feeling dizzy.
Last thing, Hasbro haven't taken actions against rainbowdash.net or the several other MLP themed websites, so I doubt they'll do anything against mine.
I've only spent about £10 on it so far, so if they do take possession of it, then I haven't lost much, and I've gained valuable HTML and CSS knowledge while making it.

[WalkingTarget]

I don't know how to change the text type either.

The CSS attribute to change the font is font-family followed by a list of typefaces you want the system to try (since not all users have all fonts it's best to include several).

You can add a rule to your <style> section - something like


h2, p {
font-family:Verdana, Arial, Helvetica, sans-serif;
}

or whatever html tags (before the { in the first line) and fonts (in the list between : and ; ) you want to use. Specific font names have to be capitalized (if there are spaces in it, put the whole thing in quotes) and it's best to put a generic category ("sans-serif" in this example) in case the user has none of the fonts you specify.

[Kuma Kode]

As of CSS 3, it is also possible to embed fonts in the web page so that the correct font is always available, even if you don't have it installed (my work example above does this with Droid Serif and Ubuntu.)


@font-face { font-family: "Ubuntu Light"; src: local("Ubuntu Light"), url(/fonts/UbuntuLight.ttf) format("truetype"); }
@font-face { font-family: "Droid Serif"; src: local("Droid Serif"), url(/fonts/DroidSerif.ttf) format("truetype"); }

What this does it tell the browser what you want to call the font in your files (font-family), what font to use from the local system, if present (src: local), and the url of the font file on the server (url). If "Ubuntu Light" exists on the local machine, it will use its own font, otherwise, it will download bits from /fonts/UbuntuLight.ttf to fill what it needs.

I HIGHLY suggest you make a stylesheet for holding your css. You'll only need to declare everything once instead of on every page. Doing this is easy.

insert
<link rel="stylesheet" type="text/css; charset=utf-8" href="style.css" media="screen, projection"> between the Head tags of your pages, replacing "style.css" with whatever filename you use for your css, and then just move all the style stuff on the top of your pages to that file instead.

[Reinboom]

I actually recommend against using CSS3 focused features such as @font-face declarations.
Especially @font-face declarations.

Fonts have very complex legalities behind them, there are numerous conflicting implementations of @font-face that must be adhered to, and it can be difficult to make the use of it degrade gracefully when going with lower grade browsers.

As this is an early learning project, it would probably be best to avoid modern browser conflict for now.


The hover over is specifically caused by an overlapping container. Either move your content container down (ensuring it renders as relative and increase the top: distance), or by making the z-index:[/b[ lower than your link bar/links' [b]z-index:.

(Bolded is CSS)

[Kuma Kode]

I actually recommend against using CSS3 focused features such as @font-face declarations.
Especially @font-face declarations.

Fonts have very complex legalities behind them, there are numerous conflicting implementations of @font-face that must be adhered to, and it can be difficult to make the use of it degrade gracefully when going with lower grade browsers.

As this is an early learning project, it would probably be best to avoid modern browser conflict for now.

These are all valid arguments. Internet Explorer, for instance, is notorious for requiring a different declaration. However, there are standards in place, but wide-spread conformity is still in the works. @Font-face declarations only appear to be common on professional blogs, mostly, where presentation is key.

Though it's never to late to learn the horrors of cross-browser coding. :smalltongue:

[Flickerdart]

The reason for the font styles is because it has been found that sans-serif fonts are easier to read on a screen, but serif fonts are easier to read on a page. Sans-serif goes with a more "fun" appearance, as well, so there's that. For professionalism, it can be effective to mix and match the styles.

For instance, I am fond of using sans-serif fonts for the main text, then using serif fonts for the header.

Not quite true. Serif fonts created for the screen (just Georgia, really) are quite easy to read. If you don't like Georgia, though, there are precious few alternatives to a sans.
Likewise, sans serifs can be perfectly readable on a printed page. There was a whole hullabaloo about this in the early part of the 20th century. It's not the serifs that matter for readability, but the counter-space - serif typefaces just tend to have more of it.

[Kuma Kode]

Not quite true. Serif fonts created for the screen (just Georgia, really) are quite easy to read. If you don't like Georgia, though, there are precious few alternatives to a sans.
Likewise, sans serifs can be perfectly readable on a printed page. There was a whole hullabaloo about this in the early part of the 20th century. It's not the serifs that matter for readability, but the counter-space - serif typefaces just tend to have more of it. I just meant as a general rule. The fact that there are exceptions to what I said was meant to be an understood truth. Regardless of why they are easier to read in varying formats, the trend is that serif fonts are more readable in print and sans-serif on screen.

Obviously, your exact choice of font will depend on what its purpose is and how much text there will be. Headers offer a lot of freedom because they are large and relatively short, while the body of articles and blogs should emphasize readability over style.