Full Version: Review My Website
Please have a review of my sticker printing services website, newly designed, i need feedback especially on logo designing as i worked hard on it and approved on the fifth time by my admin.
QUOTE(muqtada123 @ Jul 14 2009, 09:44 PM) 
Please have a review of my sticker printing services website, newly designed, i need feedback especially on logo designing as i worked hard on it and approved on the fifth time by my admin.
Like the logo,the website is bright and easy to navigate. I did find the two different fonts difficult to focus on,that may just be my eyes, if there is a purpose for it it's not so bad that you can't read it.
Hi muqtada123,
Nice web design, I found it to be refreshingly clean, crisp and airy, liked the design mix of the content layout with that easy background (I think a stationary background with floating page content would be great eye candy on your pages and a great way to say to Your Visitor - Let me bring the page to you!, the pages are perfect for it).
The IDSketch Logo looks good, but does seem thin, or simply: A little out of place. The actual text needs to be more pronounced in height if it is to accentuate the area/page. Those are my immediate thoughts.
Nice web design, I found it to be refreshingly clean, crisp and airy, liked the design mix of the content layout with that easy background (I think a stationary background with floating page content would be great eye candy on your pages and a great way to say to Your Visitor - Let me bring the page to you!, the pages are perfect for it).
The IDSketch Logo looks good, but does seem thin, or simply: A little out of place. The actual text needs to be more pronounced in height if it is to accentuate the area/page. Those are my immediate thoughts.
i like the nice, clean layout--it wasn't too cluttered and easy to navigate. great job...
I personally like the logo, but the design is very bland. It needs a little bit more "shazam" in it.
looks cool
Very well done....certainly looks professional! Congrats on the great website
I just got updated version of my website, i changed some looks, put some banners and especially i changed the logo, please have recheck at it. thanks
Great logo design. could you design me for free 
just kidding.
just kidding.
You have a good logo for your website but i think that you need to change the colour scheme of your website
design is ok just change the colour themes
design is ok just change the colour themes
Yes I agree with u , logo is very nice but whats lagging is colour schemes use best schemes to look more better
Your site looks fine. But it would be nicer if you had few banners on the right!
----------------------------
Vietnam Tours
----------------------------
Vietnam Tours
Please have a review of my Learn Quran online services website.
QUOTE
Please have a review of my Learn Quran online services website.
Quick Answer: The website is using outdated and obsolete standards in it's principal design. The use of tables and spans in web design have been outdated for some time now. It needs to be redesigned from the ground up using Web 2.0 standards.
Long Answer: Give me a little bit to show you a few examples of what I'm talking about. Once you see the difference you'll understand why you need to upgrade to 2.0 standards.
I went ahead and copied your source code to show you the difference between Web 1.0 standards which currently run your website and Web 2.0 standards which are current standards. The biggest difference is the use of XHTML and CSS which are modern standards. These standards allow for a degree of control and scalability which was nearly impossible using the old formats. Let me give you an example. Look at your header and the phone number box to your left.
While this "works" somewhat it has many glaring problems. First the text overlaps the logo image which is set as a repeatable background image. While the text alignment issue is a cosmetic error the biggest error is in the use of the background image. This image not only repeats it is also used as the background color for the navigation links! Oh my that can't be good.
Lets say for instance you open up your business to service in China for example. Lets add china to your list.
Now the text within your header shifted everything down. Not only are your phone numbers out of alignment but now your navigation bars have shifted out of their boundaries as well.
Lets consider something else. You website is selling a product that requires that your customers be able to read what's on your screen. If that's the case then you must consider customers who have poor eyesight and view their websites in a larger font size than normal.
As the fonts keep getting bigger your entire design begins to break down. You want your website to stay coherent no matter what font size your users use.
Last the navigation bar gives no indication to those visually impaired viewers that they are over your links. The only thing that indicates that your over the link is the fact that your little icon changes form an arrow to a hand. For many people that's not enough. What you need is a slight rollover effect which an be easily done using CSS. So not only can we fix your markup for this menu we can make the menu better.
First let's do your basic page:
The body code is a technique to keep the page centered properly.
Now lets get the general markup for the header/navigation region out of the way.
Now lets add the phone numbers:
Now lets add in your menu:
So this is your entire website atm:
Doesn't look like much, but this is the only markup that you need for this site. Now we just have to edit the CSS to make it look the way we want it to.
First lets fix your phone numbers:
The font size made sure the location names were the same size as the numbers and the margin code kept everything compact without any extra padding. The float:right moved the box to the right where it's supposed to be.
Now lets fix that menu.
Well first I cleared the menu so that it moved below the phone numbers. Next I added a small 1px X 38px image as a background and repeated it horizontally plus I added a background color so that if the menu expands beyond the image size it blends in.
Now lets remove the bullet points and any automatic indention's.
Now lets make is so that all of the menu items form up from left to right horizontally. Make sure that the text is centered and that the menu item fills it's assigned area completely.
Lets remove the automatic underline from the links and make sure that the text is the proper size and color. Lets also add some padding around the text to give it a bit more spacing for a better visual appeal.
This gives the navigation bar a nice rollover effect when your mouse goes over each menu link.
This is to turn the free trial registration font red.
Looking better now doesn't it?
One last thing we have to do it put in your title pic.
This adds in the background image, it's supporting color, and makes sure everything positions properly on the screen. I had to edit your top picture some as well to make it look right.
Looks pretty good eh?
So lets go through some of the tests that broke the old site. Lets add china in again.
Not only are the phone numbers spaced properly, adding in another number doesn't break the design.
How about those visually impaired customers?
With no matter the font size the design doesn't break. Everything stays the same. Plus now whenever my mouse goes over a link it's entire box is highlighted giving a nice visual effect an makes it more readable for customers.
So just to recap, here is the new code for the header and navigation region of your website.
This is just an example of the changes that you will have to do to your website to bring it up to compliance with to today's standards.
If your trying to do this on your own and/or your client has time start cracking open some books and read up online on what you need to know to use these new standards in your website. If your under the gun though and don't have much time and you need this done then you had better find someone who does know what their doing and see if they'll help either for free or for a small fee.
While this "works" somewhat it has many glaring problems. First the text overlaps the logo image which is set as a repeatable background image. While the text alignment issue is a cosmetic error the biggest error is in the use of the background image. This image not only repeats it is also used as the background color for the navigation links! Oh my that can't be good.
Lets say for instance you open up your business to service in China for example. Lets add china to your list.
Now the text within your header shifted everything down. Not only are your phone numbers out of alignment but now your navigation bars have shifted out of their boundaries as well.
Lets consider something else. You website is selling a product that requires that your customers be able to read what's on your screen. If that's the case then you must consider customers who have poor eyesight and view their websites in a larger font size than normal.
As the fonts keep getting bigger your entire design begins to break down. You want your website to stay coherent no matter what font size your users use.
Last the navigation bar gives no indication to those visually impaired viewers that they are over your links. The only thing that indicates that your over the link is the fact that your little icon changes form an arrow to a hand. For many people that's not enough. What you need is a slight rollover effect which an be easily done using CSS. So not only can we fix your markup for this menu we can make the menu better.
First let's do your basic page:
CODE
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<style type="text/css">
body{
width: 1024px;
margin-right: auto;
margin-left: auto;
font-family: Arial, Helvetica, sans-serif;
}
</style>
<body>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<style type="text/css">
body{
width: 1024px;
margin-right: auto;
margin-left: auto;
font-family: Arial, Helvetica, sans-serif;
}
</style>
<body>
</body>
</html>
The body code is a technique to keep the page centered properly.
Now lets get the general markup for the header/navigation region out of the way.
CODE
<body>
<!--BEGIN .header-->
<div class="header">
<div class="phone"></div>
</div><!--END .header-->
<!--Main Menu-->
<div class="menu"></div><!--END .menu-->
</body>
<!--BEGIN .header-->
<div class="header">
<div class="phone"></div>
</div><!--END .header-->
<!--Main Menu-->
<div class="menu"></div><!--END .menu-->
</body>
Now lets add the phone numbers:
CODE
<div class="phone">
<h2>USA/Canada:</h2>
<p>00 1 202 436 9953</p>
<h2>UK:</h2>
<p>00 44 1274 792 223</p>
<h2>Australia:</h2>
<p>00 61 (0) 280067548</p>
</div><!--END .phone-->
<h2>USA/Canada:</h2>
<p>00 1 202 436 9953</p>
<h2>UK:</h2>
<p>00 44 1274 792 223</p>
<h2>Australia:</h2>
<p>00 61 (0) 280067548</p>
</div><!--END .phone-->
Now lets add in your menu:
CODE
<!--Main Menu-->
<div class="menu">
<ul>
<li>Home</li>
<li>Learning Cost</li>
<li>Free Trial Registration</li>
<li>Quran Articles</li>
<li>Qaida Demo</li>
<li>Contact Us</li>
</ul></div><!--END .menu-->
<div class="menu">
<ul>
<li>Home</li>
<li>Learning Cost</li>
<li>Free Trial Registration</li>
<li>Quran Articles</li>
<li>Qaida Demo</li>
<li>Contact Us</li>
</ul></div><!--END .menu-->
So this is your entire website atm:
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<style type="text/css">
body{
width: 1024px;
margin-right: auto;
margin-left: auto;
font-family: Arial, Helvetica, sans-serif;
}
</style>
<body>
<!--BEGIN .header-->
<div class="header">
<div class="phone">
<h2>USA/Canada:</h2>
<p>00 1 202 436 9953</p>
<h2>UK:</h2>
<p>00 44 1274 792 223</p>
<h2>Australia:</h2>
<p>00 61 (0) 280067548</p>
</div><!--END .phone-->
</div><!--END .header-->
<!--Main Menu-->
<div class="menu">
<ul>
<li>Home</li>
<li>Learning Cost</li>
<li><a href="#"><div class="red">Free Trial Registration</div></a></li>
<li>Quran Articles</li>
<li>Qaida Demo</li>
<li>Contact Us</li>
</ul></div><!--END .menu-->
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<style type="text/css">
body{
width: 1024px;
margin-right: auto;
margin-left: auto;
font-family: Arial, Helvetica, sans-serif;
}
</style>
<body>
<!--BEGIN .header-->
<div class="header">
<div class="phone">
<h2>USA/Canada:</h2>
<p>00 1 202 436 9953</p>
<h2>UK:</h2>
<p>00 44 1274 792 223</p>
<h2>Australia:</h2>
<p>00 61 (0) 280067548</p>
</div><!--END .phone-->
</div><!--END .header-->
<!--Main Menu-->
<div class="menu">
<ul>
<li>Home</li>
<li>Learning Cost</li>
<li><a href="#"><div class="red">Free Trial Registration</div></a></li>
<li>Quran Articles</li>
<li>Qaida Demo</li>
<li>Contact Us</li>
</ul></div><!--END .menu-->
</body>
</html>
Doesn't look like much, but this is the only markup that you need for this site. Now we just have to edit the CSS to make it look the way we want it to.
First lets fix your phone numbers:
CODE
/*.phone*/
.phone{
float: right;
clear: both;
}
.phone h2{
font-size: 100%;
margin: 0px;
}
.phone p{
margin: 0px;
}
.phone{
float: right;
clear: both;
}
.phone h2{
font-size: 100%;
margin: 0px;
}
.phone p{
margin: 0px;
}
The font size made sure the location names were the same size as the numbers and the margin code kept everything compact without any extra padding. The float:right moved the box to the right where it's supposed to be.
Now lets fix that menu.
Well first I cleared the menu so that it moved below the phone numbers. Next I added a small 1px X 38px image as a background and repeated it horizontally plus I added a background color so that if the menu expands beyond the image size it blends in.
CODE
/*.menu*/
.menu{
clear: both;
background-repeat: repeat-x;
background-image: url(images/menu.jpg);
background-color: #9bb8ca;
margin: 0px;
float: left;
}
.menu{
clear: both;
background-repeat: repeat-x;
background-image: url(images/menu.jpg);
background-color: #9bb8ca;
margin: 0px;
float: left;
}
Now lets remove the bullet points and any automatic indention's.
CODE
.menu ul{
list-style-type: none;
padding: 0px;
margin: 0px;
}
list-style-type: none;
padding: 0px;
margin: 0px;
}
Now lets make is so that all of the menu items form up from left to right horizontally. Make sure that the text is centered and that the menu item fills it's assigned area completely.
CODE
.menu li{
float: left;
width: 170px;
text-align: center;
display: block;
}
float: left;
width: 170px;
text-align: center;
display: block;
}
Lets remove the automatic underline from the links and make sure that the text is the proper size and color. Lets also add some padding around the text to give it a bit more spacing for a better visual appeal.
CODE
.menu li a{
text-decoration: none;
display: block;
font-size: 80%;
font-weight: bold;
color: #333333;
padding-top: 5px;
padding-bottom: 5px;
}
text-decoration: none;
display: block;
font-size: 80%;
font-weight: bold;
color: #333333;
padding-top: 5px;
padding-bottom: 5px;
}
This gives the navigation bar a nice rollover effect when your mouse goes over each menu link.
CODE
.menu li a:hover{
background-color: #FFFFFF;
}
background-color: #FFFFFF;
}
This is to turn the free trial registration font red.
CODE
.menu .red{color: #FF0000}
Looking better now doesn't it?
One last thing we have to do it put in your title pic.
CODE
.header{
background-color: #d0d5d9;
background-image: url(images/learn-quran-tutor.jpg);
background-repeat: no-repeat;
background-position: left top;
float: left;
width: 100%;
}
background-color: #d0d5d9;
background-image: url(images/learn-quran-tutor.jpg);
background-repeat: no-repeat;
background-position: left top;
float: left;
width: 100%;
}
This adds in the background image, it's supporting color, and makes sure everything positions properly on the screen. I had to edit your top picture some as well to make it look right.
Looks pretty good eh?
So lets go through some of the tests that broke the old site. Lets add china in again.
Not only are the phone numbers spaced properly, adding in another number doesn't break the design.
How about those visually impaired customers?
With no matter the font size the design doesn't break. Everything stays the same. Plus now whenever my mouse goes over a link it's entire box is highlighted giving a nice visual effect an makes it more readable for customers.
So just to recap, here is the new code for the header and navigation region of your website.
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<style type="text/css">
body{
width: 1024px;
margin-right: auto;
margin-left: auto;
font-family: Arial, Helvetica, sans-serif;
}
/*.phone*/
.phone{
float: right;
clear: both;
}
.phone h2{
font-size: 100%;
margin: 0px;
}
.phone p{
margin: 0px;
}
/*.menu*/
.menu{
clear: both;
background-repeat: repeat-x;
background-image: url(images/menu.jpg);
background-color: #9bb8ca;
margin: 0px;
float: left;
width: 100%;
}
.menu ul{
list-style-type: none;
padding: 0px;
margin: 0px;
}
.menu li{
float: left;
width: 170px;
text-align: center;
display: block;
}
.menu li a{
text-decoration: none;
display: block;
font-size: 80%;
font-weight: bold;
color: #333333;
padding-top: 5px;
padding-bottom: 5px;
}
.menu li a:hover{
background-color: #FFFFFF;
}
.menu .red{color: #FF0000}
/*.header*/
.header{
background-color: #d0d5d9;
background-image: url(images/learn-quran-tutor.jpg);
background-repeat: no-repeat;
background-position: left top;
float: left;
width: 100%;
}
</style>
<body>
<!--BEGIN .header-->
<div class="header">
<div class="phone">
<h2>USA/Canada:</h2>
<p>00 1 202 436 9953</p>
<h2>UK:</h2>
<p>00 44 1274 792 223</p>
<h2>Australia:</h2>
<p>00 61 (0) 280067548</p>
</div><!--END .phone-->
</div><!--END .header-->
<!--Main Menu-->
<div class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Learning Cost</a></li>
<li><a href="#"><div class="red">Free Trial Registration</div></a></li>
<li><a href="#">Quran Articles</a></li>
<li><a href="#">Qaida Demo</a></li>
<li><a href="#">Contact Us</a></li>
</ul></div><!--END .menu-->
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<style type="text/css">
body{
width: 1024px;
margin-right: auto;
margin-left: auto;
font-family: Arial, Helvetica, sans-serif;
}
/*.phone*/
.phone{
float: right;
clear: both;
}
.phone h2{
font-size: 100%;
margin: 0px;
}
.phone p{
margin: 0px;
}
/*.menu*/
.menu{
clear: both;
background-repeat: repeat-x;
background-image: url(images/menu.jpg);
background-color: #9bb8ca;
margin: 0px;
float: left;
width: 100%;
}
.menu ul{
list-style-type: none;
padding: 0px;
margin: 0px;
}
.menu li{
float: left;
width: 170px;
text-align: center;
display: block;
}
.menu li a{
text-decoration: none;
display: block;
font-size: 80%;
font-weight: bold;
color: #333333;
padding-top: 5px;
padding-bottom: 5px;
}
.menu li a:hover{
background-color: #FFFFFF;
}
.menu .red{color: #FF0000}
/*.header*/
.header{
background-color: #d0d5d9;
background-image: url(images/learn-quran-tutor.jpg);
background-repeat: no-repeat;
background-position: left top;
float: left;
width: 100%;
}
</style>
<body>
<!--BEGIN .header-->
<div class="header">
<div class="phone">
<h2>USA/Canada:</h2>
<p>00 1 202 436 9953</p>
<h2>UK:</h2>
<p>00 44 1274 792 223</p>
<h2>Australia:</h2>
<p>00 61 (0) 280067548</p>
</div><!--END .phone-->
</div><!--END .header-->
<!--Main Menu-->
<div class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Learning Cost</a></li>
<li><a href="#"><div class="red">Free Trial Registration</div></a></li>
<li><a href="#">Quran Articles</a></li>
<li><a href="#">Qaida Demo</a></li>
<li><a href="#">Contact Us</a></li>
</ul></div><!--END .menu-->
</body>
</html>
This is just an example of the changes that you will have to do to your website to bring it up to compliance with to today's standards.
If your trying to do this on your own and/or your client has time start cracking open some books and read up online on what you need to know to use these new standards in your website. If your under the gun though and don't have much time and you need this done then you had better find someone who does know what their doing and see if they'll help either for free or for a small fee.
Oh nice i like your website and Css Coads.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.