Blog

Booked Through July

2010-06-07T10:49:34Z

This summer I will be taking two months to travel and do some non-business related work.

First, for the month of June I will be in Mongolia where my brother’s non-profit Edurelief is located. In addition to taking time to realign the website (primarily content and site architecture updates) I will be helping him, with others, as he begins building a house. I’ve already been here a couple days and, well, we had snow today…in June. At the same time I will be finishing up a final freelance project.

In July I will be giving up my computer and leaving Mongolia for the Philippines where I will work as an audio and visual tech for a month of stage performance shows. Live production is another passion of mine and I love being able to do it all over the world. Obviously, this won’t be an ideal time to do any web related work!

So if you have a project you were hoping I could do for you, I’m sorry. Shoot me an email and perhaps we can schedule something out for later this year.

Border Radius

2010-04-08T22:21:15Z

A couple weeks ago I got very familiar with border-radius in Firefox when I created an all HTML & CSS burger (best viewed in Firefox, inspired by an illustration by Anthony Dimitre). I was pretty sure Safari wouldn’t break if a given radius value of the border corner was greater than half of the element’s height (if two corners on the same side have radii exactly half of the elements height, then they will form a perfect semi-circle).

Here’s an image of what we’re going for. This is what your browser should show you:

And here it is in HTML / CSS for your browser to render:

Awesome button!

The important CSS I’m using to do this is:

	-moz-border-radius: 1em;
	-webkit-border-radius: 1em;

You should see a pill-like button with complete semi-circle ends. Not four unique rounded or squared corners.

Originally I thought you could just set the radius to some large value that no one would ever zoom their text past (thereby making the element have a larger height and getting rounded corners, not rounded ends). However, while at AEA I tweeted back and forth with @bend_boy and @sgalineau and discovered that using em units makes much more sense, and works better! (note: percentages should work, but don’t)

When I talked with Dan later in the day I mentioned that I hadn’t seen the problem he described. He suggested it may be a difference in Webkit between Windows and Mac OS. So what I wondering is do both buttons display the same for you (IE excluded, of course)? If not, what OS and browser are you running? Leave your results in the comments. Thank you!

Update (minutes after posting):
I decided to see how people saw it if I did use a large pixel value instead of ems. What do you see here?

Awesome button!

The CSS:

	-moz-border-radius: 300px;
	-webkit-border-radius: 300px;

Update 10/April:
Eric asked to see what really large values were like, so that’s what I’ve put below. Also, I’ve gone ahead and added in code for other browsers and those without gradient and border radius support (even though this was originally just to see how Safari handled it).

Awesome button!

The CSS:

	-moz-border-radius: 30000px;
	-webkit-border-radius: 30000px;

Note: without some form of browser functionality detection I can’t get the rollover background color to set right because of other global site styles. It’s not worth it for me to work all of that out for a post like this ;-)

Text-Shadow Anti-Aliasing

2010-01-26T05:25:40Z

Like many people in our industry, I have been reading and learning about typography on the Web to find good ways to embed fonts using @font-face while nimbly dancing around the many complexities of different browsers and formats. It’s very exciting to see more and more sites using “non-standard” fonts. However, one of the issues we as web designers currently have to deal with is the differences in render in font hinting between browsers and operating systems. I’m really not a big fan of how Windows usually handles this, so I decided to try to do something about it.

Sandbox

I’ve set up a sandbox to experiment with text-shadow anti-aliasing. Please check it out! It would be great to hear your thoughts on the technique.

I’m one of those few self-conscious people at places like An Event Apart that you see using a PC. My ugly Dell is conspicuous amidst a sea of glowing Apples. Because of that I see the font rendering on Firefox Windows every day. The occasional times I see Mac’s Safari rendering pages I sigh a little. Now, I understand how Apple and Microsoft have decided their own paths of font hinting. Apple to allow their smoothing to deviate from the font’s true form; Microsoft to rigidly follow the font’s pixels and push them into the grid. I respect the typographer, but some fonts haven’t been optimized for the Web yet, and until they are and browser vendors do a better and more consistent job in their rendering, this is a problem to me. The Windows version looks rough.

