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!
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • 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: 5149
  • 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: 5739
  • 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: 5739
  • 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: 5149
  • 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: 5149
  • 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: 5149
  • 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: 5149
  • 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: 5149
  • 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: 5149
  • Loc: SC-USA

Post 3+ Months Ago

np.

I'll be around. :)
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • 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: 5149
  • 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: 5149
  • 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: 5149
  • 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)
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

Post Information

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