Jump to content
Sign in to follow this  
newbielearner

My first proper site

Recommended Posts

Hi,I am doing this site for my wife as a labour of love.It's not completed as yet--> I'm looking at how to improve it.CLICK HERE FOR THE SITEAnyway- I just wanted to hear what you think of it so far.Don't try to soften the blows- just yell it out!Any suggestions, comments, critiques?ps- I was inspired by Ible-White posting requesting feedback on his site - and the warm response to his posting. So I'm hoping for a similarly candid comments from the helpful forumers here. And erm, this is NOT an attempt to get you to buy anything from my wife's site. I'm interested in the web development aspects of the site.thx

Share this post


Link to post
Share on other sites

Hi there,The site layout isn't centered, so on larger screens it's stuck on the left with a huge gap on the right.The site is very simple - which is fine, but from the front page it doesn't look like a store or "front window" for a store which i'm guessing it's what it's trying to be?Other than that, It looks good :) I'm sure other people will comment though. As you put this in the Javascript forum, were you looking for more critique on the scripting of the site rather than the layout and looks?

Share this post


Link to post
Share on other sites

Hey, I just moved this topic. It would be better off in the general section of the forum. :)It's a nice site. The colors match well. But like Webworldx says, it would be better off centered.

Share this post


Link to post
Share on other sites

That is really good for a first website (remembers his own first attempt!). I believe that simplicity is the key to most web pages especially e-commerce ones.Nice use of Dreamweaver templates by the way, it makes life easier for HTML coding. Next step for you I think is to learn about CSS.Good luck with it all :)Rick

Share this post


Link to post
Share on other sites

It is nice, but plain. As with everyone else I say it certainly does need to be centered! You did much better than I did on my own first site :). Of course I hand coded mine with notepad so of course it was going to look horrible. I dont know what is missing, it just seems a little boring.

Share this post


Link to post
Share on other sites

Simple... true. I like simple stuff actually, so I think it looks good.The code however is a total crap. A site as simple as this could easily be made with a CSS based layout without much difficulties.By the way, Ible-White is "she" as far as I'm aware of.

Share this post


Link to post
Share on other sites

The subnavigation links on the Gallery page should be more obvious, when you go to the page at first glance it just looks like an email contact page. Maybe center the links right above the body text, instead of hiding them in the content header.

Share this post


Link to post
Share on other sites

First, thanks all for your time and prompt replies. It really is very encouraging. My wife is absolutely amazed at how polite everybody here is. And I do want to apologise for addressing Ible-White as he.I have made a "to do" list based on the comments:

... like Webworldx says, it would be better off centered.... it certainly does need to be centered
1. I'll shift the alignment to centered.
Next step for you I think is to learn about CSS.
2. Actually, I've just started learning about CSS and is very excited about it. But I'm sticking to the simpler ones as I'm worried about browser incompatibilities.
... subnavigation links on the Gallery page should be more obvious
3. Will try some other placement tomake the links more obvious.
The code however is a total crap.
4. boen_robot, are you referring to the javascript for renewing the page? I'm sure it's very clumsy. I was worried visitors would be viewing the outdated cached version of the page. So I wrote that bit of javascript. If there's a proper way to do it, I'd love to learn it.
... were you looking for more critique on the scripting of the site rather than the layout and looks?
5. I definitely value the comments on the layout and looks. But yes, there's one javscript I'm using in the listing pages that's troubling me. I tried asking before but probably didn't make myself clear, so I'll try again here. In this page from the site, I've used a javascript function to link each thumbnail to the relevant eBay listing. The URLs are stored in a small database contained in a javascript Array element.This arrangement works if the visitor clicks the thumbnail after ALL the thumbnails in the page has loaded - it opens another window showing the relevant eBay listing page. Problem is: if the visitor clicks a thumbnail while other thumbnails are still loading, then the page stops loading and the eBay page is NOT opened. Sometimes, the eBay page is opened, but my thumbnail page is still "freezed" as in it stops loading the other thumbnails. This problem occurs whether the javascript is in the external .js file or embedded within the thumbnail page itself. If I can't find a solution to this, I'll have to hardcode and update every link in the site every time the eBay listing number of all the items change (using the javascript, I just need to update the javascript Array) and that is horribly tedious. I've included extracts of the javascript code below. Help!Thanks again for the feedback. I'll post again after the next iteration.Extracts of the javascript code:
An example of the javascripted link in the HTML file:<a href="java script:gotoListing('b30020');">GardenDelight Beautiful Czech Glass Bracelet</a>

