SITE REVIEW: Conorific.com

  • conorific
  • Proficient
  • Proficient
  • User avatar
  • Posts: 350
  • Loc: NY

Post 3+ Months Ago

This is a site I've had for a while, and it never occurred to me to post it for review. But anything you can give me will be appreciated. Rip it apart or praise it, it'll be fine, as long as it's not unfounded.

I know that the current design probably won't appeal to most people, but it IS a personal site, I'm not making any profit on this. I also know that it looks horrendous in Mozilla and Opera; and also in Linux. I'm fixing this. Please, please, don't say anything about it.

Thanks for your time!
  • dreamweaver
  • Student
  • Student
  • User avatar
  • Posts: 68
  • Loc: Himachal Pradesh (India)

Post 3+ Months Ago

:shock: What is that ? ha ha just joking.
Your site needs a lot of work to make it a beautiful one. I think the top image is boring ( if you change its tone to grey, it will appear fine ). divide you left table and name the each section i.e. 1.) me and my work, 2.) my friends, 3.) biography etc. and change the background color of the table different than the table on the right site (you can use any shade of grey ). Rest is :oops:

Anyway a nice site. good luck



-----------------------------------------
http://www.himachalpradesh.us
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5146
  • Loc: SC-USA

Post 3+ Months Ago

Hey conorific!

creative:
When I got to your content, the first thing that struck me was that there was no padding around content blocks. This, combined with your font family and size selection made the content and it's divisions hard to discern.

I liked the image of the couple kissing at the top. However, I don't think you've really framed it to emphasize the dramatic qualities. I would approach that problem with color theory, first, and layout second. You obvioulsy got some understanding of what I'm talking about since your text mouseover/accent color looks like it was sampled from the photo. I would want to sample some other colors from the photo though. I would also experiment with different hues and saturations on the photo. I could blather on at length about this, but, I think you already know most of what I would tell you.

In my eyes, the script fonts aren't reading well at all.

To be honest, it looks to me like you're just not putting your whole self (effort) into the creative side. My advice is to sketch your ideas on paper. Build the visual in a static Photoshop image, all the way down to the footer. Use that image to create individual graphics. Then, and only then, go and build your HTML/CSS stuff and/or backend.


technical:
I'm glad to see you're using CSS for this. Unfortunately, you don't seem to be comfortable using it. This page works fine in IE, but it's broke in Mozilla(NS, and I assume Safari). It works in Opera, but with caveats.

HTH!
  • conorific
  • Proficient
  • Proficient
  • User avatar
  • Posts: 350
  • Loc: NY

Post 3+ Months Ago

That helps lots. If anyone has anything else to say, it's greatly appreciated...
  • conorific
  • Proficient
  • Proficient
  • User avatar
  • Posts: 350
  • Loc: NY

Post 3+ Months Ago

I fixed the compatibility and color issues, so if you would like to see it now: http://conorific.com

It's simple now, and I'll elaborate on it later. But this is just for basis and compatibility.

Thanks!
  • Geekette
  • Proficient
  • Proficient
  • User avatar
  • Posts: 482
  • Loc: The Land of NeverWinter (FL)

Post 3+ Months Ago

It's kind of boring now, I think that I liked the layout with the couples kissing at the top better. There's an over-abundance of white and nothing to really capture the attention. Hehe, the splash page could use a bit of help too. :icontongue:

I can't say that I'm too excited about the navigation either. The links are pretty small and squished together, and the strike-through is annoying. Why make it harder for the viewer to read?

Keep at it, and as dM said, try to throw all of your creativity into it! I wish you much luck! (-:
  • Axe
  • Genius
  • Genius
  • User avatar
  • Posts: 5735
  • Loc: Sub-level 28

Post 3+ Months Ago

Yeah, I'm with Geekette, that strikethrough on links you've visited is annoying...

I didn't even realise the links up the top were navigation links. It appeared like it was a sentence, or phrase (or maybe a site slogan) just by a quick glance without actually reading it.

Also, like dM said, some cell-padding on the content table would be nice :)

Good luck! :)
  • conorific
  • Proficient
  • Proficient
  • User avatar
  • Posts: 350
  • Loc: NY

Post 3+ Months Ago

