Beach Site Blues

[sarab]

My friend and I have worked on this site for quite a few months now (it's her site).

It was a first-time effort for both of us, and has now reached 32 pages!

We started off with what we thought was a laid-back format, given the subject, but it was roundly slated by all who viewed it. So we changed things around and calmed down the visuals.

Lately, we've messed around with CSS for the navigation, but it's only active on the last two pages we uploaded.

We'd appreciate some critique from more experienced designers. Any hints, tips or suggestions would be warmly welcomed.

The site (with the current image-based navigation) is:
http://algarve-beach-life.com

Our attempt at CSS nav can be viewed at:
New Navigation

And our first page design, with lots more colour (and MUCH bigger image-weights) was:
Old Style page

Thanks for any feedback. We know we have a lot to learn...

 

[adam_uk]

for your first attempt thats good
looks fine in mozilla firefox

ive just got up so ill shed some extra comments bit later on

 

[sarab]

Thanks, adam_uk...

I hope my posting a message didn't wake you? :zzz:

 

[gordypordy]

Re: Beach Site Blues

Originally posted by sarab
My friend and I have worked on this site for quite a few months now (it's her site).

It was a first-time effort for both of us, and has now reached 32 pages!

A few months !! You're joking, right ?

I know it's your first site and all that, but you can practically get templates like this with frontpage and a host of other HTML editors. Just change the pics, background, drop in some text, and it would come out pretty much the same.

You mus be doing things the hard way, or working for five minutes a day. I'm not meaning to sound cruel as I don't mean it that way, I'm just suggesting that if you don't have something like front page for something that does look rather basic, you could try it or some other web authoring tool, believe me, you could rattle something like this off at the rate of 32 per month with a half decent authoring tool.

I notice there is no generator tag in the coding, suggesting you might have accomplished this by hand-coding, or some other obscure and difficult means.

I could throw this together with frontpage for example in a night, and I've never used Frontpage much, nor have I ever read the tutorials or help files that go along with it. I just opened it, change the pics and drop in the text, add appropriate links and the necessary tweaks here and there, and you have a complete website in no time!

You could save yourself a lot of time. The site is pleasant enough looking, but very basic and 'templatey' looking for having taken a few months.

 

[sarab]

A few months !! You're joking, right ?

Unfortunately not. We do both have full-time jobs and lives away from the computer, but you're right - we're not only beginners, we're slow learners!

you can practically get templates like this with frontpage and a host of other HTML editors. Just change the pics,

Again, I agree, but we both felt that we'd learn more by not using templates...

you could rattle something like this off at the rate of 32 per month with a half decent authoring tool.

Can't fault that, either. A lot of time has gone into the content, of course, and to issuing a monthly e-zine, all of which slows our learning process.
Since we've sort of learned together, perhaps it would have been an idea if say Jennifer had concentrated on the content, and I'd messed about more trying to learn about design. Trouble is, life gets in the way...

Since you seem like someone who knows a thing or two about web design, Gordypordy, perhaps you could help with a problem we encountered with using an external style sheet for the latest pages?

Thing is, everything looks fine in preview in our editor, and OK on IE when we look at it, but in Navigator (and Mozilla, I'm told) the text nav moves 30px to the right, out of its column and partly into the page content.

If you look at our page:

Loulé

you'll see that we've had to right-align the nevigation text with 10px right-padding, set the column left margin to -30px and the width to 165px instead of the 'real' width of 135px, just to get things to look the same in IE and Navigator...

It's a bit of a fudge, but the sort of thing that wastes lots of time for newbies, who are learning as they go.

Any ideas how we could fix it?
(Others have suggested that if it looks alright in IE we shouldn't worry, but we don't feel we'd learn much by taking that attitude?).

 

[Slewey]

noT bad for your first attempt..
keep going / practising and all will work out fine

good luck!:tu:

 

[Spirited]

Hiya Sarab,

The site does have that slightly dated "first website" feel and it is one that is difficult to put a finger on. My first few websites certainly had it too, and I'm not sure exactly what gives it that feel. But I don't think that the sand font sits well upon the smooth gradient, and the gradient generally doesn't seem to "fit" with the rest of the page. Best of luck with it though.

I tried your website in Netscape, Mozzila and Firefox and played around locally with your code. When the width is simply set to 135px the text doesn't overlap into the content, or indeed its column - instead it is hard up against the edge of the column with the bullet points visible. [I've attached a screenshot]

It seems to be caused by Netscape's (and therefore Mozzy's) rendering of Lists.

Adding border/margin/padding properties to UL/OL/LI elements with the 'list-style-type' property set to "none" still renders the list markers.

Source

So if you remove the margin, then the list markers will disappear, however, this doesn't solve the original problem of why you had t place the margin in there in the first place. I can't seem to find any information about the difference between the way IE and Netscape position ul without markers - IE obviously only looks at the text whereas netscape takes into account where the marker would have been and the indent - so I'm not sure which browser is rendering it correctly.

To center your right aligned text navigation (is it really necessary?) perhaps the way you have hacked around the problem is the best way. Or perhaps you could just not put them into a list at all. Either way, have fun

Spirited.

 

[sarab]

Thanks for that contribution, spirited...

Much appreciated (and the screenshot was an eye-opener, too!)

We'll maybe try the navigation in a format other than a list, and see whether that cures things.

Merci beaucoup. :D

Sara

 

[oblivious]

For only of a few months work with html and css, I would say your doing good. That webpage is much better than my first one. However, it really looks to me like you need a better graphics program. You could also tone down the color still more. Use shades of blue or blue-green since its beach/ocean themed. If you need any graphics done, I would be glad to help. You can email me at [email protected] . Just put "webdesign" for the subject

 

[gordypordy]

responde pour toi

Hello Sarab,


Sorry I never got back sooner, been away from the pc for a day or two! LIFE, I'm afraid, sometimes wrestles me ever so reluctantly away from the hypnotic shining screen that we come to adore!

Your Netscape problem is more or less what spirited said. I'm not sure if Netscape have made any endeavors to 'update' or correct their Style Sheet incompatabilities. I think there's a new version 8.0 or higher out, although I've never checked because I don't really like Netscape, it's got too many other errors and problems for those of us who are microsoft-product-enslaved.

Of course, when designing, cross browser compatability checking is always a necessary endeavour.
From my end, I generally try and keep things reasonably simple so as not to offend Netscape browsers, and if I do something extraordinary that does offend I simply modify it to a more browser friendly state.


Getting back to your response, you could still have used an authoring tool and still learned HTML simultaneously !
I learned HTML back in the 90's from using Yahoo Page Builder (seriously !) whilst also doing the tutorials on http://www.htmlgoodies.com then dissecting the code and playing around with it to see what effects my meddlings produced and took it from there.

I think you just took a slightly more difficult route !

OH, and by the way, I'm married with five kids, so I know all about life getting in the way, Believe me !!

 

[sarab]

This is by way of being an update for those of you kind enough to have taken an interest in this thread...

First, the good news: If you look at spirited's post that's 4 above this one, you'll see that some playing around with the code and cross-checking via other browsers showed a weird effect whereby the list that was our navigation showed its 'bullets' or whatever. That hadn't been visible on any of our browsers or those of close friends who have Macs and stuff that's different from ours.

In short, when we got to thinking, we couldn't decide why we had the navigation in list form anyway. That's probably just how it was in an example we'd copied. So... we took it out of list format and hey presto! no alignment problems. It looks to have been a feature of how the different browsers render lists. I just thought I'd better post that fact, in case it helps anyone else.

So that's a HUGE thank-you to Spirited, for doing the checking and questioning the approach! You're a star!

Next, we'd like to thank all who took the trouble to comment and make suggestions. That's why forums such as this are so helpful. Other people question approaches that the designers (if I can use such a word in our case) take for granted. Long live objectivity...

To Oblivious: Thanks for the encouragement, and for the kind offer. We're both graphically-challenged (like that's news!) and may contact you for some advice.

To Gordypordy: I don't understand the remarks you made about authoring tools, but briefly: we started out using the WYSIWYG editor that came with a version of Netscape 4.x. Then we moved on to using a text editor with a preview facility (1stPage2000). It was when we used the HTML validator in that program on our existing pages that we realised how utterly naff the Netscape Composer's HTML was! So that's the authoring tool that we stuck with.

However, now that we've 'dipped our toes' in the waters of CSS, we think that we're encouraged to continue in that vein and see where it leads us.
Once we get the graphics on Jennifer's site 'fixed', I'll get to work on a design I've had in mind for my own site and get it posted up here, so you can all enjoy flaying me all over again!

Sorry for such a long post, but it had a happy ending, and we really ARE grateful for all the kind help and comments.

Thanks, all...

 

[Anthony]

I encourage you to keep learning more and more about CSS! It will make designing much easier for you and will allow you to extend your design so that you can change one thing and it will change on all sorts of pages...

 

[sarab]

Thanks for the encouragement, Anthony. We aim to do that (if only the weather outside wasn't so damnably nice just now).

BTW, did you think the CSS nav could be improved in any way? It's at:
http://www.algarve-beach-life.com/algarve-tourism.html

 

[spikedo]

At first glance, this looks like an SBIR cookie-cutter site. And the bottom of the page has a link that confirms it. I'm very surprised that, even for beginners, it took so long to pull it all together using SBI tools.

I'm curious: Did you create this site for pure enjoyment and recreation, or did you create this site to make money?

 

[sarab]

The site is all uploaded HTML, spikedo, but you're right, it's an SBI-hosted site. (What's a cookie-cutter, BTW?)

Jennifer felt, and I agreed, that just using their templates wouldn't teach us anything.

And you're right, we are slow, but be fair, there's more to the site than our pathetic attempts at web design... It has got 35 or so pages of content.

That reads more defensively than I had wished... We really do appreciate the feedback we get on the site.

The site is about the Algarve because that's Jennifer's favourite holiday area. If the Google ads cover the cost of hosting, Jen will be more than pleased.

 

[sarab]

If ever there was a reason for getting your preferred page appearance right before you start beefing up your site's content, then this has to be it!!

We finally finished uploading all 34(!!) pages of the site with the new CSS nav and some little footprints at the side (to go with the beach theme we hope) yesterday...

And there are still two new pages to finish for this month, and Jen's got to do her e-zine.... It's worse than working for a living.

Do you gurus think the little 'feet' at the left of the nav work/don't work?

Algarve Beach Life

We know it's not flash or javascript, but you do have to start somewhere, right?