A huge thanks goes to Shane Snow for creating this wonderful and truthful infographic. You can visit his personal site for more of his cool stuff or follow him on Twitter.

Web Designers vs Web Developers is brought to you by Wix.com
Use creative design to make a Free Website
You are most welcome to share this infographic with your audience.

How to use the HTML5 Periodic Table: Click on any element for its definition and/or links to more information about it.

Give it a try! Interact with the Periodic Table of HTML5 Elements.

Earlier this week, I came across a blog article that was a tutorial for how to create a web page. Within this article, there was a note. The note directed that the many people who say “<a HREF…>” as “Eh, Aitch Ref” are completely wrong, and “Eh, Harref” was correct.

As superfluous as which the correct pronunciation may really be, I completely will go to debate on that blog article’s note. The HTML attribute “HREF” is a mash up of “hyperlink” or “html” & “reference”. So yes, I say it should be pronounced “Eh, Aitch Ref”, not what could be someone’s name.

I invite you to take the poll: How do you pronounce “<a HREF..>”?
Note: There is a poll embedded within this post, please visit the site to participate in this post's poll.

This is what I have on 3-shelf bookcase at my home-studio and at my cubicle desk at work:




What’s on your shelf? Do you have any great recommendations?

This site’s article pages are a great example of web design. The logo is prominently located in the upper left corner. It’s colors are progressive and memorable. The menu navigation is conveniently at the top of the page. The main header’s font is at a balanced size and weight, and in a distinctive blue hue. The page itself is a large, centered, white column containing all of it’s information on a blue striped background. What I take away from this design helps me associate Search Engine Land’s branding as blue and white with a splash of progressive green.

This branding impression can be very important because there are visitors who browse the internet with multiple windows (or tabs) at open at once. I admit I am one of these types, and I observe others who do the same. When these multiple viewing panes are open and one of them accidentally gets closed, that branding impression can help the visitor remember what was just closed.

Case in point:
Last night, I was shutting down my computer for the night. I had multiple browser windows open with multiple tabs open in each. My browser is set to remember all of the tabs’ URLs of the last instance of the browser window open. I accidentally closed one browser window which had a webpage article I did not finish reading from earlier in the day. I looked in my task bar and realized I still had one more browser instance running.

Okay, quick. Think of which website had that article. I remember seeing white and blue. I believe it was Search Engine Land & the article was a recent post. I navigate to my RSS feeds and see if it was still listed. No it was not. It was obviously not that recent. So I just went to the homepage; maybe it’s listed there. It wasn’t; the morning posts were being outdated by the afternoon posts. Okay — let’s use the site’s search: flying solo SEO. Found it!

Now I could have used my browser’s web history tools to find it, but I didn’t want to launch those. I was leaving for the night. I want that immediate satisfaction, like many web users. It was because of the great aesthetic design of Search Engine Land & branding identity I was able retrace my steps in less than a few clicks.

Excellent work Search Engine Land!

3 of the XHTML rules
1. all tags/elements must be in lowercase, not UPPERCASE nor Titlecase.
2. all tags/elements must have a closing tag
3. all values must have quotes (” “) around them

Here’s the play by play analysis of how I had to swallow my pride for the morning and which rule I did not follow.

At my day job (Web Producer, Enercon Industries), I was upgrading the web site’s CMS system to the latest version. During inspection of the site post-upgrade, one of the webpages was not laid out like it was pre-upgrade. The top and left navigation bars were fine, but the page content and right navigation bar was all over the place.

Believe me, like many other developers when something goes awry after it working prior, a bit of adrenaline kicks in. I launched my arsenal of software programs (Dreamweaver, Notepad, Firefox & Internet Explorer), grabbed a cup of coffee (I knew I was going to be glued to my computer for a while), tuned into my Pandora Rob Dougan Channel and started to dissect the problem:

1. Navigated to the webpage in Firefox.
2. View(ed) Source of webpage [uses pretty colors to discern between tags, values & content].
3. The markup is massively long – cannot keep track of open and closing tags; no (apparent) errors.
4. Grr!
5. Logged into the CMS system.
6. Reviewed the .NET code generating the webpage [no pretty colors to discern between tags, values & content].
7. No (apparent) errors.
8. Grr!
9. Opened Dreamweaver – code view only.
10. Navigated to the webpage in Firefox.
11. View(ed) Source of webpage.
12. Copy & pasted the source into a new Dreamweaver HTML document [with pretty colors, too].
13. Began matching all of the open tags with their closing tags [this took some time to sift through].
14. Found one error. Yea! [Okay, the error should not have existed in the first place. But it's getting fixed-NOW!]
15. Logged back into the CMS system.
16. Navigated through all of the GUIs to get to the .NET code that was responsible for display that section of code.
17. Insert fix.
18. View webpage in Internet Explorer and Firefox.
19. Content is still all over the place [in both browsers].
20. Grr!
21. Refresh webpage in Firefox
22. Repeat steps 11-13.
23. Found another error. [This better be the last error! ]
24. Repeat steps 15-18.
25. Yea! The content is aligned like it should be!

The errors: two nested div elements were not closed where they should have been when I first created the page in Sept. ’08. Like previous versions of the software, some element tags are auto-closed for the developer. However, the new software version is stricter, all tags are auto-close, which led to highly undesirable results: overlapping/improper nesting of tags making the browser to get confused and render a messed up webpage layout.

So lesson learned (again). Follow the three simple rules of XHTML and there won’t potential hours of frustration or a need to call for help (if you are a newbie).