StephanieFleeting Epiphanies

realizations on life, the web, and everything

Conferences - In this economy?

Posted Tuesday, April 21, 2009 9:08:09 PM by Stephanie

Hey, the economy sucks and everybody's scared. What better time to work on your education, up your web skills and earn a little extra job security? There are several upcoming conference opportunities I want to bring to your attention -- as well as reasons you might want to do it at all. If you're smart about it, you can streamline costs and make it an affordable trip.

Are conferences really worth it?

For my business, conferences have been invaluable -- and I'm referring to the time before I spoke at them. Not only do you have the ability to learn about many different subjects all in one place, but the networking can also be a key reason to attend. I can trace most of the original opportunities I've had in this industry back to the very first conference I attended -- TODCon (which sadly isn't happening this year). I recently ran into some old pictures from that conference and it occurred to me just how much of my web beginnings started there. At TODCon, I met Matt Brown who was then the Community Manager at Macromedia. Matt bugged, errr, I mean encouraged me until I agreed to write an article for the DevNet Center (yes, my first, and I was petrified). I also met Angela Buraligia, Dan Short and Massimo Foti -- and those relationships led to my first paper publishing experience (Chapter One of Dreamweaver MX 2004 Magic by New Riders). Most importantly, I met Ray West who encouraged me to join the team who was starting Community MX, prodded me into my first speaking gig (a later TODCon) and has been one of my best friends and supporters. In fact, those are just the high notes of that conference. I also met people there that have remained close friends and business contacts. People who have introduced me in turn to other people who became sub-contractors and go-to folks for various solutions in my business. In my opinion, unless you know it all (haha), you can't afford not to go. You can't afford not to give yourself the opportunity for growth and connection "in this economy."

I see the value, but I can't afford it right now.

  • Economize by finding a conference close enough to drive to or one where the flight costs are lower.
  • Save money by finding a roommate to share hotel costs.
  • Take advantage of early bird and discount pricing.
  • If your boss won't pay for the whole excursion this year, perhaps she'll split the cost with you. Negotiate. Show her the value you can bring back to your job.

(And remember, everything associated with the conference you choose is likely tax-deductible.)

OK, I'm convinced. What's coming up?

Glad you asked! There are several conferences coming up in the next couple months that are not to be missed (and yes, I'll be at all of them ;)). In chronological order, here they are:

  • Voices that Matter - San Franciso, CA

    Voices that Matter (VTM) is a conference put on by Pearson (parent company of Peachpit and New Riders among other imprints) in San Fransisco. It's next week - April 27-29, so you need to act on this one quickly! The two tracks in this conference pull together many of your favorite authors. The sessions allow for question time, but one of the beauties of this intimate conference is it's very easy to have lunch with one of the speaker/authors or to catch them in the hall to talk. Take advantage of these speakers -- in a good way -- they don't just write your books. Many are designers, developers and Web consultants just like you. Tap their brains while they're available to you in person!

  • WebDU - Sydney, Australia

    No, I won't be at this one. My son has finals this week and I couldn't chance being on the road while he didn't get out of bed. LOL But Greg and many others will be there. I was at WebDU last year and it's a really well-run conference with great speakers. If you're on that Southern continent, make a dash for it. May 21-22 in Sydney. Lovely, not too cold, good speakers. :)

  • Spring <br /> Conference - Athens, OH

    The Spring <br /> Conference (SBC) is held on the beautiful campus of Ohio University in Athens, Ohio. It's a very inexpensive one day conference on June 9th. This conference includes Eric Meyer talking about (hold your breath) javascript! After watching Eric's mad CSS skills many times, I can't wait to see this!

  • InControl Conference - Cincinnati, OH

    InControl is put on by AIGA Cincinnati in, you guessed it, Cincinnati, OH on June 11 & 12. There's one track each day and I have to say, they've really gone all out to pull together a great speaker line up. If you register before April 23, you'll be entered into a drawing for Adobe CS4 Master Collection. That alone could make your trip worthwhile. :) Early bird pricing is available until May 11th, saving you $100, with even more savings for AIGA members.

  • Web Design World - Seattle, WA

    Web Design World brings a great group of speakers together for three days in what we hope will be a sunny time in Seattle. ;) Sign up by June 3 for a $200 discount. If you use my code - S9W12 - you'll save $395 off the standard price of the three-day Web Design World Passport - and I'll donate $100 to Habitat for Humanity. Everyone wins there. :)

So there you are. Four chances for you to bring some mad web skillz back to your business or our boss. And "in this economy" how can you afford not to?

Category tags: Accessibility, Adobe, CSS, Dreamweaver, Education

Font Sizing: em, pixel, point, percent and keywords

Posted Thursday, February 12, 2009 6:38:40 PM by Stephanie

When I write and speak, I often talk about using em units to size layouts giving the user the ability to resize the entire layout if they change their font size. In fact, chapter 5 of the book I co-authored with Greg Rewis is an entire project based on em units. Until all browsers zoom, this is my personal preferred method. My personal site is built using this method.

Last year, I wrote a blog post about Scaling fonts using em units and how I saw that affecting different types of users. A comment was made recently, and I wanted to address it in a new post while sharing a couple charts I made for myself. The comment said:

"A simple calculation as 1pt equals 1px at 72dpi (MAC) so:
1pt equals 1.33px at 96dpi (PC}
12px (pt) font in MAC is therefore 16px in a 96dpi PC.
If you have a parent element with a 11 pt font then to convert px dimensions to em you divide them by 14.63 (11pt x1.33) Dont interchange pt and px on a PC."

First I'd like to address using points for the screen on either a Mac or a PC. Simply don't do it. Ever. Points are for print. I regularly use points (as well as inches and serif fonts) when I create a print style sheet. I updated an article recently called From screen to print: Creating a print CSS in Dreamweaver published both at Community MX and Adobe's Devnet Center. One thing it addresses is how to use pts for print style sheets.

Until 2000, Macs used a 12px browser default and PCs used a 16px default. We got used to seeing different things (and due to the 72dpi vs 96dpi difference, it was further compounded if points were defined). I'm under the impression (but can't find anything quickly to back it up) that the 72/96dpi issue is no longer a problem. If anyone can point me to a recent reference confirming or denying that, I'd love it. Either way, all current browsers on both platforms now use 16px as their font-size default.

A while back, I was messing around for my own entertainment (you know, partying on a Saturday night or something) and created a couple of charts that might be helpful. The first is font size equivalencies. This chart shows that setting the font to 100%, 1em, 16px, 12pt and medium are equivalent in the same font. It also shows how font sizes can vary greatly from font to font.