A couple weeks ago while reading Kyle Weems’ CSSquirrel I noticed that he was using a CSS text-shadow rule on his body text. While I don’t think he was using @font-face to import a special font, the text-shadow was used as a soft glow. It got me to thinking and tinkering with a design I was working on that I wanted to use some different fonts on, but was struggling with the rendering. Especially on resolutions around 1280 x 1024, things look very choppy. By using a very soft shadow of the same color with no movement away from the text, I have been able to soften the characters by hand. A kind of hacked anti-aliasing. Then, to drive home my point I noticed Mark Pilgram using the same technique (I’m assuming intentionally) on the font Essays 1743 at Dive Into HTML 5. Without the shadows on Firefox Windows the type just looks kind of crappy, but with the shadow it is nice and soft.

I was excited to see an example of what I was working on in the wild. I have been frustrated with using fonts after seeing the rendering fail so much. With all respect to Jason Santa Maria, that’s the one unfortunate short-coming of his redesign of Bobulate when viewed in certain environments. The font he choose, Skolar, is perfect for the site. I don’t think another font would fit the content or feel better, but on my machine the text didn’t look great. This isn’t Jason’s fault by any means, nor is the site ruined by it, but I wanted a better way to do fonts until operating systems and browsers throw us a bone.

This is what I am proposing:

text-shadow: 0 0 1px rgba(0,0,0,0.3);

That’s the essence of it anyway. The RGB values need to match the color of your text. I’ve also found that headings generally do good with an alpha value of 0.3 or 0.4 (sometimes higher), while body text is too busy with 0.3 and 0.2 is more subtle. Let me show you a few screen shots:

CSSquirrel on Firefox / Win without text-shadowing (currently as is)

CSSquirrel on Firefox / Win with text-shadowing (how it was)

Kyle told me that some users the shadow was creating a fuzzy look.

Kyle’s font-stack calls for Lucida Grande followed by other more common sans-serif fonts. I think his decision to remove the shadow while he revisits his options is good. The fonts are doing fine on my monitor without the faux anti-aliasing, though the difference on the screenshots is apparent.

Bobulate on Firefox / Win

Bobulate on Firefox / Win with text-shadowing

Especially notice the S’s in the headline and the date text.

Dive Into HTML 5 on Firefox / Win without text-shadowing

Dive Into HTML 5 on Firefox / Win with text-shadowing (as is)

The difference between having a text-shadow and not is subtle, but I think often it’s worth it.

So what about Macs? Well, there is a small difference, but not near as much as on Windows. Macs already smooth their fonts, so the shadow isn’t as noticeable. I asked a few friends and one thought the shadow made it easier to read, a couple others preferred the crispness of the un-shadowed (perhaps what Kyle’s readers were experiencing). However, I think the difference is negligible so as to make it worthwhile for Windows users. My friends who saw the above examples preferred CSSquirrel without shadowing (good call, Kyle) and with shadow for the other two.

However, different fonts and different color combinations require different settings. There isn’t a one size fits all. Because of that I have set up a test site for you to play around with various settings. While I have had some input from non-web designer friends, I would appreciate your feedback on this technique: do you think it is worthwhile? Would browser or platform sniffing make it better?

I am also working to develop a bookmarklet that will allow you to select an element and apply a text-shadow. Basically what Firebug can do, but with a simpler interface.

I hope you find this technique useful. I have already used it on some of my designs where appropriate.

Notes: Thanks to Kyle Weems for putting his site back to how it was temporarily so I could screen capture it and to Jason Santa Maria for giving me some initial feedback on this. Also, I saw an article today about making Safari / Win render fonts better. If you leave feedback, please specify your OS, browser, and screen resolution.

Business as Usual?

2009-05-20T17:41:03Z

Youth With A Mission

In case you are curious, YWAM (pronounced “why wham”) is an inter-denominational global Christian missionary organization. Worldwide, they have over 1,000 locations. These bases do training in biblical theology, humanitarian aide, and even media to name a few. They also work with the communities where they are located and send out teams to do practical “on-the-ground” outreaches. You can find out more about them on their main website.

Personally, I have studied at a six-month training course with them. Since them I have periodically worked with different bases or associated ministries as a web developer, tour technician, and general I.T. services.

