please review my portfolio site :: redesign

Looks good in FF... I have actually been looking at using a very similar design for a new site... guess I'll have to shelve that idea since you beat me to it.

IMHO your content text is a little too light... it's a bit hard for me to read, but that style certainly appears to be in vogue because I see it all the time on the web.

You might want to do something about your email address being visible to bots on your contact page... encrypt it or use or form.

Other than that, very nice job.

It's starting to feel fully formed, the detail and pages work well.

I too have a slight niggle with the actual layout graphics and perhaps this will be an area that you need to play around with I find that on say a longer page that you loose the relationship between the header and the footer, to be left with a single red line to the left of the copy, it just feels slightly unbalanced and empty if that makes any sense even though I much prefer minimalist designs over fussy ones.
Having said that, I would still consider what you have is eminently useable as is, and nothing to overly worry about, tweaking things like this can be carried out at any time, indeed designs can grow stale and need updating from time to time.

The footer text is a little weak and could do with stronger contrast, it's difficult to read.

On a slightly different tack when your designing client sites with an accessibility brief in mind and where it is an definite consideration to comply with the guidelines one should have an accessibility statement either worked into the 'about' or 'Privacy Statement' pages or better given it's own page where you comment on the accessibility guidelines implemented on the site, how accesskeys are set up, tab index, these sorts of issues and most importantly a email link for feedback on issues relating to Accessibility.

It's looking really good Larmyia, pat on the back time

Hugo.

Hi Larmyia

Looks excellent!

If you want ideas of things to put on your index page - how about a line of 3 or 4 small zoomed images (below your text) of bits of various sites you've designed - like on http://www.hicksdesign.co.uk/ all with frames around them.

Many businesses are now realising the benefit to having a strong online presence. An effective website can be more prodcutive than an advert in Yellow Pages, and as essential as a telephone line.

nice site, but theres a problem. check your footer, you link to the wrong site.

I like the overall proportioning but I don't find the chromatic balance to be pleasing. Others have mentioned the text being too light and I have looked at some of your other sites and they do tend toward lighter colours and lack some contrast and punch. While this may represent your particular aesthetic and lighter tones can make a site look very chic, in this case is isn't coming together just right. The orange color is clashing with the red plus you are using it for both a index color for your nav and a header color for your content. I usually prefer to make my hover colors unique in the interface as a cue to that being a link.

Your little fishie icon at the bottom of your index page is an unaliased jpg which doesn't look good when you inspect it carefully. It needs to be larger and better crafted if it is going to be there at all.

You need to define your menu <a> tags as blocks so that they fill the <li> tags. Right now you have to hover the text directly whereas if the <a>s are blocks then you can hover anywhere in the <li><a> area. I'm not ecstatic about the hover effect anyhow - perhaps you could use the Eric Meyer technique of overlapping the vertical divider and changing the color over the divider on hover. I know it isn't original, but it is effective.

You are mixing your metaphors a bit with the use of bolded text for both links and, for want of a better term, keywords. You may want to reconsider this as I just didn't find the site as intuitive as I felt it should be and since you are stressing accessibility as a factor that distiguishes your 'brand' you have to make sure your company site is an exemplar of accessibility.

The good news is that this is all easy to change because you have used well-structured semantic xhtml and an external stylesheet so that adjustments could be done in an evening.

Color is a very individual thing but I have found sites like:
http://www.colorschemer.com/online.html
http://www.visibone.com/colorlab/
http://wellstyled.com/tools/colorscheme2/index-en.html
http://www.adaptiveview.com/cw/index.html
To be of great assistance in browsing potential color schemes in a semi-scientific fashion.

As I've told folks before, I only really crap on people's sites that are worth fixing :roll:

I just wanted to quickly thank everyone for their useful comments. yesterday and today are very busy, so I've only been able to glance at them, but I'll look at them in more detail tomorrow and report back.

once again, thanks

larmyia

A few things:

Gray text is too hard to read. Dark red against white doesn't work for me either.

I see you're using a "border left" to style your hover links. Coincidentally, I've been trying the same effect on one of my sites. My only suggestion is to not also change the font color on hover. Also, what if you aligned that text "left", so that the border left doesn't look like it's bouncing around? If you align the text on that menu "left", that border hover effect will go straight down. Just a thought.

Great job with validation. You're close to having a really nice site.

Agreed, I really dislike the border on hover.

IMO, the links should either all be the same width, so the border is in the same place, OR, the right hand border could change.

Also, you NEED to make the text darker. I have relatively good eyesight, and it's hard for me to read.

Just a clarification: I don't necessarily dislike the left border hover effect, I just think it should be implemented a little differently. I'll post an example that I'm working on when I get a little further along with that project.

well, thank you to everyone for all their comments. much appreciated and much food for thought. unfortunately have had massive probs with my computer and had to reinstall everything, so unable to make some of the changes. However, I have taken on board all that was said.

rmfred: (and others) I have darkened the content colour. any thoughts? with regards to the email encryption, excuse my stupidity, but I thought it was hidden by using JavaScript. what's the best way around this problem? I already get more than my fair share of spam.

Hugo: many thanks. agree with your point about accessibility statement on client's site if accessibility is big. will implement that soon. have changed the colour on the footer to make it easier for older eyes ( only joking).

I also felt the page was top heavy on the longer pages. going to try some stuff out when I get photoshop back (we lost the disc wouldn't you know it!). I think this will be a bigger issue as the pages grow in length.

HellsBells: Good idea for the bottom of the index page. I'm thinking of implementing a recent projects type thing with small icon type things. thanks! hopefully it'll work out.

Joseph: oh the irony! thanks for pointing out that spelling mistake.

nix: have corrected the link. thanks for that. completely missed it.

EOBeav: I guess we're just going to have to agree to differ. I really like the dark red on white. As David said, I have a tendency to lean towards lighter colours and I wanted something with impact. but thanks anyhoo.

also, I want my text to align right. but am interested to see what you're up to when you're ready.

David, David, David: thanks for your comments. I have tried to take onboard your comments. the fishie is out (was never really in). it was just there to fill space until I decided on something better. Links interesting too.

One things though...I agree that the whole link area should be active. You suggest using "block" but that makes the left hover go all the way to the left. although I know TPH doesn't like the current effect, I actually do, and want to keep it this way. what would be the best way around this? Hope I've been clear.

once again. thanks everyone and apologies for tardiness.

larmyia

The touble is that any form of email encryption will present you with an accessibility/usability problem. As far as I know there is no method that will enable you to encript your address AND have it accessible to all users.

Even using the form idea will result in spam but it can reduce it whilst still remaining usable to site visitors.

It all depends wether you would rather cope with an influx of spam or allow that extra 1% (or what ever the value might be) of visitors to email you. It's a lose lose senario

What about using hex and iso characters instead of normal ones like this [url] http://www.seowebsitepromotion.com/obfuscate_email.asp[/url] ?

maybe the form idea is the way to go. I'm just not a big fan of the form personally. I like to have a record of my emails. humph!

da*n that spam!

larmyia

Just have the form contents emailed to you... I take it a step further and have the form contents dumped into a database as well....

I know every form that was completed on the site, who sent it, who it was sent to, the day and time it was sent etc etc (Big Brother hehe)

Just a suggestion for an alternate nav style using the display:block on the li a tag (and also an implementation of the Eric Meyer type nav.) The entire block below could be swapped into your code from heading to heading to test it out. I've used your orange even though I don't really like it. .

    /* div:leftnav - main navigation */      

#leftnav {
    float: left;
    width: 161px;
    padding: 10px 0px 10px 0;
    text-align: right;
    font-weight: bold;
    background: #fff;    
    border-right: 5px solid #990000;   
    }
    
