Jump to content

After much blood, sweat and coffee...


Recommended Posts

the site has been an idea of mine for quite some time .. it's also gone through multiple face lifts, but i am finally content with the current appearance and functionality.


anyways, the site incorporates MooTools and PHP w/ mySQL.


i have also added PHPIDS for some added security throughout the site.




thanks for the feedback.

Link to post
Share on other sites

Not a fan of grey on grey and lightgrey on white, makes for poor contrast.

Combine that with a poor LCD monitor and poor eyesight and the text is invisible.


I'd extend the links with the flags so that entire part of which the background is highlighted when moused over is actually clickable (can be confusing to some, and bigger clickable areas is always good).

"Viewlisting" ought to use a <ul><li></li></li>, or maybe even <dl><dt><dt><dd></dd></dl> construction for the list with data about the place.


Why is on the viewlisting part the link structure "top | photos | description | amenities & utilities | map" there twice with relatively little space inbetween, expect the list between it to grow? Cause at the moment I think even a mobile phone would be able to display it all on the same screen.


I spot some <font> tags, those are depecrated and shouldn't be used.

For example: <font style="color: rgb(187, 187, 187);">hydro</font> should be <span style="color: rgb(187, 187, 187);">hydro</span> or even better, use a class and move the colors to the stylesheet.



Not very accessible, considering the simple layout I'd go all out on form specific tags.

For example the second part could look like this.

  <legend style="text-transform: uppercase">Listing unit style</legend>
  <label for="furnished">Furnished</label>
     <input type="checkbox" name="putCont" id="furnished" />
  <label for="unfurnished">Unfurnished</label>
     <input type="checkbox" name="putCont" id="unfurnished" />
  <label for="shared">Shared</label>
     <input type="checkbox" name="putCont" id="shared" />

(Of course feel free to mix in whatever spans/divs you need to get the desired layout)



I think googling "Semantic web" and reading up a bit on which tags to use where would do your site (and search engine rating) good. Would make it a lot more accessible to different types of 'browsers' as well.


Visually.. it's quite pleasing, clean white/blue, reminds me of one of the previous apple/mac websites.

Accessibility however is poor, it's all divs and spans and I can't even get to the login page if I disable javascript.


So I hope you still got some coffee left, as there is a little bit of ground left to cover.

Link to post
Share on other sites

My thoughts are as follows:


- The site doesn't validate. Nor does your css.


- Just as a matter of personal taste, I tend to prefer sites being centered.. as it stands, the content of the upper menu (featuring Hello, Guest!|Login etc..) goes all the way to the right, while everything else is all the way left. As a result, there isn't much of a unified 'grid' that makes it easy for the eye to follow. Perhaps centralizing everything into a width suited for 1024 pixels and centering that.


- I think that the home page lacks a description of what the site does. Sure, the url is transcanada rentals.. but of what? Cars? Lawnmowers? Apartments? I see an image of some expensive looking home..So I gather it is either suite rentals or something along those lines. Being clear of the site's purpose would help first time visitors understand things quickly.


- The 'd' in canada looks too bizarre IMO. Nothing wrong with making a modification to a font to help make it more uniqiue.. I just find that modification strange.


- The useful tools showcasing the firefox logo suggests (to me anyway) the message along the lines of 'best viewed in firefox'. Sites should be coded to be W3C compliant (see the validation parts I mention above as an example) to run on all major up-to-date browsers at the very least. I would consider axing that and using the space for something more constructive / conductive to the nature of the site itself.


- I would consider using CSS instead of tables as layouts.. this way, you can fully separate content from presentation, and gzip you css.


- Checking the total hompage size via Firefox extension yslow, it clocks in at a hefty 728.5K using 35 http requests.. That's a lot for what you have. You can optimize things like making all the provincial emblems one image (think css sprite sheets). This will cut down on overall image file size as well as http requests. Also consider passing your site through smushit to see more additional savings off of images (which your homepage can shave off 30.21k alone in this department). Additionaly, any javascripts that can be merged, minified and gzipped would also help out.


