Job Search Website Critique

[goalieman34]

Hey everyone, hope everything is going well. Just launched a new project of mine last week and am looking for ways to take the website to the next level. If anyone had any suggestions to improve the website it would be appreciated. Thanks

http://www.jobspark.ca/

[Andy Howells]

It’s looking good, I remember when you posted before and I thought it looked great at the time.

It’s nice and clean, simple to use and understand, nice simple call to action on the homepage, good spacing between sidebar elements.

EDIT: Naughty! I just spotted you’re using an image on the job listings page at the top for those tick marks. Naughty cheater! Code that bad boy up with a header, ul > li combo!

The main addition/edit that I would make it maybe to look at using some trendier/nicer typography for the content.

You’ve got a nice, almost slab serif, logo and you could pull off a rounded body font too. Note that I am a slut for nice fonts though, I basically spend my life drooling over Typekit.

Other tweaks could include a hover/active/focus effect for links, just to jazz it up a bit and make it uber clear they’re links. The more visual clues you give visitors the better so they feel and ease and totally understand what everything does.

[Watson90]

@andy_unleash – the way you spotted that was an image haha.

@goalieman34 – yeah I have to agree with Andy over the image thing. Although that can be a gradual change not something right now. But it is easily done and the quality will be a lot better :) I like the website. Nice work :)

[goalieman34]

@andy_unleash @Watson90 Thanks you guys for the feedback.

– I will fix those links so they have a hover.

haha now i feel really stupid about that image. I was having troubles with the code so just quickly made an image in Photoshop. If you have a minute today to show me how you would code it that would help me out a lot. In the mean while I will try myself to get it. Thanks!

http://www.jobspark.ca

[Andy Howells]

@goalieman34 – Just bashed this out in a couple of minutes;

http://codepen.io/andyunleashed/pen/yfbaC

I grabbed the character for the check mark from CopyPasteCharacter, it’s worth testing it in a few browsers just to make sure it works okay.

I haven’t added anything custom to jazz it up or anything un-needed so copy pasting in should be easy if you want to use it directly and it should inherit your styles.

[goalieman34]

@andy_unleash Awesome! The checkmarks are not working so can you change it so that i can just upload an image for the check mark?

[Andy Howells]

@goalieman34 – Depends how you want to approach it. You could put in an image as the background for the :before and then size it with width/height.

Or you could use Fontello and grab a light icon font instead. To be honest thought as your site is fixed width, there’s nothing wrong with using an image!

EDIT: Just checked your stylesheet though, did you copy the content:””; line?

[goalieman34]

ok check it out now. Content line it shows up as a question mark. I think I should just use an image then?

[Andy Howells]

Hmm, yeah definitely not working. I’d probably say to use an image for your original tick then.

You can set a pixel width & height on the before element and then just use background: url();

Make sure to no-repeat it.

[goalieman34]

@andy_unleash Can i replace the content with the background image or is this wrong?

ul.tick-list {
list-style: none;
margin-left: 0;
padding-left: 25px;
}

ul.tick-list li {
display: inline-block;
width: 45%;
}

ul.tick-list li:before {
background-image: url(‘/storage/checkmark.jpg’);
background-repeat: no-repeat;
}

.h2-list {
padding-left:25px;
padding-top:15px;
font-size:24px;}

[Andy Howells]

Before/After elements require real or fake “content” to work properly.

Then everything else you have is fine.

So put in

:before { content: “”; }

[goalieman34]

hmmm still not showing up the image. Sorry man this is turning out to be a pain for ya.

ul.tick-list li:before {
content: “”;
background-image: url(/storage/checkmark.jpg);
background-repeat: no-repeat;}

It should be working. I cant see the problem

[Andy Howells]

Here you go mate, updated the codepen.

http://codepen.io/andyunleashed/pen/yfbaC

Only bit to change (if you want) is to make the background-image url relative, rather than absolute.

Basically, when dealing with before it has to have a content: “”; line otherwise it won’t load.

By default with content: “”; it’s empty so will collapse into nothing. So you need to add height/width to it to make it work as well as a display parameter.

You can do custom images in lists using list-style-image instead, but I find using :before easier on my brain as it’s like a mini element, rather than having to tear your hair out trying to get padding, line height and margins all perfect. So using :before it’s in it’s own little area in your style sheet instead.

[TheDoc]

To make sure it doesn’t collapse, I like doing:

content: ‘020’;

…but I’m not sure if it’s always necessary.

[Author]

Posts