The second chart was an exercise showing divs sized using em-units with a variety of font sizing. The red line down the right side is a graphic at 800px. The body's font size is set to 100% (16px). The first three divs show the default font sizing with the divs set to three different widths. The second section shows all divs set to 50em with the font-sizing (placed on the div) set to different units. It's an interesting exercise if you'd like to more clearly understand the effect of font sizes on the size of an em unit.

The interesting thing to me in the second chart, based on the gentleman's comment in my blog, was that viewing this chart on both a mac and a pc the lengths of the divs are the same. Yes, there's a very slight difference in actual font size on the PC - two of the lines of text slightly wrap to the next line - but the 50em width of the div is still exact on both platforms. Are we really that different anymore?

Category tags: Accessibility, CSS, Designing for the Web, Dreamweaver

Mastering CSS with Dreamweaver CS4 Released!

Posted Wednesday, January 07, 2009 7:20:23 PM by Stephanie

Though Greg Rewis and my updated book, Mastering CSS with Dreamweaver CS4, was listed on most sites with a February 9th release date, it's available now online! Since we were so late with the last one, we thought being early with this one might make up for it. Well, that's not entirely true. I think our publisher thought we'd be just as late this time and put a later date on it. Either way, the release date snuck up on me and since I'd promised to share it I wanted to give you a quick announcement here.

Mastering CSS with Dreamweaver CS4 has been updated for the completely overhauled interface in Dreamweaver CS4 and as such all screen shots and verbiage relating to that is updated. The new workflows in Dreamweaver CS4 are also introduced throughout the updated book. One change in Dreamweaver greatly affected the rewrite. Removing Layout mode took away the tool we showed to collapse tables and convert a table-based site. For that reason, principles taught in chapter 3 were integrated into chapter 4 (and I personally like chapter 4 better now -- the flow was completely rewritten). Throughout each project, we changed a few of the CSS techniques (as well as adding a couple new ones) as well -- isn't there always another way to do it? :)

Lastly, we integrated any errata found in the last book as well as utilizing some good suggestions made by reviewers. One of those was to have partial project builds available throughout each chapter so that users can check their work without having to go back to the beginning if they make a mistake. I think this makes the book even easier to work with than before. As always, keep your eye on the errata page (we do wish we were perfect) as we do keep it updated. More information on both books is available at the book site. If you have any questions, feel free to use the contact form and we'll get back to you as soon as we can. Happy coding!

Category tags: Accessibility, Adobe, CSS, Dreamweaver

Adobe MAX - Upcoming!

Posted Thursday, November 13, 2008 7:51:12 PM by Stephanie

Yes, I've been meaning to put this up for quite some time but my schedule of late has made it tough to get much blog writing done. Before Adobe MAX starts, while people are deciding on their sessions, I wanted to make a quick post with more info about my sessions and other MAX happenings. Here they are in order of occurrence:

Greg Rewis (my co-author) and his fellow CS4 Web Tools evangelists will be doing a full day session on Sunday called, Designing Across Media with Adobe Creative Suite 4. This was an extremely popular session last year. The evangelists show how to use the tools in an integrated manor and really get the most out of then to benefit your web projects. Believe me, after writing a book with one of them, I can testify that they know stuff about these tools we never even thought of. ;) You must sign up for this in advance, so act quickly.

Monday, Greg Rewis and I will be doing a book signing at noon. Yes, the CS4 version of our book won't be out till December, but you can pre-order both the book and the upcoming videos. (I've done one for Pearson/Peachpit about Structure and Presentation -- along with CSS tips and tricks. Greg's upcoming video is about Behavior -- Ajax, Spry, Jquery.) Our current CS3 flavored book will be available in real time -- and we're happy to put our scribbles on it for you (or bring it from home if you already own it). If you're sticking with CS3 for a while, that's your best bet. If you'll be upgrading quickly to CS4 (or already have), come pre-order or just meet us. It's always fun to put faces and names together.

Following the book signing, at 2pm, I'll be presenting Standards-Based Solutions to Common Web Design Challenges in Moscone West 2008. This is an intermediate to advanced session and is best for people who already understand the basics of CSS. I will not be reviewing the box model, floating or positioning. We're going to get right into the down and dirty demos. Since my job entails either coding or teaching other people to code, I'll be sharing every day CSS challenges I'm presented with and techniques I commonly use to deal with them. There are many ways to make your CSS more succinct and powerful. This session is filling up fast, so you'll want to log in to the Scheduler and reserve your place soon.

On Wednesday, also at 2pm, I'll present a session called Common Mistakes Print Designers Make on the Web in Moscone West 2011. Don't let the title of this one fool you -- it's not just for print designers. This session covers the ten most common mistakes I see when people are learning to use CSS and web design. This applies, of course, to print people making the transition -- but many of these issues are universal. I promise I did many of these things myself at the beginning. We'll take a look at the common misconception or problem and then the "best practices" way to do it. This session is appropriate for beginner to intermediate levels.

If you've been to MAX before, you know it's a huge conference. Please don't be shy. Come grab me in the hall and introduce yourself. I'm really tall and hard to miss. ;) Feel free to discuss with me the challenges your business is facing. I'm always happy to help out where I can. I look forward to meeting you there!

Category tags: Adobe, Adobe News, CSS, Dreamweaver, Fireworks, Flash

<head> Conference, MAX and a New Book!

Posted Wednesday, October 22, 2008 3:29:40 AM by Stephanie

There are several exciting, upcoming events I've been meaning to blog about but... life's been wild. This is my first blog post since making the move to Phoenix, Arizona, rewriting Mastering CSS with Dreamweaver CS4, and shooting a video for Pearson on CSS and Dreamweaver. I'll blog again when those two items have release dates. It's safe to say I've been scarce everywhere--except twitter (where I'm stefsull).

Before I miss the opportunity, I'd like to mention that the first, virtual, world-wide conference is this weekend! The <head> conference, created by my friend Aral Balkan boasts an amazing line up of speakers. It would be hard to get this many people from this many places into, well, one place. Some speakers will be speaking live from hubs (like London) and the rest of us will be coming to you live from our own offices or, since it's the weekend, our homes. :) There are three virtual conference rooms using Adobe Connect Pro (viewed directly in your browser), chat for participants to get to know each other, a room (and events) in Second Life and other creative ways to allow attendees to interact virtually. Since you can't be in all three rooms at once (just like a regular conference), you'll have a year to view any of the presentations you like from the library. The only difference is that you can't ask questions in real time. It's quite affordable and won't cost you anything for travel. Just think of all the emissions you'll save -- a truly green conference. I'll present a session Saturday, October 25, at 20:00 - 20:45 (UTC) (that's 1pm in Arizona) called Content is for Everyone. Virtually come out and be part of history in the making!