#leftnav a,
#leftnav a:visited { 
    display:block;
    padding-right: 23px;
    color: #990000;
    border-right: 5px solid #990000;
    } 
    
#leftnav a:hover,
#leftnav a:active { 
    color: #99000;
    text-decoration: none;
    padding-right: 23px;
    border-right: 5px solid #ff6600;
    background-color:#fdb;
    }    
    
ul {margin-right:-5px;
    list-style-type: none;
    line-height: 3em;
    }
    
    /* current page */
    
body#index li#navhome a,
body#phil li#navphil a,
body#services li#navservices a,
body#use li#navuse a,
body#port li#navport a,
body#links li#navlinks a,
body#bio li#navbio a,
body#contact li#navcontact a    {
    color: #999;
    cursor: default;
    border: none;
    padding-right: 23px;
    border-right: 5px solid #ff6600;
    }                    
    
    /* div:content */

An alternative way of getting a left sided addition for hover is to use something like:
li a:hover:before {content:':: ';} or
li a:hover:before {content:url(http://www.subtleasafish.com/img/fish.jpg)' ';}

Anyhow, have fun with it.

DE

Larmyia I was going to suggest a form for email but rmfred beat me to it

There is a very good and secure perl formmail script that you can use it's very configurable and a doddle to use as long as you have a cgi-bin, it's called nms-formail you can have it send the mail to a mailbox of your choosing such as and download as you would any pop3 mail it will also show a confirmation screen acknowledging that the email details have been sent and if you wish will also send a 'received' email confirmation to the enquirer.

Hugo.

If you would like details of it let us know.

would very much apprecaite that Hugo.

David, will try your code and see how it works.

many thanks

larmyia

An alternate interpretation with a great deal more impact that picks up on the bold use of the vertical and horizontal red (#990000) in your design. There is a subtle difference in the use of a width in ems for the ul plus floating the ul to the right. (it has to accomodate the widest list item). What this does is allow the use of narrower blocks but also allows the nav to grow if needed at large font sizes.

Note - tested only in FF so no guarantees for other browsers - free advice is worth what you paid for it!

 
    /* div:leftnav - main navigation */     

#leftnav {
    float: left;
    width: 161px;
    padding: 10px 0px 10px 0;
    text-align: right;
    font-weight: bold;
    background: #fff;   
    border-right: 5px solid #990000;   
    }
   
#leftnav a,
#leftnav a:visited {
    display:block;
    padding-right: 23px;
    color: #990000;
    border-right: 5px solid #990000;
    }
   
#leftnav a:hover,
#leftnav a:active {
    color: #99000;
    text-decoration: none;
    border-right: 5px solid #ff6600;
    background-color:#900;
    color:#fff;
    }   
   
ul {
    float:right;
    width:10em;
    margin-right:-5px;
    list-style-type: none;
    line-height: 3em;
    }
   
    /* current page */
   
body#index li#navhome a,
body#phil li#navphil a,
body#services li#navservices a,
body#use li#navuse a,
body#port li#navport a,
body#links li#navlinks a,
body#bio li#navbio a,
body#contact li#navcontact a    {
    color: #999;
    cursor: default;
    border: none;
    padding-right: 23px;
    border-right: 5px solid #ff6600;
    }                   
   
    /* div:content */*

Something I forgot to mention before - I don't think you should have an alternate :visited color for nav links. The nav is used constantly and once you have visited all points in your site the nav would be in the :visited color. But is that really what you want. It is quite different when someone is following links in your content to provide a visual reminder that a link has been visited previously - but not in the nav. It just muddies the design, IMHO.

As I was playing around with the design a bit I also increased the body font-size to 80% - not a lot but the footer text is just to small and I had to bump the text up two notches from default in FF for the text to be really comfortable to read.

And as I said before - many of these things are a matter of personal aesthetic and my feelings won't be hurt if you beg to differ . I do think you may be a bit overdue for something that is quite bold, however, and a portfolio page is a great place to start!

Cheers,

DE

