SITE REVIEW: Celandine Web Design

  • celandine
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2008
  • Loc: Belgrade, Serbia

Post 3+ Months Ago

Hi,

I've just uploaded my first website ever and I'd love some constructive criticism (I hope to grow up to be a proper web designer, so don't be too gentle. But it is my first site ever, so do be a little bit gentle :)

The site is at http://www.celandinewebdesign.com .

Celandine
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • RedBMedia
  • Proficient
  • Proficient
  • User avatar
  • Posts: 315

Post 3+ Months Ago

At first I cringed at the sight of your site. Not because it is ugly or what not. It is actually, quite beautiful! But the reason that I cringed was because it at first looked like it had all the qualities of a "print designer trying out web design" in my experience this tends to be a rather nasty thing simply because print designers are used to making beautiful things on paper and often times have a harder time making the transition to turning their design to code....just my opinion though...

However, when i looked at the code of your site I was pleasantly surprised with almost standard compliant code! You have utilized CSS well in most areas! I very much like the used of the overflow syntax to create scrolling boxes! That was a good move! The only problem that I saw with the code is the use of the <font> tag.

The World Wide Web Consortium (W3C) has removed the <font> tag from its recommendations. In future versions of HTML, CSS will be used to define the layout and display properties of HTML elements. Therefore to guarantee that your site stays fresh and accessible you should substitute all <font> tags with appropriate CSS styles. I can see that you are already using CSS in allot of cases, this is very good! Keep it up!

My biggest advice to you. Learn to hand code from the beginning! An explanation of why I say this can be seen here: http://www.ozzu.com/website-design-forum/free-web-authoring-software-t82244.html
  • Bryce
  • Beginner
  • Beginner
  • Bryce
  • Posts: 52
  • Loc: North Carolina

Post 3+ Months Ago

I like it, but there are a few things I think you could improve on. When I first saw the scrolling box, I thought "Oh no, another iframe user", but then I saw it was a div so thats good for a beginner.

I think you could of made better use of the space on the page instead of putting it all up at the top. It's looks ok up there, but then it's all white everywhere else.

That's the only problem I had with it, otherwise nice site for the first one.
  • wish71
  • Novice
  • Novice
  • wish71
  • Posts: 16
  • Loc: Italy

Post 3+ Months Ago

I really like the website, professional look.

1) navigation ok
2) design and color.... clean and ok
3) concept.... clear and to the point

I like also the use of the central frame, why not....
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

The W3C Validator found 48 errors on your "home" page, you can see them by clicking here, please note that these are on the "home" page only, and you should check the others yourself ...

The text-color of a:visited in my opinion should be black and not green, it should look a little better IMO ... then half the stuff in your css document is capital letters ... that's not necessary at all ...

then, rather than having the following:
Code: [ Select ]
<DIV class=stylesproba id=naslov
style="Z-INDEX: 1; LEFT: 0px; WIDTH: 792px; POSITION: absolute; TOP: 0px; HEIGHT: 44px">
  1. <DIV class=stylesproba id=naslov
  2. style="Z-INDEX: 1; LEFT: 0px; WIDTH: 792px; POSITION: absolute; TOP: 0px; HEIGHT: 44px">

you could replace it with the following:
HTML:
Code: [ Select ]
<div class='stylesproba'></div>

CSS:
Code: [ Select ]
div.stylesproba
{
z-index:1;
left:0px;
top:0px;
width:792px;
height:44px;
}
  1. div.stylesproba
  2. {
  3. z-index:1;
  4. left:0px;
  5. top:0px;
  6. width:792px;
  7. height:44px;
  8. }

Then also you don't need that markup to be in capital letters any more ... well as I remember, it's never been necessary ...
Also, the "left" and "top" should only have effect when you specify "position:absolute" ...

Further than that, I like it ...
  • celandine
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2008
  • Loc: Belgrade, Serbia

Post 3+ Months Ago

Many thanks to everyone for all the advice.

RedBMedia wrote:
The only problem that I saw with the code is the use of the <font> tag.

....

My biggest advice to you. Learn to hand code from the beginning! An explanation of why I say this can be seen here: http://www.ozzu.com/website-design-forum/free-web-authoring-software-t82244.html


I'll take out the <font> tags - quite honestly I wasn't even aware that I had them (I tried to do most of the text formatting through css) And I do want to learn how to hand code - it just might take a little bit of time... but even with the meager experience I have so far it seems to me the best and cleanest way to go. And - you scared me for a minute with the 'I cringed' line :)

Bryce wrote:
I think you could of made better use of the space on the page instead of putting it all up at the top. It's looks ok up there, but then it's all white everywhere else.