See now, that's a problem. I have all this creativity, I have ideas, but I can't do most of them because they look screwy in different browsers and stuff. I can't get anything I write to look decent in Linux...I mean, how am I supposed to be creative if only people with IE can read it??? That's a big problem for me, and it's why I don't 'unleash my creativity.'
  • Axe
  • Genius
  • Genius
  • User avatar
  • Posts: 5735
  • Loc: Sub-level 28

Post 3+ Months Ago

Well, I'm using IE, as are more than 95% of other people out there (if the stats of my various websites are anything to go by - which between them all totals about 50K page views per day)...

So, I wouldn't be too bothered about it. You could do a dumbed-down version for non-IE browsers though. Just have your script detect whether it's IE or not, and display the content accordingly.
  • Geekette
  • Proficient
  • Proficient
  • User avatar
  • Posts: 482
  • Loc: The Land of NeverWinter (FL)

Post 3+ Months Ago

Ever since Lieven posted a link to this site a while ago I've been looking on it often for inspiration:
http://www.csszengarden.com/

The designs there are really gorgeous examples of how you can make something original using CSS that will be compliant with most browsers. Don't worry about getting everything perfect for each and every browser, just make sure that there isn't anything terribly messed up in the minority browsers and focus on getting it close to perfect in IE an Mozilla. With a bit of research and practice, it's not too difficult. :wink:
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5146
  • Loc: SC-USA

Post 3+ Months Ago

Unleashing your creativity is something that will come with a little homework and a lot of practice. When you get a handle on 'best practices' with HTML/CSS, you'll be able to translate your ideas more directly and efficiently.

Learning these tools is no different than learning the tools of traditional art. Take a pencil for instance. Anybody with a hand and minimal dexterity can USE a pencil. Very few will ever learn to control it like Rembrandt.

How comfortable are you with your graphics software? Do you feel that you could make a jpg, a 'mock-up', of what you'd like your website to look like without feeling restricted by technology?

I'd be happy to help anyway I could. If you want to make a mock-up and post it, we could discuss some strategies and tactics of how to turn your ideas into a web page.

?
  • conorific
  • Proficient
  • Proficient
  • User avatar
  • Posts: 350
  • Loc: NY

Post 3+ Months Ago

I could definitely do that. I can't afford PS, so I have PSP7. It does the job and I'm pretty good with it. So, next post, I'll have a mock-up. Thank you so much for helping me with this!
  • conorific
  • Proficient
  • Proficient
  • User avatar
  • Posts: 350
  • Loc: NY

Post 3+ Months Ago

Mkay. I made it a gif and it looks just fine. Tell me what you think. It's sized 800*600, think of it as being in a browser window, even though i know it's not that size. Thanks so much!!!!!

http://conorific.com/conor.gif
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5146
  • Loc: SC-USA

Post 3+ Months Ago

This is actually fairly easy. The translucent headings will be the only tricky part, but there are a couple different ways of addressing that.

Where you thinking of having this floating in the middle of the page?
  • conorific
  • Proficient
  • Proficient
  • User avatar
  • Posts: 350
  • Loc: NY

Post 3+ Months Ago

Mmmkay. Thanks.

Quote:
Where you thinking of having this floating in the middle of the page?


Uhm...do you mean, was I thinking of having it there? Then yes. Or do you mean, what was I thinking of? If so, then...I like it there. But it can be changed.
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5146
  • Loc: SC-USA

Post 3+ Months Ago

The picture you have in the background is a good size. We can make that square always centered, vertically and horizontally. So, no matter what resolution the user is using, it will be in the middle of the browser. Does that make any sense?
  • conorific
  • Proficient
  • Proficient
  • User avatar
  • Posts: 350
  • Loc: NY

Post 3+ Months Ago

*nods* plenty of!
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5146
  • Loc: SC-USA

Post 3+ Months Ago

Ok, let's talk about your editing software real quick. Are you able to look at the code, and edit it?
  • conorific
  • Proficient
  • Proficient
  • User avatar
  • Posts: 350
  • Loc: NY

Post 3+ Months Ago

Yes. I use Dreamweaver for the basics and then go in and modify whetever needs to be modified. I do it mostly by hand and I have a good knowledge of tags and syntax and structure.
  • Nucleo
  • SausagePorkPie
  • Mastermind
  • User avatar
  • Posts: 2297
  • Loc: UK - England