I gained a lot from the week-long consultation with 40 other communicators from around the globe. I learned about tackling absolutely huge issues on an international scale. The way we came at the problem, brainstormed issues and solutions, breaking them down to manageable categories was insightful. There was the cultural aspect where we all had to understand and recognize the differences in availability of technology, not to mention perception. I came away with better team experience which is good for me as a freelancer, plus saw the coordinators do an excellent job at managing a large group of people. Overall, I kept my eyes and ears open constantly to learn even while I was giving.

It was good for this consultation week to have someone with an outside perspective and background. Being active in the web industry gave me an outside-the-bubble vantage point which was appreciated. However, I was very encouraged to see that these people fight to stay relevant in what they do, even while focusing on missions work! In fact, the media/video school that is being taught by YWAM in Nigeria has had people from the Nigerian TV industry come to be trained further!

Through all this, I met a number of fantastic people! Many who directly work in my field of web design and development. There were also others who run schools and trainings. A few of these people have asked me to consider coming for one of the weeks of their upcoming schools to do web workshops or speak on communication to their students. This is very exciting to me and something I have been getting more and more interested in doing! I was giving the opportunity to give an hour workshop on building websites during our week-long consultation. Nothing like trying to gloss over a huge amount of information in an hour! It was a lot of fun and my first experience doing this. I was glad to see that I could easily teach on this without running out of material for much longer, especially as I could then focus on specific issues like web standards. I am looking forward to what falls into place over the next year or so, it would be amazing to have more speaking opportunities!

Back in Oregon, I leave for the WebVisions conference tonight. Unfortunately, my workshop this afternoon was canceled, but I will still be there for the conference proper. I went in 2006; it was my first “geek conference.” Since then I’ve been to A List Apart in Seattle and WebStock in New Zealand. I’m really looking forward to a local conference. I’ll be able to meet, network, and share with people from my area.

And what does the summer hold? An iPhone app or two possibly. Planning for a training conference in Budapest, Hungary. Maybe giving a hand in starting up a six-week communications course for YWAM Africa.

All of that along with the recent trip to Uganda and tomorrow’s Portland web conference is business as usual? Well, define “usual.” My answer is a resounding Yes!

I love my job.

Consulting in Africa

2009-04-28T19:07:00Z

This is the end of day three in Uganda. Jinja is just barely north of the equator so is quite hot. It’s the rainy season, but I’ve barely seen a drizzle. I think it rained last night though. The flash of lightening can be seen quite often though.

My first day was a flurry of traveling as I met up with my friend who works in Kampala and picked me up, helping me navigate the taxi and motorbike system here. We had a brief meeting that night to get acquainted and talk about what this week would be.

On Monday we began to lay the ground work for the consultation. No, not conference. We are 40 consultants here to identify the problems in YWAM’s (Youth With A Mission) communications, find solutions to those problems, and create a course of action to put those solutions into practice. I am the only person not directly affiliated with a YWAM base. I thought there would at least be a few other outside professionals.

By Monday night we’d identified a myriad of issues and on Tuesday we broke into smaller groups to tackle the five different over-arching categories. Many individual challenges and issues have been spoken and tomorrow I expect we will start unraveling solutions.

Initially it was a little frustrating as I came here with a practical mindset to start solving problems. But YWAM being a Christian organization they need to tackle things from a different angle. The first several sessions were based around their unique challenges as a missionary organization. Plus all is based in the foundation of faith, so it is a very spiritual angle. This isn’t a problem at all of course, just took some adjustment on my part and patience.

It is also interesting being the only one who doesn’t have a vested interest in the outcome. I am not going to be taking back our resolutions to a YWAM base or school for implementation. I am coming along side everyone here to help them brainstorm and create answers, but while I do have a lot of experience with YWAM, this isn’t directly my fight. There are then situations which I do not fully understand. I hope my unique perspective will be helpful to the group.

I have one more week left here and I am excited for upcoming opportunities to get off campus to go see more of Africa! Thursday many of us will visit surrounding ministries including an HIV/AIDS clinic. Next week before I leave I will visit my first and the street boys shelter where she interns. Halfway through my trip and it feels like a several weeks have passed. Here’s looking forward to the next half with excited anticipation!

Off to Uganda!

2009-04-13T18:09:00Z