Yeah I was thinking about that a lot.... the thing is that I'm hoping to cater mostly to the Serbian web design market, and here 98% of the people still have 17" monitors, in which the site centers quite nicely. On my husband's 20" all the blank space looks weird as well, but I think it will have to do for a start... maybe in a while I center the whole thing vertically, and take all the inner pages out of that constricting frame, just letting them run down the page.

righteous_trespasser wrote:
The W3C Validator found 48 errors on your "home" page

...

The text-color of a:visited in my opinion should be black and not green

...

half the stuff in your css document is capital letters


Yes, well pointed out - I'll make sure to validate my code in the future. Should help me learn quicker. In the visual sense I agree with the idea that visited links should be black - I was just trying to stick to the rule that it's good to give people an indication of where they've already been. But maybe the green is too much. Maybe I make it teal or something (pick one of the shades from the little banner).

And I will make sure to take out the capitals.

Once again thanks to everyone - this really means a lot - I'll re-post it when it's fixed............................
  • graphixboy
  • Control + Z
  • Mastermind
  • User avatar
  • Posts: 1828
  • Loc: In the Great White North

Post 3+ Months Ago

I love that imagery on your home page, but its crying for some kind of motion to make it even cooler :-) Or possibly rotating several similar images through that space at random when you visit the site.

Although the use of overflow on a div is technically the correct way to go. I would ask why you did that at all? Your site doesn't have that much content and it seems that it could grow vertically and remain very clean without hiding a portion of your content below the bottom of a scroll box. I want to point out that there's nothing wrong with using the scroll box but it seems to get in the way of presenting your content.
  • celandine
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2008
  • Loc: Belgrade, Serbia

Post 3+ Months Ago

thanx :)

I'm actually hoping to flash-animate a few of the butterflies when I get a bit of time (this ain't my day job, sadly..... sigh). I've got so many ideas for that front page, I could change it every day if I had the time to make them all work. But it's certainly a work in progress - it'll come down for an overhaul over the weekend maybe (to implement all the useful advice received) and I'm thinking of letting it run down the page..... the only reason against was keeping it in line with the index... maybe I make both versions and I have a poll on it
  • jameson5555
  • Bronze Robot
  • Bronze Member
  • User avatar
  • Posts: 575
  • Loc: Phoenix, AZ

Post 3+ Months Ago

I'd have to say I agree with what has already been said in that this is a nice-looking website and surprisingly well coded for a first try.

Also, I like how you designed several mockup websites to use as your portfolio. It could be bad if you didn't really have the skill to pull them off as working sites, but I think you'll be ok in that respect.

Nice work!
  • celandine
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2008
  • Loc: Belgrade, Serbia

Post 3+ Months Ago

thanks :)

I tried to go for simple designs, and I think I could probably code most of them.... I plan to start putting them together one by one - just for practice. I wish I didn't have to do a 'real' job - I'd be coding all day......... anyhow I guess that portfolio will change as soon as I actually do some real sites. Have a few job offers already, surprisingly..... see how those pan out.

I think my main problem in actually doing professional website design internationally will be to arrange payments into Serbia via the net (all sorts of legal complications from our side)

Anyhow I'll definitely do an overhaul over the weekend... I want valid code, for a start......
  • Bryce
  • Beginner
  • Beginner
  • Bryce
  • Posts: 52
  • Loc: North Carolina

Post 3+ Months Ago

It shouldn't be to hard. Get a vertified paypal account and accept payments that way. Also, your clients will need a host.

hint hint hint
  • celandine
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2008
  • Loc: Belgrade, Serbia

Post 3+ Months Ago

waaay ahead of you there - already making a new links page, for this very purpose.

incidentally just ran my index page through the WC3 validator to try and fix - fixed 47 errors, but still get one.......

http://validator.w3.org/check - this is what it says..................

somebody tell me what's wrong with it?

here's the code for that bit, because the new and improved index is not online yet

Code: [ Select ]
<body>
<div id="container"> <a href="aboutcelandine.html">
<div id="slika" class="prvaslika"></div>
</a>
  1. <body>
  2. <div id="container"> <a href="aboutcelandine.html">
  3. <div id="slika" class="prvaslika"></div>
  4. </a>


actually as I'm looking at it I realise what's wrong... I'm probably not allowed to simply href a whole div.... but how should I do it then? what's the most effective way to make the entire frontpage image into a link?
  • jameson5555
  • Bronze Robot
  • Bronze Member
  • User avatar
  • Posts: 575
  • Loc: Phoenix, AZ

Post 3+ Months Ago

Yep, you're right.. you can't just wrap a link around a div.. You could probably just apply that class to the link, though:

Code: [ Select ]
<a href="aboutcelandine.html" class="prvaslika"></a>
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

celandine wrote:
incidentally just ran my index page through the WC3 validator to try and fix - fixed 47 errors, but still get one.......