Extract of the javascript function and the "database":

var ebayBaseUrl = "http://cgi.ebay.com.sg/ws/eBayISAPI.dll?ViewItem&item=";listingUrl = new Array();listingUrl[50024] = ebayBaseUrl + "190044349595";listingUrl[80004] = ebayBaseUrl + "190044349584";listingUrl[50041] = ebayBaseUrl + "190044349577";listingUrl[30019] = ebayBaseUrl + "190044349571";listingUrl[10013] = ebayBaseUrl + "190044349563";// the list here has been truncatedfunction gotoListing(itemNum) {// extracts the 5 character number from the prodNum, removing the alphabet prefix. eg. 50023 from e50023.var extractedNum = itemNum.substring(1,6);parseInt(extractedNum);window.open(listingUrl[extractedNum],'');}

Thank you

Share this post


Link to post
Share on other sites
And I do want to apologise for addressing Ible-White as he.
:) you are forgiven newbielearner, but just know that next time you wont get away so easily. i'll spank you and put u in the situaton room. :):) (sigh--> now smiling)anyway, nice site. i'm not a pro as u know- i'm picking my pieces, but fast tho.* the header is not very catchy (personally i think i'm sufferring from designing clear n catchy headers- but one day...)* if u r not using the entire page- u can probably make use of a nice border or so in someway to lift the site and bring it out more.* the home page looks the same as all other pages. can u do the homepage a lil different. that's what ur visitors will see first, and if it doesn't catch them right away, u might lose them.* and remember, the net has become the world's largest market (selling n buying). many other persons are out there selling the same things. so said- u gotta seperate ur site from their's. so, a lil elegance and a lil professional touch may do the trick.* i'm not into javascript- so no comments on that.(reminds me of very very first site- which i never shared here. :blink: . i did a project selling cars online... hmmm. dont ask if i got any sold. :blink: )

Share this post


Link to post
Share on other sites
4. boen_robot, are you referring to the javascript for renewing the page? I'm sure it's very clumsy. I was worried visitors would be viewing the outdated cached version of the page. So I wrote that bit of javascript. If there's a proper way to do it, I'd love to learn it.
Mostly, but not only that.If it's only for disabling caching, you can add this in your every page:
<meta http-equiv="Cache-Control" content="no-cache, must-revalidate" /><meta http-equiv="Pragma" content="no-cache" />

And honestly, I'm not sure of the difference between those two. I just know they should work.The other thing you could do is to set up the server to send "no-cache" HTTP headers, but you probably don't have that much control, so the above remains the easiest solution, and it's certanly better then the JS one, scince it works even with JS disabled.The other thing that I find majorly wrong is the use of tables to arrange the products. Using a floated list with fixed dimensions (to avoid browser incompatabilites) would do better, at least in terms of faster loading and lesser markup.I would also suggest using lists for the menu and remove the character separators in their favor, etc.But I guess in the end, this is a store. Not only that, but it's a store for jelewly. A jewel must be seen in order to be appreciated, so all accessability stuff is probably meaningless for this particular site. If it was a store for... say firniture... there might have been some point.As for your last problem. I can't really seem to duplicate it and my internet is not that fast, so getting only the first thumbnail being loaded isn't a problem for me.I do think that you should manually add each link. If not, create a server side script and a database that will carry each item's price, image, name (,etc.?) and listing number, from which then you'll assemble the full URL. Practically what you have right now, but being done on the server side for the sake of flexiblity. Then again, googlepages don't offer a server side scripting language, so I guess your current approach is the best option you can get. I exclude the XML client side way, because you'll have too much to learn, which you don't really need right now. Besides, I'm not sure if googlepages allow XML and XSLT files either.

Share this post


Link to post
Share on other sites