The conference is called CRIT - Communication, Research, Information, and Technology. It was initiated five years ago in an effort to repair and invigorate YWAM’s failing communication, both internally base to base and externally to the rest of the world. Through this YWAM’s relational ties between bases, churches, and “outside” people and organizations will become stronger. On the website it is called a “consultation” not conference because of its interactivity between attendees. I gather it is a time to strategize various facets of communication for the organization.

Though I work with YWAM often, I do not consider myself a member of the organization. I am not a “YWAMer” (that is not to say I have something against that, the organization and people in it are fantastic. It’s just not who I am). So why am I going? I have been asked to come to CRIT as someone who is outside the bubble and active in my industry. Because of the format of the conference, there will be many opportunities to share amongst members. I am hoping my expertise in web development will be useful and helpful to YWAM. So I consider this a business trip (would not have ever expected say, “I’m going to Uganda on business” before now). I am one of the “outside professionals” joining their team to brainstorm, advise, and encourage.

This kind of work is where I want to direct my skills and talents. The reason I moved back from New Zealand was so I could begin to focus more on using my job skills to help develop and train non-profit organizations and the like in website development and technology. Of course I do “normal” paying work for businesses too. But those who work to change the world, that’s who I aim to help; to bring up to speed with communications technology. CRIT is the perfect opportunity to step into that - the contacts I will make and the viewpoint it will give me I expect to be very valuable for the future. From here, and with other options coming into view, who knows where this will take me. It is a prospect I am very excited about!

Technology Adoption Time

2009-01-29T20:25:00Z

You see, the DTV transition has been slated for nearly a decade (according to one of those afore-linked articles). There has been much buzz lately about HTML 5, which has been in the works since 2004, five years ago. CSS 2 was an official Recommendation by 1998. It’s still not fully implemented correctly by some browsers, and eleven years later there is still no CSS 3 (it began as a working draft in 2001). CSS is the cutting-edge of the web industry. Standardistas are waving their flags from every street corner. This is not to knock against the phenomenal work of those behind the technologies. It is just at times staggering how long we take to adopt them.

In my opinion, the government should not approve the delay in digital TV. Ten years seems like plenty of time to prepare. With the population of the United States at over 300 million, a mere 6.5 million does not seem like a large enough percentage to stress over. It seems like there always is a group of people who will not upgrade their technology, whether because of ignorance, stubbornness, or financial duress, until they are forced to. For the government to assume that in the next four months they can accomplish for a meager ~2% of the population what the past years barrage of TV and mail marketing, not to mention ten years of planning, have failed to do just sounds like dragging feet and a waste of money.

Turning now to HTML 5 and CSS 3. I realize these are technologies being formed, and the “delay” is in the developers, not adopting users. Lachlan Hunt wrote in Issue Number 250 of A List Apart that work on the new markup language is not expected to finish for ten to fifteen years. We all know that the Internet is a rapidly changing landscape. The Internet was hardly mainstream fifteen years ago! Because it is in a constant state of change, evolving as needed, it seems foolishly optimistic to try to make a standard that will meet all needs, past and future. What will have changed in ten years that will cause them to massively reevaluate aspects of the recommendation? There is such a strong desire and push from web designers and developers now to have more standard and relevant markup. Can the current generation wait this long to have a working equivalent of

? (As an aside, sometimes I wonder about the use of English in our tags, especially with China and Asia leading the way in online population) CSS faces the same challenges, in development for 8 years, though I don’t know the estimated completion time, if there even is one. Both of these also then have to get into the browsers - in a way, the actual users of the technology. This in itself can take some time as seen by Microsoft’s huge time gap between IE6 and IE7. Fortunately, many browsers already have partial CSS3 support.

But what is it about all these technologies, or perhaps technology in general, that makes their progression and dissemination so difficult? Perhaps it is merely my young age that makes past technologies development seem lightning fast, but for an industry that prides itself on its speed of growth and change, this could be labeled slothful. Isn’t the reason that good university courses teaching web development are so hard to come by is because of our constantly undulating technological landscape? Maybe why this seems so slow to me is because my skills have matured - I no longer am in a place where I am learning everything to bring myself up to date. So now I learn and move with the industry rather than catching up. Or maybe the industry is just maturing and realizes that the haphazard creation of markup and styling languages needs to be tamed and thought through carefully.