Thank you for the opportunity to review your site. I like the layout. Please run a spellcheck on the text. There are other words mis-spelled (e.g., complient, technolgies). And I don't understand the term "bespoke" at all. Maybe it's a language thing like "queue" really means "line"? )

Thanks for the insight into web development.

Thanks for looking Tisnew, I actually plan to have someone review the spelling/grammar, but he's been doing exams. I know there's some errors.

bespoke is when something is custom-made. sorry, I thought it was a commonly used word...

larmyia

I hear bespoke all the time at college - bespoke website, bespoke software, blah blah blah.

There are basically three ways of doing things - buy a package off the shelf; base it on an off-the-shelf package and tweak it; or build it from scratch.

The third one is bespoke.

Got it, thanks! [Middle English bispeken, to speak out, from Old English besprecan, to speak about.]

Borrowed from tailoring as-in "made to order". Much like "gear", which for many decades was something you needed to go fishing or camping, but recently has 'morphed' into a piece of hardware for routing messages, etc.

A 'bespoke" google generates 10 Irish and English firms on page one.

Please keep bespoke. It's a cool word. Or, as my kids say, it's "tight"

Yeah - "tight" has several meanings over here - none of them great (well ok possibly one...)

lovely hellsbells!

larmyia [peering at hellsbells in the gutter ]

Methinks someone has one foot in the gutter herself. :?

larmyia - back to work - you have been slacking off on this one badly and we all want to see how it turns out . . .

DE

reprimand accepted David.

I have no defence bar my own current lack of enthusiasm.

larmyia

Ok...I have finally made some progress, and actually redesigned most of the site.

http://www.subtleasafish.com/

would apprecaite any comments on problems or things you don't think work.....

the only thing that I'm sure isn't working atm is there should be an orange arrow on all h2 in #content. the only time I see it working is when I'm editing in FF itself. very mysterious. can anyone help with this? the code seems to work as the padding is effected when changed. here's the relevant code...

/* adding arrow image to h2 in content */    
#content h2 {
    background: url(img/arrow.ico) no-repeat 0 .75em;
    padding-left: 20px;
    } 

oh, and in IE6 the styleswitcher link is above the bottom-border for the header. no idea why..........and no idea how to fix it.

other than that I think all is working.

oh, the other thing...I was considering a darker background colour of say #a89898 as opposed to the current #e7e0e0. any thoughts?

and just wanted to thank everyone for their input and advice. I think it's helped it improve greatly. so, thanks!

larmyia

Larmyia the relative path to the arrows is incorrect, your calling the image relative from the CSS file residing in the directory 'css' so the path "img/arrow.ico" when called from the CSS file is actually looking for subtleasafish.com/css/img/arrow.ico and can't find it.
The path to the image from the CSS file needs to be "../img/arrow.ico"

../ double dots meaning up one directory from the CSS file which takes you back to the document root and then to img directory and the file.

Opening the Firefox css editor breaks the path as the css file is already downloaded and in a sense now occupies the same directory as the html file and the path as written will find the file.

If you check the FF page info and look at the media tab you will see the the image path listed as above and checking 'broken images' in 'web developer > images' shows the images as broken.

btw why is the file an .ico not .gif ?

So I manage once more to miss the obvious, my logical deductive powers seem to have completely deserted me, should have seen that much much sooner, sorry

Hugo.

I'm back :roll: the #textsize div is a float and nested within the header div Ff is doing the right thing as usual and allowing the float div to drop through the div, dear old IE naturally is second guessing your requirements and being so helpful in correcting this grievous error in the way floats behave by expanding the div to contain the wayward element.

You have a height on the header div IE will always expand a element with height to contain children when that stated height is shorter than the nested elements, god it's so helpful. So you have choices, remove the height from the header or remove the float from the header and place it bellow.

You should also use the display:inline property on the #textsize float to prevent the IE double margin bug that's occurring at the moment.
IE doubles margin widths when the fall on the same side as the direction of the float and are to the extreme edge of that direction

