There is nothing web geeks love more than strutting their thorough knowledge of the subject. Knowing every single HTML 4 element by heart or to have each and every CSS property on the tip of your tongue doesn’t really help you in every day web development; understanding and realizing when to use each is more important.

But all of that goes out the window when it comes to quizzes like How Many HTML Elements Can You Name in 5 Minutes? or How Many CSS Properties Can You Name in 7 Minutes?

Out of the 91 W3C approved HTML 4 elements I identified 44, or 48%, in 5 minutes.

With CSS properties I did a little worse. getting 42 out of a possible 122 in 7 minutes, or 34%. I won’t disclose the simple ones I missed to give you a fair test when you take it. Most of them no one uses anyways!

How many did you get?

Most web designs use a classic header, columns, and footer layout, so there is no point in slaving over the details of the basic structure when you are starting a new design from scratch. YAML Builder makes the process quick and easy with a simple WYSIWYG online tool to build out your starting point.

You start out with a basic three column layout and from there you can customize it to fit your specific needs. Choose the doc type (I prefer HTML 4.0 Strict), optional base elements, and the number of columns to start out with. You can specify the widths of various elements choosing between a static width or liquid layout and the source order of the columns. Finally, the fun can begin by adding specific elements like headings, paragraphs, and lists to complete your basic web page. It should be noted that adding the specific content is not as straight forward as I would have expected. You need to click on the ‘Add +’ toggle in the upper left corner of the element before you can drop in child elements. Throughout the whole process you can click the ‘Toggle View’ button to see a real time preview of the final rendered code. When you are all done click the ‘Get Code’ button and the builder will display the HTML code, the base CSS code, and even an Internet Explorer bug fix CSS in a slick modal pop up so you can be off to a great cross-browser start.

YAML (Yet Another Multicolumn Layout) is an open source CSS framework meant to get you up and coding quickly while reducing the tedious detail work associated with CSS design. Download Squad recently reviewed the Yahoo CSS Grid Builder tool which does a similar thing but is much less polished. The YAML builder also offers a greater flexibility with your design as well as using less code in the end.

If CSS has left you a bit dizzy in the head or you simply want a quick place to start, the YAML builder is the best place to go to.

With so many HTML elements at our coding disposal it can be a daunting task to make sure we are using the right ones for the right task. For example do you use the <abbr> tag for abbreviations? Or <del> for deleted text (If it’s deleted then why do you need to mark it up anyway?)

Keryx has the mother of all semantic-info tables. Details include which standard the element is a part of, block/inline/table display, semantic meaning, usability & accessibility, best practice, SEO notes, notable browser issues, and unstyled appearance. PDF and Open Office downloads are included so you can print it out for reference. Make sure you’ve got plenty of ink and paper as this reference stacks up to 11 pages. Well, maybe it isn’t that big of a deal, but it is nice to have close at hand when you are marking up a page.

Srown.com is the home of the stylish Srown Design Group. If you are a design group you most certainly have to look good and the team has pulled it off with this slick black and pink website. I like how the background draws the attention to the middle of the page where all of the content is as well as use of the upper corners for the most important navigation: Home and Contact. Srown has even used a bit of pizazz by fading up new content after you click a link.

Looks aside though, and this site has two big problems. For one, the site doesn’t use separate web pages for each section, instead everything is loaded up front and using JavaScript, Srown replaces the middle container with the content. This is bad design as it prevents linking to specific content. There are ways to incorporate a bookmarkable history of pages using JavaScript like the jQuery history plugin. Also, users with scripting disabled will be limited to the first screen of content since the navigation relies entirely on JavaScript.

Ultimately Srown used the wrong technology for the job. Instead, the team should have used Flash which would be more flexible in developing visual effects. There is also a higher chance of a user having Flash installed compared to having JavaScript enabled since the Adobe plugin is installed in 99% of computers worldwide. Instead, Srown settled for the middle of usability (and the middle is the worst) without taking advantage of the extra benefits Flash had to offer.

As you can see a site can be visually stellar but utter crap in usability. Before ever starting a project it is important to sit down and think things through from a technical stand point to see what different technologies have to offer. So while Srown looks awesome it suffers in usability which brings up the important point that substance beats style out any day.

Bi-weekly web magazine A List Apart (ALA) launched two fresh new articles. Unfortunately I was saddened that Erin Kissane, editor at ALA, approved an entire article about designing specifically for the iPhone. I know the iPhone is amazing to many geeks out there but it is no where near as prevalent as the number of web enabled mobile devices.