Then why do I still see 48 errors?
  • celandine
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2008
  • Loc: Belgrade, Serbia

Post 3+ Months Ago

to r_t - because I haven't uploaded the page yet, haven't had time.... I ran a check on the document directly from my machine. I was thinking I'll make it all perfect first, and then upload the perfect version..... that's why I said

Quote:
here's the code for that bit, because the new and improved index is not online yet


sorry if I wasn't clear enough

to jameson5555 - thanks, I'll try that!
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8411
  • Loc: USA

Post 3+ Months Ago

I agree with jameson5555
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

I just saw something else I would like you to fix aswell ... Quickly follow these steps and see what happens ...

1.On the "home" page click on the "english" link.
2.Click on the "portfolio" link.
3.Hover over one of the images (to see the big picture).
4.Now click on the image.
5.Notice that the language changes.

I think if you cahange the following
Code: [ Select ]
<td><a href="celandineportfolio.html" onmouseover="Tip('<img src=\'images/greensite400.jpg\' width=\'400\'>.')">
      <img src="images/greensitethumb.jpg" width="180" height="140" class="pictureframe" /></a></td>
  1. <td><a href="celandineportfolio.html" onmouseover="Tip('<img src=\'images/greensite400.jpg\' width=\'400\'>.')">
  2.       <img src="images/greensitethumb.jpg" width="180" height="140" class="pictureframe" /></a></td>

to
Code: [ Select ]
<td><a href="#" onmouseover="Tip('<img src=\'images/greensite400.jpg\' width=\'400\'>.')">
      <img src="images/greensitethumb.jpg" width="180" height="140" class="pictureframe" /></a></td>
  1. <td><a href="#" onmouseover="Tip('<img src=\'images/greensite400.jpg\' width=\'400\'>.')">
  2.       <img src="images/greensitethumb.jpg" width="180" height="140" class="pictureframe" /></a></td>

on all of those images, you won't have that happening anymore ...
  • celandine
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2008
  • Loc: Belgrade, Serbia

Post 3+ Months Ago

ok the index page is fixed now..... r_t please confirm? :) (it's only the index page, i.e. the one with the menu in serbian. all others will hopefully be done during today.

except the image-as-link thing doesn't work................ it's valid code, but not quite functioning code........ ah

anyone got any other ideas...............................?

re r_t's latest discovery - uh-oh..... :) well spotted, I wouldn't have caught that in a million years.... does it happen on the 'catalogue' page as well? I suppose it must, they were made the same way.......... I'll try and fix it this afternoon
thanks for taking the time to look at all this. you're really helping a lot. much appreciated........
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

Both the "home" pages (languages) look the same, but in the english one, there is one less link than in the srpski one ... there is 6 in english and 7 in srpski ... why is that?

And yes exactly the same thing happens on the "catalogue" page ...

I like the new blue, it works well ... (for the visited links) ...

Congrats ... Your page is now Valid XHTML1.0 Strict! ... as you can see here ...
  • celandine
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2008
  • Loc: Belgrade, Serbia

Post 3+ Months Ago

thanx for the confirmation - feels so nice to be valid :)
now for the other pages.............

the difference in page number is because the serbian version includes a FAQ page which I thought would be far to basic for the international market - Serbia is not very tech-savvy, so I wrote little paragraphs on 'why would I want a website?' 'what is hosting?' 'why is an internet presence important?' etc etc. just thought it would seem a little patronising to include it in the English version.

