Webdesigner [paying] help wanted

[LDAsh]

This was a code-only (no graphics required) paying job involving private help developing a website within a team of people.

We would love and really desperately need some help developing, testing and debugging our new site design, and I'm willing to pay someone a modest fee for some personal time to help me with some practical things, because we've been meaning to get some "professionalistic" help for a long time but could never quite get there for a number of reasons, whether it's software licenses or credits and advertising, or all-or-nothing professional webdesign contracts, there have always been issues finally getting it done right.
____

We have mockups to work from already:-
(please test these sites with different browsers, poke it around, laugh at the source, let me know how it can be improved and any feedback so far is very welcome, thank you!!!)
(if the above URL is 404, it means the site is done)
____

This has been made entirely with Wordpad so far and the source you see is how I've written it. Horrible! - but does fundamentally work how we want it already. I'm not a webdesigner, I know some basic HTML from the early days and can "hack" things together (as you can see) using frames, layers and tables. I've spent the last couple of days just trying to get the preformatted text to wrap correctly in both Internet Explorer and Mozilla Firefox, which are the 2 browsers I've been using to test with while I write the HTML.

So first of all, what I did and why, and then what I want to do and need help with...

I began with a focus on resizing and zooming in browsers. Every site I had made before was made under the assumption that everyone on Earth was either using 800x600 or 1024x768, and the highest beyond that was only slightly wider, 1280x768, and box shape sitting right in front of them, a fair assumption too. These days people have 16:10 ratios and 2560x1600 displays that take up nearly a whole wall, I need to make sure the site works "well enough" under both conditions, and that it can be resized in its window and zoomed in and out in a nice way. So far, I think it's a miracle I've actually been able to do it like I have and it already beats anything I've done before based on that.
Far less impressive is the menu system I have in mind and using frames the way I have. I can sense your disgust in me already, but please keep in mind it's that I still don't know any better. I've hacked together this code in such a brutal way to get around problems the best I can, looking at the code you'd probably be somewhere between confused and amused. The big issue I have right now is that one can easily lose the menus by dragging the mouse within them, which is a generally huge issue to have as they would become lost to the user, not visible and require a refresh. The reason I've done it with frames is because ("I think I can" and) want to have like an optional multiple subsystem menu, by allowing links in that frame to target itself and bring new options without making a mess. It will be from 1 to 3 options, which will be "menu option" > "project/site area" > "project details/site area details". So the main menu can target the content area, the submenu, or the submenu could target itself again to allow access to every different part of the site and never need to reload the navigation content.

And now what I want to do next, and need (paid) help with, is the menu system and its issues. I don't like it, but like I said, I simply don't know any better, which is the whole reason I began writing the HTML using frames, for as many issues as it unleashes, it's still the most efficient way I know to do what I want. This would be the first paid involvement. Beyond that, we should probably focus on different scalability and compatibility concerns because I'm sure there's much more I'm not aware of yet, and having preformatted text that is easy to update and wraps nicely around the page is a big concern for me, but then afterwards there's a whole lot of fun and nifty things I'd like to do which should be a lot more enjoyable to work on.

Details about how this would actually work out is a varying hourly payment (~$), privately negotiated, for personal communication time where the issues would be dealt with using IRC and FTP, then along with another software such as Skype. Development must not rely on other unlicensed softwares or libraries, and developer must upload unique files to FTP server with restricted access under a non-exclusive rights contract, which relates to the payment itself. Basically, it's forced to happen legitimately or not at all, so please contact me only if you actually have the artillery to do this. The upside is that we'll have a decent amount of time, no huge rush yet, so this can easily be someone's side-project.

If everything works out nicely enough in all aspects, we may consider going a lot deeper into another big website design that involves more complex code and so bigger contracts and payments, but for now what we're really looking for is both some community help and feedback, in whatever form it may be (feel free to edit our HTML files and post them right back to me! ) and anyone who is interested in some extra income for privately helping me along with having better code, please PM me for more details.