According to market researcher iSuppli, the number of mobile phone subscribers topped 2.6 billion globally last year. Since I couldn’t find any statistics on mobile web devices, let us assume only a quarter of those can access the web on their phone. That works out to 650 million potential mobile web users. Apple reported it sold 270,000 iPhones over it’s launch weekend but let’s assume they sold 30,000 more shiny devices between now and then. Using the above statistics, the iPhone accounts for only 0.046% of all web-accessible mobile devices; a drop in the proverbial bucket. And I am supposed to be excited to specifically tweak my site for it?

The web design world has standards with the goal of being able to code once and access the content in any browser or on any device. Standards arose because in the late 90’s and early 2000 websites were often designed for one browser at a certain resolution. You may remember seeing such terms as “Best viewed in Internet Explorer 5+ with a resolution of 1024×768.” One of the founders of the web, Tim Berners-Lee, even expressed his displeasure of the trend in Technology Review (July 1996):

“Anyone who slaps a ‘this page is best viewed with Browser X’ label on a Web page appears to be yearning for the bad old days, before the Web, when you had very little chance of reading a document written on another computer, another word processor, or another network.”

By designing for a single device, you are essentially jumping back to the dark ages of the web while cutting out a large chunk of the global audience. I agree that mobile web standards leave a lot to be desired but by essentially ignoring the rest of the world (remember iPhones are U.S. only for now) you are only making things worse.

Web technologies like Apple’s mobile Safari and Microsoft’s Deepfish show great promise in fulfilling the web standard utopia. These tools don’t require separate coding for mobile devices which in turn will speed up the adoption of the Internet on-the-go. But it will be several more years before they are in a majority of devices and until then we have to remember that there are other phones out there other than Apple’s precious iPhone.

Mashable.com created a list of 30 Firefox extensions for web developers and designers. To be honest, you really only need two: Firebug and the Web Developer Toolbar. These two extensions incorporate nearly every other extension listed, and who wants to manage 28 separate extensions when they could just use two.

If you are still digging through source code by hand, then do yourself a favor and get to know Firebug. You’re job will never be the same again.

Stage5Studio.com

This little site is a nice example of how to do a dark-colored site using bright colors for highlight. I really like the idea of highlighting certain info with a solid background color similar to the rollovers of my links. Best of all, the site is a single page. Straight and to the point.

blog.CircleSixDesign.com

Circle Six uses a killer color combination of orange and blue. I really like the logo which plays with depth by wrapping through the logo and on top of and over the orange nav bar. I’m not a big fan of the fluff at the bottom. The best thing has to be the Twitter status which fades in both size and color as the updates age.

This search engine optimization company has a slick website with a royal blue and white theme. The main category navigation has an interesting roll-over effect where the icons not selected become grayed out. A reader can maximize the reading room by hiding the nav area which slides shut thanks to the animation prowess of the Script.aculo.us library.

The only thing I would change would change about SEOStudio.co.uk would be the color of the type. Blue on blue provides a low contrast and to aide readability I would pick something lighter.

Smooth icons with a soft glow as well as the eye-catching color choice make this a site I’ll keep track of for times when I need some inspiration.

For a long time I have noticed well designed pullquotes that only had the beginning quote. The alternative was a standard text quote that was more bland but had both beginning and ending quotes. Here are some examples I found on SmileyCat.com to better illustrate what I am talking about.

The last example is a nice compromise but I prefer pullquotes with a little bit more style. It really bugs me how there is no easy, pure-CSS way of including the ending quotes. That is until now.

WebMasterWall.com has a tutorial featuring a simple method to create “double quotes” (as they call them) using CSS. The trick is to attach the ending quote background image to the

tag and use the pseudo-element :first-letter for the beginning quote graphic. The reason we can get away using this trick without any JavaScript is because IE 5.5+ actually recognizes :first-letter when applied to any block element. Huzzah, this is my second favorite pseudo-element after :hover.

The only gotcha to this is according to W3C specs “Unless you’re using a transitional doctype, text should not be placed directly inside a blockquote element without block-level tags surrounding it.” In other words the text within a

should be wrapped in

tags which would break the blockquote:first-letter styling. This could easily be corrected by using blockquote p as a selector and assuming you don’t have multi paragraph pullquotes. I think that is a reasonable compromise.

I stumbled on two sites today that really struck me with their design.

WeDudes.com

WeDudes is a site dedicated to creating little versions of yourself or avatars. I’m really attracted to the fun cartoon style of the page. Not much else to say about this simple site as it is in a closed beta, though I would like to see more of it.

DesignFloat.com

This site is another Digg.com inspired social news site but with a focus on all things design. From all of the other Digg clones running on Pligg on the web, this one takes the cake for the best creative stylings. The idea of floating a story up to the top is a clever paradigm and the bright colors give it a fun, light feeling. I’ve added their NetVibes widget to my everyday reading list in case a good story rises.