SITE REVIEW: Conorific.com

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

Post 3+ Months Ago

  • 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: 5149
  • 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: 5149
  • 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: 5149
  • 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: 5149
  • 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: 5149
  • 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: 4581
  • 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: 5149
  • 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: 5149
  • 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 5 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.