Forums

karlpcrowley

Howdy,
I've changed my website to an unfinished (never will be :P) semi responsive design

http://pixelcutters.com/

I'd love to hear your thoughts as I will be constantly updating this on the fly (hence the quick release)

I've tested in Chrome, Firefox, Opera, Safari and Mobile Safari
Can someone please check it out on Android and let me know it it behaves like it should

Credit for the logo goes to @joshuanhibbert :)

cybershot

It needs images. I would have a picture of your projects, not just a link to them. Some visitors like myself might be to lazy to go view each site. A pic that I could look at without having to travel around would be better.

I also find it midly irritating that there is no navigation on the site. I don't know why. Maybe because I expect it to be there.

karlpcrowley

I was thinking of a tooltip image for each project when you hover over the list item, what do you think?
Is there enough content to require a navigation though? :S

karlpcrowley

Added some pictures to make the text less daunting, thanks :)

krysak4ever

@karl
1.)
give it some space on left, right side when in narrow view
15px for each side

2.)
use bg colour for your #pageWrap or for body
to make it more uniform, what is web "page" and what is extra space outside
my example white + gray http://www.501st.cz/

3.)
contrast !
text to bright = light blue colour on white bg
I have good healthy eyes and I can barely read it and I feel like having headache

4.)
TW + LI buttons
these are 2 different services
use either different colour or icons ;]
http://webdesignerwall.com/demo/css-social-buttons/

5.)
headings

you have H1 logo, H2, H3, H4 text
no problem but they all look the same (size)
try use different sizes

look at my web index page, I think it works better ;]
http://krsiak.cz/

6.)
validate
not to get 100/100 points
but to find errors in code

Errors found while checking this document as HTML5!
10 Errors, 3 warning(s)

try the same for CSS

Sorry! We found the following errors (72)

width, height, ... use CSS ;]

<img src="img/picknflix.JPG" width="100%" />

7.)
save yourself a headache looking for errors
in HTML use the same quotes everywhere ... "double quotes"

<a href="https://twitter.com/karlpcrowley&quot; class='buttons'>

I guess that is it for now as you can hate me for a week at least now :D
kidding ;]

krysak4ever

8.)
for the solo tags, non-pair, how are they called close them

<meta name="description" content="my web">
<link rel="stylesheet" href="style.css">
<br>

combining power of HTML5 and as I grew up on (X)HTML proper, nice, clean coding
you will have less errors

<meta name="description" content="my web" />
<link rel="stylesheet" href="style.css" />

pair tags are closed <em>text</em>
for solo tags use ... />
<br />
<img src="home.png" alt="home" />

Vermaas

@krysak4ever: Doesn't HTML5 allow us to use no quotes at all? So like this:

<img src=home.png alt=some text />

But you're right about when you're using quotes. Stick with ' ' or " ".

krysak4ever

@vermaas
sure it does but it looks so ugly

HTML5 is good for those who know how to write proper HTML code
and real bad for those miss basics

as a learning path for anyone new I always recommend learn XHTML strict
know your stuff
switch to HTML 5 and you will write clean code and enjoy the pure beauty of HTMl 5 :)

karlpcrowley

@krysak4ever
1) Thanks I'll do that now
2 & 3) I'll experiment with different colours, I was thinking of a floating lightswitch that made the page darker :D
4) Thanks for the icons, I'll try them out
5) The reason I use different headings is for SEO weight, search engines read the content and determine it's important by the headings
6) Most of the validation errors are BS nowadays, even the nu html5 validator isn't up to date, the majority of the CSS errors were from the normalize but I wouldn't change it for the world
7) Lol, you found my dirty little secret, I do need to keep them consistent :D
8) the browser changes
to
when it renders the page (not sure why)

Vermaas

@krysak4ever: When i give a workshop for those who doesn't know anything about html at all, it's easier for those to learn HTML5 than xhtml, because this is more semantic and easier to understand. But that is an other discussion.

@karlpcrowley: I like clean website's, but i think the website is too clean. Personally i'm not attracted to the website. Try to give it more "body".

karlpcrowley

I think I'll probably have a new design by next week :D

Vermaas

@karlpcrowley: Go get them tiger :P!

karlpcrowley

Changed to a dark theme
Adjusted the margin for smaller screens
Went with Font-awesome for the icons
http://fortawesome.github.com/Font-Awesome/#

Do you think it's better now?

Vermaas

I like it! Might change the font to arial or something like that? Just to look how it stands!

By the way, is there a reason why the slider scrolls vertical? I don't know, it doesn't feel naturally.

karlpcrowley