A conference "in real life" you may want to attend is Adobe MAX. MAX is one of the largest conferences of the year. But don't be afraid, there are tons of small to moderate rooms and the geeks are friendly--particularly at the parties. :) With the recent launch of CS4, you'll have the opportunity to learn a lot about the new products. There are also sessions on mobile, CSS, interaction design and other more general subjects. I'll be presenting a session on Monday, Nov 17th called, Standards-Based Solutions to Common Web Design Challenges. On Wednesday, I'll present another session called, Common Mistakes Print Designers Make on the Web. This session is particularly good for people being moved from print, into the web space, but the content is also pertinent for people starting out that need to grasp CSS and the fluidity of the web. Be sure to sign up for these soon though -- they're filling up fast.

Whether virtually at <head> Conference or in real life at Adobe MAX, be sure to come up and say hello!

Category tags: Accessibility, Adobe, CSS, Dreamweaver

When the Legend Won't Wrap - Revisited for Firefox 3

Posted Friday, July 04, 2008 12:59:17 PM by Stephanie

Back in November, I wrote a blog post explaining a fix for the poor and varied rendering you will get with a wordy legend that forces its containing fieldset to be wider than you've specified. You can read more details in the previous post. In a nutshell, it involves placing a span within the legend. Since a span (and a legend) are inline, the span won't render the width until you change its display to block. The styling is then applied using a descendent selector - legend span. (The span within the legend technique is demonstrated here.)

And all was well in the world of cross browser fixes -- until the birth of Firefox 3. The changes made to FFOX 3 mean the span technique now fails in that browser. (Thanks to Atus for the heads up.) The behavior of FFOX 3 continues to be a legend that doesn't wrap. However, instead of making the fieldset wider, the legend now protrudes out the right side of the fieldset. (If you view the file linked above with FFOX3, you'll see that the span does render at the width specified in the selector - but the content within continues and protrudes to the right, until it ends. Unsightly to say the least.)

Just one more declaration

After filing a bug at Bugzilla, I was told that the changes made were to keep the original rendering for those that prefer it, but to now offer a fix (without the span technique) for those that desire more control. Certainly progress is a good thing. Using the white-space:normal declaration within the legend rule causes FFOX3 to actually wrap the text. So YAY for that! (Thanks a bunch, Philippe.) However, this of course, does nothing to FFOX2 or any other browser with the non-wrapping issue. So BOO for that.

If you want to support browsers with the non-wrapping issue, you'll still need to add the span within the legend. However, to support FFOX3, you'll need to add the white-space property to either the legend or legend span selector. In my testing, both will work. This fix for FFOX3 does not affect any other browser negatively - but it doesn't fix any of them either. (View the page with the white-space in the span selector. View the page with the white-space in the legend selector.)

To me, the bigger conversation is, why the blank can't we get some form rendering that actually makes it easier to more consistently mark up and render forms? I'm sure someone can tell me where my thinking is going wrong -- but a legend is an inline element. An inline element doesn't accept a width. I'm good with that. But when paired with the fieldset, it's parent that does have a width, why is it not contained? Why in some browsers does it force the fieldset wider than we've specified. I don't think inline elements should have that much power (especially since it must not be white-space:nowrap declaration causing the increased width for the other browsers since the FFOX3 white-space: normal fix doesn't work for them)! And why, in FFOX3, does the content in the span (contained in the legend) not react to the styling given to the legend span selector? The span itself does, but the text within runs out the right side of it. I know someone will say because in the Moz style sheet, the legend is set to white-space:nowrap. I see that, but WHY was that the fix/change given when none of the other browsers seem to be handling it in that way? Inquiring minds want to know! (I mean, when exactly would you want the legend to overrun the fieldset and not wrap? And couldn't you just add white-space:nowrap when you did?)

(Update) Philippe and Boris essentially explain it this way: A legend is not actually an inline element. A fieldset/legend pair are treated as replaced elements. Just like the form controls they contain (Boris explained that the reason has to do with the way borders have to work). Thus, they can't really be described with CSS. Philippe pointed out that in the conformance section of the specs, it says, "CSS 2.1 does not define which properties apply to form controls and frames, or how CSS can be used to style them. User agents may apply CSS properties to these elements. Authors are recommended to treat such support as experimental. A future level of CSS may specify this further." So I suppose what it boils down to is - this is what we've got for now. :)

For those wondering and dreaming of the great beyond - thinking about what's on the horizon with Internet Explorer 8 (currently in the beta), it's fine with the "span technique" and it's not bothered by the added declaration of white-space:normal. However, unlike IE6 and IE7, it's placing the legend down, below the top border of the fieldset - instead of halfway over it like the other browsers do. But it's still in beta. I'll worry about that little issue, if it still remains, later.

Category tags: Accessibility, CSS, Dreamweaver, Usability

Designers AND Developers...

Posted Thursday, June 26, 2008 10:26:26 PM by Stephanie

So there's been a pretty decent sized debate going on through the webosphere. Designers should know how to code. Developers should know how to design (or shouldn't need to design). I considered weighing in on the 37 Signals blog -- but the comments were already closed. Call me slow (yes, I've been on the road, had a birthday, and had my mom visiting with her birthday. ;). You'd be right. Oh well.

I do have one thing to say. Well, I probably have more than one, but I'll start with that. I recently did a couple sessions at the HOW design conference. One was on "Mistakes Print Designers Make on the Web." Yes, I definitely agree there are common mistakes from the print paradigm. Many times I can tell how people's brains work when they ask for help on lists. I can tell they don't understand the web or come from a print background. However, that does NOT mean I think they are useless. Do I think they should know how the web works? That the web is a fluid, not static medium? Am I willing to help them learn (if they're going to be in my "designer stable")? He77s yea. I am willing. Because I think they are very important to our industry.

Do I think that coders should not use a graphic medium. Lord no. "Designing" (or so they call it) using the constraints of "what's easy to do with code" is really a sad, and less attractive, way to work. I say bring on the tough comps -- we'll work it out, or we'll ask for a small revision. We'll come up with a way to make it work accessibly. A way you might not have thought of before -- but a way that is equally lovely. But lord knows I think you design types are valuable. I quit designing years ago. Why? I'm a tweakaholic. I make more money hiring people that are more creative, better trained and faster. My clients save money with those same people. The designers are freed to be their creative selves -- but yes, it's nice for me if they understand the web. It's nice if I don't have to lead, guide, explain. That said, because I know my craft, I'm willing to help them at the beginning. And no, I don't expect them to know how to code. Just to have an overall understanding that the web is not print. Everything will not have line breaks where they want it to. It won't be glued down. But I, with my experience, will guide them through what can and can't be done. In time, they will be one of my favorite designers. They will understand, but they will send it to me to code. Because that's what I do best.

