Refreshed My Site

Off Topic
1

I just finished a complete redesign to http://onrampwebdesign.com. It is hand-coded from the ground up as an educational exercise (using Coda and Hammer, both of which are spectacular).

Frankly, I was amazed at how un-frustrating this was to create. Granted, it took me far longer than it would have using Freeway, but I didn’t find myself repeatedly bashing my head into my iMac. Freeway is generally a good program, but inline layouts and responsive designs are very frustrating for me.

Any advice? Areas for improvement? Mistakes in my code?

offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

2

You should be very pleased Caleb.

I dont like to mention your age but for someone so much younger than me you are doing a great job.

I will mention a couple of things:

1 Alignment of the hammer, imac and FW images - I do think they should be centre aligned to the columns - especially at narrower widths.

2 There are some Errors that are evident when Inspecting with Safari Dev tools

Assertion failed:
(anonymous function)

I have no clue why - I must admit I haven’t really delved into your code.

David

offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

3

And probably not a good idea to have a recommendation from a guy whose site doesn’t appear to exist any more - databarpro.com

D

offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

4

Nice job Caleb. Fun, isn’t it?

I only had a brief look at the code on the index page but in the ’featured’ section I saw an h2 immediately followed by an h3. Usually a header tag is followed by some sort of content (paragraph, list etc.), not another header tag.

Todd
http://xiiro.com

offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

5

Very nicely done Caleb.

–
Ernie Simpson

I just finished a complete redesign to http://onrampwebdesign.com.

offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

6

First, thanks for all the comments! I really respect and look up to all of you, so what you say carries a lot of weight.

Let’s start from the top:

…you are doing a great job.

Thanks for the compliment Dave!

1 Alignment of the hammer, imac and FW images - I do think they should be centre aligned to the columns - especially at narrower widths.

They are centered to the columns, at least in all the browsers I tested against. Screenshot?

2 There are some Errors that are evident when Inspecting with Safari Dev tools

I’m not seeing those errors. With the sole exception of the Google Analytics script and a HTML5 shiv, there’s not an ounce of Javascript (this was a restriction I placed on myself to make it a little more difficult). Might this be the result of a browser extension? They can cause the web inspector to throw errors.

And probably not a good idea to have a recommendation from a guy whose site doesn’t appear to exist any more - databarpro.com

His site should be back up in a day or two (he’s actually in the process of changing domains to databarspokane.com).

Thanks Dave for the tips!

Your turn Todd!

Nice job Caleb. Fun, isn’t it?

Yes. There is something magical about writing nothing but text and watching a website take shape before your eyes. I’m considering switching to hand-coding for any upcoming smaller projects for this reason.

I only had a brief look at the code on the index page but in the ’featured’ section I saw an h2 immediately followed by an h3. Usually a header tag is followed by some sort of content (paragraph, list etc.), not another header tag.

I must admit that I’ve never heard of this before, but I can see the logic behind it. Do you have a link to an article that expands more on this?

Thank you Todd for the advice!

Last but not least, the venerable Mr. Erns:

Very nicely done Caleb.

Thanks Ernie.

offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

7

Off the top of my head, no, I don’t have a link handy that explains this though I suspect the W3 Schools site is probably a good place to look.

It’s not something that would throw an error nor would it confuse your visitors so in that regard it’s benign. But if you look at it from the perspective of a search engine which really likes properly structured (semantic) code then it doesn’t make as much sense as it could. Remember that headers typically define sections of content within a larger block of content so something like:

header
content
header
content

makes sense semantically.

You’ve done a great job. Do you have a fallback for browsers that don’t support svg images?

Todd

I must admit that I’ve never heard of this before, but I can see the logic behind it. Do you have a link to an article that expands more on this?

offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

8

Todd,

Yeah, that makes sense. I’ll have to do some more research in this regard and see what I can dig up.

Yes, each SVG will gracefully fallback to a .png if the browser doesn’t support it. The HTML looks like this:

<object type="image/svg+xml" data="<logo.svg">
    <img src="logo.png">
</object>

Obviously, that is slimmed down. The upshot is that any browser that supports the SVG will use it, while those which don’t will just show the .png. The only problem with this method is that the browsers which support SVG will download both the SVG and the .png.

I just bumped into this article, and hopefully will find a solution that doesn’t cause the dual downloading there.

offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

9

Yep, I’ve read that article, it’s good. Excessive server requests is always a concern, even more so now that we have to consider responsive solutions. I’ve read some interesting articles about how to possibly avoid the problem but there doesn’t seem to be an ideal solution … yet.

Re: the headers, I meant to say that people using screen readers might find consecutive headings with no content odd.

Todd

I just bumped into this article, and hopefully will find a solution that doesn’t cause the dual downloading there.

offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

10

1 Alignment of the hammer, imac and FW images - I do think they should be centre aligned to the columns - especially at narrower widths. Safari 5.1.10

2 There are some Errors that are evident when Inspecting with Safari Dev tools

D

offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

11

Thanks Dave. As it turns out, the SVG align is a bug that only presents itself in Safari 5-. Fortunately, I had a old PPC iBook sitting around that I was able to see the issue in. It should be fixed now.

I’ve not been able to replicate your console error yet.

offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

12

Still there for me

D

offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options