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.

Okay, I can tell I am sick of computers. I walked into Micro Center and saw a nice rig. A quad core AMD machine, 4GB RAM, 1TB hard-drive, decent video for $200.00. My reaction?? “Meh.”

I literally had to giggle. I couldn’t believe that his inner geek couldn’t muster any excitement about this relatively new technology on store shelves at a really good price. Has his career stagnated his inner geek that much? Or has the foundation of computers not change enough to impact the IT field?

Now don’t get me wrong. That’s some serious leaps and bounds of IT technology compared to what it used to be. However, the foundation remains the same when it’s broken down to the essentials: CPU, hard-drive, RAM, video output, keyboard, mouse, an external drive (used to be floppy; now a type of disc drive). All that is new is how much of one of these items can fit into the smallest of spaces.

I know my inner geek would become very bored if I continued to pursue an exclusive IT field. Fortunately, I do not have that stagnation feeling within web design or development. In the past 10 years I have seen so much evolve in web design and web development, and I’m only going to scrape the tip of the evolution iceberg within this post of how so.

Here are few things I noticed the web community is doing to always change (including the fundamentals to some degree), while the IT field’s foundations have barely changed.

Emerging Technology
There are new frameworks frequently emerging such as AJAX. There are new and different contending platforms like the ending browser wars and increasing diversity of mobile devices. New languages/syntaxes are coming into the scene such as CSS3 & HTML5. New references for something or another. My favorite: “It’s no longer DHTML. It’s DOM Scripting.”

More Artists In The Field
Each day graphic designers, marketers, entrepreneurs…all of the creative people in the world are embracing web development and web design. This leads to more imagination and ingenious methods to make our human lives much more interesting.

Search Engines
SEO has given more purpose to the web markup semantics. It’s no longer just making the hierarchy of a web page be coherent for the user to read, but for also spiders to dissect the web and be able to piece it back together for us when we are searching for something.

Social Media
There will always be a need of some form of interfacing for us to share all of that information out there on the web (or offline) amongst ourselves.

And that’s just four of the reasons why I see web design and web development not going to plateau anytime soon. According the W3C, this is how long it will take to download the internet chocked full of web design or web development variations. It’s just going to get bigger and better starting tomorrow. Long live web design and development!

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!

Since the study was a whopping 60 minutes long, the Adobe User Research Recruiter was providing $75 gift cards via American Express or Amazon.com.

Many surveys I come across that have a decent-to-high response rate either are super short and do not require a lot of time, provide a nice audience appropriate incentive, or both. I was willing to go through the hour long survey. The incentive was something I would use.

There was a preliminary 7 minute pre-screening survey before I would participate in the 60 minute version. Okay, a bit annoying. I was hoping for an online survey that would take about an hour of my time. Oh well, I can handle this format. Some very basic information wanted on the 7 minute survey: name, company, industry, best way and time to be called, and which and how often I use a handful of Adobe products. Also asked was a URL of the portfolio so Adobe could view the work done via their products.

That last one was interesting, say the least. Here is the actual question:
“We are interested in viewing your work. Please provide us with the URL to your portfolio and an example of a sight you have designed/built (if applicable).”

As soon as I came across that question I halted my participation in the survey because I was completely offended. Keep in mind I even did a double check via Google for any international/alternate version use of “sight” instead of “site”. Google results turned up nothing relevant.

My response to the person who provided the survey invitation:
“I would be more than happy to fill out the 7 minute survey above, but when I find more than one typo I get discouraged because of my trust factor goes way down. I can understand the ‘ – ‘ instead of a ‘ 0 ‘ for 50% because the keys are next to each other. However, when one refers to a web ‘site’ as ‘sight’, I’m offended. I’m sorry, but I am. (And I did not complete the 7 minute survey).”

Of all the companies in the world that is directly associated with web page building (Dreamweaver, Flash, Photoshop, Illustrator, and many more products), I expect any Adobe representative to correctly refer to domains as web sites, not sights!

What would you have done?

UPDATE: After an hour of my response to the invitation, the questions were corrected. I highly doubt I would hear from the person directly. I also wonder how many responses were lost like mine during this grammar error.

• Search Engine Optimization: An Hour a Day
  by Jennifer Grappon & Gradiva Couzin.

I’ve read the first edition of SEO: An Hour a Day almost a year ago and found it to be really useful. I’m excited to see what is new in the second edition. Other books that arrived today include the following.

• Landing Page Optimization: The Definitive Guide to Testing and Tuning for Conversions
  by Tim Ash
• Email Marketing: An Hour a Day
  by Jeanniey Mullen & David Daniels
• Web Analytics: An Hour a Day
  by Avinash Kaushnik
• The New Rules of Marketing and PR: How to Use News Releases, Blogs, Podcasting, Viral Marketing and Online Media to Reach Buyers Directly
  by David Meerman Scott

Although I’ve been doing some of the latest trends SEO, e-mail marketing, web analytics, and inbound marketing for about three years now (the length of time I have been at Enercon), you might think of why did I get these books if I have already been practicing what I will read. To answer, its because I’d rather read/learn as much as I can so I know I’m proficient in what I am essentially learning by doing, and to stay with or even ahead of the curve. Self-educating is as simple as reading [(e)books, blogs, articles], watching online videos, and practicing all that I learn. That’s even how I became wicked in (X)HTML, CSS and DOM-Scripting; self-education!

I’ll let you know of my reviews when I have completed each book. In the mean time, do you have any books (topic of your choice) you’d like to recommend?

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