Do you create the site with HTML? Do you create it without a graphic program? Well, gawd bless you. But I'd venture to say your designs are likely boring. I think 37 signals rawks in usability. I have no bad words to say about them. But what I'm seeing from their recent blog posts in this area is just silly. And no, I've never seen a super creative design come out of that group (at least that I KNEW was from them. I'm certainly not barring it).

Personally, I welcome the challenge of the design minds. I find that if I create the site IN HTML, I do what's easiest to do with HTML/CSS. I don't challenge my abilities. I don't push the envelope.

Yes, the site is about the content -- the message. People are generally looking for information on the web. I teach that all the time all over the world. But there's another side of it. There's the package that same content comes in. Is it readable and usable? Good. That's important. Does it work when the text size is large. Does it work with assistive technology. Excellent. Accessibility is even more important. But goodness knows that a majority of your readers are going to be influenced by what it looks like. Yes, even the colors. Study color psychology. Look at eye patterns. Immerse yourself in usability and interaction. Heck, watch your mom try to navigate things -- I just did. It's eye opening. How it looks is important. Sorry, that's just the facts. Why do you think company's spend so much on their Superbowl commercials?

And let's not leave out how you interact with the database -- how well that content dynamically appears. How much sense it makes. How usable the interface is. There are many things to think about. The root of my story and my point is -- it's the rare individual that has all the strengths needed for one web site. It's the team that matters. Should everyone have a basic understanding of the other member's jobs? How they work? What they can accomplish. Oh yes. Absolutely. Should they be able to do them? That's just ludicrous. Absolutely not. Surround yourself with people more brilliant than yourself. Always learn. Work hard. You, and those around you, will be enormously successful.

Ciao.

Category tags: Accessibility, CSS, Designing for the Web, Dreamweaver, Fireworks, Flash, Graphics, Mobile, Photoshop, Usability

The New, Confusing, Online Social World

Posted Monday, May 12, 2008 10:36:14 PM by Stephanie

I'm not one to put a lot of personal information on my blog. I don't have problem with people that do it, it's just not my personal style. When I was first on the web, it took about 3 or 4 years before you could find a picture of me anywhere (as a woman, I needed brain respect first). I was one of the last people I know to join Facebook (never have had a Myspace page). Don't get me wrong, I love the web, but I've just never found the need to expose a lot of personal information there.

Enter our new, confusing age

I've posted here about Twitter. And I do love it for a variety of reasons. I post more information there than I do in other places. Oddly, it feels like I'm talking to my friends--in some giant, controlled IM. Of course, I know that since I don't protect my tweets, anyone that follows me, google, and the world can read them. Still...

Facebook however, has turned out to be another animal entirely. After joining for an orchestrated birthday prank on a friend, I stayed and connected with a lot of folks--from real life friends to web friends I've not yet met in real life (IRL). In the past few months in fact, I've connected with several old friends, from grade school to college. It's fun to see what they're doing now.

Facebook is a Tattler!

What I and others seem to forget though, is that when you change anything on Facebook, it is broadcast to all your friends. Relationship status is a perfect example. When Greg and I got engaged via Twitter in March, most of my online friends knew what was going on. But my real life friends, the ones that I see at volleyball or on the weekends (as if I had weekends) are also connected to me on Facebook. Since I was headed out of town, I didn't have time to let most of them know, but intended to when I returned. Unthinkingly, I changed my Facebook relationship status to engaged instead of, in a relationship. Duh. Instantly, I started getting wall posts and emails -- Why didn't you TELL me!!? Ooops.

I'd say, in fact, that I know more about some of my friends from Facebook than I do from real life. Casual acquaintances, that I connect to there, show things like their new tattoo. They probably wouldn't have displayed it to me if we met on the street. Maybe they post pictures of their wild beer pong bachelor party. Who knew? People obviously feel safer in online social networks than they do in personal interaction.

Tonight I was reminded of just how far reaching this phenomenon is. I went to Facebook to join a group I was invited to by email. Somehow I followed a rabbit path ending at my younger son's girlfriend's page. I noticed she is now listed as single. Not surprisingly, so is he. We live in the same house. We talk a lot. I even knew he had told her we were moving at the end of the summer. But he omitted this one small detail about the outcome. Weird world where you learn of things in your own house through Facebook, eh? Maybe that's why my nineteen year old refuses to be my friend there, eh?

So how do you know WHO to friend?

This question has arisen in my own mind several times recently. I used to have much stricter rules for who I'd friend (though admittedly, not as strict as those that will only friend someone they've met IRL). On Twitter, if someone's witty or relevant, or knows lots of my friends, I'll follow for a while. But I try to keep the numbers I follow within reason so that I can actually pay attention. About 250 is the max I can comprehend. On Facebook, I tend to want to actually know the person somehow. I think it's because Facebook "feels more locked." I actually put my real email address there (though I don't list my phone number like some do).

But now there's BrightKite. BrightKite tells people your exact location (or a close proximity if you don't mark them as a trusted friend). So now I'm rather befuddled as to who to accept as a friend or not. When people ask to be friends, I (probably just me) feel bad to decline their friendship. I mean how do you meet new people if you decline anyone you don't know. But again, as a woman, how do you know if there are any "unsafe" people you're connecting with. This new, online community is a new and different place to navigate--that much is certain. What do you think?

Category tags: Dreamweaver, On the Personal Side, Using the Web

Web Design World

Posted Monday, May 05, 2008 2:55:12 AM by Stephanie

Tomorrow, I get on a plane to Web Design World Chicago. It looks like it's going to be a great conference. If you're in the area, come on over and join in the geek fun. Jeff Veen, Jared Spool, Dan Rubin, Joe Marini, Greg Rewis and more!

Then it's on to HOW Design in Boston followed by Multi-Mania in Brussels, Belgium, TODCon in Orlando and finally Web Down Under in Sydney. The organizers have worked hard, and done a great job on all these conferences so be sure to come to the one closest to you. You will not regret it. Promise! Grab me in the hall if you're there. I love to meet people. :)

Category tags: CSS, Designing for the Web, Dreamweaver

Mastering CSS with Dreamweaver CS3

Posted Sunday, April 20, 2008 12:10:57 PM by Stephanie

Mastering CSS with Dreamweaver CS3, the book I co-wrote with Greg Rewis, is finally out. Yes, I know, it was long overdue. I took a picture of it when I finally got to see it at Greg's house (no, my copies haven't arrived yet), so if you'll excuse the exhausted, traipsing around Phoenix all day look on my face, you can see me with the book on Flickr.

