an All Creative World site
natobasso's picture
3951 pencils

Eyecom3.com - new website

I just finished designing Eyecom3.com. It's a redesign of Eyecom2.com for the company I work for, HealthLine Systems.

Brief: Create a site that's easy to read (optometric software) loads quickly and is a good sales/contact tool to bring in new customers. Advertise webhosting services.

I hard-coded the site in Visual Web Developer 2005 Express (no Dreamweaver except for the javascript rollovers) using HTML and CSS. The hardest part was having to use the 'star' hack for IE 6. Tested in IE 6 and 7 and Firefox. I tested for compliance and got about 50 or so discrepancies, but don't have time to fix those. Who knows if the site will actually work or not if I do! :)

So, hit me folks: Whaddaya think? :)

Commenting on this Image is closed.

mara06's picture
2752 pencils

You might want to make it clear that they don't have to fiddle with superscript in your e-mail addy. Believe it or not, some folks WILL try!

I like the use of the eye chart to focus (sorry) attention on the product's target "audience." Makes users feel right at home.

The new design strikes me artistically as a little generic, a little "safe," but that might actually play in your favor. I rather liked the design economy of eyecom2, and having all the navigation up front, but I can see why some end users might have had trouble downloading the site quickly.

For 3, do you think it might be possible to pare down the copy a little? Since I'm not in the eye care business, I can only assume you've hit on all the features that would interest your prospective consumers, but it looks like a pretty thick pitch for what seems to be a reduced number of features ("Eyecom3 Includes:"), compared with 2.

Do you need one of us Mac users to take it for a spin in Safari?

Mara

Creative_NRG's picture
483 pencils

The Healthline main page doesn't work in Safari.

natobasso's picture
3951 pencils

Yep, I can't claim any responsibility for that page. :) Not yet anyway; it's on my schedule to update.

Any thoughts on the eyecom3 site?

----
Powerpoint is not a design application

Creative_NRG's picture
483 pencils

Very clean design and overall the site functions well with Safari 2.04. Here are some quick reactions for things to consider for improvement.

[1] I'm not a fan of the 3 orange boxes in the footer breaking the 2-column grid.

[2] I'd dump the cheesy blue footer graphic and do it in text with CSS.

[3] The Orange Header font next to the Eye looks awful in Safari. I'd set those as a graphic for a cleaner look.

[4] The mouse over on 'Home' creates a sliver blue on the left that looks somewhat like a mistake.

[5] Make a mouseover state for the 'Healthline' link

[6] Not sure about the position of the 'Login' button. Usually those are pulled out and put up top ... 'Member Login'

[7] The lower gray bar looks upside down to me for some reason.

Nice work.

natobasso's picture
3951 pencils

Thank you sir! And great comments. I'll get to each one.

1. 3 boxes, this bugged me too but I let it go. I might just make them fit inside the left hand column to keep the format integrity.

2. Good idea. Kind of dumb to repeat the text links as linkmaps.

3. Header font -- check. I added 'sans-serif' tag but it does look weird in safari.

4. i did the home on purpose. I might remove the border to make the graphic look better.

5. I didn't make HL a mouse over to deemphasize it.

6. My boss dictated this.

7. The lower gray bar is upside down. :) Symbolizes closing the window. Undecided about whether to change.

Appreciate your very constructive feedback!

----
Powerpoint is not a design application

natobasso's picture
3951 pencils

Copy was created by my boss who's also the VP of Marketing. Text probably won't change.

I did go for lowest common denominator for the design and my boss loved it, though I realize now that I stuck very tenaciously to the blue and gold color scheme without letting much else in. The adobe download logo adds a little heat in the footer...

Please, by all means, take the site for a spin in Safari. I did do that, but it always depends what version you have installed. Let me know what you think.

----
Powerpoint is not a design application

mara06's picture
2752 pencils

I viewed this shortly after you posted it, I guess, and didn't realize I could go to anything other than the static Home page. All of my comments were based only on that. Now that I've been to the trial site and worked with it, I can echo all of NRG's thoughts. The boxes on the bottom look very temporary to me. They seem to want more of your sophistication.

I advise against having the links to your partners' sites take people off of yours and on a surfjourney from which they may never return to you. Why not pop-ups, as you has on 2? (Or am I imagining that? I was checking you out on Safari 2.0.4 at the time this hit me.)

Mara

natobasso's picture
3951 pencils

Reciprocal links help your SEO rankings, however, so these links do serve a purpose. I made them 'target=1' so they open a new window rather than loading in 'self' (same window).

----
Powerpoint is not a design application

mara06's picture
2752 pencils

Doesn't operate like that in my Firefox 2.0.0.7 or Safari 2.0.4. Same window, new URL, bye-bye Eyecom.

Mara

Mara

natobasso's picture
3951 pencils

All the links are set to go to a new window, you must have your browsers set to open new links in the same window...

