Related posts:

1. Demystifying CSS and WordPress
2. WordPress 2.7 – I Love It!
3. WordPress & OOP

I’ve now given several talks at several groups and conferences, and have learned a lot about giving presentations. Two of the biggest things I’ve learned are first: the quality of a talk is (almost) always directly relational to the amount of time spent preparing. The second is: great talks always require a great deal of preparation.

By the time I had given my second presentation, I realized just how much time these presentations take. Several weeks before the presentation, usually 3-4, I would spend just a week of evenings on research. I’m not that smart of a person, but fortunately there are brillant people all over the internet who publish their findings. After putting together all my research, I’ll spend another week or two in my spare time putting together the slides. Then, the final week I’ll spend practicing and modifying my slides. I usually run through my slides start to finishing 5-6 times (at least). For a 50 minute presentation, that can take a lot of time. While I practice I’ll add, change, and re-order slides so they flow much more smoothly.

All in all, I spend anywhere from 20-30 hours in total preparation. My day job keeps me really busy, so I only have time for this at night. That is 30 hours I could spend playing a video game, or doing side work, or spending time with my wife, or so many more things. So I had a decision to make. Do I really want to prepare 2-3 presentations a year?

I decided “yes,” because after each presentation that I put a lot of work into, I get comments like this:

Amen! RT @RickGalan: @JustinCarmony Dude, your preso was awesome. Looking forward to reviewing on your site. #wcslc

Then, tonight at the “after-dinner” with attendees and speakers, I got this email:

Just had to say thank you so much for a great presentation today – You made CSS approachable and a possibility to learn – thank you!!

I feel like if I pick up the book you recommended there might be hope for me after all!

all the best,
Kayla

These comments and others told to me in person make it all worth it. Not that I feel special, but I love helping others learn. I have the battle wounds of learning a lot of these technologies, and helping others to learn them more clearly is awesome.

So thank you, all my attendees and listeners! Thank you for all the “Thank You’s”, and I look forward to giving more presentations in the future.

Related posts:

1. Presentation: Real Life Scaling
2. Speaking: Utah Open Source Conference 2009
3. UTOSC – Day One

I have a few posts I need to write, but wanted to quickly mention I’ll be speaking at WordCamp SLC this saturday on Demystifying CSS & WordPress. They have a bunch of other great sessions lined up. Looks like there are only 8 tickets left, so if you want to go, hurry up and register!

Related posts:

1. Speaking: Utah Open Source Conference 2009
2. Speaking: Utah PHP Usergroup – Streamlined Web Development

Unfortunately, I haven’t been able to attend a conference where he is speaking at. However, thanks to the wonders of the internet, there are several videos and slides available from previous presentations. I highly recommend them for any web designer or developer, because we all deal with usability in one form or another. I’ve gone ahead and gathered a handful of these videos and slides into one article so I can easy reference them for others to watch. You’ll notice a lot of the themes and ideas in these videos will overlap, but each one has some very good content and advice.

Designing the User Experience Curve

This is the first video I watched of one of his presentations, and it has stuck with me for the last year or two. Warning, after watching this video you will no longer look at interacting with others the same, whether on the web or just day to day encounters. You’ll know what I mean after watching this video.

Slides

Video

Andy Budd – FOWD London 2008 from Future of Web Design on Vimeo.

Persuasive Design: Encouraging Your Users To Do What You Want Them To!

This is a more recent presentation, and while I couldn’t find a full start to finish video, I have pieced together a collection of videos that covers most of it. There are quite a few “aha!” moments that make you realize different things, and rather fun to listen to.

Slides

Videos

Seductive Design

This one is very similar to the first video, but there are some differences once you delve into more of the content. There are some very good ideas in here. Now, this isn’t so much about seductive marketing as it is creating appealing designs.

Slides

Video

Andy Budd – Seductive Design from Build on Vimeo.

Want more?