Greg and I didn't want to create the same CSS or Dreamweaver book that others have written. Those books are published, are very useful, and if that's what you need buy the appropriate book. Our goal instead was to show how to create standards-based, accessible web layouts using Dreamweaver. It's a myth that you have to hand code to be a real web developer. Is it best to know how to semantically mark up your page? Yes, absolutely. This is a craft and you should know as much as you can about it. Can you hand code within the Dreamweaver environment? Of course you can -- I do it all the time. Do you have to? Absolutely not. There are tools within Dreamweaver that make your work faster, and more effective whether you're working in code or design view. If you haven't looked at Dreamweaver since about MX or so, it's come a long way baby!

Chapter 1 is an overall review of important CSS principles that you must understand to create sturdy CSS-based layouts. The project in chapter 3 takes a lovely, nested table-based layout and transforms it to a CSS layout. Each of the remaining four chapters are a full project based on the CSS layouts I wrote for Dreamweaver CS3 - Fixed, Liquid, Elastic and Hybrid. Chapter 6 also uses Spry 1.6 (an upgrade from Adobe Labs for the Spry 1.4 version that ships with Dreamweaver CS3) and takes you through the process of using HTML data sets to create an accessible Ajax gallery -- unobtrusive javascript and all. We hope the projects will feel like we're working with you as your personal trainer.

The book is full of CSS tips and techniques. It also teaches a variety of ways to use Dreamweaver CS3. Both Fireworks and Photoshop comps are used and the integration of those programs with Dreamweaver is illustrated.

Our hope is that the techniques taught in the book will make your beautiful designs more solid as well as making you more comfortable with the program used by so many web departments. I use Dreamweaver every day and even I learned some new Dreamweaver tips from Greg! Here's what one reader had to say:

"The first chapter alone was worth it to me. I have a lot of CSS books, tutorial sites, etc. Maybe I'm more familiar after working with it for a while, but for me, this book is as clear as a bell, informative as a book ought to be, and motivational as a hand grenade... made me want to jump up and run like hell... to Dreamweaver to try stuff out."

C. Lindauer

Some of you may have also heard a rumor about the other partnership that came out of writing this book. And to that I say, yes, it's true. Greg and I were engaged (via Twitter) in early March. You can think of the book as our baby. ;)

Category tags: Adobe, CSS, Dreamweaver, Fireworks, JavaScript, Photoshop

An Event Apart, SXSWi, NAB, Web Design World, HOW Design, and more...

Posted Monday, March 03, 2008 10:28:28 PM by Stephanie

Coming up in the next couple months, I'll be at several conferences where I'd love to meet you! This week, Austin beckons! At South by Southwest Interactive, I'll be doing three panels. On Saturday, What Women Need to Succeed will explore women in technology--what it takes to make your mark and succeed in the tech world we love. Are women really different? On Sunday, I'll do a panel with Greg Rewis of Adobe on Responsible Web Design. And finally, on Monday afternoon, we'll discuss where WaSP has been and where it's going in Don't Break the Web.

On April 14th, I'll be presenting a three hour session at the National Association of Broadcasters (NAB) in Las Vegas, In-Depth: Using New Media with Adobe Dreamweaver.

On April 25th, In the great city of New Orleans (right before the first weekend of the Jazz Fest!), An Event Apart will take place. Jeffery Zeldman and Eric Meyer invite you to come join us. I'll be presenting Design Challenges, Standards Solutions. Practical, real-world solutions to common problems. If you mention my code -AEASULL- you'll get a $50 discount. Go for it, it will be a great conference! And plan to stay for JazzFest on the weekend.

On May 5-7, Web Design World Chicago will be in the Windy city. I'm presenting two CSS/Dreamweaver session there: CSS-Based Layouts with Dreamweaver CS3 and CSS Problem Solving with Dreamweaver CS3. You can receive $300 off the price by using the code - SPSUL - when you register!

May 18 & 19, I'll present two sessions at HOW Design Conference. A three hour session, Styling With CSS in DW CS3 will be on Sunday. And Common Mistakes Print Designers Make on the Web will be on Monday followed by a book signing. Yes, Mastering CSS with Dreamweaver CS3 will be released -- finally -- on April 11th! w00t! (Be sure to sign up soon since the early bird discount only lasts till March 28th!)

In Orlando in June, TODCon returns, but we'll talk about that more soon. Come see me, introduce yourself, enjoy all the speakers at the above conferences. Meet you there!

Category tags: Adobe, CSS, Dreamweaver

Twitter - A New User's Guide

Posted Thursday, February 07, 2008 1:59:23 PM by Stephanie

So maybe you've never heard of twitter, or maybe it's old news but you thought it seemed silly. That's what happened to me at first as well. A friend told me to check it out (with no instructions), I took a look at the home page, wondered why I cared what all those people I didn't know were doing right now, and closed it. For those that haven't heard of it, twitter is a social networking tool that requires you to answer one simple question - "What are you doing?" - in 140 characters or less. And I agree, it does sound rather silly every time I try to explain it. However, I've found Twitter to be my favorite social tool. I've basically turned off IM (which can be an extreme time sink for me when friends need CSS help!), but I can still keep up with people I care about.

In light of the confusion of new people looking at the app, I thought I'd write a few tips I've found along the way that make it work for me.

A Quick Twitter Primer

  1. Your initial job is to find people you want to follow. You follow them by viewing their profile page and clicking "Follow" under their main icon. These are your friends. (They're called "Following" in your Stats sidebar and their icon will now appear in your sidebar.) There are a variety of ways to do this. Most obviously, start with the people you know. Then, check their friends and see who you know, or know of. Don't worry about whether they know you, it doesn't matter. They may not follow you back for now. Just find interesting people you'd like to know about, know better, or simply eavesdrop on. Heh. Once you've pillaged and plundered your friend's lists, use the search feature for other people you know. If you're really outgoing, you can search for people in your geographical area and start getting to know people you can actually get to know in real life! Wow. This is where twitter can become a great local networking tool. You can even watch the main twitter page for random people you might want to follow. I don't personally find this to be very useful with all the various languages represented.
  2. After adding some friends, you'll likely end up with a few that add you as well. Those people will actually "hear" what you tweet (a tweet is slang for your 140 character post--though you'll hear it called many different things). The tweets of the people you follow will be on your home page when you're logged in. Your tweets will be mixed in chronological order among them. If you're on someone else's profile page, you'll see everything they've written. If you'd like to see the interaction with their friends, click on their With Others tab.
  3. The people that don't follow you will not see what you tweet. But there's a workaround if you'd really like to interact with them (that is, if they're paying attention). Using the @ symbol and their username (for me, that would start with @stefsull), your tweet to them will show up in their Replies tab. But though it once worked in a different way, currently, the @stefsull must be the first thing in your tweet. Putting it somewhere in the message will not make it show up in their Replies pane. I try to check my Replies pane at least once a day to see what I might have missed (since I don't sit and read twitter all day). Even if I don't know someone, intelligent or witty comments may cause me to add them. :)
  4. Once you're set up in this way, just start twittering. Periodically through the day, leave a tweet. Doesn't matter if you only have a couple followers to start with--having a higher number of updates will likely get more people that find you in some way. And the numbers grow over time.
  5. When you follow people and they follow you, you have the ability to send Direct Messages (DM). These are messages that no one else sees and can be set to be sent to your email.
  6. Unless you set your tweets to private, anyone can read them, including googlebots which will kindly add you to the index. If you choose private tweeting, you will have to allow people to follow you. I don't do this, but I know some people, especially those who work at larger companies, enjoy that privacy.
  7. Be sure to check out your settings. You can customize your profile page, add your icon, set privacy, add twitter to your mobile device or IM client, choose how you're notified of DMs, etc.
  8. And if you're an organized person, you can click the little star icon at the end of any post and add it to your favorites. So if someone posts a URL you don't want to forget, or simply says something that makes you giggle uncontrollably, click the star so you can find it again.

