Printable Version of Topic
Click here to view this topic in its original format
GMC Forum _ Electronic Entertainment _ Anyone Good At Webdesigning?
Posted by: Oxac Sep 4 2008, 02:41 PM
So guys, I'm currently trying to get a website up and running for my project (check my practice agenda).
http://www.aj-pickups.com
This is what I have so far. I want YOUR input and everyone's opinion as I make progress and add things to it. Any tips or critisism is very welcome.
"AJ"
Posted by: Marcus Lavendell Sep 4 2008, 02:55 PM
Looks good so far Oxac! Cool logo 
Posted by: OrganisedConfusion Sep 4 2008, 02:56 PM
There isn't much to comment on lol. Unless it isn't showing up on my PC. Is it just a big logo and background? Just remember the crucial aspects of web design. Keep it simple, keep it professional and keep it sensible (colours etc.)
I do like the logo 
Posted by: Oxac Sep 4 2008, 03:55 PM
Yea, I'm just getting started.
Posted by: Oxac Sep 4 2008, 06:27 PM
Added a menu, not completely finished with it. I'm gonna try give the boxes some "drop shadow". This stuff is fun
-EDIT- after a series of unsuccessful attempts I decided to drop the whole, drop shadows thing. Too much code.
Posted by: audiopaal Sep 4 2008, 08:30 PM
Looks nice so far 
If you give me some time (As I have too many things on my schedule atm, and my computers not working as it should 
) I can probably help you out
Posted by: Oxac Sep 4 2008, 09:39 PM
Yaay! That's very generous of you Audiopaal. The thing with me is... I can make it look awesome, but... it takes so much of my time. Lately I've been trying to really get this project going, so the last week (including school time) I've been "working" 14 h+ a day. Slept for like 4 hours every night.
The website isn't the only thing that takes time, bwah... just so much I've got to do now so I can relax later. When everyone's stressed out I'm just gonna wire some pickups and have a good time. But it's updated again. (Final for tonight) going to go to bed early.
Thanks for your support!
Posted by: audiopaal Sep 4 2008, 09:46 PM
The website isn't the only thing that takes time, bwah... just so much I've got to do now so I can relax later. When everyone's stressed out I'm just gonna wire some pickups and have a good time. But it's updated again. (Final for tonight) going to go to bed early.
Thanks for your support!
Only glad to be of help
I'm waiting for some new parts for my computer, and when I get those I have a few logos to design.
But after that, in a week +, I'll be able to help you out with the webpage if you want
Posted by: Oxac Sep 4 2008, 10:40 PM
GREAT! Logos are the hardest part for me, I'm pretty sharp with html/css but when it comes to drawing up logos and such... oh man. I can't get done very good, I can get it ok and a little cartoonish but no profesionally.. no way.
Really appreciate it!
Posted by: Canis Sep 5 2008, 10:58 AM
Looks great =)
It's really comfortable for the eyes to watch, which is great
Posted by: Oxac Sep 5 2008, 06:30 PM
I just realized that with all the absolute position and sizing in pixels I've created a site that doesn't run properly on different resolutions. I'll try to fix that tomorrow.
Posted by: Bogdan Radovic Sep 5 2008, 10:40 PM
Looks good for start..But if you don't have much time for editing it...maybe you want to consider installing a CMS system like Joomla or something similar...Can get you very good results with minimum effort.
Posted by: Oxac Sep 5 2008, 10:54 PM
Thanks for the tip, but I like having full control, and that's what I benefit from using notepad.
Posted by: Andrew Cockburn Sep 6 2008, 02:32 AM
+1 for notepad! Most tools add so much rubbish in with the HTML that if you ever look at it by hand it is incomprehensible - a lot more fun to code by hand
Posted by: Oxac Sep 6 2008, 10:59 AM
Exactly Andrew. What I have now is less than an A4 with codes (including CSS and if you skipp all unnecessary spaces etc.) and I've got those round buttons using boxes in CSS also. When using the menu above you will only load the lower window which consist of a table and an Iframe. Meaning I can (with minimum effort) put a sub menu at the side, which loads the Iframe which means that I can have one .htm doc for every new category with scripts and one .htm doc only with text. I'm not sure whether I've would been able to do that as cleanly as I have now, if I would have been using an html editor such as frontpage etc.
Posted by: Andrew Cockburn Sep 6 2008, 01:13 PM
Looks cool in design terms The only thing I'd do dofferently is pull the CSS out in to a separate file, so you don't have to duplicate the styles (e.g. the body style) in all of your sub-pages.
Where this all gets really interesting is when you start to build the pages dynalically server side (I favor perl or ruby), you can then build the page as an entire unit using templates and there is no need for frames (which are always a little cumbersome) - of course for a simple static application this is overkill,. but it sure is fun, expecially when you get into automatically genmerated Javascript!
Posted by: Oxac Sep 6 2008, 05:57 PM
Andrew, yeah you can almost read my mind. What I'm doing is I design the site first in pixels (easy for me to get everything cool!) then I transpose it into percentage. Now, my next step is to move everything into extern CSS files. I'm also wondering if you have anyway of transposing the top menu to %?
Posted by: Bogdan Radovic Sep 9 2008, 09:51 PM
Yeah notepad ruls! I also use Vim editor for html stuff - http://vim.sourceforge.net/ (basically more advanced notepad)
Posted by: Andrew Cockburn Sep 10 2008, 01:04 PM
Arrghh! Vi! I'm an Emacs man myself (although I can use vi when I have to ...)
Posted by: audiopaal Sep 10 2008, 01:14 PM
I'm more of a Wii type of guy myself
Posted by: Ivan Milenkovic Sep 10 2008, 02:26 PM
good point!I like Dreamweaver, bulky and bulletproof
Posted by: Oxac Sep 10 2008, 05:20 PM
I just think those HUGE program that costs a fortune are clumbsy compare to notepad++ (which I use). And I think I've done fine, any one want to argue about that ?
<-EDIT-> I added content to the site. I also added a form which I want as many of you as possible to fill out! Check it out!
http://www.aj-pickups.com
Posted by: Smurkas Sep 10 2008, 11:39 PM
I use 1900*1220 so I'm not you're standard user resolution wise but it looks pretty bad on my screen. Since one of the menus are up all the way to the left they end up quite abit away from the rest of the content. I would seriously consider either integrating the left menu more with the rest of the design to give it a more coherent feel or putting the whole site to the left.
The top menu aligns in a strange way, it looks lite it's supposed to align with the brighter part of the picture but it doesn't so I think it looks really strange. Also you should consider making the logo in another picture format. IE 6 does not support transparency in PNG which means that the logo ends up with a white background in internet explorer. Not cool .
When it comes to the form I would either put each input on a separate row or align everything properly, right now it's abit of a mish mash. You should also use the frameset-tag to split the content instead of using headers and paragraph tags.
Last but definately not least, DO NOT USE FRAMES! It's bad practice and you can get excactly the same results with normal xhtml/css without any of the hideous draw backs. There's only a very few cases where frames are actually warranted and this isn't one of them. If the reason you're using frames is to cut down code repetition then you should look in to using a server side language to get you the same benefits without all the draw backs.
Sincerely, Marcus.
Posted by: Oxac Sep 11 2008, 08:13 AM
Thanks Marcus, some really great constructive critisism here, but my knowledge of these languages of which you're talking about is very limited. I did not know about the ie < 7 not being able to view the transparency of a png file, I'll change it to GIF asap.
Also, exactly what drawbacks are you talking about?
My goal isn't to be the perfect website programmer. I just want to make a good site for my company without having to dig too deep into web-programming.
About the form, yeah, I should definitly keep everything on a separate row, looks better. I'll change it as soon as I get home. and what about the frameset tag, to split the content? Please fill me in.
Also, I'd like to know how to center the top menu, I haven't succeeded yet and I believe that if I could do it I would be able to align it to the light part where I have all of my text.
Thanks for your input. "AJ"
Posted by: Andrew Cockburn Sep 11 2008, 01:29 PM
<div align=center> ?
If you want to get complex, the best way to control layout and have things center automatically is to put everything in invisible tables. It can get a little involved but it is a great way to work when you get into it.
Posted by: Oxac Sep 11 2008, 01:51 PM
yeh, but I'm not into it, and I have a site that's working just fine for must users. Oh I didn't mean how to center the menu, more like a way to control the size of the buttons in percentage of the screen resolution... I've been working with this project when I'm supposed to do other things like playing guitar, having fun sleeping. So I'm a bit dull atm. I think that maybe I should just edit the picture thingy and the form and focus on the other aspects of the company for a while. Also I desperately need to rest and relax a little.
But back to the site. Right now I have the top frame, with the menu. One Iframe in the bottom frame, which is controlled by the buttons to the left. Is this a bad construction?
Right now it looks pretty good in the resolutions I've tried. Okay, it looks pretty bad in 800 x 600 but almost no one uses that anymore and it's still usable and looks ok. But I can imagine in 1900*1220. How's the best way to make it look like it looks for me now? and still make it appealing in every screen resolution (or at least more appealing)?
Posted by: IslandGuy Sep 11 2008, 02:35 PM
Spelling on button: Resarch => Research
Posted by: Oxac Sep 11 2008, 05:34 PM
ouch, typo
Posted by: Oxac Sep 11 2008, 06:00 PM
Updated again, fixed a lot of layout problems, not the big one though, which I might need help with. But thanks for your support!
Also a thing I thought improved the site a lot was that I added a form mail, so that you don't have to use an epost program. A lot of people doesn't have one installed if they use hotmail for example. So now it sends to me automatically.
Posted by: Smurkas Sep 11 2008, 06:33 PM
If you tell me what resolution you are using then I can change my resolution and see what it's supposed to look like, or you can take a picture and post it here. After I've seen how you want it to look I can do it for you if you like so it behaves pretty much the same in all resolutions. The thing you said about 800*600 is perfectly ok, most designs made today have 1024*768 as minimum resolution.
And if you're thinking about a structural change I would not recommend going for the table approach that Andy suggests. You will get code bloat really fast and it's considered bad practice to use tables for other things than tabular data even though it's still pretty common. Using the right tags for the job and some good CSS will make your life much easier when it comes to editing/changing your web site. When I recently reworked a table based page to a modern CSS based layout but still keeping the same visual look I managed to cut the html code by 60% so tables are not the way to go. At least if you ask me.
When it comes to centering content you should do it with CSS. The way to center a DIV-tag is to set margin-left and margin-right values to auto. This will center the div-tag in relation to it's parent element.
/Marcus
Posted by: Oxac Sep 11 2008, 07:14 PM
I'm using 1280 * 1024. Since I have a very small amount of code it won't really be a pain in the ass to fix, but is iframes still a good option? Because now it's so easy for me to add new content ya know...
Posted by: Smurkas Sep 11 2008, 08:15 PM
The thing with frames is that the web browser views a frame web page as several separate pages. I am not sure about googles policy regarding frames and how their crawlers handle it but you do run the risk of either A. Google ignores your page because you are using frames or B. Googles web crawlers end up direct linking to the content in one of your frames and thus creating "orphans".
If someone ends up on your page by a direct link to one of the frames, they will only get that frames content and not the whole page, making it impossible to navigate the rest of the page. Like I said, I don't know if Google decided to fix this issue or if they decided to simply ignore pages that use frames. They have been known to press for certain web standards by simply ignoring stuff they see as bad practice. However if you don't care about reaching people through Google or other search engines, this is not a problem.
You could use a div-tag instead of an iframe and set it's overflow to auto. That will mean that instead of having a frame with a page with an iframe on it and then changing the content in the iframe, you will instead make several pages with the div-tag on and the different content pages in there.
/Marcus
Posted by: Oxac Sep 11 2008, 09:44 PM
I think that they have fixed it, seems like it at least, but I'll add some meta tags and register it and we'll see what happens.
Posted by: Oxac Sep 14 2008, 09:24 PM
Completely reworked the formulation and the form. Check it out and tell me what you think please.
Posted by: audiopaal Sep 14 2008, 10:43 PM
One idea for a logo
I'll make the final one a bit more simple though, so you can have it printed on the pickups..
But at least you can see the idea 
Posted by: Oxac Sep 14 2008, 11:46 PM
No need to make it simpler, I'll just paint it by hand and filter out the fancy details with my brain (for the pickup) This will look awesome once finished! (on my homepage)
Posted by: Oxac Oct 8 2008, 07:57 PM
Reworking my website. Have a look and tell me what you think. The logo will be transparent once I recieve it from Audiopaal.
http://aj-pickups.com/Design%20utan%20frames/test.htm
Posted by: audiopaal Oct 8 2008, 08:39 PM
http://aj-pickups.com/Design%20utan%20frames/test.htm
Very nice mate
You got your logo in a whole lotta formats in your inbox now
Posted by: Bogdan Radovic Oct 10 2008, 01:14 AM
http://aj-pickups.com/Design%20utan%20frames/test.htm
This looks pretty good mate !! I like the menu and clean feel of the design!
Posted by: Emir Hot Oct 10 2008, 03:54 AM
Now it looks much better. Clean and nice style. I also like colors. I hope there will be some pictures to refresh the layout. I would suggest changing the body font to Arial or Verdana. Now your Paragraph 1 is set to Times New Roman.
This one looks awesome. Very accesible. http://www.emginc.com/index.asp
This EMG site has 780px wide frame so you don't need to worry about your resolution. Looks pretty good.
Posted by: Oxac Oct 10 2008, 09:06 AM
I don't really get why I should change the body font to a sans serif. The serifs are there for a reason, they help when reading. I'd like a reason to change it.
What kinds of pictures are you talking about?
Thanks everyone for the nice comments and a HUGE thanks to Audiopaal for the nice logo!
Posted by: audiopaal Oct 10 2008, 10:08 AM
What kinds of pictures are you talking about?
Thanks everyone for the nice comments and a HUGE thanks to Audiopaal for the nice logo!
There's no reason except it looks better most of the time..
You're welcome mate
Posted by: wrk Oct 10 2008, 10:29 AM
Nice page, you improved it quite well compared to the first version. The logo is great !!
Concerning fonts. This is of course personal taste, but i kind of agree with Emir.
It is a common rule (.. and rules are there to be ignored of course ) .. to avoid too many different fonts on one screen, colors included. The site is still in production, so its not easy to tell, but at the moment "pickups" in the logo and "Header" gives a kind of direction for sans serif. In my opinion serifs on screen are not really better to read, especially for long description text.
The thing with images are, its not easy to get good ones, but images are eye catcher and would quickly at some atmosphere to your page.
Anyway ... the main thing is the product. I'm still curious about the result
Posted by: Emir Hot Oct 10 2008, 02:51 PM
Wrk and Audiopaal said all what I wanted to say so there you have the answers. Of course it's all about your taste and how you like it. I do web design for living so I follow the standards regarding fonts, frame size etc... Of course you don't need to accept any of my advices and in the end it might be that you were right about chosing fonts etc... It's just a taste a what people are used to when it comes to web design these days.
Posted by: Oxac Oct 10 2008, 03:20 PM
I just need/want to say this.
I love getting opinions, that's why I ask for them. But if I get advice that... that thing would be better or, that would look cooler. This will be more practical...
Then I get your opinion, but what I think is the most rewarding for me, is to know your arguments. Why you think like you do. Now I know, and you've got some valid points. It's completely CSS based, so all I've got to do is change a little script, no reason not to try. I'll wait with it untill I've got some real text on it, that way it will be much easier to see what will look/be the best.
Thanks for your advice and I'll make sure to upload pictures as soon as I get some that looks good and adds something. I mean, a picture of a tiger might look awesome, but unless my page is about tigers it would just be out of place. I'll try to get some good photos of the process though. I'm currently having an in depth discussion and reasoning with my coach on how much and what I should order and how I should execute my experiments.
I must say this also: Very nice homepage Emir. Really like the logo and structure.
Posted by: Emir Hot Oct 10 2008, 04:56 PM
Thank you for a compliment about my page. I have done about 100 sites by now. I saw your page is CSS based which is definitely the right way to go. With CSS it is not difficult to change your layout at anytime.
good luck with your site
Posted by: Oxac Oct 10 2008, 05:14 PM
Thanks, I actually have a question for you, if you have time to answer. Instead of having this "huge" amount of code for the menues on every page it would be cool to use some sort of PHP include or what it's called. And have a separate document for the menue, so I'm able to change the menu exactly the same way as I change the layout.
Do you know how to do this? A little insight on it would be good. I have absolutely no knowledge of either PHP or JavaScript... which sucks..
The menu is all CSS, list and hyperlinks. Any tip on how to do it would be appreciated.
Thanks // AJ
Posted by: Emir Hot Oct 10 2008, 07:49 PM
Yes and that's what you should definitely do.
Cut your menu code and save it as a separate php file (from opening until closing tag). In that new php file don't use <html> or <body> just pure code from tag to tag. If your menu is in a div tag, make sure you pick that <div> as well.
In your main file type this code
<?php include("nameOfYourFile.php"); ?>
at exact place where you cut your code previously. After that make sure you save your main file as PHP.
You have to make sure that your server (hosting company) supports PHP. You have to upload the page there to be able to test it. Preview doesn't work on the local machine unless you have server installed.
There is a very similar way with javascript but this is the principle
Posted by: Oxac Oct 10 2008, 08:03 PM
Thanks a lot Emir, doesn't seem so hard. I'll give it a go.
Works. Thank you a lot Emir. I'm just gonna apply it to both menus and see how it goes.
Posted by: Oxac Oct 10 2008, 09:13 PM
http://aj-pickups.com/Design%20utan%20frames/Html/News/Index.PHP
Added some content and simplified the structure for me. I hope you like it.
Also, you guys were correct. Hat off to you. Arial looks so much nicer! Thanks a lot for all the help. Really appreciated.
Posted by: Emir Hot Oct 10 2008, 09:13 PM
Works. Thank you a lot Emir. I'm just gonna apply it to both menus and see how it goes.
Cool. Now you can change your menu in just one file for the whole site. That also works for header and footer
Posted by: Oxac Oct 10 2008, 09:40 PM
I did that with almost everything
<?php include("../Start.PHP"); ?>
<div id="rubrik">Header</div>
<?php include("Submenu.PHP"); ?>
<p>Paragraph 1</p>
<?php include("../End.PHP"); ?>
That is the code needed for 1 page
Posted by: audiopaal Oct 11 2008, 12:13 AM
Wow, you're page's starting to look quite awesome
Posted by: Oxac Oct 11 2008, 12:43 AM
Thanks, it means a lot to me. The whole GMC community will of course be under links and your name Audiopaal, under credits (the logo).
Now I'm going to sleep. I'm planning on doing some regular school work this weekend, so I get ahead by a little. I will then be able to focus much more on this little project
I have one problem though, that I'd need really experienced help with. That's how I'm going to take my orders. I'll specify the problem later on. Thanks for all feedback, opinions and help.
Posted by: Oxac Nov 11 2008, 11:26 PM
Hi guys. I have something that I need help with. Now there's an annoying blue border around my awesome logo, the logo works as a link as well. Anyone know how to get rid of it?
Posted by: wrk Nov 12 2008, 12:18 AM
i guess you have to add BORDER=0 in your <img> tag ... but my html knowledge is a bit dusty
Posted by: Oxac Nov 13 2008, 04:46 PM
That solved the problem. Thanks wrk.
Posted by: Darfuria Nov 13 2008, 04:54 PM
Not a bad design idea - but you're going to have all kinds of problems with that page rendering correctly on different browsers and screen sizes.
I'm a website developer, but unfortunately don't have the time to do freelance work for free these days. More than happy to give advice, though.
Posted by: Muris Varajic Nov 13 2008, 05:01 PM
I'd like to add one thing,it has nothing to do with wed design tho
since I have no idea about it indeed.
In products specs it say "this mic will feature...".
I think you should use word pickup after all,
mic and pickup work both on magnetic field and it is similar idea
but word mic just might confuse someone imo.
Posted by: Canis Nov 13 2008, 10:18 PM
Site looks great, Oxac ^^
Of course, I have no clue about webdesign, but I bet it's hard to make something like that
Posted by: Koopid Nov 14 2008, 08:47 AM
I like the choice of color on the website, the overall design is also very clean and nice to look at.
The changes I would make is:
1. Maybe change the logo to a color that suits the websites warm colors better?
2. Fix the border on the logo on subpages, it is still showing
3. The top oriented menu on subpages, align it left. In my opinion it looks more professional.
4. The image on the startpage. If you want to use that image, get a better resolution version of it.
I am an oldschool webprogrammer. I dont know how many thousands of pages I made but I started back when you had to take 14 inch monitors into consideration..
Never use percentages (other than 100% inside a tablecell that has a fixed width) and align all important info to the top left so that noone, regardless of monitor size, can see it are the rules i still live with
Posted by: Oxac Nov 14 2008, 05:33 PM
Yes Muris, you're right. I didn't do that on purpose though, since a microphone and a pickup aren't the same thing. You're right about both working with a magnetic field, but on a mic you have a membrane which vibrates due to the soundwaves. On a pickup you magnetize the strings instead, they work as the membrane in the microphone.
I'm not having too much problem with it Darfuria, what exactly did you have in mind?
Thanks Canis, it's not easy (unless you know what you're doing). And I haven't got a clue of what I'm doing really.
-Edit- regarding the border on subpages, I forgot to fix the file that handles that. Will do it later. Regarding the sub-menu, thank you for your advice. I will however keep it at that place. Sorry koopid, I can't get a better resolution of that image. I do also not want to get my hosting canceled because of exceeding the bandwidth. Thank you for your opinion though.
Posted by: Muris Varajic Nov 14 2008, 08:36 PM
Good then,just to avoid confusing someone.
Posted by: Oxac Nov 15 2008, 12:04 AM
Yeah, thanks for pointing it out
Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)