There are a few more slides of his presentations on slideshare. I would also recommend subscribing to his blog. Hopefully you enjoyed these videos and much as I did.

Related posts:

1. Web Design & The Cookie Jar: When Dealing with Clients
2. New Blog Design
3. PHP Design – Biggest Database Oversights

function selectLocation()
{
	$('#modalSelectLocation').dialog({
			modal: true,
			dialogClass: 'modalSelectLocation'
			,buttons: {
				Cancel: function(){
					$(this).dialog('close');
				}
				,Continue: function() {
					alert('goto-buy');
				}

			}
		});
}

with the css of:

.modalSelectLocation .ui-dialog-titlebar { display:none; }

Tada! No more Title Bar. However, make sure to have some form of cancel button.

Related posts:

1. jQuery Tip: Better Toggle
2. Empowering JavaScript Through jQuery
3. CSS – ID vs Class

Dear Google Apps admin,​

In order to continue to improve our products and deliver more sophisticated features and performance, we are harnessing some of the latest improvements in web browser technology. This includes faster JavaScript processing and new standards like HTML5. As a result, over the course of 2010, we will be phasing out support for Microsoft Internet Explorer 6.0 ​as well as other older browsers that are not supported by their own manufacturers.

We plan to begin phasing out support of these older browsers on the Google Docs suite and the Google Sites editor on March 1, 2010. After that point, certain functionality within these applications may have higher latency and may not work correctly in these older browsers. Later in 2010, we will start to phase out support for these browsers for Google Mail and Google Calendar.

Google Apps will continue to support Internet Explorer 7.0 and above, Firefox 3.0 and above, Google Chrome 4.0 and above, and Safari 3.0 and above.

Starting this week, users on these older browsers will see a message in Google Docs and the Google Sites editor explaining this change and asking them to upgrade their browser. We will also alert you again closer to March 1 to remind you of this change.

In 2009, the Google Apps team delivered more than 100 improvements to enhance your product experience. We are aiming to beat that in 2010 and continue to deliver the best and most innovative collaboration products for businesses.

Thank you for your continued support!

Sincerely,

The Google Apps team

For all Web Developers around the world, we should all be rejoicing! Having a large internet giant telling its consumers to “drop IE 6″ and other older browsers will make all our lives easy. I remember while working on a very large site, we used PNG images sparely for some background images. The deadline was extremely tight, but we were (barely) on schedule. Out of the blue I get an email forwarded to me from the marketing director for the client, and it went something like this:

Why are all the backgrounds looking nothing like the mock? Its all a funny blue.

Of course, the Marketing Director had IE 6. Whats worse, is that he was working for a very large computer technology business. We had to drop everything and apply ugly IE 6 hacks to enable PNG support. At the time, I tried explaining that the browser he was using was released while I was still in highschool, but he didn’t understand. Hopefully now the big internet giants will start telling people “Get off IE 6.” Once people adapt better browsers, the more we can do with the web.

Related posts:

1. Why Google Chrome is Good for FireFox
2. Is Google following Microsoft’s footsteps?
3. Google Wave Jargon

Related posts:

1. Blog WordPress Theme Experiment – Grunge Style
2. 100th Blog Entry – First Year of Real Blogging
3. Redesigning blog….

However, a few days ago I had to work with a layout that was created using tables. I looked at the source, face palmed my head, and dreaded the misery of working with it. There was no rhyme or reason to the syntax. It was total chaos. Then, when I had to create a similar page using the exact images, just adding different dynamic content, I was able to quickly re-make the page. The source was smaller and easier to read and work with. I had to incorporate content and styling from other parts of the website. I easily added the links to the needed CSS files, called the exact same rendering methods, and it worked perfectly. Super simple and easy.