What's the Point Really?

Well, maybe there's not one for you. But for me, a person who works from a home office, travels all over the world meeting people, works remotely with a variety of people and companies, it's an amazing tool. I began by adding anyone I knew of in the industry. Many of them I'd never met and perhaps hadn't even conversed with by email. But reading my page periodically, I began to feel I knew something of these people. I learned who had wicked wit, who had spouses and kids, when they were sick, when they had great accomplishments, when something traumatic happened. Yes, you can argue I don't really know them. And you're right. We haven't sat over coffee and shared our deepest feelings. But I certainly know them more than I did, or could have. When I do get an opportunity to meet them later, at a conference, there isn't that uncomfortable feeling of meeting a person you've only heard of. For me, feeling like I know them allows me to be immediately comfortable, relax, discuss, hang out. For those I have met, I don't lose track. I can keep up with their life until I see them again in the future.

There are companies and organizations using twitter to send out news and notifications. You can even keep up with politics, weather, news feeds, etc. Twitter is a tool. Use it as you will. But for me, the part that matters is it keeps me nicely connected with the little people inside my computer--my virtual, and sometimes real, internet buds.

Category tags: Dreamweaver, On the Personal Side, Using the Web

Scaling Fonts using em units

Posted Tuesday, February 05, 2008 11:05:33 AM by Stephanie

As I train all over the world, one of the issues I try to spend a good deal of time on is helping people to understand the malleable em unit. And how to utilize it for good and not evil. :)

Anyone who knows me knows my burden for accessibility and the em unit is one of the most accessible ways to design. In fact, Greg and I spend a chapter on it in our upcoming book, so I won't go into a lot of detail here. But today, I stumbled upon a really great font-size calculator created by James Whittaker. If you'd rather keep it handy on your desktop, he also created it as an Adobe AIR application.

In reading the comments of his blog post, I saw a couple people questioning the reasoning behind decreasing the default text size of a user at all. And I began to answer those questions with my own opinions. About three paragraphs into my reply, it occurred to me that I was monopolizing James' comments and it was best done as a blog post of my own (please read James' post for the full story).

For the quick back story - the default text size of modern browsers is 16px (that would equal 1em). It's quite common to choose a 12px font-size which is 75% of the default sizing (.75em), as the base font size for elements on your page. (I'm not going to address here whether that should be placed on the body, or on individual elements.) The people responding in the comments were questioning whether we should adjust the base font size (something I've heard for years) since we're taking away "the experience the user expected." My reasoning follows...

The Three Groups of Users

I likely don't have to remind you that back in the days of tag soup, 12px was a very common size to set type to on the web. In fact, even after many developers started controlling their typography with CSS, 12px was probably the most common size to set type to. So saying that people who leave their browser set to the default 16px size want that size is simply not true. They hardly know what it looks like since more often than not, it's overridden by other font sizing and styling anyway. And if they're like the average user, they don't have the inclination to change it either. They can see just fine, thank you. And they use most of their apps with the defaults they ship with (which explains why most of those same people use Internet Explorer -- since it ships with their operating system). They're not upset that you changed their text size since they get what they have always seen and have come to expect.

Now, in the case of a low-vision user, this is not the case. If someone struggles with the issue of low vision and surfs the web regularly, they've probably developed a method of dealing with it. Users with aging eyes, many times instead of changing the base font size of their browser, have simply learned to use menus or key commands to bump the text size up. They change to a more comfortable size when necessary, but sometimes are limited by the fact that the site breaks in some way as they increase their font size. With this 75%/.75em font calculation, they get what they expect because they surf at default sizes to begin with and they still have control as well as a usable site at any size they settle on.

There are the more extreme vision-impaired that change their default browser text to 32px, 45px, or whatever size works for them. If they've changed their default to 32px, using the 75%/.75em size puts them at 24px. They can still use a key command to increase the text size if necessary. They're probably the users that know the most about making your site work for them because they need it the most. I'm guessing a great deal of the web is difficult for them to use (with columns that have one or two words per line, overlapping, elements getting cut off, etc). So though they don't get their initial optimum size (which is, most probably a common occurrence for them since many sites still use pixel sizing), they have the tools to increase the size a bit more if it's necessary.

Now, do not misunderstand me and think that I'm saying that since the very low vision user is the only one that doesn't get what they initially expect, that they're not important. They are and all users and user agents should have access to the content. I'm simply saying that the first two groups, and even part of the third (for the not uncommon pixel-based sites) see what they expect to see. And with em-based layouts, they have the tools to change them--very smoothly giving them a great experience. That's all.

Category tags: Accessibility, CSS, Dreamweaver, Usability

Zooming Backgrounds in Internet Explorer 7

Posted Friday, November 30, 2007 2:47:24 AM by Stephanie

Recently, I did a presentation at Webmaster Jam Session in Dallas. In my session, one of the things I showed were some faux column techniques. During the QA at the end, a problem was brought up that I hadn't run into. The statement/question was that, evidently, there's a reported bug in Internet Explorer 7 (OMG, imagine!) where background images are not zoomed with the rest of the page when the Page > zoom accessibility feature is used. So when you use a faux column technique on your web page to create the illusion of equal columns, your text can end up not being on top of the column color you want. In some cases, this can lead to some pretty major legibility problems. The attendee stated they had given up faux columns due to this issue. Talk about depressing! I use faux columns so regularly -- I just couldn't imagine I had to give them up!

I talked to a couple Microsoft people and yes, they said it was a known bug, but I couldn't get any information about a possible fix time frame. Now that I have IE7 on my computer (yay, VMWare!), I had some time to have a look (well, I didn't really have time, but due to something I was working on and with my curiosity piqued, I did some testing). What I found was actually so much better than what I expected. I'm sharing it for those out there that may have the same misconception I did -- along with a couple of workarounds I've discovered.

  • Misconception: When using a background image to create the illusion of equal columns (faux columns), the background images don't zoom with the rest of the page causing legibility problems.
  • Fact: The problem actually only occurs when you put the faux column on the body element (depending on the situation, sometimes I do, sometimes I don't).

Two Solutions for IE7's Zooming Issues

  1. Place the faux column image on a div that wraps your entire page instead of the body element. This graphic will zoom with the rest of the page. Since many times, this is my preferred method, it's no wonder I hadn't run into the bug.
  2. If the graphic must be place on the body element, don't lose hope. I found a workaround there as well. If there is a background property declared on the HTML element, the background image on the body element will zoom. This seems to work on the HTML element with both background images and background colors (I tested using the short property name background with both). I removed the background color from the body element and placed it on the HTML element instead. In all major browsers I tested, it worked perfectly.
  3. Update! I should have thought of this when I was testing. This works where I've tested it (IE6, IE7, FFOX, Safari) but I've not been exhaustive across every browser due to other deadlines. It shouldn't cause any problems though and it gets Dreamweaver users around a rendering issue (where the color on the HTML element isn't rendered in the DW workspace). Keep the normal background properties on your body element -- background color and image. Simply add a background property on the HTML element as well:

    html { background: #FFF; }

    The body zoom still works properly in IE7, and due to the cascade, the html color is overridden by the background properties on the body selector. It's valid code. It's not a hack. It makes one of the handiest techniques in my arsenal work until IE7 is fixed (no bets on when that might be) and no harm is done. Only good. ;)

