Recent Web Stuff

ipkjooo · December 25, 2009

Hey guys, long time no see :l

Putting up some web stuff I'm getting back into and would like some comments/crtisicm

Thanks

[hide=BIG]

[/hide]

Heres the code if anyone cares.

[hide= Wide]

<!DOCTYPE html>
<html>
<head>
	<title>Design Services | Pickering High School</title>
	<link type="text/css" rel="stylesheet" href="css/reset.css">
	<link type="text/css" rel="stylesheet" href="css/960.css">
	<link type="text/css" rel="stylesheet" href="css/default.css">
</head>

<body>


	<!-- Start Header -->
	<div id="header">

		<div class="container_12">

			<!-- Start Nav -->
			<ul id="nav" class="grid_8">
				<li><a href="#" class="active">Home</a></li>
				<li><a href="#">Projects</a></li>
				<li><a href="#">Services</a></li>
				<li><a href="#">About Us</a></li>
				<li><a href="#">Contact Us</a></li>
			</ul>
			<!-- End Nav -->

			<div id="search" class="grid_4">
				<input type="text" name="search" value="Search Design Services" size="30"/>
				<a href="#"><img src="images/search.png" alt="Search"/></a>
			</div>

		</div>

	</div>
	<!-- End Header -->

	<!-- Start Slider -->
		<div id="slider">

			<div class="container_12">

				<!-- Start Logo -->
				<div id="logo" class="grid_4">

					<img src="images/logo.png" alt="Design Services"/>

				</div>
				<!-- End Logo -->

				<!-- Start Image Slider -->
				<div id="image_slider" class="grid_8">

					<img src="images/slide_img.png" alt="Image"/>

					<span class="caption">

						<h2>"Communication is the spice of life" - John Doe</h2>
						<h3><strong>1</strong> 2 3 4</h3>

					</span>

				</div>
				<!-- End Image Slider -->

			</div>

		</div>
	<!-- End Slider -->

	<!-- Start Content -->
	<div id="content" class="container_12">

		<div id="sub1">

			<h2>What is it?</h2>
			<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages.</p>

		</div>

		<div id="sub2">

			<h2>Why should you care?</h2>
			<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using Content here, content here, making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for lorem ipsum will uncover many web sites still in their infancy. </p>

		</div>

		<div id="sub3">

			<h2>Where can you get some?</h2>
			<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which dont look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isnt anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet.</p>

		</div>

	</div>
	<!-- End Content -->


	<!-- Start Footer -->
	<div id="footer" class="container_12">

		<!-- Start Copyright -->
		<div id="copyright">

			<p>© Copyright Design Services 2009.</p>

		</div>
		<!-- End Copyright -->

		<!-- Start Foot_Nav -->
		<ul id="foot_nav">
			<li><a href="#" class="active">Home</a></li>
			<li><a href="#">Projects</a></li>
			<li><a href="#">Services</a></li>
			<li><a href="#">About Us</a></li>
			<li><a href="#">Contact Us</a></li>
		</ul>
		<!-- End Foot_Nav -->

	</div>
	<!-- End Footer -->

</body>
</html>

[/hide]

dsavi · December 26, 2009

You're certainly onto something with that design but the typography is lacking. You have it set to Arial, which is OK, but either you're not using it very well or you shouldn't be using it. I can't really decide. The "Design Services" logo text is fine, but good luck complementing it with typography. Try Trebuchet MS.

The footer feels a bit random and isn't put to any use.

The header has too much contrast relative to the rest of the body; It's distracting.

Can you post the CSS? I have this feeling you use transparent PNGs for those boxes. :shame:

ipkjooo · December 26, 2009

[hide=CSS]

/*General Styles*/

html {
font-family: Arial, sans-serif;
font-size:100%;
}

body {
background:url(../images/bg_splash.png) no-repeat 50% 0;
}

/*Header Styles*/

#header {
background:url(../images/header_bg.png);
overflow:hidden;
height:31px;
line-height:31px;
border-bottom: 1px solid #000000;
}

ul#nav {

}

ul#nav li {
display:inline;
}

ul#nav li a {
float:left;
margin: 0 10px 0 0;
height:31px;
color:white;
text-decoration:none;
font-size:12px;
}