We rolled the new content live, and we had a situation. Wonderful Internet Explorer 6 & 7 had issues rendering both pages, the table based and CSS based. I spent 2 hours trying to figure out the issues with the table based page. I couldn’t figure out where the extra space was coming from. I finally got it to the point where it didn’t look “bad” but it wasn’t 100% fixed. I then looked at the CSS page, and within 10 minutes I was able to solve the problem. I sat back in awe, and pondered the wonder that had just happened. I had converted, 100%, to using CSS layouts. I couldn’t imagine doing it any other way. There are appropriate times to use tables, but only then do I use them.

Why the Long, Hard Conversion?

Control – It is really, really simple why I had such a hard time switching over to using CSS for layouts. I had much more straight forward control over my layouts with tables. Yes, they were a pain to maintain. Yes, the source looked at total mess. Regardless, I could easily control every aspect of my layout. 100% height? No problem! Align text to the bottom of the cell? Piece of cake. Center stuff? I could do it blindfolded. While the source of tables might stink to edit, the concepts were very, very simple. After playing around with table layouts for a little while, you could learn all the tricks and understand the concepts. Even if you had a bug or problem, 99% of the time the solution was obvious and straight forward.

CSS on the other hand is a complete beast to wrap your head around. Especially if you had lived with tables, like I had, for years and years. With tables, there is little theory. You just make grid like layouts and go. CSS has a lot of principles you must understand before you can really use it. The box model, positioning, floating, etc. It can all be very complicated, and frustrating when it doesn’t work. Many times when my layout would break, I didn’t know if it was a browser issue, or maybe I had an error on my side. How do I fix it? I have to search over and over again on the internet, and there wasn’t a single place to find answers. Many times I would have to comb through results from forums, blogs, and articles to find my answer.

How I’ve Mastered CSS

I’m proud that I’ve finally been able to embrace and benefit from CSS. It has enabled my web development to be faster, cleaner, and more efficient. There have been several things that have helped immensely, and hopefully they can help you too.

Step 1: CSS Mastery by Andy Budd

This book is a must for every single website designer. It has the perfect balance of technical knowledge, real application, and great examples. It isn’t very long, and can be read in a few hours. It covers the basics & explains the principles, and is a great reference always. However, the best way I can describe what this book did for me is this: before, I felt guilt tripped into using CSS. Viewers with accessibility issues would have a difficult time. My HTML wasn’t “meaningful” but a jumble of tables and mess.

However, after reading this book, I preferred to use CSS. I saw all the advantages, I understood the principles, and I knew how to make CSS work for me. This book was better than any other tutorial, documentation, video, etc that I had ever used. I walked away feeling like I could actually use CSS.

Step 2: FireBug

If you are a web developer, and you do not have FireBug, you are in the stone-age. FireBug is a debugging tool that is a add-on for FireFox. It allows you to visualize and follow exactly how you’re CSS is being executed. See how much space a DIV tag was taking, and see it’s properties, and the different CSS statements that gave it it’s properties was a break through. I would say 90% of my CSS issues and bugs can be solved by using FireBug. Of course there will be IE bugs that I can’t use FireBug to solve, but it a million times better than not having it at all.

Also, have FireBug enabled all the time. There are many times where I’ll see a website with a cool technique and analyze how they do it using FireBug. Its a great way to learn new things.

Step 3: Cold Turkey w/ Small Project

The next step for me was going Cold Turkey on a small project. Why cold turkey? (Cold turkey is a saying that means to make a change instantly, and not slowly change over) It is painful, but forcing yourself to use 100% legit CSS makes you learning the techniques for using CSS well. Why a small project? Trust me, it will be very, very frustrating. Your small project’s design shouldn’t be overly complicated. Keep it simple. A great way to start is simply creating a personal portfolio website, 5-10 pages, and use 100% CSS. After getting the hang of it, gradually start working on large projects. Make a new blog theme, or incorporate CSS in all of your work. Eventually, you’ll find yourself using CSS more often than not.

Step 4: Make Designs CSS Friendly