Nice, simple. I like that in a web-page. The links at the top of the image columns have text-decoration:on for the on:hover state which is adding a little unsteadiness to the page. When I hover over them, the background changes colour, (good), but the underlining is adding a couple of pixels and causes the page to "jump", all be it only a little. I would suggest tracking down the selector for them and removing the underlines or adding underlining for them during a non-hover state so the page doesn't wiggle...Small point to worry about. :)

Share this post


Link to post
Share on other sites

Thanks , boen_robot for your detailed reply.The reason I wrote the javascript was to meet 2 needs:a. allow normal caching so that visitor do not need to reload all the thumbnail on every visit to the page.b. set an expiry date after which the browser would be forced to reload the page & thumbnails. (the expiry date is when the listing numbers are changed and new items are added).As you pointed out, this won't work if javascript is disabled. Using the Meta method, can the visitor's browser be forced to reload ONLY after a preset expiry date?On using CSS instead of tables, I tried that but my skill level in CSS is not up to scratch yet, since I've only just started on CSS. I'll try the method you suggested.On using lists for the menu, I tried to use left border as separator before each item, but that would put add a border before the first item as well. I understand the CSS for specifying the first element is not well supported across browsers yet. I'm still experimenting to use lists.As for the main problem, you're right, I can't use server side script cos' google doesn't support it yet, and also my database is not very big yet, and I'm still learning PHP/MySQL. As for the symptom, let me elaborate so you can duplicate it. Say there are 20 thumbnails on the earrings page . Let's say after 8 thumbnails are loaded and displayed, the visitor clicks on any of the thumbnails (while the OTHER thumbnails are still loading) - that's when the problem manifests itself. The page stops loading, the new window does not open, clicking on the javascript links on the earrings page do not open the relevant page either. Only thing for the visitor to do is to reload the page, wait for the thumbnails to fully load, then the javascript links will work (I'm sure no visitor will stick around for that and I don't blame her).If I can't find a solution, I'll have to manually update each link throughout the site. Apart from horribly tedious, it really irks me and drive me nuts because I can't understand why it doesn't work!!!Dear Ible-White,I'm so glad you've accepted my apology, and that I won't get spanked this time :) I'll think through those pointers you've given me to see how I can revamp my site. But so much to learn and so little time, sigh.Thanks again all for your comments.

Share this post


Link to post
Share on other sites

Well, there's the

<meta http-equiv="Expires" content="day-of-the-week, day short-month full-year hours:minutes:seconds timezone" />

element. For example:

<meta http-equiv="Expires" content="Sun, 12 Nov 2006 05:00:00 GMT">

This will force the browser to refetch the page if it's passed this time, but enable caching beforehand.For the JS problem, I understood it from the start, but I still can't really experience it. Note that I'm using IE7, so I have no idea if this issue occurs in IE6.You might be interested in finding yourself another host. One that would offer you free server side scirpting support.For the lists problem, you could specify another class for the first list item that would remove the border from it.

Share this post


Link to post
Share on other sites

If you are having issues with loading images there are actually javascript image preloaders on dynamicdrive.com, you could just stick it on everypage, but it would be disabled when someone puts no javascript on.As for what boen said, I would get a different host. You could just get one at some place like 275mb.com and get a free site, then use a redirection site such as http://www.freedomain.co.nr/ to mask the url (it would turn in specified-site-name.co.nr). As for sever side scripting I am a pretty good PHP coder an I could do it for you. Im sure you could ask some of the people here about me. I dont think they have much time to do free projects though, they have jobs.

Share this post


Link to post
Share on other sites

Was it, why didn't you ask the mods? Don't complain. I have yet to se any chanegs to the site. So im guessing he isn't listening?

Share this post


Link to post
Share on other sites

