Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

I need design help... 4

Status
Not open for further replies.

LilProgrammerGirl

Programmer
Jun 24, 2004
81
US
Hi all,
I have a site that I am working on and I don't think it's flashy enough. I have up what they provided me to publish - which isn't much. I have not started the Map or Contact Us pages yet.

Any ideas on how I can spice this up a bit??

Thanks for the feedback...

Hailey
 
It doesn't fit 800 x 600 or 1024 x 768 resolution screens well. Since the screen has to be scrolled for an 800 x 600 resolution, it's obvious that you didn't create the page to fit the most common screen resolution choice.

Lee
 
You are right..my resolution is 1024x768. I actually *thought* that was the most common. Thank you for pointing it out! YIKES..

Hailey
 
This layout should be easy enough to convert to a fluid design, which would adjust to a range of screen areas, I would suggest this is quite important - remember that not everybody opens a full-screen window, even if they have a higher resolution monitor.

I don't like the links, top and bottom, and think maybe they could be better listed within the main body of the page, especially the top links, which initially don't even look like links, merely a rather meaningless sentence....

The main heading for your company is an image, and it would help searches if that were text, although I appreciate you would be limited to font choice in that instance.

Regarding the code, are you able to find another way of positioning your content, rather than using all those tables? It rpresents a lot of code for very little, and may negatively imact on your ranking.

But well done for avoiding JavaScript, and I do like the clean and relatively uncluttered look of the page. :-}

Regards, Andy.
**************************************
My pathetic attempts at learning HTML can be laughed at here:
 
Hey!
Thank you Andy for the suggestions! To fix the screen resolution issue - should I just change everything to a % instead of a set pixel? Will that distort anything?

Also, how else could I lay that content out if I didn't use a table - a <div> tag??

Thanks again!

Hails
 
Fluid layout vs static layout is 100% preference for the most part--and in the end it the preference of the site owner is the last word, basing their last word on your design advice. Some sites work better on a fluid layout than others too, so that's a factor.

As to your site, I'd reduce your width to under 800px--around the mid-to-low 700's would be ideal--and leave it static.
 
The secretary in me says try to find a way to not split up "Your Neighborhood Law Firm" "Firm" looks odd sitting down there by itself.

Try to optimize the photos, that first is 106kb..

I know you're probably gonna have a hyperlink to email you, but I find it helpful to have the actual email address, preferably on your contact page, AND with the phone numbers.. someone maynot want use the hyperlink at that moment but will want the email addy for later without going to the site.
 
Okay, I took what you all said and came up with a whole new design.

This is the old one:

This is the new one:

Now, I really do think I like the new one better. It will fit on an 800x600 screen better. Now, my new problem is that I created and tested it all with a Mozilla Browser. Then, I checked it in an I.E. Browser and it didn't keep the text formatting and it turned out looking real weird. Can someone that has both browsers look at my new one in both and see what I need to do to make it look better in I.E??

Thanks much for the help everyone... I think it's getting closer!

Hailey
 
Alright, I think I got them to look the same in both browsers now...

LAST question... how can I get the whole thing to center in the new one? Instead of all be left aligned on the whole screen?

Thanks,
Hailey
 
You have the entire thing in a div called bottomLayer? Add
Code:
#bottomLayer {
    margin: 0 auto;
    }
to position it in Firefox, Mozilla, and Netscape, I believe. You need
Code:
text-align: center;
in the parent element to center it in IE.

--Chessbot

"In that blessed region of Four Dimensions, shall we linger on the threshold of the Fifth, and not enter therein? Ah, no! [...] Then, yielding to our intellectual onset, the gates of the Sixth Dimension shall fly open; after that a Seventh, and then an Eighth -- --" Flatland, A. Square (E. A. Abbott)
 
Don't forget to add
Code:
text-align: left;
to the child div's to make sure the centered text isn't inherited.
 
Hmm.. it still didn't work. Here's my css code:

Code:
#BottomLayer{
	position: absolute;
	margin: 0 auto;
	text-align: center;
	width:700px;
	height: 600px;
	left: 15px;
	top: 15px;
	z-index: 0;
	background-color: #990000;
}

#FirstLayer{
	position: absolute;
	margin: 0 auto;
	text-align: center;
	width:700px;
	height: 375px;
	left: 10px;
	top: 10px;
	z-index: 1;
	background-color: #013564;
}

Thanks guys for your help!

Hailey
 
A-ha! I changed my positioning from absolute to relative and it worked!

Thanks all!!

Hails
 
Good job! I'm lazy and don't often have the time to check out the entire page and coding behind it. Nice catch. It's awesome when it all works, isn't it?

Happy New Year to all!
 
I have a few comments.. the images are all way too big.. You should really reduce the file size of them. 3 of the 4 images are 90-171 kb in size!! That is not good at all.. the images are not even that big(meaning dimensions not file size). Do you have photoshop? Put them into photoshop and go file-save for web.. and it lets you reduce the KB and view the quality loss (which I'm sure you will be able to reduce the file size by a lot w/o loosing visible quality.). But if you don't.. as a last resort just open them in MS paint and re-save them because MS Paint automaticly reduces the file size of jpegs..

Second, I think if at all possible you should get a better image for the main page. It doesn't look professional.. the two guys on the right are wearing blue jeans! I think all three of them should be wearing suits.And maybe have them all sitting down too.

And one more thing.. The red border on the top and left .. when I first saw it, I thought it wasn't showing up right. I felt like the red border should also be on the right side of the page too.

Good luck!
 
Thanks Ayersart for the feedback! Yes, I have been battling with that image on the main page for some time with this company and unfortunately they REALLY like it and insist on using it. I totally agree and everytime I look at that picture I cringe! You'd *think* they'd want to look professional - but they want it to look casual. Go figure....

Also, thanks for all of the suggestions with the image sizes - I will be modifying them first thing when I get home. :)
 
The image size issue is a simple one to resolve: the ACTUAL image is 1114 x 819 pixels. In your source code, you have the following code:

Code:
<img src="images/attorneygroup_v2.jpg" alt="" width="280" height="200" style="border:2px solid black;">

In other words, you are letting the browser resize it. A much better idea is to resize it yourself, THEN upload it. That way the image will look the same, but the users will only have to download less than 20k, rather than 167k!
 
I think you should change your menu back. I like the original one you had much better than the new one. The dark green with burgandy text doesn't show up very well.
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top