1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Should I Code This New Design Or Throw It In The Dumpster?

Discussion in 'HTML & Website Design' started by jim_rei_mer, Jun 8, 2008.

0
Page 2 of 2
  1. risoknop

    risoknop Peon

    Messages:
    914
    Likes Received:
    24
    Best Answers:
    0
    Trophy Points:
    0
    #21
    Ok. If you want to start coding I have just one advice for you. Don't ever use any WYSIWYG editor... please code by hand.
     
    risoknop, Jun 9, 2008 IP
  2. wd_2k6

    wd_2k6 Peon

    Messages:
    1,740
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #22
    I think it's helpful for a newbie to have an autocomplete editor rather than plain Notepad. By this i mean as the user starts typing the choices of what the user can type in comes up, not WYSWIG. Also it automatically closes off tags i.e /> for self closing or </div> if required etc. as you begin to do it to ensure XHTML standards if set as DOCTYPE.

    I know Dreamweaver code view does this, not sure about any other programs. I understand it's quite easily possible to start with Notepad but I think it saves a lot of headaches and has it's educational benefits.

    I'm glad you have Dan's theme as starting off with the standard Kurbrick is a headache and you often spend hours searching G because the php is not commented and imo the CSS for that theme is crazy, the basic newbie has no chance of implementing changes to this theme.
     
    wd_2k6, Jun 10, 2008 IP
  3. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #23
    I use Edit+ (you can get it for $30 at www.editplus.com) for everything that requires a text editor. That and over five years experience developing Web sites using semantic markup and CSS by hand. :)
     
    Dan Schulz, Jun 10, 2008 IP
  4. risoknop

    risoknop Peon

    Messages:
    914
    Likes Received:
    24
    Best Answers:
    0
    Trophy Points:
    0
    #24
    I recommend PSPad - freeware code editor. I have been using it for over year now and it is very useful.
     
    risoknop, Jun 10, 2008 IP
  5. blktallos

    blktallos Active Member

    Messages:
    314
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    60
    #25
    I Emailed you Jimmy :D
     
    blktallos, Jun 11, 2008 IP
  6. jim_rei_mer

    jim_rei_mer Peon

    Messages:
    77
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #26
    You're telling me to code by hand? The discipline of coding sounds like I need to lock myself up in my room for two years uninterrupted. Can't do it.

    The discipline of design allows for much more interruption. Like every 5 minutes interruption. (home life) ;)
     
    jim_rei_mer, Jun 11, 2008 IP
  7. jim_rei_mer

    jim_rei_mer Peon

    Messages:
    77
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #27
    It's those five years I'm supposing would make the difference not the editor. Am I right? :)
     
    jim_rei_mer, Jun 11, 2008 IP
  8. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #28
    When I can do things like this, yes.

    
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
	<head>
		<title>Untitled Document</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta http-equiv="Content-Style-Type" content="text/css">
		<meta http-equiv="imagetoolbar" content="no">
		<meta name="description" content="A brief description of the current page goes here.">
		<meta name="keywords" content="keywords, go, here, only, once, page, content, has, been, finished">
		<style type="text/css" media="screen">
			
			* {
				margin: 0;
				padding: 0;
			}

			body {
				background: #FFF;
				color: #000;
				font: normal 85%/150% tahoma, verdana, arial, helvetica, sans-serif;
				letter-spacing: 1px;
			}

			h1, h2, h3, h4, h5, h6 {
				background: transparent;
				color: #DC143C;
				font-family: georgia, garamond, "times new roman", times, serif;
				font-weight: bold;
			}

			h1 {
				font-size: 1.55em;
				line-height: 1.8em;
			}

			h2 {
				font-size: 1.25em;
				line-height: 1.3em;
			}

			h3 {
				font-size: 1.05em;
				line-height: 1.1em;
			}

			h4 {
				font-size: 0.95em;
				line-height: 1em;
			}

			h5 {
				font-size: 0.85em;
				line-height: 0.9em;
			}

			h6 {
				font-size: 0.75em;
				line-height: 0.8em;
			}

			img {
				border: 0;
				vertical-align: bottom;
			}

			#container {
				background: #EEE;
				color: inherit;
			}
				#header {
					background: #0CF;
					color: #000;
					height: 80px;
				}

				#menu {
					float: left;
					position: relative;
					width: 12em;
				}
					#menu li {
						display: inline;
						height: 1.5em;
						line-height: 1.5em;
						list-style: none;
					}
						#menu li a {
							display: block;
							height: 1%;
							padding: 0.25em 0 0.25em 1em;
							text-decoration: none;
						}

						#menu li a:hover, #menu li a:active, #menu li a:focus {
							background: #CCF;
							color: inherit;
						}
				
				#content {
					float: left;
					margin: 0 -20em 0 -12em;
					width: 100%;
				}
					#content .wrapper {
						background: #FFF;
						color: inherit;
						margin: 0 20em 0 12em;
						padding: 0 1em;
					}
						#content .wrapper p {
							padding: 0.5em 0;
						}
				
				#ad-bar {
					background: #CDE;
					float: left;
					height: 200px;
					width: 10em;
				}
					#ad-bar div {
						padding: 0 0.5em;
					}

				#sidebar {
					background: #CFA;
					color: inherit;
					float: left;
					height: 300px;
					width: 10em;
				}
					#sidebar p {
						padding: 0 0.5em;
					}

				#footer {
					background: #F9C;
					clear: left;
					color: inherit;
					height: 1%;		/* triggers hasLayout in IE 6 */
				}
					#footer em {
						display: block;
						font-style: normal;
						padding: 0.5em 0 0.5em 1em;
					}
		
		</style>
	</head>
	<body>
		<div id="container">
			<div id="header">
				<img src="#" width="200" height="80" alt="Logo" title="">
			</div>
			<ul id="menu">
				<li><a href="#">Menu Item</a></li>
				<li><a href="#">Menu Item</a></li>
				<li><a href="#">Menu Item</a></li>
				<li><a href="#">Menu Item</a></li>
				<li><a href="#">Menu Item</a></li>
				<li><a href="#">Menu Item</a></li>
			</ul>
			<div id="content">
				<div class="wrapper">
					<h1>Web Page Title</h1>
					<p>
						Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In quis erat.
						Nulla auctor consectetuer erat. Sed est tellus, laoreet et, faucibus et,
						cursus ut, lectus. Nulla scelerisque, mi vel commodo consequat, turpis
						ligula congue ligula, eget pellentesque turpis augue quis diam. Nulla
						facilisi. Etiam commodo quam in metus. Etiam nec nisi ac nisl molestie
						fermentum. Donec ligula ipsum, venenatis in, egestas vel, commodo
						bibendum, est.
					</p>
					<p>
						Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In quis erat.
						Nulla auctor consectetuer erat. Sed est tellus, laoreet et, faucibus et,
						cursus ut, lectus. Nulla scelerisque, mi vel commodo consequat, turpis
						ligula congue ligula, eget pellentesque turpis augue quis diam. Nulla
						facilisi. Etiam commodo quam in metus. Etiam nec nisi ac nisl molestie
						fermentum. Donec ligula ipsum, venenatis in, egestas vel, commodo
						bibendum, est.
					</p>
				</div>
			</div>
			<div id="ad-bar">
				<div>(Ads Go Here)</div>
			</div>
			<div id="sidebar">
				<p>(Sidebar Goes Here)</p>
			</div>
			<div id="footer">
				<em>Copyright &#38;#169; 2006-2008, The Monster Under the Bed. All Rights to Scare Unsuspecting Children Reserved.</em>
			</div>
		</div>
	</body>