A thousand thankyous for your time!
.
.
.
_____________________________________________________
----------
issues:-
- needs debugging, many incorrect tag functions and values.
- missing graphics, still many text placeholders and temps.
- can click and drag the mouse in the menu frames, losing focus, hiding buttons and losing navigation.
- still can't get the preformatted text to wrap nicely around the tables.
- preformatted text different IE vs Firefox (padding issues).
-
----------
todo.next:-
- have all non-content graphics preload and display first (300KB).
- make sure unique content URLs always load within frames.
- prevent text resizing in all non-content frames.
- functional menu/submenus and multiple content pages.
- galleries and image-viewer.
-
.
.
.

 

[Phreaddee]

haha, yep, miserable code.

the only way it will effectively work in any browser is to code it correctly.

your menu is the least of your issues.

frames and tables are bad enough
no doctype
no char set
inline html styles
marquee

and thats not even mentioning the bad design and typography.

best way to fix this site is to start again.

this "may" have worked in the netscape navigator/ie6 heyday but not now.

if you have any desire to use this site and successfully. you'll redo it.

 

[LDAsh]

Have already admitted to not being a webdesigner and I understand that frames are bad and I'm going the wrong way because of that. This is precisely why this thread exists here and I offer to pay to get it done correctly.

Any practical help would be appreciated, instead of just repeating what I've already said about how it's not good just for another chance at getting your links on the web. I was already first to criticise it.

 

[Phreaddee]

hardly going about this to get my "links on the web" !

OK. a few examples...
doctype.

<!DOCTYPE html>

charset

<meta charset="utf-8" />

menu

<ul>
<li><a href="#">menu item 1</a></li>
<li><a href="#">menu item 2</a></li>
<li><a href="#">menu item 3</a></li>
<li><a href="#">menu item 4</a></li>
<li><a href="#">menu item 5</a></li>
<li><a href="#">menu item 6</a></li>
<li><a href="#">menu item 7</a></li>
</ul>

basic site structure

<body>
<div id="wrapper">
<div id="header"> HEADER GOES HERE </div>
<div id="menu"> MENU GOES HERE </div>
<div id="content"> CONTENT GOES HERE </div>
<div id="footer"> FOOTER GOES HERE </div>
</div>
</body>

use logical semantic markup

<h1>HEADER 1</h1>
<h2>HEADER 2</h2>
<h3>HEADER 3</h3>
<p>PARAGRAPHS</p>

css
use this on your wrapper

#wrapper {
margin:0 auto;
width:960px;
}

for your paragraphs use line spacing

p {
font-size:12px;
line-height:18px;
}

tables and frames is not the way to go about it. explain and clarify all you want but the only way to make an improvement to the site is to start again and code it correctly.
so therefore I did give constructive advice, you just chose not to listen.

 

[Phreaddee]

validator says 26 errors

http://validator.w3.org/check?uri=h...(detect+automatically)&doctype=Inline&group=0

 

[Phreaddee]

and frames will break in modern browsers
and tables will break with any resizing of the text (cntrl +, cntrl -)

not to mention your page isnt even inside a <body> tag
and html inline styles are deprecated.
ie.

marginheight="160" marginwidth="870" scrolling="no" resize="horizontal"

this doesnt work anymore

scrollbar-arrow-color: FFFFFF; 
scrollbar-base-color: 116677; 
scrollbar-dark-shadow-color: 000000; 
scrollbar-track-color: 112233; 
scrollbar-face-color: 11BBFF; 
scrollbar-shadow-color: 111111; 
scrollbar-highlight-color: 0077FF; 
scrollbar-3d-light-color: 99DDFF;

also you might want to look at the definition of position:absolute; as its not your answer either.
also

<font face="tahoma" size="1">

is also deprecated, use css instead.
px sizes should be defined rather than guessed

 

[Phreaddee]

as for working effectively on all resolutions, you might want to know that it is suggested that a maximum of 15 words per line be employed for readability (and thats at the extreme) and simply resizing your page so that it "fits" on a 27" imac is not how its done!

for those screens you either have a wrapper that is centered or you use media queries. I dread to think what this site looks like on my android!

frames were dropped for a reason, and as your index page has no content it will not show in google, but your frames will...

tables too are only meant to be used for tabular data, this is indeed the line the w3.org also state...

 

[LDAsh]

