View Full Version : site design help PLZ.
I have spent the past few months putting together the informational content of my site with a basic layout plan.
It is in three columns, though the green page box, conceals that fact initially.
Anyway, I am bored with it now and thinks it looks lifeless. Would anyone mind please taking a look and giving me ideas for improvement.
Here is the brief.
1. Simplicity in appearance and design, for easy nav.
2. Themed, so that its appearance is (at least to some degree), indicative of the sites content. (backgound image can be changed)
3. easy on the eye, with no glare (as I seem to get with white text backgrounds),
4. abit more exciting looking. ;)
It would help if I had added the link (http://www.ireland-info.com/cgi-bin/introduction.pl?dpt=marlfield_dpt)
your ideas would be most welcome.
Bazz
Here we go:
Change or drop the banner (by change I mean make it larger horizontally so it looks normal, and change its background colour so it fits in with the rest of the header).
Make the top section smaller. It's distracting the viewer at the moment from the rest of the content.
I would change the background image, or drop it completely. If you decide on the latter, Fill the background with either a light or dark green, or maybe another colour (red, probably) for contrast.
I think the nav buttons would work better if you switched the hover and active states - having a button depress on hover can be confusing.
Add the current 'Home Page' and 'Site Map' links to the main navigation.
In the main text, nest swap the main <p> for a <div> and put <p>s inside, rather than using <br>.
Drop the 'Website for ...' link -- people can see that for themselves :p
On a markup point, code for XHTML compliancy -- ie: with empty tags such as <link> and the infamous <br> tag, include a space and oblique (/) before the end of the tag, eg: <br />. Also, make sure all attributes are quoted (attribute="value") and that the WHOLE tag (except inside values) is in lowercase.
HTH.
adios
11-01-2003, 10:11 PM
Whoa. That is one big stylesheet. Mucho compresión posible. Here's a quick alternative approach:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Marlfield House</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<base href="http://www.ireland-info.com/cgi-bin/">
<style type="text/css">
body {
text-align: center;
margin: 8px;
background: url(http://www.marlfieldhouse.ie/background0.gif);
}
.rule {
width: 100%;
height: 2px;
font-size: 0px;
border-top: 3px #fff outset;
}
#header {
width: 100%;
padding: 4px;
border-left: 3px #fff outset;
border-right: 3px #fff inset;
}
p.textmenubkgrnd {
text-align : center;
width : 100%;
margin : 6px auto;
overflow : hidden;
}
a.textmenu:link, a.textmenu:visited, a.textmenu:hover, a.textmenu:active {
font : bold 70% arial, verdana, helvetica, sans-serif;
text-decoration : none;
height : 12px;
color : #efffef;
background-color : #8aa385;
border-top : 2px solid #b4d9b4;
border-left : 2px solid #b4d9b4;
border-bottom : 2px solid #004040;
border-right : 2px solid #004040;
margin: 2px 4px;
padding: 0 6px;
}
a.textmenu:hover {
color : #8aa385;
background-color : #efffef;
}
a.textmenu:active {
color : #ffffcc;
background-color : #336633;
}
#box {
width: 480px;
margin: 0 0 30px 0;
padding: 2px;
font: bold 10px helvetica;
border: 1px black solid;
background: #eaf0e0;
}
blockquote {
display: inline;
width: 46%;
margin: 0;
font: 200 11px "times new roman";
text-align: left;
padding: 6px;
border: 1px black solid;
}
</style>
</head>
<body>
<div class="rule"></div>
<div id="header">
<img style="float:left;" src="http://www.marlfieldhouse.ie/images/mlogo3.gif" alt="">
<img style="float:right;margin:4px 20px;" src="http://www.ireland-info.com/wexford_countryhouses/marlfield/images/th_1.jpg" alt="Marlfield House View1">
<img style="float:right;margin:4px 20px;" src="http://www.ireland-info.com/wexford_countryhouses/marlfield/images/th_2.jpg" alt="Marlfield House View 2">
<img style="float:right;margin:4px 20px;" src="http://www.ireland-info.com/wexford_countryhouses/marlfield/images/th_3.jpg" alt="Marlfield House View 3">
</div>
<div class="rule"></div>
<p class="textmenubkgrnd"><a class="textmenu" href="http://www.ireland-info.com/cgi-bin/enquiries.pl?dpt=marlfield_dpt">&nbsp;Contact Marlfield House&nbsp;</a>&nbsp;<a class="textmenu"
href="http://www.ireland-info.com/cgi-bin/reservations.pl?dpt=marlfield_dpt">&nbsp;Bookings&nbsp;</a>&nbsp;<a class="textmenu"
href="http://www.ireland-info.com/cgi-bin/accommodation.pl?dpt=marlfield_dpt">&nbsp;Introduction&nbsp;</a>&nbsp;<a class="textmenu"
href="http://www.ireland-info.com/cgi-bin/facilities.pl?dpt=marlfield_dpt">&nbsp;Facilities&nbsp;</a>&nbsp;<a class="textmenu"
href="http://www.ireland-info.com/cgi-bin/findus.pl?dpt=marlfield_dpt">&nbsp;Find Us&nbsp;</a>&nbsp;<a class="textmenu"
href="http://www.ireland-info.com/cgi-bin/attractions.pl?dpt=marlfield_dpt">&nbsp;Attractions&nbsp;</a>&nbsp;<a class="textmenu"
href="http://www.ireland-info.com/cgi-bin/dining.pl?dpt=marlfield_dpt">&nbsp;Dining&nbsp;</a>&nbsp;<a class="textmenu"
href="http://www.ireland-info.com/cgi-bin/tellafriend.pl?dpt=marlfield_dpt">&nbsp;Tell A friend&nbsp;</a></p>
<img border="1" style="float:left;margin:10px 0;" src="http://www.relaischateaux.com/img/adherent/marlfield/marlfield-1-gd.jpg">
<p style="float:right;padding:18px 10px;font:200 11px helvetica;text-align:left;"><strong>Marlfield House</strong> is an elegant Regency style mansion which has been masterfully preserved just 55 miles south of Dublin.
<br /><br /><strong>M</strong>ary and Ray Bowe bought the house from the Earls of Courtown in 1977.
Together they supervised every detail of its restoration and subsequently filled the graciously proportioned rooms with antiques, period furniture, valuable works of art and sumptuous fabrics.
With fresh flowers from the garden and blazing fires, Marlfield, with its semi circular entrance hall dominated by an 18th century sienna marble fireplace, is a particularly romantic Irish Country house.
<br /><br /><strong>T</strong>here are 13 uniquely designed standard bedrooms, all provided with thick robes and towels, lacy white linen, fresh fruit, bottled water, trouser presses, irons and ironing boards,
hairdryers, luxurious toiletries, direct dial telephone, CD player, satellite TV - and lots of books.
Several State Rooms provide extras such as views over the lake, dressing rooms, or marble bathrooms.
Every room is filled with antiques that have been collected by Mary for the last 30 years.
<br /><br /><strong>S</strong>et on 35 acres of grounds and woodlands Marlfield is the ideal setting for touring the beauty spots of the south east including Wicklow,
Kilkenny and Waterford, Glendalough and its monastic settlements, the Blessington lakes,<br />and the white sandy beaches and pretty fishing villages of the east coast.</p>
<div style="width:100%;text-align:left;padding-left:42px;">
<p id="box">&nbsp;&#149;&nbsp;Marlfield Country House&nbsp;&#149;&nbsp;Courtown Road, Gorey&nbsp;&#149;&nbsp;County Wexford&nbsp;&#149;&nbsp;Tel: 00 353 (0)55 21124&nbsp;&#149;&nbsp;</p>
</div>
<div style="width:100%;">
<blockquote style="float:left;height:60px;margin-top:14px;">"We moved into the splendid dining room, in a light-filled conservatory lined with mirrors and flowery murals that give a sense of "Midsummers Night Dream" like airiness."<br /><br /><b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;The New York Times</b></blockquote>
<blockquote style="float:right;">"As with everything at Marlfield the attention to detail was exceptional: from the mundanely practical
umbrella tucked in the wardrobe, to the tiny satin cushion hung outside the door embroidered with Do Not
Disturb. No wonder Marlfield has earned its owners the Bowes, many awards including The Good Hotel Guide
Cesar and Host of the Year from Egon Ronay."<br /><br /><b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;The Sunday Times</b></blockquote>
</div>
</body>
</html>
Setting aside for a moment your comments which I have addressed below, do you reckon the site is amateur or is it good? (I know - I am a bit vain :) )
I know design can be subjective but the objective part (I would have thought) is that it should be inviting and professional looking whatever the colours. I am actually trying to provide a supportive alternative to the statutory tourist authorities, who only provide what they do in exchange for a rigid system that actually ties up the smaler establishments in beurocracy and commission.
Now to reply to you both.
Originally posted by me'
[B]Here we go:
groan. :rolleyes: :o
Change or drop the banner [.quote]
what banner do you mean? (on the page that the link takes you to).
[quote]
Make the top section smaller. It's distracting the viewer at the moment from the rest of the content.
do you mean the are which holds the logo and the address?
I would change the background image, or drop it completely.
I'll try this in the morning.
I think the nav buttons would work better if you switched the hover and active states - having a button depress on hover can be confusing.
I'll check this out
Add the current 'Home Page' and 'Site Map' links to the main navigation.
I'l try this someway, where page width won't be a problem.
In the main text, nest swap the main <p> for a <div> and put <p>s inside, rather than using <br>.
sounds good. I'll try that thogh I'll probally end up spending ages doing new classes? or should I assign the presetn clas to the div instead of the P tag?
Drop the 'Website for ...' link -- people can see that for themselves :p
I'd been wondering about that too. leaving just the name of the premises could also act as a title for the page?
On a markup point, code for XHTML compliancy -- ie: with empty tags such as <link> and the infamous <br> tag, include a space and oblique (/) before the end of the tag, eg: <br />.
I'll double check this, though the page I linked you too has validated. The pages to which you can get to may not, as they are old(pending BIG upload).
Also, make sure all attributes are quoted (attribute="value") and that the WHOLE tag (except inside values) is in lowercase.
I reckon this is my fault as for the last issue but I'll look again.
HTH.
yup indeed. :thumbsup:
Adios?
Thank you for the stylesheet input. I can see, I'll have fun over the next few days :) as this stylesheet affected many pages and the different 'portions' may not apply equally to all. Most of it remains from when i was pre-cgi. most of my pages then were hard-coded though now I have only about 8 (instead of 3000) so I may well be able to shrink the css file.
thanks to you both. :thumbsup:
Any more ideas?
missing-score
11-02-2003, 03:53 AM
Originally posted by bazz
Setting aside for a moment your comments which I have addressed below, do you reckon the site is amateur or is it good? (I know - I am a bit vain :) )
If you want it put plainly, it looks amateur. But rather than dwelling on that, you have to think about WHY it looks amateur. So what im going to do, is go through everything that i dont like or that could be improved on first impression. Although XHTML compliancy is a good idea, and is something i abide by, I am not going to pick up on XHTML issues, im now going on pure visuals.
First thing that hits me is the background. I absolutley loathe it :p. I think it really needs to go.
Second, which hits me like the first, is the logo. I always think that a site should have a respectable logo, or none at all. I think you should do something about the logo, also, the text looks odd squashed up.
Drop the "website for", people can see what its for by the title.
One of the things that hits me is the greens for the main content and menus. I personally dont like greens of this type, but there is nothing to say that you couldnt make your site better while keeping with the colour scheme. I just dont like these greens.
I also (might be personal again) dont like the rollover menu. When I first started programming in javascript that was all i did, rollover menus, i really liked them, however, that has worn off, and I often feel they are more of a novelty. Dont get me wrong, many sites make excellent use of rollover effects, but I feel there is a time and a place for rollover menus, and this is not one. A simple text link menu would be fine.
Font. There's nothing wrong with the font, works fine, however, I would suggest something like verdana (9pt) or tahoma (8pt). Verdana is usually quite easy to read. I find 9pt was the best. Its a good medium between 8pt (quite small) and 10pt (too big) and fits most sites well. My personal favourite is tahoma size 8pt. I dont know why, but its just something that i always think really works.
The iframe... Well, if you were planning on adding more content, than maybe that would be ok, but at the moment i think its kinda off seeing as if you just expanded it a little, it wouldnt need to scroll at all.
The four images, all of them quite good. I think they look a little out becuase the top image ends and one of the lower images is still overlapping. I looked at the full size and you could easily make the main image equal to the width of the 3 thumbnails on the page. I think this would help, and definately make it look more, "layed out"
I also think some borders on some of the sections wouldnt go a miss.
The address at the top should be level with the green content block to the right.
Maybe the "add your taxi business" section could be a little thinner, it seems to be taking up alot of space.
ok, so theres some comments. Remeber, this is what I think, i know some of these things have been said before, and the chances are everyone will not agree with me on all of them, but these are the things i think when i visit your site.
i think this must be my longest post ever :eek:! anyways, finally, i hope you wont be offended by my remark at the top. Im a designer and coder myself, and I always prefer to be told when i need to improve rather than being told "its great" when the comment is obviously not meant.
adios
11-02-2003, 05:09 AM
You're welcome - but 'stylesheet input' doesn't quite cover it. ;) Take a second look. The best way to get an idea of design possibilities is, imo, to spend some time looking at what professional designers have done with similar clients. Remember: you're touting an elegant, old Irish mansion - not selling discount herbal Viagra.
what banner do you mean? (on the page that the link takes you to).The squashed 'Marlfield House' Banner in the top left.do you mean the are which holds the logo and the address?Yes. :)
About missing-score's post: I would suggest something like verdana (9pt) or tahoma (8pt). Verdana is usually quite easy to read. I find 9pt was the best.Instead of using pt, use px, as this will work better on other systems. I just dont like these greens.That's really a matter of personal taste, but in a different way, I agree. The page needs more life -- another colour perhaps?
Back to bazz:... do you reckon the site is amateur or is it good? Well, at the moment, I'd say pretty amateur. But then, I've seen many websites in my time, and everyone has their personal favourite 'style'. I'm a fan of website minimilism, myself.
I can see this website really working if you keep at it. :)
missing-score
11-02-2003, 12:00 PM
Instead of using pt, use px, as this will work better on other systems.
Oh... i'd heard that pt was better cause it could be resized by the built in text resizing in most browsers. So, in px, 9pt = 11px, 10pt = 12px, 11pt = 13px.
That's really a matter of personal taste, but in a different way, I agree. The page needs more life -- another colour perhaps?
Dont let me be making u all hate green :D. But when i wrote that post, i mentioned everthing that struck me. that was one of them but im aware that is personal taste. another coulour could work well though :)
Im a fan of website minimilism, myself.
Same here :D, usually ;)
I can see this website really working if you keep at it. :)
i agree. you have got the content and potential to make it good :)
Thanks guys for your input. :o
I'll work my way thorugh your suggestions and agree that the colours need changing.
The arty part of my brain is v-e-e-e-e-e-e-r-y small :)
Would anyone car to offer suggestions about the colours that would look well, bearing in mind the point made, that I am showing a quality house and not selling discount viagra? :)
Adios, sorry for understating your work there yesterday. i was pi$$ed (hic) when I wrote that.
thanks to you all.
Just for adios :D
I have just C+P'd what you wrote me and it looks fab. You obviously visited their own site and got busy. I shall see if I can get a background similar to that one but which is not theirs.
Many thanks for the layout. My effort really was amateur. :thumbsup:
StaceyJo
11-03-2003, 04:18 PM
I think overall, the page looks good. I would increase the size of the nav buttons because they are hard to read. Also, try putting the text under the photo instead of to the right.
I would make the image of "Mayfield House" longer so it extends almost to the edge of the other photos of the right of it. You may want to change the background color from white to something that blends with the background of the page an enhance the text itself with a drop shadow.
Not sure if you want feedback on the entire site or not. This is just my opinion.
Hope this help.
Stacey
Thanks Stacey. Metihhinks youcame along as I was uploading a new styles sheet as the background never was white :)
If the overall appearance is light green, then you are looking at the new version as presented by Adios. I changed the css about a bit to validate it and so that it looked as good on Moz.
If you want to compare with the old one, try http://www.ireland-info.com/cgi-bin/accommodation.pl?dpt=marlfield_dpt
I'd be interested in your opinion as to which is better. My 40 sometihng partner runs with the darker version whilst her 11 yr old goes with the lighter one. My audioence would mostly be in their 30's and up so I have a dilemma.
:rolleyes:
Bazz.
StaceyJo
11-03-2003, 06:28 PM
Hello Bazz,
Yes, I was viewing the old site and I definitely like the new version better. I think age is important, but it's more important that the site be easy to navigate, which it is.
Being clear and concise is key. I know personally that I don't want to have to search for things on a site. I think the site looks much better than it did and I just have a few recommendations.
As mentioned by someone before, eliminate "website for../."
On the bookings page change the text "click on thumbnail..." to "click photo for larger view". Many people don't know what a thumbnail is.
Move the sitemap and homepage links to the bottom of the page.
Clean up the Mayfield House text so it is clear, edges are jagged.
Lighten or change the background image on the top of the screen. It's too dark and overpowers the rest of the page.
Just my comments. Good luck with the site. It's a good design.
Stacey
I couldn't stop smiling when I saw that page -- it's so much better! Clean, fresh look, better banner, nav, wow!
Just a few more suggestions:
Make the text larger, and expand the width of the column (I'd suggest using precise calculations with the JS DOM). I'd also suggest letting it flow under the picture, it looks more natural.
Maybe put the thumbnails beneathe the picture, and put a conglomerate of the pictures where they are at the moment? Some nice masks and they'd merge VERY nicely.
...and I think that's about all.
Great job.
jeskel
11-03-2003, 09:41 PM
My question might seem irrelevant but... will you apply that look to all your other pages?(http://www.ireland-info.com/cgi-bin/introduction.pl?dpt=marlfield_dpt) Because that one looks sooooooo much better! But there's no unity at this point as far as I can see (e.g "tell a friend", "bookings"...). Work in progress I guess. Excuse me if my words are irrelevant here ;)
at least I can use this space to tell you that I find that there's a big improvement between the old version and the new one :)
missing-score
11-03-2003, 09:44 PM
definately much better.
i would personally leave the thumbnails where they are, and maybe give the text a little more width? allow it to span out a bit more.
Well thanks but to be fair, it isn't all my doing. I agree that the new version is much better and I have begun to address all the comments you guys have made. Stacey, missing-score, me' and if I might mention he/her in particular, adios as it was he/she who supplied the page layout, which I have since re-worked a bit for cross browser comliancy and putting all the different things into the external css.
I am happy with the location of the thumbnails for now. I may be supplying new graphics for each accommodation, to max-up the pictorial information. There would then be six images in this instance so at that point they may be better going below the main image and I'll need to think of something else to put in their place at the top.
Stacey,
thanks, marlfield logo tidied :) you'll find the new page nuch better as it does not have any dark green on it. I may put the sitemap and home page link to the bottom as well as in the main nav bar.
Me'
I dont understand the term JS DOM. I aint using Javascript. I dont nderstand letting it foow under the image. This makes me think that th text might be hidden but I know you don't mean that.
Bouchel.
Yes you're right work in progress. Once I have the format for this page sorted, it's only half an hour of work to change the pages for the rest of the site.
missing-score
I wanted to make the text column a bit wider but it is in a div that is presently 200px wide. If I make it even 1 px wider, it aligns to the right but below the big image. So i am going to loook at all the images for that part of the page and try to get them all to be about 25px narrower. Then a smaller div would enable the text div to become wider.
Thanks all for you help. I hope to have the site uploaded in a day or so. you might be imperessed with how many similar places there are around here. :)
Bazz
missing-score
11-04-2003, 07:54 AM
i wondered, what screen resolution are you on? 800x600? 1024x768?
adios
11-04-2003, 09:08 AM
Hi, bazz, 'he/her/he/she' here (he, actually :p)...and thanks for the mention. Took a few minutes & fiddled with your thingy some more; you can check the results below. Not remotely web-ready, just some ideas to use as a starting point. If you end up stealing any of them, I want a weekend free of charge at that Marlfield dump.
cya, adios
Hi missing score,
I'm on 800 x 600 but when I have got the layout OK for this, I want to make it render nicely at 1024 x 768. Most of my viewers are still on 800x600.
Adios? Your rates are horrendous :) its 700 euro per night there
:D
I'l check out your zip shortly.
thanks.
Bazz
OH NO that reads terribly. I wasnt suggesting and alternative to a nioghts accommodation: I meant I'd look at the zip file :o
Mhtml
11-04-2003, 11:29 AM
I don't think anyone has mentioned it already but you thread title is bordering on breaking our posting guidelines... Please try to be a bit more descriptive if possible when making posts.
It just makes it easier for members to see what's interesting or specifically related to the questions they may have and may find answers in the thread, it's also easier for me to filter out messages that I should look into.
Thanks. :)
adios
11-04-2003, 05:13 PM
I used to know a fellow named 'Zip Shortly' (a bookie).
Made a couple of quick changes. Now I'm done. :D
Originally posted by bazz
I dont understand the term JS DOM. The JS DOM (JavaScript Document Object Model) is a very useful set of functions and objects that allow you to mess around with the elements in the page (in short). This includes all functions like getElementById() and the style object.I aint using Javascript. I'm suggesting you do.I dont nderstand letting it foow under the image. This makes me think that th text might be hidden but I know you don't mean that.Not at all, what I mean is something like this:_________________
| | Text Text Text Text
| | Text Text Text Text
| | Text Text Text Text
| Image | Text Text Text Text
| | Text Text Text Text
| | Text Text Text Text
|_______________| Text Text Text Text
Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text
Maybe I'm getting two things mixed up. Are you saying that JS DOM can get the text to align around the image?
I am thinking (on the hoof), that if I put the text in the same div as the image, it will align as you have demonstrated above. However, I am also thinkning that the area below the image is going to be where I put the details of the facilities at the accommodation.
To you all, Thank you very much. I'll check out your new zip file Adios.
vBulletin® v3.8.2, Copyright ©2000-2012, Jelsoft Enterprises Ltd.