So don't give up hope on the fabulous faux column technique just because IE7 has some issues. Continue to use it all you need to -- just keep the above parameters in mind to decide what you need to do in your situation.

Category tags: Accessibility, CSS, Dreamweaver, Graphics

Blue Beanie Day - A Day for Web Standards

Posted Sunday, November 18, 2007 9:56:05 PM by Stephanie

Yes, it's rather embarrassing, but I admit it. I have a Facebook account. Though I resisted for a long time, I was recently convinced to join Facebook to participate in a birthday prank for a friend. Oh well, another social time sink.

On Facebook today, I was invited to join a group called "Blue Beanie Day." November 26th has been named Blue Beanie Day, in honor of Jeffrey Zeldman's photo, donned in a blue beanie, on the cover of his book, "Designing with Web Standards." It's a day to stand up and show our solidarity around accessible web development using Web Standards. And besides that, it'll just be plain fun!

Here's how it works:

  1. Buy, beg, or borrow a Blue Beanie and take a photo in it. Heck, you can even take a picture with your camera phone at the mall trying one on if you don't want to buy it. Maybe you'll put a beanie on your head or change a black beanie to blue with Photoshop. Be imaginative. Take a cool group photo of you and your friends wearing Blue Beanies. The possibilities are limitless. Show your beanie creativity.
  2. Post your photo, or photos to Facebook, the Flickr pool, and other social networks on November 26th, 2007. Remember to switch your profile photos that day on all your social networks, like Flickr, Twitter, Last.fm, iLike, Pownce, Dopplr... you name it.
  3. Promote Blue Beanie Day in your blog or wiki starting today. Tell all your friends to get ready for Blue Beanie Day. If you have a Facebook account, join the group and invite all your Facebook friends to this event.

You can participate without a Facebook account too. Just grab a beanie, make it blue and join in! See you there.

!!

Category tags: Accessibility, CSS, Designing for the Web, Dreamweaver

When the Legend Won't Wrap - One Solution

Posted Monday, November 05, 2007 1:28:37 PM by Stephanie

I've just returned from over six weeks on the road (12 locations all over the globe). Needless to say, I've been scarce around these parts of late. I'm hoping to start remedying that.

While attending one of the conferences, I was discussing creative, problem-solving techniques with an attendee, and mentioned a method I'd recently employed for legends that won't wrap in some browsers. They mentioned that these types of creative tips should be blogged and, well, I'd truly intended to blog it here for others who run into the same problem. I found precious little written on it when I was searching for a solution. I figure it's better late than never. :)

Many of you understand the accessibility and organizational reasons for using the fieldset and legend elements. I was recently coding a site that had a large number of forms. I was using fieldset and legend to organize and group the information. The copy written was very off-the-cuff, conversational and fresh. I liked it. But occasionally, the amount written (and used as the legend) needed to wrap to a second line. Enter the problem.

I found that the wrapping behavior varies from browser to browser. On a Mac, legends wrap automatically in Opera, Safari, and Explorer. They do not wrap in Netscape, Mozilla, and FireFox (obviously the Moz-based browsers). On a PC, they don't wrap in Netscape, Mozilla, FireFox, or Internet Explorer. This means that you either have the div containing your legend pushed wider and overlapping your other divs, or, in the case of IE, it can cause float drop. You can place a break element into the legend to randomly force the text to a new line. However, once the text size is larger, and you're viewing with a browser that does allow the legend to wrap, you get a horrid stacking of the legend. It wraps automatically and then again where you placed the break element. Unsightly.

Several suggestions were made on a list I'm a member of. One was to put a width on the legend (which didn't work in all browsers). The other was to make the text within the legend extremely short and then place the longer question/comment directly below it before the form controls contained by the fieldset. That, however, isn't a good option either (even if I did want to change my clients interesting way of wording things). Once Assistive Technology (AT) enters forms mode, it doesn't read elements not marked as form elements (like paragraphs, lists and headings). So though it was an interesting idea, it was sub-optimal and nixed as well.