That's more like it! Now you're being helpful and now I am listening. It's good to think of what you've seen from me as a mockup of what I have in mind. I have a new signature here now because I feel like I need to type it every single post and make it even more apparent what's going on, I'm not a webdesigner and I work with the little knowledge that I have. I'm going to make another mockup without using tables or frames, I've read about floating layers, anything bad to say about them too?

Thanks for the practical help, I will try to incorporate it into my new mockup if it doesn't eat up too much of my time learning exactly how it all works. If you're interested in getting paid to do it for me, please let me know. This would be the ideal way to go about it.

 

[Phreaddee]

im happy to help, and would rather you learn it right than get paid for it.
but thanks for the offer.

To begin with create a folder on your computer for your website.
for arguments sake, i'm calling it project.

in this create three other folders.
css
js
images

download the latest jquery
http://code.jquery.com/jquery-1.7.1.min.js
save this in the folder js.

add a reset.css. this one from eric mayer is a pretty good start
http://meyerweb.com/eric/tools/css/reset/reset.css
save this in the css folder

when you create your index.html file
if you use the html5 doctype
ie.

<!DOCTYPE html>

then add this to your head

!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

and create a blank css file called style.css, then link to that and both the jquery and the reset css also in the head.

<script type="text/javascript" src="/js/jquery-1.7.1.min.js"></script>
 <link type="text/css" rel="stylesheet" href="/css/reset.css">
 <link type="text/css" rel="stylesheet" href="/css/style.css">

do all your styles in that css file.
learn your html tags, and apply styles to them in the css.
you can also use ids (one use per document) and classes (many uses per document)
which are applied in the html as such

<div id="uniquename"> </div>
<div class="multiple"> </div>

obviously call them something meaningful to you.

and these are targetted in the css as follows

#uniquename {
selector: value;
selector: value;
}

.multiple {
selector:value;
selector:value;
}

and your html tags are

h3 {
selector: value;
selector: value;
}

p {
selector:value;
selector:value;
}

that should be enough to get you started at least!

and get the building blocks up to a modern standard.
the reset.css means there is no browser styling quirks to throw you out, and makes it essentially a blank canvas.
the jquery script means that you can utilise the jquery library (read up on it if you dont know what it is)
(you might even want to look into jquery ui as well.)
the html5 shiv helps older browsers to play nicely.

as for "floating layers" I do not know what you mean to be honest, but if you are referring to using floats then yes, Id definately go down that path!

 

[Phreaddee]

for instance your image on your home page, simply

.image-right {
float:right;
margin-bottom:10px;
margin-left:10px;
}

and it will always sit on the right (with the text wrapping around it, with a space between the image and the text of 10px. the html for that would simply be

<img src="/images/imagename.jpg" alt="descriptive name" class="image-right" />
<p>and placed just before the paragraph it is to float next to. 
like this one...</p>

 

[LDAsh]

I'm following your advice and reading up on CSS. Seems very powerful and does make frames and tables start to seem useless anyway. Some things I don't understand, so it would be great if it's always explained exactly where bits of code actually go, because sometimes I don't know exactly where or within what something should be, such as:-

css
use this on your wrapper
Code:

#wrapper {
margin:0 auto;
width:960px;
}

for your paragraphs use line spacing
Code:

p {
font-size:12px;
line-height:18px;
}

This stuff starts to look more like real code than HTML to me so I get lost. Where are these placed exactly?

 

[Phreaddee]

anything i write in the code tags ie.

THIS IS CSS

and anything I write in html tags i.e

THIS IS HTML

it will say just above the box.

 

[Phreaddee]

with your css start with generalisations then get specific.

with your html, follow the document flow.

 

[LDAsh]

Thanks Phreaddee, I really appeciate your help. I've followed your instructions best I can figure, up for your inspection:-
http://www.violae.net/_/2/
(figured out the text wrapping issue)

 

[Phreaddee]

well, you never EVER will get a word that long, if you give it a space every now and then, it will drop to the next line.

in any case your html is not entirely formed properly, and the css should be in the style sheet

so this is what your html for _2 should look like

