Grow your CSS skills. Land your dream job.

Changed my website

  • # March 15, 2012 at 8:44 pm

    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 :)

    # March 15, 2012 at 8:53 pm

    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.

    # March 15, 2012 at 9:00 pm

    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

    # March 16, 2012 at 3:00 am

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

    # March 16, 2012 at 4:14 am

    @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 ;]

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

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

    # March 16, 2012 at 4:20 am

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




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




    pair tags are closed text
    for solo tags use ... />


    home
    # March 16, 2012 at 6:12 am

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

    some

    But you’re right about when you’re using quotes. Stick with ‘ ‘ or ” “.

    # March 16, 2012 at 6:23 am

    @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 :)

    # March 16, 2012 at 7:41 am

    @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)

    # March 16, 2012 at 7:42 am

    @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”.

    # March 16, 2012 at 7:52 am

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

    # March 16, 2012 at 8:58 am

    @karlpcrowley: Go get them tiger :P!

    # March 16, 2012 at 12:05 pm

    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?

    # March 16, 2012 at 5:18 pm

    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.

    # March 16, 2012 at 7:48 pm

    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/

Viewing 15 posts - 1 through 15 (of 48 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".