With tables, I had total (while chaotic) control over my designs. You can also have that same control with CSS, but its takes different techniques, and often the more crazy, the more likely a browser will make it look bad. This was extremely frustrating for me as a web development. Make your life easy at first by making CSS friendly designs. If a design used to require 6 nested tables with many width and height definitions, setting the backgrounds to each one to make an effect look just right, it is probably over complicated, and unnecessary. Make your design easy to implement in CSS at first. You’ll find yourself making cleaner designs, and after you get the hang of it, you will start designing websites with CSS in mind. Instead of seeing grid frameworks with tables, you’ll see DIV tags.

Step 5: Keep Notes on Bugs & Solutions

Last, but not least, make sure you track the bugs you have, and your solutions to them. You’ll find recurring problems that you always will face. How to get 100% height, how to solve box model issues, etc. If you’re good at documenting problems & solutions, you’ll find that down the road you’ll rarely run into a problem you haven’t already faced. CSS has it’s weaknesses, but you’ll know how to overcome them. I personally need to do better at this step 5. I swear that once every 3-4 months I have an issue with unordered lists and IE6. You’d think I would write down the solution?

Step 6: Validate, Validate, Validate!

Many times a “bug” with CSS isn’t actually a bug, but you using it wrong. Typos can cause drastic affects, yet may not be apparent where the typo is. Services like W3C’s Validation tools make life easier. I know its frustrating when it spits back 27 errors, saying you’re doing it all wrong. However, if you get in the habit, validation will soon become a great tool and not a burden.

Step 7: Don’t Look Back

Once you start this journey, don’t look back at how you used to do it. Forget table layouts and it’s unreadable markup. You’re better than that! Trust me, I know how frustrating it can be when you don’t understand why your layout isn’t working like you want it to. I was in your shoes thinking “I will never, ever use and like CSS.” But I’m telling you, now I can’t stand the old methods. I cringe when I have to use a table for non-tabular uses. It is possible to love CSS! The more you revert to old table layouts the more you’ll struggle to convert to CSS.

Conclusion

I’m glad I’ve suffered through the torment of learning and mastering CSS. While I wish the learning curve for me hadn’t been so dramatic and difficult, it has paid off. Now that I have well formed XHTML documents with valid CSS, I can do all sort of things using JavaScript and jQuery, and do it quickly and efficiently. If you find yourself struggling, I highly suggest following my steps. I promise, it will pay off in the end. To be 100% honest, I still am totally shocked I’m a CSS fan now. If myself from five years ago could see me to day, that Justin Carmony in the past would be in utter disbelief.

Related posts:

1. MySQL – Does Table Exist w/o Throwing Errors
2. PHP Practices: Buffering your autoload
3. MS SQL 2005 (T-SQL) Row Count for Each Table

Why, oh why, are website classes so extremely out of date in universities, colleges, and schools? I just spent the last few hours helping my wife with her Information Systems class. I’ve had to do similar assignments for technology classes, yet the things they are teaching are extremely out of date and a waste of time. Why? After taking these classes, to actually use HTML, I would have to unlearn 80% of what they taught, and re-learn from scratch.

It is one thing to keep things very simple. However, if I have a basic Account class, and I would expect to learn about Credits, Debits, and keeping a ledger. There isn’t a need to get into complex concepts or advanced journal entries. However, if I take an Accounting class, and they teach me incorrect concepts, that class would be 100% worthless. I’ve uploaded the project my wife had done for her class, after following their textbook and professors instructions. This is also after helping her remove as much “junk” HTML.

Her Website Assignment

For those HTML Gurus out there, if they look at the source, they’ll cringe. I haven’t seen this poor of HTML since the 90s. Also, guess what? The book they were following was published in 2008. How well does this example validate? Terrible. This was after I helped her strip every bad piece of HTML I could without “breaking” the instructions.