<!DOCTYPE html>
<html>
<head>
<!--[if lt IE 9]> 
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]--> 
<title>ViolaE</title>
<meta charset="utf-8" />
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<link type="text/css" rel="stylesheet" href="css/reset.css"> 
<link type="text/css" rel="stylesheet" href="css/style.css"> 
</head> 
<body>
<div id="wrapper"> 
<div id="header">
<h3>this</h3>
</div> 
<div id="menu">
<ul> 
<li><a href="#">menu item 1</a></li>
<li><a href="#">menu item 2</a></li> 
<li><a href="#">menu item 3</a></li> 
<li><a href="#">menu item 4</a></li> 
<li><a href="#">menu item 5</a></li> 
<li><a href="#">menu item 6</a></li> 
<li><a href="#">menu item 7</a></li> 
</ul> 
</div> 
<div id="content"> 
<h1>this is header 1</h1> 
<p>Etiam tincidunt vestibulum urna, quis commodo magna scelerisque vel. Sed  eu pretium arcu. Morbi aliquam viverra sem, et porttitor eros vehicula  ut. Morbi vel sapien odio. Proin malesuada accumsan faucibus. Cras eget  mi ligula, sit amet volutpat nisl. Vivamus ultricies facilisis quam id  fermentum. Sed auctor, odio in mollis blandit, mi dui bibendum ante, ut  cursus justo nisi sed ante. Integer eget convallis ante. Donec ultricies  dui quis lacus tempus semper.</p> 

<p class="p1"> Etiam tincidunt vestibulum urna, quis commodo magna scelerisque vel. Sed  eu pretium arcu. Morbi aliquam viverra sem, et porttitor eros vehicula  ut. Morbi vel sapien odio. Proin malesuada accumsan faucibus. Cras eget  mi ligula, sit amet volutpat nisl. Vivamus ultricies facilisis quam id  fermentum. Sed auctor, odio in mollis blandit, mi dui bibendum ante, ut  cursus justo nisi sed ante. Integer eget convallis ante. Donec ultricies  dui quis lacus tempus semper.</p>

<p class="p2"> Etiam tincidunt vestibulum urna, quis commodo magna scelerisque vel. Sed  eu pretium arcu. Morbi aliquam viverra sem, et porttitor eros vehicula  ut. Morbi vel sapien odio. Proin malesuada accumsan faucibus. Cras eget  mi ligula, sit amet volutpat nisl. Vivamus ultricies facilisis quam id  fermentum. Sed auctor, odio in mollis blandit, mi dui bibendum ante, ut  cursus justo nisi sed ante. Integer eget convallis ante. Donec ultricies  dui quis lacus tempus semper.</p> 
</div> 
<div id="footer"></div> 
</div> 
</body> 
</html>

(use lorem ipsum for dummy text, bit closer to reality)
and your css should look like this

/* layout */

body{
background-color:#000737;
font-family: tahoma, arial, verdana; 
} 

#header {
width:100%; 
}

#wrapper{
margin:0 auto;
width:960px;
}

/* typography */
h1 {
font-size: 1em; 
color: #EEDD99;
}

h3{
color: #BBDDFF;
}

p{
font-size:12px;
line-height:18px;
color:#EEDD99;
}

.p1{
font-size:17px;
line-height:18px;
color:#EEDD99;
}

.p2 {
width:100px;
background-color : #cccccc;
}

 

[Phreaddee]

no inline styles!
do all styles in the css!

 

[LDAsh]

The code you've posted seems to be giving me a blank screen now.
(works in IE but not Firefox, also takes a long time to refresh, that's not normal)

 

[Phreaddee]

apologies.
the conditional wasnt fully written

i've edited the post. it should work now...

 

[LDAsh]

Thanks again. I've been able to make a little more progress on it but I think it's up for inspection again already, the way I have placed, fixed and aligned things in the CSS. Still following my previous design with the way I have the header and menu, and ready to hear all about the technical wrongs of what I've done. (from anybody):-
http://www.violae.net/_/2/

The only thing I couldn't make happen via the CSS file is style="background-image:url(*)", only seems to work when I use it in the HTML. Apart from that, I've taken your advice and trying to keep the HTML as simple as possible. I'd like to do much more but only if I can be certain it's correct.

 

[d a v e]

try this btw
http://lipsum.com/