I like the new blue as well (it's teal actually) it feels a lot better than the green............. again, good call...........
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

Something that I'd like to know ... Those rollover images you created on the "portfolio" page, do you mind sharing that javascript with me ... My javascript skills are nonexistent ... and that is really awesome ... The one you have in "stm31.js" ...
  • celandine
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2008
  • Loc: Belgrade, Serbia

Post 3+ Months Ago

no, "stm31.js" is my horizontal navbar javascript... that was created automatically through Sothink DHTLM Menu (nifty little programme :)

the rollover images js is the "wz_tooltip.js" file (the rollover images are actually just glorified tooltip boxes, you just substitute image for text)
It uses two other little scripts to define it - "tip_centerwindow.js" and "tip_followscroll.js".

then you put this into the <body> tag (right after it, preferably)

Code: [ Select ]
<script type="text/javascript" src="wz_tooltip.js"></script>


and you put a html tag around every thing you want to display the tooltip on mouseover, something like this:

Code: [ Select ]
<a href="celandineportfolio.html" onmouseover="Tip('<img src=\'images/chantalvega400.jpg\' width=\'400\'>.')"><img src="images/chantalvegathumb.jpg" class="pictureframe" /></a>

(you href to the page you're on - and this, incidentally, is what's making the problem you spotted with clicking on images - the rollover hrefs point to the serbian page instead of the english one! By the way, the reason for all the backslashes is that the doublequote serves as a delimiter for the onmouseover eventhandler. So you use single quotes and mask them with a preceding backslash)

of course instead of the img.src you can put in a link or text or whatever you like......................................

what shall we do about the js files, do you want me to mail them to you or can you take them directly from my directory? (feel free to help yourself to any of my script, of course)

and another question - illustrating perhaps exactly what a rookie I am - I know you can read someone's html through the 'view-source' option. but how do you get at their css?
  • celandine
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2008
  • Loc: Belgrade, Serbia

Post 3+ Months Ago

actually I'm making unnecessary complications................ you can download the js and find usage instructions here......... probably a lot clearer than what I wrote...................

http://www.walterzorn.com/tooltip/tooltip_e.htm
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

There are two ways of viewing the CSS ... In firfox ... download the "Web Developer" Add-On, and then you can just click the "View CSS" button in the toolbar ... with the "Web-Developer" Add-on you can also edit stylesheets live (very good for problem solving) and view exactly where every element (div,td,p, etc) is by hovering over something and then it tells you exactly what it is and shows you it's CSS ...

In IE I usually click to view source, then I read whatever the stylesheet's name is, and for yours it is "stylesproba.css" then I type in the domain/stylesheet for example http://www.celandinedesign.com/stylesproba.css ...
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

One more thing I just saw ... When I click on the "english" link, the text that says "srpski" is not totally on the left hand side of the block underneath it, and with the "english" text it is ...
  • celandine
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2008
  • Loc: Belgrade, Serbia

Post 3+ Months Ago

Yes - that's temporary until I fix the other pages - it's because the serbian index page now works properly (and validates! yay! :) and the english first page is still error-ridden like the others. will be fixed by end of today hopefully, as my boss is out of the country and I'm free to waste my worktime on the joys of programming......

I'll get the "web developer" add on as soon as I get home (don't have administrator rights here, can't download anything... also don't have firefox at work...........)
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

After the index pages are valid all the other pages are still to be done ... hmmm rough ... On the english side you still have left the following:

about(88)
services(77)
portfolio(151)
catalogue(150)
payment(69)
contact(78)
  • celandine
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2008
  • Loc: Belgrade, Serbia

Post 3+ Months Ago

it probably looks worse than it is - most of it is two or three same errors repeated over and over and over again........... (forgetting to self-close tags is about 70% of it I think) so it will be easy now that I know what I'm looking for... just take a bit of time......... thanks for running the check for me though
  • jameson5555
  • Bronze Robot
  • Bronze Member
  • User avatar
  • Posts: 575
  • Loc: Phoenix, AZ

Post 3+ Months Ago

celandine wrote:
except the image-as-link thing doesn't work................ it's valid code, but not quite functioning code........ ah


Are you still having trouble with this? If so, what page is it on or what's the code you have so far?
  • celandine
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2008
  • Loc: Belgrade, Serbia

Post 3+ Months Ago

it's on the index page. currently the serbian index is the only one I've validified - if you try clicking on the main (and only :) image on the serbian index page, you'll notice it'll take you nowhere. If you switch to the english front page, clicking on the image should take you to the 'about us' page. but that was achieved by using invalid code - like this -

Code: [ Select ]
<a href="aboutcelandine_en.html">
<div id="slika" style="position:absolute; z-index:2; left: 0px; top: 0px;" class="prvaslika"></div></a>
  1. <a href="aboutcelandine_en.html">
  2. <div id="slika" style="position:absolute; z-index:2; left: 0px; top: 0px;" class="prvaslika"></div></a>

and that, though it's a butcher's method of hrefing an image, seems to work fine (even though it only shows a hand cursor in firefox, and an arrow in IE6)

on the serbian index page, in order to get it to validate, I did what you suggested - or at least my interpretation of what you suggested - like so:

Code: [ Select ]
<div id="slika" class="prvaslika"><a href="aboutcelandine.html" class="prvaslika"></a></div>

...which validates fine but doesn't work. the css goes like this:

Code: [ Select ]
.prvaslika {
    background-image: url(images/celandineilustracija.gif);
    background-repeat: no-repeat;
    height: 437px;
    width: 792px;
    margin-top: 64px;
}
  1. .prvaslika {
  2.     background-image: url(images/celandineilustracija.gif);
  3.     background-repeat: no-repeat;
  4.     height: 437px;
  5.     width: 792px;
  6.     margin-top: 64px;
  7. }

what am I doing wrong?
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

Post Information

  • Total Posts in this topic: 34 posts
  • Moderator: Website Reviewers
  • Users browsing this forum: No registered users and 1 guest
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.