- I really like the log-in panel in Firefox.. in Opera, the layout is mashed up (validation issues I'm sure). Cross test in other browsers to make sure it looks correct. When the browser's javascript is disabled, I get this message in the header... "u must enable Javascript in you browser in order to try this demo." If you are going to have elements in javascript, there should be <noscript>....</noscript> fallback functionality.


-I tried logging in using test as user and password as password.. no go..System complains that it is incorrect.


Overall though, I do like the look and feel of the site. Just some stuff to work out and consider.


Link to post
Share on other sites

- If your search did not get any results, and you click "search again" it would be nice it the fields were auto-populated with your previous criteria.

Link to post
Share on other sites

-In a proper glass effect, the object reflected fades in the direction of the viewer (i.e., downwards on screen). So your reflected logo text should fade out, not be flat white.

-If you select a province, it brings you to a "select property type" page with the province already entered in the form. If you click the "Select a Property Type" link in the top right, it brings you to the same page, with that navbar showing the province you selected as selected, but the province field is no longer selected. Why not base the pre-entered form value on that session/cookie/whatever you're keeping for the navbar instead of a GET variable?

Link to post
Share on other sites

holy jebus .. good thing i take critique very well.


first off, i do greatly appreciate the feedback.


the site is a work in progress (still), so anybody who got a broken link, it's most likely just temporary.


the site started out validated, then fatigue and frustration set in, as well as deadlines, so figuring out IE hacks and such just wasn't much an option anymore .. i'm by no means a CSS expert, nor do i even consider myself much of an intermediate .. i love what it can do, but i'm still living in <table> land as i've been designing sites since back when the internet first came to a head (always been the on the technical end, just starting into the creative/graphic end).


what really ended up happening was that the site started out really small .. no MooTools, no javascript, no nothing .. then, at just about the time the site was set to be completed, my partner got engaged and so ensued a lengthy period of time in which i had all to myself with the site .. one thing led to another as i browsed the net and familiarized myself with some CSS and Javascript, and poof!, a completely different site was born .. now, just 10x larger and 1000x harder to keep/make validate.


i am the only developer on the project which makes things difficult .. i have self-taught myself everything i know on PHP, HTML, etc...


to address some things...


-the firefox logo on the homepage is a filler as there is no content to go there as of yet.


-to answer Maq .. that is on the drawing board .. had other issues to be ironed out in sequence of priority.


- looking into 'sprite-sheets' .. anything that can help speed things up.



right now, the accessibility (or lack thereof), is freaking me out .. what measure could i take right now to ensure people can still navigate the site with javascript turned off, ie. something along the lines of :

if (javascript_is_off) { show this } else { show this }

how can i achieve that in javascript, or what is the best way to go about that.  i love the javascript, so does my partner .. but if it's a potential client killer, it's not really worth it, now is it.



thing is, a complete revision of the site will come again in the near future to have it completely up to Web 2.0 standards .. as well, i do need to get down to CSS 101 and better structure the site.


i just always seem to over-complicate anything i work on .. no matter how hard i try.

Link to post
Share on other sites

if (javascript_is_off) { show this } else { show this }

how can i achieve that in javascript, or what is the best way to go about that.


For that, what I do is:

<script type="text/javascript">
... // your javascript code here...
... // the alternate non javascript code equivalent here...

Link to post
Share on other sites

what about for example, my search listings page?  the search results are called via AJAX and element id's .. would it not be easier to just display a different search feature altogether if javascript is disabled?

Link to post
Share on other sites

I'm not versed in AJAX to be honest (it is on my list of to-do things - I have bigger fish to fry currently [relatively speaking of course]). I just offered up what I do with my stuff. If that method won't work, then I'm not sure how to get around it.

Link to post
Share on other sites

fair enough .. thanks for the help .. greatly appreciated!


same to everyone else .. and listen, if i could snap my fingers and have a perfectly clean, validating site i would, trust me .. so any help pointing me in that direction is greatly appreciated.


thanks again.

Link to post
Share on other sites

Well theres 2 ways you can work with javascript.. you write what you want in <script> and <noscript> tags.

Or, do what has been getting popular for a reason.. write your site without any javascript, and then let the javascript manipulate the page to add features.


I prefer letting javascript add its own features as it's easier to maintain in general.

If you're interested in speeding the site up, don't forget to check yahoo's article on site performance they put a lot of effort into researching what's needed to make a page load faster and shared the results :)

Link to post
Share on other sites

write your site without any javascript, and then let the javascript manipulate the page to add features.


EDIT - Never mind, I'm assuming then you are referring to external javascripts (which is indeed more recommended). I tend to use javascript as both separate scripts as well as extremely small ones used in include / require files for ease of maintenance.

Link to post
Share on other sites
write your site without any javascript, and then let the javascript manipulate the page to add features.
sounds like something i just read about the other day.


you got an example?

Link to post
Share on other sites

thing is, how would i replace a link that is dependent on JS, ie.

<form action="doSomething" name="doFormSubmit">
     <a href="javascript:void(0);" onmouseup="doFormSubmit.submit();">link</a>


something i did so as to allow for text-link form submission.


but the form (obviously) does not submit with JS disabled.


sorry, i should be opening new threads for some of these questions.

Link to post
Share on other sites
sorry, i should be opening new threads for some of these questions.


You will tend to get more replies with newly created threads in the proper section.

Link to post
Share on other sites

In response to your javascript. ->


Look into jquery. It's an amanzing javascipt library. Makes life 1000x times easier. NO JOKE.


Instead of putting javascript in things like "onclick" or href="javascript..."


You do this in jquery.



  evt.PreventDefault(); // don't follow link

  ... fancy javascript coding...



<a class="javascript_links" href="#">Link text</a>


This gives you an idea. You should do a quick google search and find more info on jquery/javascript. Hope that helps!  ;D

Link to post
Share on other sites

thanks for the input, man .. i already have the MooTools library implemented on the site.  they are quite similar in functionality (in most departments - from what i hear).


that evt.PreventDefault(); function acts as a <noscript> type deal?  i'll look into the mootools equivalent.

Link to post
Share on other sites

PreventDefault, does as its name indicates.


It prevents the default action from being fired. As a links default onclick action is going to the page in its href attribute you need to prevent it if you want it it to perform another action. (like making an ajax call to replace a part of the content on your page).

Link to post
Share on other sites


This topic is now archived and is closed to further replies.

  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.