[Zarlach]

Hi, I've been working on my new design for a while and I wanted some feedback. Even though the website is far into the development, I would highly appreciate if you have any ideas to share, whether it's something that's completely wrong, or something that just needs a few improvements. I'm all about design, making it user friendly and optimize the website in terms of speed and security.

I've created the entire website from the ground up, so I should be able to configure about everything (This is not Wordpress). The website also contains some jQuery. Try clicking the Feedback button or scroll to the footer and click "Cookie Settings" to open a "jQuery window" (These are currently not functional, just shows the design.)

Zarlach.com

Thanks

[Aleeious]

I liked the design of your site. However it has some errors in the html code evidenced here

 Error Line 189, Column 213: Bad value /uploads/2012/09/06/4003apple press release.jpg for attribute src on element img: Whitespace in path component. Use %20 in place of spaces.

…150" height="150" alt="It's almost here. Apple Event September 12th 2012"/></a>

Syntax of IRI reference:
    Any URL. For example: /hello, #canvas, or http://example.org/. Characters should be represented in NFC and spaces should be escaped as %20. 

Error Line 351, Column 166: The frameborder attribute on the iframe element is obsolete. Use CSS instead.

…om/projects/1102507263/timber-and-stone/widget/card.html" width="220"></iframe>

✉
Error Line 355, Column 90: Attribute alt not allowed on element a at this point.

…"_blank" alt="Twitter" title="Twitter"><img src="/template/images/twitter_icon…

Attributes for element a:
    Global attributes
    href
    target
    rel
    media
    hreflang
    type

Error Line 355, Column 135: An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.

…alt="Twitter" title="Twitter"><img src="/template/images/twitter_icon.png"></a>

✉
Error Line 356, Column 108: Attribute alt not allowed on element a at this point.

…"_blank" alt="Google+" title="Google+"><img src="http://zarlach.com/template/i…

Attributes for element a:
    Global attributes
    href
    target
    rel
    media
    hreflang
    type

Error Line 356, Column 174: An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.

…Google+"><img src="http://zarlach.com/template/images/googleplus_icon.png"></a>

✉
Error Line 357, Column 93: Attribute alt not allowed on element a at this point.

…"_blank" alt="YouTube" title="YouTube"><img src="/template/images/youtube_icon…

Attributes for element a:
    Global attributes
    href
    target
    rel
    media
    hreflang
    type

Error Line 357, Column 138: An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.

…alt="YouTube" title="YouTube"><img src="/template/images/youtube_icon.png"></a>

✉
Error Line 358, Column 93: Attribute alt not allowed on element a at this point.

…blank" alt="Facebook" title="Facebook"><img src="/template/images/facebook_ico…

Attributes for element a:
    Global attributes
    href
    target
    rel
    media
    hreflang
    type

Error Line 358, Column 139: An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.

…="Facebook" title="Facebook"><img src="/template/images/facebook_icon.png"></a>

✉
Error Line 359, Column 61: Attribute alt not allowed on element a at this point.

…zarlach.com/rss" alt="RSS" title="RSS"><img src="/template/images/rss_icon.png…

Attributes for element a:
    Global attributes
    href
    target
    rel
    media
    hreflang
    type

Error Line 359, Column 102: An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.

…ch.com/rss" alt="RSS" title="RSS"><img src="/template/images/rss_icon.png"></a>

Most can be easily fixed(remove spaces from filename and/or replace spaces with _ and update link). Hope this helps.

Sincerely,

Aleeious

[Zarlach]

Thanks, Aleeious! I had almost forgot about those. I've fixed them, however, meta tags required for Twitter Cards don't seem to be valid. (Example)

This post has been edited by Zarlach: 27 October 2012 - 11:25 AM

[Aleeious]

Zarlach, on 27 October 2012 - 11:24 AM, said:

Thanks, Aleeious! I had almost forgot about those. I've fixed them, however, meta tags required for Twitter Cards don't seem to be valid. (Example)

Update you meta tags. Instructions can be found here. Hope this helps.

Sincerely,

Aleeious

[drodriguez]

i didnt view any of the code. i know css/html/js blah blah blah but im not good at catching other peoples errors =\ however the site does have a good feel to it. it flows together very nicely and i feel like the background img vs the white div on the main page has a very nice color scheme. so from a random viewers stand point good job.

[Zarlach]

Thanks for the feedback, drodriguez!

[fiddydips]

Nice.. did you design it for a tablet? I think it's a little narrow. I think div#content could have a width of 900 and then use the extra white space to hold the right column aside. Pretty good so far.

[Zarlach]

fiddydips, on 02 January 2013 - 09:34 PM, said:

Nice.. did you design it for a tablet? I think it's a little narrow. I think div#content could have a width of 900 and then use the extra white space to hold the right column aside. Pretty good so far.

I have been comparing my website to others with the same "genre" and I am aware that my website's width is below average. Of what I've seen, most websites use about 1000-1100px. I have been doing some testing, but I've always ended up going back to 900px (total width) as I feel that I do not need any more space.

It might very well be the padding (10px) on the article pages that is the problem. If I am to change that to, for instance, 20 or even 30px, I realize that I will most likely have to change the #content width.

Thanks for the feedback!

I've recently changed the design for the footer. Hopefully it is making a better overview of what's on the website.

This post has been edited by Zarlach: 12 January 2013 - 06:58 PM