----
Powerpoint is not a design application

Creative_NRG's picture
483 pencils

Mara,

I had the same problem when clicking the link above in this post to view the site. When you mouse over 'Healthlink' it doesn't say 'in new window' in the bottom bar.

However, when I copy the URL, create a new window and paste the URL in it seems to work properly.

I normally use 'target="_blank" [or 'target="_new"] but I'm not a code master so that's probably wrong.

natobasso's picture
3951 pencils

Ur right, I should have been more specific -- only that Healthline link does not go to target 1 but to self.

----
Powerpoint is not a design application

Chez A's picture
89 pencils

I quickly checked your mark-up and I'm quite disappointed with what I saw :( ... It almost brought me to my knees and cry. It's always a good practice to always keep a clean HTML mark-up ... which I think could be the reason why your page is not loading properly on some browsers. So keep your HTML valid and clean. I'm sure you know about this but as much as possible, NEVER EMBED javascript on the page. If you must use javascript, have it on a separate file. I recommend using CSS on your top navigation instead of using javascript.

natobasso's picture
3951 pencils

Like I said, I created the menu in Dreamweaver so it's understandable if that code is a bit awry. Could you elaborate more on 'clean HTML markup' and what that entails exactly? I would greatly appreciate that, and I need to learn more about it. I tried to make as clean a site as possible.

I can certainly take the javascript code out and include it rather than having it in the html, no worries on that; though this menu is a quick stopgap so I could post the site and then work on a better menu later.

Thanks for your comments!

----
Powerpoint is not a design application

Chez A's picture
89 pencils

I have nothing against using the built-in Behaviors in Dreamweaver. I've used it myself too a few years back and I totally understand if your code is a bit, I'm sorry to say, all over the place. I see that you’re using XHTML and not the plain old HTML, which is the stricter version of HTML … which I would also use.

Going to your question about ‘clean’ markup, there are plenty of reference sites that you could check online. W3Schools, for one, is a great place to visit. http://www.w3schools.com/xhtml/default.asp or even better get a book.

Speaking from own experience, one of the main reasons why a page wouldn’t load properly on a browser is because of having an invalid markup. I recommend testing your site on different browsers when marking up.

When I say invalid markup, sometimes it’s just simply having an unclosed tag … or for example in your case having multiple (html /html) tags. I’m guessing the multiple (html /html) tags on your page is caused by the include files that you call on your page ... or I could be wrong. There’s nothing wrong with using includes, but always make sure that you’re not breaking the XHTML structure of your page.

If you’re using Firefox for testing, I recommend getting the HTML Validator/Firebug/Web Developer Tools.

natobasso's picture
3951 pencils

Yep, I love w3 schools! I've been using the validator here for Transitional XHTML; I'm down to two warnings, so I'm tenatively compliant with this page:

eyecom3.com w3 compliance test page.

(The css is a bit messed up still, I'm working on that; but at least there's only 4 errors in the .css file.)

Header, footer and right column are all includes. I'll make sure to remove the html tags from those files.

I test in IE6, IE7 and Firefox and use Web Dev tools. Love Firefox; hate IE. I had to use css 'star hacks' to get IE6 displaying correctly.

----
Powerpoint is not a design application

natobasso's picture
3951 pencils

For some reason my website doesn't display correctly on my own mac: The products rollover image is missing; the alt text/link is there instead. Any reason for this? It only happens to be on my computer only. Weird!

----
Powerpoint is not a design application

natobasso's picture
3951 pencils

Actually I'm noticing that it's just firefox that does this on both my mac and pc. Weird!

How does Firefox handle images?

----
Powerpoint is not a design application

Creative_NRG's picture
483 pencils

Works fine for me in Firefox and Safari. Your computer is junk. ;P

natobasso's picture
3951 pencils

Wow, so you see products and partners buttons. My comps are a bit nutso!
----
Powerpoint is not a design application

natobasso's picture
3951 pencils

Funny, it's because I had AdBlocker on in Firefox! Strange it only affected that one image.

----
Powerpoint is not a design application

natobasso's picture
3951 pencils

Fixed the 2 column crossing issue:
http://www.eyecom3.com

A total of 143K. Small and quick loading. Love it!

----
Powerpoint is not a design application

7 pencils

I had a look and its very bland, and very uninteresting,
you don't seem to submit much for review do you ?

sketchcan art network

7 pencils

Only joking, its quite nice, simple and very effective, very professional looking ..
Nice one

sketchcan art network

natobasso's picture
3951 pencils

I can't post the sites I'm working on that aren't done yet. They are HUGE and are taking a lot of time to complete. :)

----
Powerpoint is not a design application
My latest web design work

Creativebits is a blog about Creativity, Graphic Design, Adobe, Apple and other related subjects.

Do you need a great new logo?

Pick a pre-made design from a collection of 50,000+ logos that will be customized to your business name for free.