float right, margin-right, touching the extreme right edge of it's parent equals double the stated margin value. Cure = display:inline added to ruleset.

Hugo.

oic. I didn't realise that. thanks very much. problem solved. but I still don't see why it worked when edited on ff. why does that make it go to where I put the file?? and where is ff page info??

.ico because that's what I made it in, and I haven't changed it to .gif, and guess I forgot about it.....

I'm not sure I'm able to accept your aplogy. hmph.

thanks you're a star

larmyia

Ok Hugo, I've done everything (I think!) that you've suggested. for the time being, I have added a persistent stylesheet with one declaration (I tried using my default as you suggested, but that was causing a lot of problems with my contrast stylesheet, and I thought it might be over-riding it). In the future I will put what is consistent through the stylesheets in the persistent one, but this will have to do for now.

have changed my arrows to .gif (so they now show in IE).

the only thing that I did notice, was that when I changed styles (after clearing my cache), when I went to different pages a styleless page came up first, and then changed to the styled page. does this make sense? sorry if I'm not being clear. Is this a common problem? is it solvable? does it have anything to do with my persistent stylesheet?

anyway, I think it is nearly good to go. thanks for all your help Hugo.

larmyia

Quick - don't think anybody has noticed - spellcheck the Accessability/Accessibility page - heading and text.
Cheers
Lorraine

ooh thanks Lorraine. I think i got them all. I think the mistake comes from the way I say assessibility.

larmyia

Larmyia your going to hate me but....

I have to say that it's still essentially confused, you have the right idea, but the arrangement you have now is that your main sheet is called persistent and only contains basic styling and your preferred sheet is the one that has your actual site styles in and therein will lie the problem both load up by default regardless of styleswitcher involvement but the preferred sheet is the one that will be replaced if and when you select a 'alternate' stylesheet which in your case is a full duplicate of the main styles with certain changes made.

I cannot duplicate the problem you describe but it sounds as though the styles are being loaded in the order that they must with the file persistent.css first as this contains no styles as such you have to wait for the preferred style sheet to load to obtain the actual site styling.

Logically the saff.css file should the first one and the persistent.css the second along with it's title 'default'

The way you have things does work , I think there is confusion with the title default and would prefer something along the lines of 'normal' for clarity.

At the risk of becoming very boring on the subject and of repeating myself; the way I would work things is that the main styles are loaded these are the ones contained in saff.css the second sheet (preferred) with title (default/normal) simply has a repeated body font-size i.e the same as the saff.css rules; your first alternate sheet has a body font-size rule of say 1.3em nothing more and your contrast sheet has just the rules needed to give you the contrast styles.

The switcher is designed to look for all stylesheets with a title attribute and it is those that it switches around. the sheet we call default or normal is just the method of returning to normalcy which is why it just contains a body font-size matching the main style sheet, it could in theory contain no rules whatsoever.

The trick is in remembering that the persistent sheet (saff.css) is as the name suggests persistent it's always there loaded and the switcher can do nothing about that which is why you need the preferred sheet to act as the method the switcher uses to clear out the 'alternate styles that may have been loaded on selection.

Preferred and alternate sheets are the only ones that can be swapped, regardless of the switcher, a preferred sheet is always substitute for an alternate sheet if it's selected and likewise a preferred sheet selected will replace the alternate one the only other situation is disabling all styles which is the only way of loosing the initial main persistent styles.

Anyway it appears to work at the moment I can't seem to trip it up .The fact that your duplicating the styles in the alternate sheet copes with the fact that the persistent sheet does not have styles itself and the preferred sheet has the styles so when it's used to return to normalcy it loads full site styles.

Hugo.

i must say that the secret of graphic design stay in simplicity.

i just love sites like this.
a few things i still can recommend:

1. maybe a hover effect for the links(left navigation menu) will not harm.
2. the header it will be better to use a different color something with more contrast with the white background.

anyway i like it because have a "clean" layout.