Finally, after much discussion, Mike Moore (on the WebAIM list) and my friend Derek Featherstone (by IM), put me on the right track. The answer lies in placing a span element directly inside the label element - <legend><span>Text within it</span><legend>. Then, create a rule (something like - #divName legend span) which includes display:block (since a span is inline by default), the width you need, along with your other styling. Works perfectly in all the major browsers. So there you have it with many hat tips to my friends. :)

Category tags: Accessibility, CSS, Dreamweaver

Meet Me in the Wild--Upcoming Conferences

Posted Wednesday, July 25, 2007 9:28:30 PM by Stephanie

Come out and meet me! There are some upcoming events in September and October where I'll be speaking and I'd love for you to come say hi.

On September 21 and 22, I'll be at Web Master Jam Session in Dallas, TX. I'm speaking on semantic HTML and CSS--the building blocks of a site. Jonathon Snook will follow my session with a "creative positioning" session. There are some great sessions including the keynote by Jared Spool. Check it out!

On September 30 - October 3, I'll be at Adobe MAX in Chicago doing a hands-on session on the new CSS layouts I created for Dreamweaver CS3. There's at least a session a day, so you should be able to get in before they fill up. Also, October 15-18, I'll be doing the same session at Adobe MAX in Barcelona, Spain.

October 22-25 takes me to San Fransico, California. There I'll be speaking at Pearson's first Voices that Matter conference on Mastering Perfect CSS Layouts. When registering, if you enter Priority code: WD-SULL -- you'll receive $100.00 off your registration fee.

So find an event near you and let's meet face to face!

Category tags: Adobe, CSS, Dreamweaver

New Guillotine case in Internet Explorer (IE7)... Or not!

Posted Friday, July 06, 2007 8:03:38 PM by Stephanie

Yes, it's a fact that Internet Explorer 7 is better than Internet Explorer 6. But not all squashed bugs were completely killed. Like the little gopher game you play at the fair, sometimes when you bang one on the head and it goes underground, it simply pops back out in a different place. Enter the Guillotine Bug.

Yes, we all hoped it was dead and gone. But by finally supporting some of the previously unsupported properties, new cases have evolved. I had one on my own, freshly launched site recently. Today, I took the time to figure out what was going on. Since it was a bit odd, I thought I'd share it here in hopes of helping someone else since I found nothing in Google exactly the same.

guillotine CSS demoSince IE7 now supports the :hover pseudo class on non-anchor elements, I decided it would be nice if the whole list item in my sidebar changed background color on hover. I placed a different background color and a completely different border effect on the li:hover selector. Within this list element was a left-floated icon and static h3 and h4 elements (which are links). It worked perfectly in IE6 and earlier, Firefox, Safari, etc. But IE7 decided to hack a hairball. When you hovered over either the h3 or h4 link, the bottom half of the floated icon disappeared. If you have IE7, I put an unfixed demo page (from my site's contact page since it has two sidebar items with links and one without) up to test with. If you don't have IE7, there's an image for you to view to the right of this paragraph. Problem is, though it looked just like the guillotine bug in IE6, the usual necessary elements weren't there. And IE6 was fine.

The old Guillotine

With the old guillotine bug, as with most bugs, there was a list of ingredients needed (listed from Position is Everything):

  1. A container element (This was my list element)
  2. A float element inside the container that is not "cleared" (this was my icon)
  3. Links inside the container in non-floated content after the float (both my h3 link and h4 link followed my floated icon - check!)
  4. a:hover style rules for those links that change certain properties (ooops! This is where the recipe goes wrong. The links following the floated icon did NOT change any of the necessary items which are:
    • Background
    • Padding
    • Text Style
    • Border etc.
  5. Internet Explorer, obviously (got this one)

The initial troubling fact to me was that the old fixes for the guillotine didn't work. It didn't help at all to clear or contain the float. But then, this guillotine wasn't classic either.

The Newly Uncovered IE7 Guillotine

No doubt, other guillotine variations will be or have been uncovered--and I say uncovered, and not discovered, since this issue was probably already there--but due to IE6 and earlier not supporting hover pseudo classes, it simply wasn't revealed. In my case, it appears that creating support for hover on a pseudo class, but only fixing the currently documented guillotine bugs, let some new cases slip through the cracks (come to us IE8! :)). This bug, rather than being related to the hover on the links following the float, was related to the hover on the li element itself (parent container). I've not tested it, but it would be logical to see this happen within other parents, like div and p elements.

The fix was the usual fly swatter--hasLayout. Some of the ways I tried to fix it had untoward results--position: relative; and min-height: 0;--both caused the top border on the li to disappear--whether separately or in combinaton. I think display: inline-block; would actually have worked, only it took me a bit to realize that the margin-top: -15px on the "#sidebar1 li h3" (obviously there because hasLayout was needed) had to be removed. That done, all was well in IE7's world.

7/12 Amendment--Background Painting Bug?

I've been talking back and forth to Alan Gresley about this bug since he's been documenting new IE7 bugs. We've come to the conclusion that this isn't actually a true guillotine, but instead, is the overpainting of the float with the background on an element without layout. Specifically, the li:hover changes the background color, and when it does, it overpaints part of the floated icon. When he gets the page uploaded to his site, I'll link to his demos showing variations and odd behavior. Stay tuned...

Meanwhile, kinda makes you wanna just write an IECC with hasLayout for everything that doesn't, eh? Or wring IE7's neck (obviously that would be right below the crossbar of its e...) all while shouting, "buggy, buggy, BUGGY!" 

Category tags: CSS, Dreamweaver

reCAPTCHA - Simple and Accessible

Posted Saturday, June 16, 2007 10:50:13 AM by Stephanie

For anyone who knows me well, the most shocking part of this post is that I actually, finally, put my own web site up. Yes, after 2 years of "Coming Soon," I've actually launched my site focued on training, speaking and coding. One of the things I learned (which I knew, taught, but obviously wasn't practicing) is--let the content dictate the design. Oh my word--I had three designers work on the site over the past two years before I realized I should practice what I preach and let the content, semantically marked up, determine the design. So much better than trying to force the content into your preconceived design notion--at least when you'd like to accomplish something. Special thanks to Carolyn Wood (editor-in-chief of Digital Web and owner of Pixelingo) for all her hard work with me on this (and for continually kicking my butt)!

Meanwhile, something I found in the process of creating this site, I wanted to share with you guys. Due to the spam I receive on my blog and the form on my old site, I really wanted to make it more difficult for the bots. However, I'm also very concerned about accessibility with the current CAPTCHA products I'm aware of. Enter reCAPTCHA. This one actually gives the user the ability to interact with the CAPTCHA by viewing the image and typing it in--even with JavaScript turned of. And if they prefer, they can have the challenge spoken. I've not had the ability to have a non-sighted user test it, but it seemed to work well for me when listening to it. Best of all, it's free!

They have one other product which I'm also using -- Mailhide. You enter the email and they generate some code that you put into your page (I doctored mine a touch) and, in the same way, it forces the user to solve a reCAPTCHA challenge to get your email. Of course, I'm sure nothing is foolproof, but having a little protection is better than nothing at all. Have a look!

Category tags: Accessibility, Dreamweaver, JavaScript

TODCon Schedule Online!

Posted Tuesday, May 08, 2007 3:33:50 AM by Stephanie

We've finally got the TODCon Vegas 2007 schedule and speaker list up. Check it out. Lots of excellent sessions about the new Adobe products, running your web business, usability, CSS and more. There's still time to register for the best little conference in Vegas! Come play on the strip with the rest of us geeks. You know you wanna... :)

Category tags: Adobe, Bridge, ColdFusion, CSS, Dreamweaver, Fireworks, Flash

See Community MX content by Stephanie