Hi,Sorry for the late reply. Just returned from overseas and have just completed some of the action list based on the helpful comments here. The updated site design is at the same address here. Again, comments and critiques are most welcome. The following are some of the changes I've made:1. Layout has been centered. Didn't add a border (which I liked) cos' the boss (wifey) preferred no borders.2. Lowered the subnavigation breadcrumbs in the Tips & Treats section to make it more obvious. Considering whether to do the same for all other navigation submenus in the other sections.Still hasn't figured out the javascript problem so I reverting to manually updating all the links.Thanks to everybody again for your valuable comments. I really appreciated it!To boen_robot,Thanks for the tip on using the meta tags for refreshing pages after a specific date. I was considering using it but got frightened off when Danny Goodman in his book (Javascript Bible) warned that the browsers are rather inconsistent in implementing meta tags nocache flag. In fact, I got the idea from him to force the server to reload by adding a date based variable to the URL after the specific date. It seemed to work so far so I'll leave it for the time being although it must look terribly amateurish to experienced scripters. I'll also be changing the table based layout for the thumbnails to list based once I've figured out how to do it properly using CSS.To boen_robot and reportingsjr,I've encountered the same javascript problem on Google and previously on my ISP host. Next step for me is to look for a paid host that supports server-side scripting and PHP/MySQL database. But I'm leaving that till i'm more gen up on PHP/MySQL and till the products inventory gets bigger. But THANKS to reportingsjr for offering to code the PHP for me. I'll write to you when I get my act together.sigh... so many things to learn... so little time...

jlhaslip:The links at the top of the image columns have text-decoration:on for the on:hover state which is adding a little unsteadiness to the page. When I hover over them, the background changes colour, (good), but the underlining is adding a couple of pixels and causes the page to "jump", all be it only a little. I would suggest tracking down the selector for them and removing the underlines or adding underlining for them during a non-hover state so the page doesn't wiggle...
Thanks for the feedback. Can I check which browser you are using? I test my pages on IE6 and Firefox 1.5 on XP. I had the jitter problem on Firefox on images that were links. I thought I'd solved the problem by removing the hover style for images. Pls let me know your browser so I can replicate the UGLY jitter defect :)

Share this post


Link to post
Share on other sites

Great job on the site. I better not let my wife see it or she'll put me to work!I read above that you are beginning to learn CSS. The only thing that I would suggest is to change the style for the main navigation menu. Something about the way it is styled currently makes it seem to me like it doesn't belong with the rest of the text on the site. For example, on the home page, maybe the text could be styled more like the text next to the images for the different categories. Perhaps, if they are using the same font-family, you might try making the navigation menu's font-size a touch smaller and make the font-weight be bold.Anyhow, great job.

Share this post


Link to post
Share on other sites

Thanks jesh and Tarte for your compliments. I've adopted jesh's suggestion and modified the style of the main nav.Also regarding the javascript problem that I had with the links - I've managed to solve it - just in case you go to the site and try to replicate the problem. I'm using onclick to trigger the javascript function rather than the HREF attribute in the A tag. I still don't understand why the first method didn't work. I just wish I'd find out one day.Thanks again to all who gave your valuable comments. :)

Share this post


Link to post
Share on other sites

I must say Danny Goodman (doesn't really ring any bells, but hey, the guy has a book) is right. It is really best to set up the server to deliver proper last-modified headers. Browsers never ignore those, but they do sometimes ignore the meta elements. However, scince you don't have control over your server, that's not an option and so, the next best remains the meta element.Anyway, that's probably (almost) useless, scince you solved your JS problem and have alternative for the above.For the CSS table replacement, I told you: use a float on each list item, but specify dimensions in pixels to avoid inconsistencies. Try it.

Share this post


Link to post
Share on other sites

Thanks for your encouragement, reportingsjr and boen_robot.Dear boen_robot,Although I've solved the JS problem, I still hope to find out one day why it didn't work, as it uses a seemingly elementary technique that I would have kept on using in the future. But I'm happy to have found an alternative method (through trial and error) that works.On the CSS table, I'll be trying it. Thanks for your instructions. I update the site about once a week, when I relist the jewellery on eBay. So any changes will not be immediate.My next few action item is figuring out how to add a currency converter to the prices so that it can automatically calculate and display the prices in the local currency of the visitor (and also give the visitor a choice). At the very least, it should be able to display prices in the main international currencies (eg. US$, UK Stirling Pounds, AUD$ etc) No clue how it's done. Hopefully I'm not being too ambitious - any pointers on how to go about doing it? :)

Share this post


Link to post
Share on other sites

Umm, you will need a form. Have it have a dollar amount, then a <select> with things like USD to UK Pounds and UK Pounds to USD. Google currency converter and check their code, just borrow snippets!

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...