Post 3+ Months Ago

i checked the image you uploaded and it looks very good..

i would suggest moving stuff around a little tho...not sure how lol
ya see, the whole site will be based around this 1 picture, which is
fine but doesn't utilise the whole space.
perhaps moving the nav bar up and making the content bigger, but making the background image transparent, so the user can still see the image thru the nav and content...

play about with it a little.

ur site.
i would suggest ditching the striking out on the menu..althought i didn't know it was a menu at first, give the table they are in a border, and perhaps an underline.
I have just noticed that the strike out is on everylink....DITCH IT lol...
  • conorific
  • Proficient
  • Proficient
  • User avatar
  • Posts: 350
  • Loc: NY

Post 3+ Months Ago

I tried that and it was too distracting. I want to not utilize the whole space, I want the emphasis on the picture because the font demands attention so to make the areas bigger would swallow up Conor's gorgeous face. I've played with it lots and it looks best like this. But thanks!

PS. Yeah, yeah I know, the menu. I'm working on it. I think I'm putting up a new layout later so I'm not worrying about it RIGHT NOW.
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5146
  • Loc: SC-USA

Post 3+ Months Ago

ok, so here's some code for you to work with.

I'm trying to pack up and get out of my office right now, but I'll be back on in a couple hours.

Take a look and see what you think. I believe you'll see where I'm going with this. :)