I am not pretending to have an answer to all this questions and prodding. I am just voicing my thoughts into the fray. And let me state again that I am not attacking those developing the languages I use daily to create websites. On the contrary, I have nothing but the deepest respect for the people who are pushing this forward. It is far more than I am capable of. I realize there must be much more going on that I am not aware of that causes such a perceived delay. This is me asking to have the gaps in my knowledge filled in, while at the same time saying, “Let’s continue to push forward with all speed to improve our technology!”

Master’s Degree

2009-01-23T00:26:00Z

“Most of the relevant folks in the industry today don’t have graduate-level degrees in web design or development. Why? Because web design and development programs didn’t exist when we came through school. Most of us stopped going to school as soon as we realized the schools weren’t teaching us anything relevant.” - Jeff Croft (via Teach the Web and ALA: Elevate Web Design at the Univeristy Level)

Clean Up

2009-01-15T22:45:01Z

Time to start tiding this place up, cleaning the corners, fixing the unfinished areas. While I would love to official brand myself and my work, that’s something that will take quite a lot of time. For now, I think it is important that I just shore the current design up to make it stronger. I need to get meta tags in order, update the portfolio, and sort out aspects of the blog design I didn’t initially think through very far. As this was my first foray into Expression Engine, I was quite excited about it’s ability to be so customized to my needs. I still am in fact - I love what I’ve learned and created with Edurelief. But what’s the point of all this power if I’m not even updating my portfolio? So over the next week or so I plan on writing a bit more and keeping the rest of the site up to date with what I’ve actually done lately. It will be nice to once again have a site that matches where I am currently at.

Making a Comeback

2008-12-05T08:06:00Z

Twitter

2008-04-02T11:12:00Z

WebStock 2008

2008-02-19T10:28:01Z

I flew in Wednesday afternoon and, after settling into my hostel, went in search of the venue so I wouldn’t be wandering around the next morning. The conference began on Monday with workshops for three days, so things had been rolling right along by the time I arrived. The extremely kind girls from Clockwork (the events management team who helped run the show) registered me right then and I happily walked away with some great swag (including a t-shirt) and an invite to come back, kick my feet up, and enjoy the free wireless.

I had caught wind of a pre-party over at one of the local bars, so that evening I headed over. Small clumps of people leaned together with drinks in hand, speaking in their native Techie tongue. A couple noticed me casting around to find a geek group to join and came up to introduce themselves. Later on met a group of friends from Auckland. They were kind enough to let me join with them, and later some of us went out for late night pizza. That was a good time, thank you Darren, Dave, and Daniel (sorry, I didn’t get your card, no link!) for the food and drinks!

The next morning the “Conference Proper” began. The buzz of excitement was palpable as I entered. Eventually we were all let in to the hall. I was pleasantly surprised to see that, unlike the past two conferences I’ve been to, this was not a lecture hall. No, our planners knew that was boring and didn’t breed conversation. Dozens of white covered tables were placed tightly throughout the room, each with their own power source beneath. There were cheers as we began the day. In true Kiwi style, we were fed morning tea, lunch, and afternoon tea. As well, once everything was over for the day, a cocktail party and “general merriment” (how many conferences have you been to with “merriment,” I ask you?).

Cocktails and dinner. This wasn’t some measly, “Here, go mingle and have some munchies while we prepare dinner.” No, this was excellent wine and champagne to go alone with tables piled high (literally) with an assortment of bit-sized seafood, beautifully arrayed. When the doors opened for dinner I stopped momentarily to speak to Lousie who works with Clockwork. We’d joked before about my ever-present hunger and how I was excited hostel and the event both had free food. She warned me I wouldn’t even recognize the room. She was right! The tables and chairs were still there, but the room had changed. Each table, now with a fresh new table cloth along with a runner, had a floral centerpiece, in variance, set in a large glass vase. Ferns and other native bushes had been placed throughout the hall. On the stage a live band was beginning to play some soft jazzy music. The place had been transformed! The dinner was absolutely excellent and the service (as throughout the entire conference) professional and friendly. This was better than many a restaurant I have been to. Maybe that was because everyone was buzzing with post-conference excitement (and a drink or two already), but it felt amazing. I thoroughly applaud the teams that pulled this off!