</html>
    Code (markup):
     
    Dan Schulz, Jun 11, 2008 IP
  9. jim_rei_mer

    jim_rei_mer Peon

    Messages:
    77
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #29
    Well I'm using firebug to work the css in ways that reduce the time of hand coded trial and error type things.

    One service I'd like is to work the CSS and what not on my own but to get a mentoring program to evaluate and make suggestions on my work. That way I wouldn't have to repeat really bad noob habits that would unknowingly stunt my growth.

    You know?

    But ultimately I think my time is better spent building up a talented social network of colleagues. Am I right to assume that if I found work you'd be happy to take on those projects? With fair and above rates of course.

    And that question is for mostly everyone here.
     
    jim_rei_mer, Jun 11, 2008 IP
  10. jim_rei_mer

    jim_rei_mer Peon

    Messages:
    77
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #30

    And I'm assuming you just typed that all out just now as you thought to to make a point? :)

    Seriously, skillful wisdom is a blessed thing and it's exactly why I chose to learn a new skill (graphic design) before I end up living life I'm not passionate about.
     
    jim_rei_mer, Jun 11, 2008 IP
  11. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #31
    Actually I copied it from a sample layout I coded earlier this year. You can see it in action here: http://www.dan-schulz.com/temp/4columnlayout/

    And just to make things easier, I am going to be writing a guide on how I code layouts so that others can learn from me. (It's actually one of the sites I currently have in development.)
     
    Dan Schulz, Jun 11, 2008 IP
  12. jim_rei_mer

    jim_rei_mer Peon

    Messages:
    77
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #32
    Okay, so here is the reworked version with more changes as suggested.

    The footer is cleaner, with more "something", and not spanning.

    The comment section was lightened.

    Addition adds: I added more ad placement options that might be of benefit. :)

    Here are two images one full layout as well as detailed portion of the footer.

    [​IMG]

    [​IMG]


    Everything in this layout is amazing live size. I can't wait to get it coded. Thank you for all your suggestions making it just right.
     
    jim_rei_mer, Jun 11, 2008 IP
  13. HairlessTaco

    HairlessTaco Banned

    Messages:
    56
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #33
    Honestly, I think it is pretty good. You could put it up for sale in the template section and probably get a good bit for it.

    Good Work.
    Dave
     
    HairlessTaco, Jun 11, 2008 IP
  14. hatrick24

    hatrick24 Peon

    Messages:
    43
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #34
    hmm. i am a coder. and i like the design. although i like the previous footer, the one with 100% width. please revert back to that, i suggest
     
    hatrick24, Jun 11, 2008 IP
  15. clothdeal

    clothdeal Peon

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #35
    So cool website!
     
    clothdeal, Jun 11, 2008 IP
  16. jim_rei_mer

    jim_rei_mer Peon

    Messages:
    77
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #36
    Overruled! Executive decision. Although, this executive thinks it best to be flexible and to uphold the vision. There will be many versions of this theme to cater to most preferences.

    Color schemes, footers, backgrounds...

    It's nice to have preference and even better for users not having to modify all these little changes when it could have been done by the designer.
     
    jim_rei_mer, Jun 11, 2008 IP
Page 2 of 2