Web Form Elements Design Quiz, Part 2: Radio Buttons and Background Color Property

Continuing with the quiz, I thought I’d ask a corollary to the first form quiz question since this question deals with radio buttons as well.

How do you think browsers should render radio buttons when a value for background-color is applied?

Pick your answer from the sample answers (which are taken from actual browser renderings) or suggest your own solution!

A. Background color is applied around the radio button control.

fmtag-inputradio-bkgdclr-ie7-pc.png

B. Background color is applied inside the radio button control.

fmtag-inputradio-bkgdclr-op9-pc.png

C. Nothing happens. 

fmtag-inputradio-bkgdclr-ffx2-mac.png

Web Form Elements Design Quiz, Part 1: Radio Buttons and Width Property

Browser development is active.

Along with Opera and Firefox, there have been two versions of IE within the three years along with Google’s new browser, Chrome. 

These new developments in browsers are leading to some long desired features in browsers like opacity, auto-generated content and (maybe) embedding typefaces. 

However there is still an unresolved issue with browsers: Web form elements are inconsistently rendered.

While anyone can see that there are problems with how forms are rendered, the question is, “what is the best way to render for elements for a given form element and CSS property?”

Along the lines of Dan’s SimpleQuiz series, I figured it’s best to ask the Web design and development community for their opinions. 

Hopefully this discussion will lead to the appropriate solution that browser vendors could use when programming how browsers should handle the CSS-enabled design of Web form elements. 

The first question I would ask is one that I think shows readily the problem with Web form design: 

How should browsers render radio buttons when a value for width of a certain length is applied?

Pick your answer from the sample answers (which are taken from actual browser renderings) or suggest your own solution!

A. Radio buttons stretch to the size of the width property value.

fmtag-inputradio-width-ffx2-mac.png

B. Radio buttons do not resize, yet the space set by width property is applied and the radio buttons are aligned to the left.

fmtag-inputradio-width-sf3-mac.png

C. Radio buttons do not resize, yet the space set by width property is applied and the radio buttons are aligned to the center.

fmtag-inputradio-width-chrm-pc.png

D. Nothing happens. 

fmtag-inputradio-width-ffx3-mac.png

Your Chance to Win Adobe CS4 Master Collection

In addition to the news that Daniel Burka joins us for the keynote presentation, there are eight great reasons why I think the In Control Web Design Workshop Conference is a great deal:

  1. In Control 2009 offers an excellent value. Compared to other conferences, In Control is more affordable and delivers more bang for your buck. Register early and save $100. AIGA members get an additional discount. (Contact your local AIGA Board for more details.)
  2. Workshop-based sessions enable you to delve more deeply into the material and learn more. Workshop focus avoids cursory review of material, a common complaint of other Web design conferences.
  3. You rarely find these speakers in the Midwest. We bring them all together for two content-rich days.
  4. In Control has something for everyone, from master to novice. New Web designers and print designers learn the basics first—HTML and CSS—then progress through advanced topics, including user testing and Web style guides. No Web designer is left behind.
  5. Wrap-up panel at the end of each day features available speakers for follow-up questions and cross-pollination of material from multiple sessions.
  6. Cincinnati hotels are much more affordable than those in Seattle, Boston, San Francisco and Chicago. Again, this means a greater value and return on investment for you.
  7. In a tight economy, expanding or refining your skill set is crucial. In Control focuses on practical, applicable skills you can use now, rather than vague big picture stuff. 
  8. AIGA Cincinnati is a non-profit professional association for design. Every dime of your conference fee goes back into design education, mentoring, and information for the business community and public.

Now I can add a ninth reason why registering for In Control is an awesome deal: 

  1. Everyone who registers for the In Control Conference before April 23rd gets entered to win a chance for the CS4 Master Collection (retail $2,499) donated by In Control’s new sponsor, Adobe.

If you register before May 11th, you get $100 off regular pricing for In Control. The early bird discount makes it affordable–and if you are an AIGA member, you get an even better break on the price. If you want the discount code and are an AIGA member contact your local chapter’s board.

If you aren’t an AIGA member, feel free to use my discount code, INCSCHM, and save $50.

Anatomy of a Web Design Education

After going through graduate school for Interactive Media, I noticed there was a distinct difference between what was being taught in schools and what was actually needed in the workplace. This effect is often cited as a five-year difference: traditional schools take five years to catch up with what the private sector is doing. 

In an effort to close that gap between traditional schools and the private sector, a fair number of motivated individuals in the industry devoted a year of their time in order to help Web design and development educators.

During SXSW Interactive 2009, this Education Task Force for The Web Standards Group (WaSP) launched Interact, an educational framework for Web design and development instructors: a guide for teachers to use in-full or in-part, for their courses. 

The first release of this framework version includes 12 courses set across six Web design discplines:

  • Foundations
    • Internet Fundamentals
  • Front-End Development
    • Web Design 1
    • Web Design 2
    • Accessibility
    • DOM Scripting
    • Findability
  • Design
    • Digital Design Production
  • User Science
    • Information Architecture 1
  • Server-side Development
  • Professional Practice
    • Internship
    • Independent Study
    • Professional Development

Each individual course itself is made of several components: 