the slider is just something I threw together in 5 minutes, going to make a better one that reacts to clicking on various elements on the page

I might just go with this font stack
http://css-tricks.com/snippets/css/better-helvetica/

chrisburton

Boom. Not too shabby, man.

Why not invest in web fonts? If you'd like to keep it free try the free plan on Typekit over using Helvetica.

karlpcrowley

At the moment my budget is pretty low (non-existant) :(
Google web fonts are awesome http://www.google.com/webfonts#ChoosePlace:select

And I didn't know TypeKit had a free version, thanks :D

Hompimpa

lol nah, no copyright, help yourself hahaha...

I don't know, maybe adding a clear box effect might help, although sometimes it can make a site look too thin.

Abut the slider, why don't you wrap it with a black horizontal box across the screen?

------------------------------------------
       |||||||||||||||||||||||||||
       |||||||||||||||||||||||||||
       |||||||||||||||||||||||||||
       ||||||||||SLIDER|||||||||||
       |||||||||||||||||||||||||||
       |||||||||||||||||||||||||||
       |||||||||||||||||||||||||||
------------------------------------------

karlpcrowley

hmmm or a box-shadow? to make it pop more?

Hompimpa

Yep.

jurotek

I like it a lot how it behaves at different resolutions.
Don't know if it was mentioned, but I would definitely increase line height to 1.6 or 1.7 .

chrisburton

Not a supporter of Google web fonts

karlpcrowley

Wanna suggest some fonts and I'll try them out?
I'll then take a look at the line height like jurotek suggested

chrisburton

First thing on Monday I would be more than happy to.

karlpcrowley

Cheers :D
I didn't think my website would turn into a semi open source project lol

btw, enter the konami code into the site :P

HoughtonA

I want to say the thought process that went through my head after I tried out the code, but I don't want to spoil it for anyone else.

That was great, though. Thanks for wrapping up my night.

chrisburton

Looks better with an off-white background (#f2f2f2) but your copy would have to change colors.

Just a suggestion, I wouldn't add a box to the right with your social profiles on it if you already have it in the footer.

(I'm getting started on the type at this moment)

joshuanhibbert

I agree with @ChristopherBurton regarding the colour scheme; I personally prefer a light background. #555 copy looks pretty good on a #f2f2f2 background.

Also, try removing the box shadow on the social box. It doesn't really match anything else design-wise, and fits in much better without the extra attention.

The responsive slider is awesome, nice work!

karlpcrowley

Like this?
http://pixelcutters.com/

joshuanhibbert

I personally prefer that. The other thing you would then need to do is line up the 'About me' heading with the 'Where you can find me' heading.

The slider looks good with that drop shadow too :)

karlpcrowley

Done, what's next?

joshuanhibbert

The paragraph below the 'Where you can find me' header doesn't line up quite right either. The social links look better inline too, nice work.

AndyHowells

I'd stick some sexy text shadowing in there for a letterpress effect and maybe darken the link color a little - bit too bright for the new background.

Looking good Karl!

karlpcrowley

fixed that, Thanks Josh

Andy, what color shadow would you suggest?

chrisburton

I would remove the texture and leave a clean background.

karlpcrowley

Cool, thanks :D
Do you think the white text-shadow looks good on that background color?

chrisburton

Looks great on my iPhone minus some padding issues.

joshuanhibbert

So this is a small issue Karl, but it bugs me nonetheless: the header isn't centered vertically, there is a little too much white space above it. Also, I would left align the third column in the footer, as nothing else is right aligned. And if you can get that third column to match the width of the 'Where you can find me' section, it will make a big difference. Ideally, each footer column should be a third, so that would mean your main content is two thirds wide, and the sidebar one third. It's looking really sexy :D

chrisburton

That's true. I also think the logo itself is too big next to the type.

karlpcrowley

That made a huge difference :)
It has come a long way, thank you guys :D

joshuanhibbert

Looks awesome Karl, nice work mate!

karlpcrowley

Look at the thank you links at the bottom of the page :D

joshuanhibbert

Haha, nice one! Thanks for the mention too, that's very kind of you!

karlpcrowley

Well you did design the logo so it's only right that you get one :)

Odd_E

I actually love the design of your site. :-)

AndyHowells

Maybe stick a transition on the logo when hovering over. Just because.

Also maybe rotate the images in the gallery slightly to the sides to give it a sexier look.

karlpcrowley

Like a bounce effect?

BTW

;)

AndyHowells

I'm thinking a little rotate like 10deg or both!

treehouse : what would you like to learn today?

Forums

Changed my website