Code: [ Select ]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style>
BODY {padding:0;margin:0;background:#000;}
.cell {height:300px;width:500px;background:#C30;}
#box {height:100px;width:200px;background:#CCC;position:relative;top:40px;left:40px;}
</style>

</head>
<body onResize="javascript:history.go(0);">

<table cellpadding="0" cellspacing="0" border="0" height="100%" width="100%">
<tr>
    <td align="center">
    
        <table cellpadding="0" cellspacing="0" border="0" class="cell">
        <tr>
            <td valign="top">
                <div id="box"></div>
            </td>
        </tr>
        </table>
        
    </td>
</tr>
</table>

</body>
</html>
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3. <head>
  4. <title></title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  6. <style>
  7. BODY {padding:0;margin:0;background:#000;}
  8. .cell {height:300px;width:500px;background:#C30;}
  9. #box {height:100px;width:200px;background:#CCC;position:relative;top:40px;left:40px;}
  10. </style>
  11. </head>
  12. <body onResize="javascript:history.go(0);">
  13. <table cellpadding="0" cellspacing="0" border="0" height="100%" width="100%">
  14. <tr>
  15.     <td align="center">
  16.     
  17.         <table cellpadding="0" cellspacing="0" border="0" class="cell">
  18.         <tr>
  19.             <td valign="top">
  20.                 <div id="box"></div>
  21.             </td>
  22.         </tr>
  23.         </table>
  24.         
  25.     </td>
  26. </tr>
  27. </table>
  28. </body>
  29. </html>
  • conorific
  • Proficient
  • Proficient
  • User avatar
  • Posts: 350
  • Loc: NY

Post 3+ Months Ago

Yeah, sort of, I'm just too tired to care right now and I have Regents review tomorrow morning...so forgive my sluggishness.
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5146
  • Loc: SC-USA

Post 3+ Months Ago

np.

I'll be around. :)
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5146
  • Loc: SC-USA

Post 3+ Months Ago

This is going to be a bit of a brain dump, so if you know this just skip it. (:

The basic structure of the page is to center everything in the browser. The outer table is going to expand to the full width and height of the viewable area. This table has only one cell. That cell's contents are set to center horizontally. I'm not using the valign attribute, because HTML 4.01 (as cited in the DOCTYPE) defaults to valign=middle.

Inside the outer table, I've nested another table. This is to give us a highly definable space to work in. Again, this cell only has once cell. This time, the cell has the valign attribute set to TOP to overcome the default of MIDDLE. So, when we place things with CSS, we can reference everything from the top left corner.
  • conorific
  • Proficient
  • Proficient
  • User avatar
  • Posts: 350
  • Loc: NY

Post 3+ Months Ago

Okay, that makes tons more sense. I can get the image and stuff in. My question is, how would I place the nav and content divs and their headers so they would be correct? I think we'd have to do it using absolute positioning. But they could be tables. Hm.
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5146
  • Loc: SC-USA

Post 3+ Months Ago

I've set up 3 style definitions to show you differnt ways to define and reference them.

First, the BODY selector refers to the HTML body tag. You can define/redefine any intrinsic HTML tags this way.

The second, .cell, is for the giving the inner table some style. Notice that I've referenced this definition in the table tag as class="cell".

The third, #box, is the definition for the first DIV element I've used. Notice that this is referenced using id="box".

What I hoped you would see here is the orange color would be your photo/bkgnd, and the gray box would represent you're content area. One of them, anyway.
  • conorific
  • Proficient
  • Proficient
  • User avatar
  • Posts: 350
  • Loc: NY

Post 3+ Months Ago

That I did see, and I did it. I'm just concerned with the fact that it might not render correctly, because of the postioning. Unless I missed something..?
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5146
  • Loc: SC-USA

Post 3+ Months Ago

Actually, I think we've used all the table that we'll need. :)

Other stuff: In the body tag itself, I've put a javascript refresh. This is in the case that the user resizes his/her browser. The CSS definitions won't update themselves dynamically, so they need a little help there.

Also, notice in the #box definition I've used positioning, but instead of absolute, I've used relative as the type. Simply, this will make the positioning relative to the inner table cell, and not absolutely to the whole page.
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5146
  • Loc: SC-USA

Post 3+ Months Ago

Ok, so you need to get a copy of the photo, without any other elements. Just the background image.

(I'd like to make the logo a seperate graphic to get it as crisp as possible)
  • conorific
  • Proficient
  • Proficient
  • User avatar
  • Posts: 350
  • Loc: NY

Post 3+ Months Ago

Alright, let me dig for the photo at BritishPunk and modify it a touch. Give me five.
  • conorific
  • Proficient
  • Proficient
  • User avatar
  • Posts: 350
  • Loc: NY

Post 3+ Months Ago

Got the photo. http://conorific.com/conorbg.jpg I modified it and all already.
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5146
  • Loc: SC-USA

Post 3+ Months Ago

While you're doing that, let me mention something else.

They typical directory structure for a website goes like this....

ROOT
-images(folder)
-style(folder)
-script(folder)

...if you'd like to set up a development area on your site so I can see what your doing. :)
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5146
  • Loc: SC-USA

Post 3+ Months Ago

In your mock up, the image was sized to 675 x 546, and it had a one pixel border making it 678 x 548. We can do the border with CSS, so we just need to size the photo to the first set of dimensions.


**I edited this. sorry, brain lapse
  • conorific
  • Proficient
  • Proficient
  • User avatar
  • Posts: 350
  • Loc: NY

Post 3+ Months Ago

That might be an issue since conorific.com is only one folder under another domain, dorfpod.com. I don't have root access, my friend, who is the owner of dp.com does. Unless you meant something else and I'm getting it wrong again.
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5146
  • Loc: SC-USA

Post 3+ Months Ago

you should be able to make a folder (call it prelaunch, or something) then that will be our root.
  • conorific
  • Proficient
  • Proficient
  • User avatar
  • Posts: 350
  • Loc: NY

Post 3+ Months Ago

Mkay. Fixed the image. It's got that soft quality to it, it's not the resizing. I went back and got the revised image from the original. http://conorific.com/conorbg.jpg And http://conorific.com/prelaunch has been created. Sorry about that.
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5146
  • Loc: SC-USA

Post 3+ Months Ago

no problem at all.

Let's put your image into the page. Inside that nested table, outside of our "box" div, put a regular old IMG tag. don't specify any attributes except for SRC.

Then, we'll need to adjust the .cell definiton. You can see that I have some dimension there. Just change those to the dimensions of the photo.
  • conorific
  • Proficient
  • Proficient
  • User avatar
  • Posts: 350
  • Loc: NY

Post 3+ Months Ago

I hope I did it right. http://conorific.com/prelaunch/exp.html
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5146
  • Loc: SC-USA

Post 3+ Months Ago

We're on the right path.

Hey, I gotta go do something. Can we get back to this tomorrow?
  • conorific
  • Proficient
  • Proficient
  • User avatar
  • Posts: 350
  • Loc: NY

Post 3+ Months Ago

Fine with me. I'm so tired and I have review tomorrow. Thanks so much!!!!!
  • b_heyer
  • Web Master
  • Web Master
  • User avatar
  • Posts: 4580
  • Loc: Maryland

Post 3+ Months Ago

love seein ya at work dM :-) Looks like your doing a good job!
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5146
  • Loc: SC-USA

Post 3+ Months Ago

thanks B! ;)
**********

I've had you place this picture here as a temporary thing. We're not going to leave it here. What I wanted to highlight was the ins and outs of relative posisitoning.

Observe, if you will, the space between the photo and the top of the orange box. What I hope you'll see is that the orange space above the picture is the same height as the grey box, even though the box has been positioned.

This brings us to relative placement. Relative indicates that the positioning of these elements begins from the position they would have taken on the page without any positioning instruction. So if my first element is 100px tall and starts at coordinate 0,0 - my next element, regardless of size will begin at coordinate 0,100. Even if I use 'positioning' on the first element, the second one will still begin its position from coordinate 1,100, as we see with this IMG tag.

So on your page we're going to have 3 elements to place using relative positioning (the logo block, the nav block, and the content block).

Let's put the picture where it really needs to be, in the background.

In the ".cell" selector, lets change "background:#C30;" to "background:#000 url(images/YOUR IMAGE.jpg);"

I'd also like to have you scale the picture you're using. Because it's a background image, and because of it's composition, we can abuse it a little. So, scale it up tp 675 x 472 (equivalent to the .cell width and height definitions).

Compression: My suggestion is to make this a JPG @ 30% quality. Please feel free to play with PNG and GIF. I think you'll find that JPG works best. For this image we should end up a little less than 40k.

The other graphic I'd like you to make is the logo. Go back to your scaled bkgnd graphic (use the same scaled up version you're using for the bkgnd). Add the logo. Flatten the image. Then, crop away everything but the logo starting at coordinate 0,0. The resulting graphic should be about 200+ pixels wide, by, a little less than 50 pixels tall.

Compression: For this image, I would suggest GIF. I want the text characters to be nice and crisp, without color flattening and without jpg artifacting. So, export it using 256 colors(perceptual). The resulting image should be under 7k or 8k.

When I get a chance to sit down again, we'll build and place the boxes for the logo, the nav, and the content. :)
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5146
  • Loc: SC-USA

Post 3+ Months Ago

hey maggie.

you seemed to lose interest in this. So, since I was working a few steps in front of you, I thought I'd give you what I had finished. I didn't have a proper copy of the logo, you'll see this one doesn't fit.

Hope it's useful to you.
:)

http://www.chriscarney.com/testconor/

It should work in the current browsers in windows, with one caveat. Opera won't do the valign, so it'll be at the top of the window. I don't think that's a big deal, you might. There's also a two pixel vertical offset between the two floating boxes in Mozilla. My guess is it's a different interpretation of the CSS box model, but I didn't really investigate it. :(

It should also work with the current releases of Mozilla and Konquerer on Linux, I haven't tested it.


Ohhh, one last note. They way that I've forced the refresh with javascript might not work in old browsers, so if I were going to launch this, I would test it first. :)
  • conorific
  • Proficient
  • Proficient
  • User avatar
  • Posts: 350
  • Loc: NY

Post 3+ Months Ago

Oh, I'm so sorry, I forgot all about this for the moment. I had exams and midterms everywhere. But I think I'm getting Conorific back tonight, hopefully with new stuff.

THANK YOU SO MUCH for working on this! You have no idea what a help it is. I owe you or something. ;)
  • conorific
  • Proficient
  • Proficient
  • User avatar
  • Posts: 350
  • Loc: NY

Post 3+ Months Ago

This site has been through several layouts until I got to this one, which is my third all-CSS and the first one I've ever really loved.

I understand the scheme won't appeal to some people, but please try to critique it beyond that.
  • conorific
  • Proficient
  • Proficient
  • User avatar
  • Posts: 350
  • Loc: NY

Post 3+ Months Ago

I'm only supposed to make one review post per site here, so someone needs to look at this, please.

Post Information

  • Total Posts in this topic: 47 posts
  • Moderator: Website Reviewers
  • Users browsing this forum: No registered users and 36 guests
  • 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-2016. Ozzu® is a registered trademark of Unmelted, LLC.