http://www.elfboy.com/ en info@elfboy.com Copyright 2010 2010-06-07T10:49:34+00:00 http://www.elfboy.com/site/booked_through_july/ http://www.elfboy.com/site/booked_through_july/#When:10:49:34Z The studio doors are currently closed through July as I am thoroughly booked, though not on your traditional web design projects. 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. 2010-06-07T10:49:34+00:00 http://www.elfboy.com/site/border-radius/ http://www.elfboy.com/site/border-radius/#When:22:21:15Z Yesterday I was up in Seattle attending An Event Apart‘s first one-day workshop, A Day Apart. During the second half of the day Dan Cederholm taught on CSS3’s border-radius. Apparently, once while trying to create a button out of an anchor text with half-circle rounded ends (think of a pill) he had run into a problem where Safari would revert back to square corners if the radius was set too high. I thought that was curious since I’ve not experienced that, so I’ve set up a test scenario to see if we could recreate it. I’d like you to view it in your browser and leave comments on how it displays for you. 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 ;-) 2010-04-08T22:21:15+00:00 http://www.elfboy.com/site/text-shadow_anti-aliasing/ http://www.elfboy.com/site/text-shadow_anti-aliasing/#When:05: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. SandboxI’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. Design, Programming 2010-01-26T05:25:40+00:00 http://www.elfboy.com/site/business_as_usual/ http://www.elfboy.com/site/business_as_usual/#When:17:41:03Z I’ve been back from Uganda for two weeks now. I’m caught up on projects and life in general. Africa was a joy to visit, what little of the continent I got to see. At first, I wasn’t sure if it would be worth the money to go to Uganda to as a consultant to Youth With A Mission - this was a volunteer opportunity. Now on the flip side though, I’m very glad I did! Youth With A MissionIn 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. Business, Life, Travel 2009-05-20T17:41:03+00:00 http://www.elfboy.com/site/consulting_in_africa/ http://www.elfboy.com/site/consulting_in_africa/#When:19:07:00Z I love the multitude of cultures I am surrounded by and working with at this consultation. I love it when Africans look sidelong, exposing the contrasting white of their eyes against their pupils and skin. My resume will now say that I worked with a global organization as a multi-cultural communication consultant and trainer. I was in the south of the equator for a couple hours transferring flights in Nairobi and soaked in my beloved southern hemisphere. 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! 2009-04-28T19:07:00+00:00 http://www.elfboy.com/site/off_to_uganda/ http://www.elfboy.com/site/off_to_uganda/#When:18:09:00Z Over the past year or two, I’ve intermittently talked with a close friend of mine who is a missionary with his wife in Hungary about the possibility of going to Budapest to do website development for their missionary base. A couple weeks ago I was put in contact with the lady who is in charge of the communications for the Youth With A Mission (the organization they work with) Central European office. Apparently, YWAM CE would like to do a communications/media/tech workshop there eventually. I was very excited to hear about this as it would fit in so well with our previous ideas. But during our conversation I was told about a global YWAM communication conference happening in Uganda. This would give me the over-arching vision to help me understand the situation of YWAM communications. So two weeks later I decided to go, and two weeks from now I will arrive! So what is this all about? Let me explain a bit more about the conference. 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! Business, Education, Travel 2009-04-13T18:09:00+00:00 http://www.elfboy.com/site/technology_adoption_time/ http://www.elfboy.com/site/technology_adoption_time/#When:20:25:00Z Chances are, if you watch TV at all, you’ve seen numerous ads about the upcoming transition from analog to digital television. Just like when the campaign ads were playing, I cannot wait for this February 17th date to pass so that I will no longer have to view the same notices again and again. Recently however, there has been an attempt to delay the transition until June 12th. This motion passed the Senate, but initially failed in the House. Last week they approved it and it has been sent to the President’s desk for signing. One of the main arguments in favor of the delay that I have seen is that an estimated 6.5 million people are not yet prepared for this switch. Since I was also reading on my industry’s transition in HTML 5 and CSS 3, I got to thinking about our state of technology adoption. 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 <header>? (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!” General 2009-01-29T20:25:00+00:00 http://www.elfboy.com/site/masters_degree/ http://www.elfboy.com/site/masters_degree/#When:00: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) 2009-01-23T00:26:00+00:00 http://www.elfboy.com/site/clean_up/ http://www.elfboy.com/site/clean_up/#When:22: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. 2009-01-15T22:45:01+00:00 http://www.elfboy.com/site/making_a_comeback/ http://www.elfboy.com/site/making_a_comeback/#When:08:06:00Z I’ve restarted the barrage of communication, networking, updating, and job searching this week. I’ve checked out and responded to local Craigslist ads, updated my LinkedIn profile, and will be putting up new portfolio pieces here soon. Oh, and look, I posted to the blog! Go me. Business has been a bit slow out of my own lack of effort to find new projects, but no more! I’m making the push. I envision one of these days that effort won’t be as needed and people will come to me, but until then, I make myself known. 2008-12-05T08:06:00+00:00