Why teach your students to use very, very old markup? I guess is the authors don’t have a clue. However, if I hired a person who says they know HTML, and the produced the stuff books teaches, I would very upset. I mean, who teaches their students to use background images like that? Here is what HTML classes need to teach:

HTML Structure

Don’t worry about styling at first. Just worry about the structure. That is why they invented CSS (Cascade Styles Sheets). Teach your students how to use your correct markup. Use strong, emphasis, and span tags. Here are some examples:

<!-- Bad -->
<img src="image.jpg">

<!-- Good -->
<img src="image.jpg" alt="My Dog" />

<-- Bad -->
<b>Bold</b>, <i>Italics</i>

<!-- Good -->
<strong>Bold</strong>, <em>Italics</em>

Once they have a good base for HTML structure, then you can move on to Styling. There is no need to use Font, B, or I tags.

Cascade Styling

I can see why a professor would be leery to teach about Cascade Style-sheets. They can be confusing, and a new concept for their students. Also, Information System classes usually only have 2-3 weeks before moving onto another subject. So keep is very, very basic. Don’t even touch on ID and CLASS attributes if you don’t have time. Just show changing the colors of links, and maybe making strong and emphasis tags different colors. Keep it simple. However, do NOT resort to deprecated methods that may seem easier to use at first, but hurt the student’s full education on the subject.

Teach Principles, Not Motions

My wife’s professor held an optional saturday class to help with the assignment. If a student went, the teacher would walk through, step-by-step, what to put into notepad to make their websites. However, there wasn’t any discuss as to why they were typing what they we’re. Unfortunately, I feel like they were probably just going through the motions. The goal of teaching students is that they walk away with something. If you’re just spoon feeding the students what to type, what good is it doing? Isn’t it just a waste of time?

Don’t spend time getting a better “end result” by sacrificing the learning process. Teach students the “why” for what they are doing. If that means you only mention CSS, show how it works, but not require the students to write any, so be it. I know technology can be extremely difficult to teach. Many students have a hard time grasping concepts. Technology professions, such as website designers, usually rely heavily on self-taught technologies. Traditional classes usually aren’t well adapt to keeping up with the content.

What Should Professors Do?

Don’t worry about crazy backgrounds, changing colors, and different font sizes. Focus on good, validated content. If its super simple, thats fine. You can tell your students if they are interested in learning more, point them to websites like W3Schools.

Also, I would say a large portion of the blame lies on the Book Publishers. I would assume many of these teachers and professors are teaching general information systems classes. They aren’t experienced web designers and just teach what is in the books. The fact that students are buying brand new books with outdated content is rediculous. Maybe 2-3 years out of date, but not a decade.

I don’t know what else, other then there is nothing that drives me crazy more than sitting in a class learning something the wrong way.

Related posts:

1. CSS – ID vs Class
2. PHP 6 Books – Did I Miss Something?
3. iPhone SDK – Learning the Basics by Removing the Touch

Learning anything new can be challenging, so I thought I would share my resources on learning jQuery. First off you need to check out jQuery’s tutorial section. I recommend just about every tutorial on there, and each will help you understand jQuery a little better. Once you’ve gone through the tutorials on how jQuery, sit down and make something meaningful with it. Don’t just follow the tutorials, but actually try to use it in your next project. Soon you’ll see how amazing jQuery can be. Last but not least, my absolute favorite quick reference is Visual jQuery by Remy Sharp & Yehuda Katz. When ever I need to look up quickly how to do something, I use can find it within seconds on Visual jQuery.

I’m going to try to post at least one tip or trick with jQuery every week, not only to help me keep a history of my tricks, but to help others solve common problems. If anyone has any questions, please feel free to leave a comment and I’d be more than happy to answer any questions.

Related posts:

1. ASP .NET 2.0, GridViews, HyperLinkField, and JavaScript
2. iPhone Web Development: Controlling the viewport via Javascript
3. iPhone SDK DNA – A Frustrating Issue