Overview
A summary of all the items available in the course.
Competencies
A listing of the topics in the course and their respective set of competecies a student must master.
Assignments
A helpful listing of assignments for students to use along with a rubric for grading them as well as a handy Excel spreadsheet for tracking the progress of students.
Exam Questions
A series of questions to use to evaluate students.
Resources
List of various materials that teachers can use to aid their instruction.
Learning Modules
Extended exercises for the students.
Contributors
Listing of people who helped bring this course together. 

Take It, Use It, Rip It, Remix It

Like I mentioned before the curriculum frame was designed so teachers and institutions should feel free to use any or all of the material. Each course is licensed under Creative Commons. The only price that is paid to use it is to attribute the material back to Interact. 

Daniel Burka digs Cincinnati

Daniel BurkaAs you might know, I’ve been working with AIGA to put together a solid Web design workshop conference in Cincinnati. One in which you really get down to learning the nuts and bolts of building the Web. 

I’m happy to announce today that Daniel Burka, the creative director of Digg, is going to be our keynote speaker.

Digg is a social media news Web site that lets people discover and share content from anywhere on the Internet, by submitting links and stories, and voting and commenting on submitted links and stories.

Also Digg recently launched the really cool DiggBar that couples Digg’s features with a URL shortening service. (See it in action here.)

Daniel has a great history of working with various clients like Mozilla, Ning, Pownce and Sloan. He’s helped design a giant portion of the Web we use every day. 

If you register before May 11th, you get $100 off regular pricing for In Control. The early bird discount makes it affordable–and if you are an AIGA member, you get an even better break on the price. If you want the discount code and are an AIGA member contact your local chapter’s board.

If you aren’t an AIGA member, feel free to use my discount code, INCSCHM, and save $50.

Why Twitter Won’t Sell

There’s a lot of talk with Twitter being sold. Again.

But I will be shocked to see if Twitter is sold soon, even though I feel as I know who the new owner will eventually be.

I haven’t looked into the eyes of Biz Stone and seen his soul to know what he and the Twitter team will do. 

Nor am I one to make accurate predictions. I thought that the Segway would change transportion forever. I still believed that until they set the retail price at $5,000.

If you are curious about what Twitter will do next, you need to realize that this is the team that made Twitter is the team that made Blogger. They’ve made their first success by selling it to Google and then working there afterwords. 

The team left Google to start a not-so-succesful Odeo podcasting program. They saw the writing on the wall in the name of iTunes and Garageband.

They brainstormed and worked on what we know as Twitter.

And you know what? It’s more popular than Blogger ever was. 

You have honest-to-God celebrities using the service. There’s no ghost writer or personal assistant updating their tweets. Well, for the most part, anyway. 

And this talk of a Twitter sale or a business model? 

It’s like when a the hot male lead of a sitcom finally gets with the hot female lead. It’s final. It’s over. 

Sure, there were still a few entertaining moments after Sam and Diane finally kissed or Maddie and David got together, but the drama ended.

As soon as Twitter sells, their red hot celebrity status is over and the guys who built the service stop calling the shots. 

So, they are going to enjoy authoring Twitter into our pop culture lexicon and have a good time spending other people’s money doing it. 

And if Evan sells Twitter to Google, he will have a well-established track record of selling to Google. What venture capitalist wouldn’t want to hear what next idea his team comes up with? 

More power to them all and God bless America.

Social Media Expert Trust Certification

Today, I’m happy to announce a project that has been in the works for the past year: Social Media Expert Trust Certification™. 

With a seemingly unending number of “social media expert” consultants out there, as a user experience designer I feel it’s our goal is to have certification process of the social media industry. With this certification, companies and organizations will know they are getting a solid expert in social media and not just some schmuck wanting to be their online friend.

In connection with representatives from Google, MySpace, TechCrunch and Digg forming as an advisorary board, my intention is to make the certification standard complete and open sourced around the same time as HTML5’s completion.

Why Do We Need This?

A lot of people out there claim to be social media experts, but how can you tell the person who sits at in his mother’s basement friending everything with a MySpace account to those that can actually go about monetizing the crowdsource space 2.0‑style?

You will with Social Media Expert Trust Certification™.

What Vectors Do We Certify? 

The Social Media Expert Trust Certification looks at five golden vectors for certification:

  1. Can they tell the difference between making a point that benefits others rather than just blabbering endlessly into their Web cam?
  2. Have they ever bought their Second Life avatar virtual clothes that are in season?
  3. Knowing full well that no one can click on them, does their Twitter background image still contain links to their other social media sites?
  4. Do they have an auto-follow mechanism in place on their Twitter account that contains links to other social media sites?
  5. Lastly, but not least: do they like Robert Scoble? No, really. Do they like Robert Scoble? Seriously?

Aren’t There Others That Do This?

In this day, people might ask whey do we need certification of media experts while there are schools like Birmingham City University offering a degree in Social Media.

But we know schools take 5 years to catch up with anything technology-driven. So, while you are getting certified in Friendster by an academic insitution, you can get on the cutting edge with courses like “Being Reborn on Facebook 2.0, the new Twitter.”

How Can I Join In?

Are you a company in need of certified social media expert? Or are you someone who has been thinking they are qualified social media expert, but would like the veil of ignorance to be lifted and know once and for all? 

Then leave a comment below and I will get back to you with details once they are finalized with my Nigerian counterpart on this most exciting chapter in the social media industry!