ul#nav li a.active, ul#nav li a:hover {
background:url(../images/active_page.png) no-repeat 50% 100%;
}

#search {
position:relative;
}

#search a img {
position:absolute;
left:68%;
top:10%;
}


/*Slider Styles*/

#slider {
min-height:290px;
background:url(../images/slider_bg.png);
}

#slider #logo {
margin: 87px 0 0 0;
}

#slider #image_slider {
position:relative;
padding: 15px 0;
}

#image_slider img {
border: 5px solid #eeeeee;
}

#image_slider .caption {
position:absolute;
bottom:22px;
left:5px;
width:100%;
height:40px; line-height:40px;
background:url(../images/slider_caption.png);
}

.caption h2 {
color:white;
font-weight:normal;
font-size:16px;
padding: 0 10px;
float:left;
}

.caption h3 {
color:white;
font-weight:normal;
font-size:16px;
padding: 0 10px;
float:right;
}


/*Content Styles*/

#content {
font-family:Arial, sans-serif;
font-size:12px;
background:#ffffff;
}

#sub1, #sub2, #sub3 {
float:left;
width:300px;
height:270px;
margin-top:10px;
padding: 10px 10px 10px 10px;
background:url(../images/column_bg.png) no-repeat top center;
}

#content h2 {
font-size:14px;
padding: 5px 10px 5px 10px;
}

#content p {
padding:5px 10px;
line-height:18px;
}



/*Footer Styles*/

#footer {
position:relative;
clear:both;
color:#aaaaaa;
font-size:12px;
height:30px;
line-height:30px;
}

#copyright {
float:left;
}

#foot_nav {
float:right;
}

#foot_nav li {
display:inline;
}

#foot_nav li a {
color:#aaaaaa;
text-decoration:none;
}

#foot_nav li a:hover, #foot_nav li a.active {
text-decoration:underline;
}

[/hide]

The footer isnt what it is there, I have just been too lazy to take a screenshot of what's been coded, maybe I'll upload that later..

And the text logo is more of a placeholder than anything so that will likely change.

ipkjooo · December 27, 2009

Live Demo: Here

Mil · December 27, 2009

It's pretty good, well coded and designed. But it needs something a bit extra to stand out. Good use of a CSS framework, but the style is quite common. Adding some more colour and vibrance, as well as relatively large icons for the 3 boxes at the bottom would liven it up a bit.

dsavi · December 28, 2009

Ehh, icons are overused these days. It's hard to get it right when it's so easy to get it wrong.

Your page took a good 10 seconds to load, I understand it's from a "free" host but try to optimize your page so that it loads in ~5 seconds with a clean cache.

ipkjooo · December 28, 2009

Yes the loadtime is horrible, haven't optimized everything yet as I still need to run it past the client to make sure its all good.

dsavi · December 28, 2009

Personally I take the approach of optimization and web standards from the ground up. Surprisingly enough it's very easy to write standards compliant code if you just follow the obvious stuff (Don't make tag soup, end your tags, don't use old tags, encode your special characters).

You've got only one error on validator.w3.org, I congratulate you. Just a simple change.

Two things about that though:

First

<!DOCTYPE html>

:shame: Replace it with

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

Second you have not defined the character encoding. Put this in your <head> tag.

<meta http-equiv="Content-type" content="text/html;charset=windows-1252">

But otherwise you've done a good job on this and I'm nitpicking.

ipkjooo · December 28, 2009

The

<!DOCTYPE html>

Is the new standard for declaring an Html-5 document.

Nadril · December 29, 2009

I don't really care for the blue splatter to be honest. Not sure what I'd do in its place, however.

ipkjooo · December 29, 2009

Yeah, I haven't been able to find something that would fit in place for the background :l

i_love_burritos · December 30, 2009

The bottom half looks too empty.

ipkjooo · December 30, 2009

The bottom half looks too empty.

Any suggestions of what to add?

navyplaya · December 30, 2009

Don't know much about web design, but I do agree with Adrenal that the bottom seems empty. Don't have the slightest clue of what you could add though. :razz:

Recent Web Stuff

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Important Information