The Wilson Project
Blog of Front-End Developer/UX Engineer Ivan Wilson

Skip to Navigation

Blog Entries

  • Charles is One Year(s) Old

    First Anniversary

    Actually, he’s a few weeks older, but who cares.

    I knew that it had been awhile until I started writing again in the Moleskin notebook I carry around. I wish I could say more but there was some much happening outside of the project that nothing was really done for about six months. Thankful, work has started again. In this case, I took a different tack and worked around what I do best: building and programming. So far, by using prototyping (IxD idea) to try out some of the ideas in the initial plans, I made some progress and new changes that should be an improvement down the road.

    A shout out to Todd Zaki Warfel for some much need inspiration.

    There is still a lot of work to think about and more concepts to play around with. I’m even examining a few ideas from almost five years ago because of one change that needed to be made for better functionality, which some refresher in PHP programming (long time…).

    As for the new design, that is still on hold. Finally asked another designer but he is busy as well (and just like me, can’t complain). But with the change in plans, that will wait until all the concepts have been played out.

    So basically, more work, changing ideas, better direction – which leads to a more upbeat tone about the project.

    BTW – Why the name Charles? I’ll tell all the worth while secrets when this is finally over, hopefully before 2011.

  • UI or UN? The Life of a Front-End Developer…The Lecture???

    No. Really.

    Basically, it originally started as an idea for me to do something close to work but outside the office.  However, there are a number of ideas that need fleshing out. Not just about work (dealing with bad HTML code) but also about ideas about Charles, TWP, front-end developement, and IxD.

    And linguistics.

    More news to come.

  • Storm and Stress

    After three weeks of work and vacation (which was almost like work), I got a free weekend.

    One in which I got to do nothing.

    Now this week, a hopefully(?) slow work will allow me to do the following:

    • Write two blogs entries for CDG – one on the book Search Patterns by Peter Morville/Jeffery Callender and the other about The Nose (The Met/MOMA)
    • Started prototyping work on Charles, which I started Sunday, first bit of work in a couple of months
    • Starting more blog entries here, including a brief one about the last three weeks

    I have a number of things to do before things speed up again at work. There is also the next two trips in May, which I need to get ready for.

    First, NYC again for another Met performance – instead the Russian satire of The Nose, it will be the dark, German expressionism of Lulu.

    Then this will be followed by my yearly pilgrimage to the Pacific Northwest again (Seattle, WA/Vancouver, Canada).

    Lots to do, lots to see. Just need to do more than one blog entry per month.

    Later.

  • Back from Interaction 10…into Snowmageddon

    Leaving Savannah after Interaction 10

    More photos, posted at my Flickr account – Interaction 10 (IxDA)

    Flew into Savannah before Snowmegeddon Round #1 came around and it was goregeous. Rainy but in the 50’s and I could wear a light jacket for a few days. Great time, only to fly back home the day before Snowmegeddon Round #2 came in. It took 2 1/2 weeks before I could see the sidewalk again.

    Snowed-in Neighborhood

    As for Interaction 10, it was a blast and a real big work motivator for the remainder of the year. Some of the lectures presented some real interesting ideas and I will find some way to introduce or talk about them in my work. It also helps meeting interesting designers and other professionals that really want to make the profession better.

    As for Savannah (beyond the really nice weather) was a good host and just darn friendly (Southern hospitality does exist…). I would definitely love to come back ASAP but the conference has to move to a new site. Unfortunately, it will not go back to Vancouver next year. 🙁

    However, it will go to…Boulder, Colorado. It was announced on the last day, with a special low rate for about one week (sorry already gone, darn…) But, the excitement as already started. Especially with a really funny and interesting video promo – see http://www.vimeo.com/9395674.

    Anyways, as soon as I can break open my piggy bank, I am registering for next year.

    Interaction 11 @ Boulder, Colorado – http://www.ixda.org/i11/

    Related Links

  • Excuse me if you heard this before, but…

    I am really, really busy.

    Sorry for the month delay but new blog postings will be up in the next couple of days.

    I will also be writing two blog post for CDG again, both dealing with topics brought about during lectures at Interaction 10 in Savannah a few weeks ago.

    As for here, blog posts about Interaction 10/Savannah and the restart and final stages of Charles project.

    Later.

  • IxDA Interaction 10

    IxDA Interaction 10/Savannah, Georgia, USA - February 4-7, 2010

    IxDA Interaction 10
    http://interaction.ixda.org/
    Dates: February 4-7, 2010
    Location: Savannah, Georgia

    Hosted by SCAD (Savannah College of Art and Design), this year’s conference will be spaced among various nearby locations around downtown. Savannah, with or without the conference, is worthy of a visit due to its long and influential history in this country. The IxDA (Interactive Design Association) conference will feature talks, workshops, and lectures on design areas that range from technology to new tools/processes to important issues such as instructing/mentoring new students in the field.

    So, why is a front-end/ui developer doing here?

    Well, I deal with designers all the time, whether they are web or print based. It allows me to follow what designers are doing and find ways to compliment – in an architect/engineer dynamic. Also, I get new ideas for inspiration or use in the other areas, especially if it is useful in my career.

    Therefore, I will be spending some good quality time next month, soaking some fresh ideas and having a mini-vacation away from the same-old work routine.

    Later.

    P.S. – A little inspiration from the so-to-be conference…

  • The Well-Dressed Submit Button

    (Originally published on CDG Interactive/Innate blog)

    Hello, again. This is CDG User Interface Developer Ivan Wilson with another lesson gleaned from the top of the snowy, white-capped mounds of work that keep me busy every day. As I explained in my last post, my job is about building the bridge between design and technology. I need to create things that function perfectly, look good, and are useful for users. Here’s how I tackled a recent challenge on-the-job.

    One of our clients, Mondial Assistance, is a large multinational provider of travel insurance. We’re in the midst of revising each of their national B2C sites—more than 20 sites in all, in a variety of different languages. Our core website needs to work as well for consumers in Germany as it does for consumers in Japan—and everywhere in between. And as every web pro knows, content is key.

    But what does content have to do with me, a developer who doesn’t deal (directly) with the spoken language? Allow me to explain!

    The truth is, content is inextricably tied to both design and technology. Think, for example, about the humble button on a web form, like this one. As a UI professional, I need to make sure that this button looks right from a design perspective, and also functions perfectly regardless of the browser or language.

    The simplest solution would be to just take that graphical image and turn into a submit button via HTML code. Or would it? Remember, this little button has to function across 20 sites and in multiple languages. Just imagine the following conversations…

    “Nice button. Nice style. Can you add it to the German site? Oh, don’t forget. The French site is launching next month. We need to use the same buttons there as well.”

    OK, open up Photoshop (or insert your preferred graphics program) and change the text to German. Done. Fine.

    Repeat again…this time in French.

    Repeat again…this time in [insert local language here]

    Before you know it, you’re creating 20 versions of the same button. And that’s just one button on the site. Take into account all of the other buttons that reside on the site, and it becomes an algebra problem: (# of buttons) x (# of languages) = massive headache.

    Let’s take a step back and look at the problem again.

    We need a submit button that is:

    1. Editable – It needs to be easy to translate and manage across sites
    2. Usable – We do not want to create problems or lock out the user, preventing them from finishing their task

    Graphical buttons are out. Sure, I could always use a linked image with a Javascript function to submit data upon clicking. But what if Javascript isn’t switched on? (Surely it won’t be on screen readers and mobile phones). Not good enough.

    The challenge is creating a default state for the button, which functions for everyone, and an enhanced state that looks perfect for top browsers.

    In the end, here’s what I did:

    1. Used an old fashionedHTML submit button
    2. Along with the button, I added an extra bit of code that displays the enhanced state:<span class=”startquote submit”><span>Start Quote</span></span>In this code, I’m using CSS to turn two tags (spans) and enclosed text to appear as the prior graphical button. And by adding Javascript, I can make this “button” act like a regular submit button.

    OK, but now we have two “buttons”. Here is where the magic comes in…

    If you load up the page (without CSS or Javascript), you are the “default” state and the standard HTML submit buttons shows up.

    Now, if you are using a top-of-the-line browser, you have Javascript and CSS well supported. That means that you are ready for the “options” state. When the HTML button loads up, you will get this functional stylized button. All along, the “default” button is still around, just hidden from sight.

    And as the topper, since the text is only text, it can be changed with a couple of keystrokes. Done right, it can stretch to accommodate different word lengths due to translation or editing. As seen below:

    Why only the Latin alphabet? What about Cyrillic? Japanese? Chinese?

    Everything works beautifully. (Well, actually, IE6 has problems with hover states…but it’s IE6, of course.)

    So, there it is. Highly stylized yet functional submit buttons – well dressed for any occasion. And best of all…useful.