The speakers themselves were great! While I’d love to give a rundown of what they spoke about, I realized part way through transcribing my notes that it is going to take me a little while. I’ll write them up and post them separately. During the after-party I was able to chat with several different speakers. They were pleasantly down to earth and friendly. Dan Cederholm was a pleasure to talk with. I’ve always enjoyed his work at SimpleBits. Michael Lopp of Apple was kind enough to buy us both drinks and join our conversation. Earlier I sat with Liz and Jason from Happy Cog Stuidios and privately check out some of their latest work with them. They’re involved with a refresh of WordPress’ administration area. Jason is another prominent designer I follow on his blog. I was help them a little bit in sorting out their post-conference travel plans in the short time they had to explore this beautiful country.

All in all it was an excellent conference, one that I am very happy I chose to go to. It was a close call though, and I nearly decided not to attend. Thankfully that was not the case. Now I hope to take my new-found knowledge and continued passion for this industry into the next season of time to enhance my work.

Version Three

2008-02-13T04:12:59Z

In the coming weeks, as time and projects allow, I plan on touching things up, tweaking bits here and there, and generally making the place even better! I’ve never used Expression Engine before, but in my short time with it, I have been really liking what it offers! So often I create my own CMS, but using one that lots of people have spent lots of time on is quite nice!

Take a look around the place. If you see something that isn’t setting how it should, go ahead and leave a note so I can look into it!

I Changed Facebook

2008-01-30T22:44:59Z

Okay, that’s a bold-faced statement, it’s true. Maybe I affected the change more than anything.

Since moving to New Zealand I’ve noticed an annoying trend come about. When I try to write a note on someone’s wall or send them a private message, it will occasionally fail. With the wall, you are given a red error message telling you that the wall is unavailable and to try again later (admittedly, the word choices aren’t the best since what’s really happening is that there has been a hiccup in the AJAX POST and it just needs to be resent). Your message is still there so you can just click the submit button again. In contrast, when I tried to send a message the only way to not lose what I had written if it failed was to use a web developer add-on I have installed into Firefox for my work. When you send a message, the form fields are all disabled to prevent you from accidentally sending it multiple times. This is nice, unless the message never sends. A little notice from one of my other add-ons let me know there had been an error, and the page would never rewrite itself to show this newest message in the thread. I would have to manually re-enable the form and resend the message, not something your average user is going to know is even possible, let alone how to do it.

One day I got sick of it and emailed Facebook about this issue, thinking it may be an issue in their code. I didn’t expect an actual response, but a few days later I had a message asking for information about my browser version, plus some screen shots so they could try to figure out what the problem was. After doing this they got back to me with the unfortunate news that the problem was with my Internet connection, which was my second guess. Oh well, at least they were good enough to work with me on understanding the issue. I suppose when New Zealand decides to upgrade their telecommunications network it will all be good, I can survive.

And then a few days later as I sent a message to a friend, crossing my fingers that it would go without error, I noticed something different! The sending failed, but this time, instead of hanging and leaving my form disabled for me to manually fix, it auto-re-enabled itself! There is no message to the user to let them know they need to try again, but the fact that they recognized through my report that some users may have this issue through their connection (no fault of Facebook’s) they decided to give them a bit of help through a minor user interface upgrade. Minor, but it makes things immensely more convenient for me!

This sort of support and recognition and solving of minor issues in an otherwise impressive application is what makes a development team stand above the rest. Facebook is continually making minor adjustments to their UI, listening to their community, and making their social network the modus operandi benchmark for everyone else.

Moleskine

2007-12-28T22:49:00Z

I happily have three new Moleskines. Softbound, a nice natural color which I haven’t seen before, and graphed to aide with grid-based design work. These are such great notebooks. I spent a good 20 minutes at Borders browsing their different styles and sizes. So many to choose from! I wish I did water painting, they have a very nice water paint notebook with extra thick paper. I have a small hardbound sketchbook (which is usually not used for sketching) that I love. However, I like it so much I am too frugal with its use! It’s over a year old and has not yet been filled! It would be much easier to keep track of things if I used it quicker so it spanned a smaller amount of time. I plan on remedying this.

In short, these are amazing notebooks: buy some!