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

Menu Skip to Navigation

Archives for Category / CDG

  • Innate’s spotlight on Olympic Fencing

    (Originally published on CDG Interactive/Innate blog, edited by Hilary Finkelstein)

    Ivan Wilson, who is one of Innate’s front end developers, has been a competitive fencer for over 17 years! Ivan, who began his career in college, currently belongs to Olde Town Fencing club in Alexandria, Virginia and DC Fencers Club in Silver Spring, Maryland. As a epee fencer, he has participated in numerous local, regional and national tournaments. He is currently active in numerous competitions on various levels/groups, including Vet-40. Ivan’s years of experience and expertise gives us some insight on what to expect from Team USA in this summers upcoming Olympics.

    Who to look out for in Rio Olympics in fencing for the US

    Fencing has been in the Olympics since the very first games in 1896. Americans have been making up for lost time, ever since Zagunis and Jacobson medaled in 2004 (gold and bronze in women’s sabre).. As a nation, we’ve won medals in fencing in the last three Olympiads, the most in 2008 Bejing with 6 medals.

    At Rio, there are a few favorites among the US team who not only could place well but also get medals. But fencing is known for being unpredictable, and surprises do occur. The familar saying,“The best fencer on the day“ can hold true, especially in an event such as the Olympics.

    Amidst all this, can we continue this brief medal streak? Let‘s take a look.

    Women’s Épée

    Individual – 8/6

    Team – 8/11

    Team – Kelly Hurley, Courtney Hurley, Katerine Holmes, Katarzyna Trzopek (alternate, team event only)

    In London 2012, the women’s team beat Russia to win the bronze medal. Half of that team, the multi-Olympian Hurley sisters, are back with two new fencers. One of them, Katerine Holmes, is a native of this area. The team is currently rated #7 in the world and are a dark horse for a bronze medal. They will have to deal with some strong teams such as Russia, China (world/defending Olympic champions and current world #1), Romania, Korea, and Estonia (who recently won the Europeans).

    Same for individual event, with anyone of the three being dark horse favorites.

    That said, épée (men‘s or women’s) is one of the more unpredictable events, where some one unexpected could make a run.

     

    Men’s Foil

    Individual – 8/7

    Team – 8/12

    Team – Alexander Massialas, Gerek Meinhardt, Miles Chamley-Watson, Race Imboden (alternate, team event only)

    Besides the woman’s sabre team, this is considered one of the favorites to medal at these games. This quartet won a silver medal at the 2013 championships and are the world #2 team behind the Italians (the current world/Olympic champions). The team itself is a set of highly decorated individuals. Massialas is currently world #1 and silver medalist at last year’s world championship. He recently won his second event of the year, Shanghai Grand Prix in June and followed with a Pan-American title last month. Meinhardt won his second career world bronze medal behind Massialas last year and currently world #4 foilist. The #3 fencer on the US team, Chamely-Watson, was 2013 World Champion – the first American individual men’s title in the senior championships. The alternate, Imboden, was last year’s world #1 and won Paris World Cup (repeating from last year) and bronze in Havana Grand Prix this year.

    For the individual – Massialas is currently the hot fencer and one of the favorites to win or at least medal in these games. Meinhardt is consistently a top finisher and could get in for a medal as well. If Chamley-Watson is in the same form as he was in 2013, a medal is also possible.

    As for the team – everyone is waiting for the (no pun intended) spaghetti western showdown between the Italians (current World and Olympic champions) and the Americans (winners of two of four team events during the year at Tokyo and Paris). Either one could take the gold medal. Of course, there are other teams like Russia (European champions, world #3), France, China, and the upstart Brits that could be roadblocks.

     

    Women’s Sabre

    Individual – 8/8

    Team – 8/13

    Team – Mariel Zagunis, Ibtihaj Muhammad, Dagmara Wozniak, Monica Aksamit (alternate, team event only)

    Headed by twice-gold medalist Zagunis, this team has been the most consistent – winning medals at the last four world championships, grabbing the title in 2014. Both Zagnuis and Wozniak are both returning Olympians (fourth for Zagunis, second for Wozniak) with the other two making their first appearances. Expected to get the bronze again but would like to have an upgrade. Currently world #4 team, they are competing against France, Ukraine (headed by world #2 and London bronze medalist Olag Kharlan), and Russia (headed by current world champion, world #1 and London silver medalist Sofia Velikaya).

    As for the individual, Zagunis is one of the favorites again – #3 in rankings and recently won a medal at Moscow Grand Prix (silver) and title at Athens World Cup. She was disappointed in London (4th place) but still a medal favorite along with Velikaya and Kharlan. Muhammad has had a good season as well – bronzes at Athens and Orleans World Cups and Pan-American title last month. If she fences well, she could be in the medals.

     

    Men’s Épée

    Individual – 8/9

    Team – 8/14 (no US Team)

    Team – Jason Pryor

    United States did not qualify a team, which meant individual qualification. Pryor worked his way up steadily in the year long qualification, with some top 32 finishes at grand prix events at the right moments (beating the World #1 Grumier at Doha) and medaling in satellite events. Prior to the Games, he recently won silver medal at the recent Pan-American champions.

    He will be the lone American in a tough, mostly European dominated field. Could finish in the top 16. Same statement about women’s épée goes here as well.

     

    Women’s Foil

    Individual – 8/10

    No team event

    Team – Lee Kiefer, Nzingha Prescod

    Both fencers are world medalists – Kiefer in 2011 (bronze) and Prescod in 2015 (bronze). Kiefer has taken the place as the top American foilist with her high #3 ranking and silver medals at the Shanghai and Havana Grand Prix events. She is looking like a medal favorite at this point.

    On both occasions, Kiefer was defeated by Italian Arianna Errigo, current #1 and London silver medalist. Apart from Errigo, the other top rated fencer is Irian Deriglazova from Russia, world #2 and current world champion. Also returning is the defending Olympic champion Italian Elisa Di Francisca.

     

    Men’s Saber

    Individual – 8/10

    No team event

    Team – Daryl Homer, Eli Dershwitz

    Homer won the silver medal at last year’s world champions, the first American sabre medalist at the senior worlds. Dershwitz is fencing is first full year at the senior level, after coming off the junior title. His highlight was winning the Seoul Grand Prix in March.

    Both have a decent shot at medals. They will have to go against a strong field which includes all three medalist from London – champion Szilágyi (Hungary), Occhiuzzi (Italy), Kovalvev (Russia) – as well as world champion/world #1 Yakimenko (Russia), and a duo of Koreans (Kim, Gu) in the top 5.

     

    That’s it for now. Hope all you enjoy the fencing events from Rio

  • 4.26.06

    10 Year Anniversary at CDG/Innate (Business Cards)

    Update: OK, someone found out that I was two days off. Oh well. Still a long time! 🙂

  • The Art of Responsive Design

    (Originally published on CDG Interactive/Innate blog,
    edited by Emma Lehmann, republished December 9th, 2016)

    Header graphic for The Art of Responsive Design - "RWD " in multicolored tunnel

    Image created by Casey Hawes

    Over the past few years, many of you have heard of the term responsive design. Basically, it’s an approach where we build web apps and websites to be usable across a wide range of devices, from mobile phones to laptops.

    But instead of tricks, techniques, and more code (there are plenty of basic responsive design tutorial out there), I want to go in a different direction. Instead of asking ’how do we do this?’, I want to ask ’why do we do this?’.

    Here at Innate, we recently designed our Accessibility Services website with responsive principles. Instead of answering basic questions, we want to delve into the types of problems we encountered that influenced how the design developed, as these are common problems for all responsive sites. It doesn’t matter if it was one person or a company like Innate; when we all build a responsive site, we are solving these problems at every step of the way.

    So, let’s start solving some of these problems.

    Screenshot - Innate Accessibility Site

    The Three ’C’s

    Responsive design is like solving a puzzle. When someone asks me to describe it, I tell them the following three words: constraints, context, and content.

    For brevity, I like to call them the three ’C’s. If I were to give them descriptions:

    • Constraints –the conditions, restrictions, and parameters for the given problem
    • Context – the situations or circumstances in which you have to work on the problem
    • Content – the way in which information is displayed for the given problem

    These three ‘C’s are needed in varying amounts when building a responsive site – sometimes, some more than others. But together these are necessary to solve responsive problems. The better the mix of each piece, the better the product. Each part contributes to the whole product.

    So, how do we use the three ‘C’s?

    Graphic representation of Content, Constraint, and Context

    Image created by Casey Hawes

    Referring to the above graphic, think of Content as water. Constraints as a container. Depending on the amount of content, you will choose the appropriate constraints to display this content. If you have a long article, the viewing on a phone will require more scrolling than that of a wide screen monitor.

    With Context, referring back to the water analogy, our problem can change depending on circumstances or environment. At room temperature, water is liquid. But change the temperature and we get either ice or steam. With design, that means adjusting our design to meet these changes.

    Constraints

    Like all problems, we need constraints to get the best solutions and designs. Finding constraints allow us to make good assumptions about how to solve a problem. Let’s start by making a few right now.

    The most obvious problem in responsive design is conforming to the screen sizes of numerous devices. How do we get a website or app to fit in the screen width of a phone, tablet, and laptop? When we consider the number of devices on the market, we see there is a large range of screen sizes. But by finding constraints, you narrow down the problem, making it manageable.

    What is our minimum screen size? Right now we’re not thinking about smart watches (at least not for the purpose of this demonstration), so let’s stop at mobile phones. Apple has pretty consistent design parameters and the classic iPhone has a minimum of 320 px, which is under the range of recent larger models. This is the stopping point on the small end of our constraints scale.

    On the large end, we are not considering TVs (at least not for the purpose of this demonstration), so we need an upper bounds for desktop monitors or laptops. Right now, 1400 px is a nice place to put an upper-limit constraint.

    Why these numbers? Global stats are a start but the best statistics are a combination of site logs and Google Analytics.

    In addition to the extremes, we have a few other number to consider, such as ones for laptops (1024 px) and iPads (786 px). These aren’t necessarily standard, but they are starting points. During the course of building, you will find out the other two parameters – context and content – will affect the constraints. For example, the footer may not look right somewhere between 320 px and 768 px; if this is the case, a new constraint will need to be added. You can really have as many constraints as you want, but the best motto (and the one with less headaches) is the fewer constraints, the better.

    Constraints are like conditions, though. They don’t need to be screen size; there are others as well, such as orientations (vertical or horizontal), resolution and pixel density, etc. Other constraints could come from areas beyond your own work (product requirements, project specifications, etc.).

    No matter which constraints you are dealing with, they can be influenced by context and content. Let’s look at how this works.

    Learn how to adapt to different screen sizes from this informative Intel tutorial:

    Context

    As you’ve seen, constraints can help define a problem and lead to a solution, but context informs these constraints. Oxford Dictionary defines ‘content’ as:

    The circumstances that form the setting for an event, statement, or idea, and in terms of which it can be fully understood and assessed.

    For example, taking one device (a tablet), we can drill down in the Analytics data to discover Insights that drive content in learning lessons such as : 1) when users read tablets depends on the time of day at home or work, 2) tablet users are using their device in landscape instead of portrait mode or 3) whether the devices used for certain tasks are Android or Apple, and screen size/viewport.

    But more than just statistics, it comes down to research and observation. Taking a device (there are device labs you can check out) and learning about how it handles and comparing with other devices. The experience gained influences how we design/build responsive sites and apps.

    Why does this matter? By using context, we can refine our solution and design to better fit a solution to the problem we need to solve. As a consequence, context will define each of our constraints to accommodate user behavior.

    Yes, it feels time-consuming, but it’s worth it to create a great user experience. There is still a third element that must be considered, though: content.

    Content

    At its simplest, content it the stuff that’s on the page. However, with the ever-changing layouts from responsive design, content must become more sophisticated.

    In thinking about content, we have to remind ourselves that the core concept of the Web is information.

    With the advent of responsive design, we now have a process where we can create websites and apps that can carry the nearly same information without device constraints. However, constraints and context shapes how we view content. It’s not a matter of just hiding or showing words. It becomes a matter of determining what content has the highest priority.

    With changes in layout and the concept of the fold largely negated, we needed to rethink how we place content on a screen. Or I should say, we need to reconsider old ideas about placing content on a screen.

    NASPGHAN homepage with open navigation

    For example, the non-responsive NASPGHAN site has complex, deep navigation. Mentally, you would think that the code for this would come at the beginning of the page. However, because the navigation is so large, it would take a vast amount of space before the content the user wants to read. In this case, code for the navigation is written at the bottom with its position displayed via CSS at the top. If you were to use a screen reader/non-visual tool, you could get to the content readily but still get to the navigation via skip/anchor links.

    When creating content, keep a mobile-first mantra. Design for the mobile site first and let the constraints of a small environment help select the most important content. Then, as the user gains more real estate or features, give them the extra content. Essentially, just let your constraint and context will be a guide in your content selection.

    Prioritizing content creates a flow of information along the screen which aids in how layouts are structured. This, in turn, allows you to adjust content for better solutions to constraints. When creating content for responsive design, the best practices are:

    1. Prioritization – determining what content gets the highest importance
    2. Distribution – determining which content is important enough to cause readers to scroll down.

    A Collaborative Art

    The most important thing that I hope to stress is that responsive design is not a singular effort. As in the jigsaw puzzle at the beginning of this blog post, each project is a combination of the three ‘C’s. A little more content in this project, a little more context in the other. Responsive design is a process that involves many processes and, in some cases, many people to bring it together.

  • To All My Co-Workers And Clients:

    I want to apologize for all the bad coding decisions that I have made during the last couple of years. A number of decisions were made with ignorance as the impact they may have made in terms of performance. Some of those decisions may have been made without consideration for the user.

    If I seem out of sort during the last couple of week, it was simply because the changes I need to make will require changing not just code but a mental process. Like anything, this will take more than a fortnight to change. It is a process of renewal and making mistakes and just throwing stuff into the trash bin.

    What I need is some understanding and some patience while this process works itself out.

    Sincerely,
    Ivan Wilson
    Front-End/UI Developer

  • And Now This Message From The Author…

    Sorry for the three month delay. Usually reasons: work, personal, and fencing. I would say that nothing has changed but that would be a bold-faced lie. As a matter of fact, more things will be changing in the next six months than the last year.

    Writing

    • Finally starting work on The Information Layer, with the first part ready Saturday, August 6th.
    • Writing a few more blog entries for CDG, one this month
    • One very important blog entry for TWP this month, currently writing now

    Conferences

    Going to a number of events during the last couple of months of this year. Two of the most important are in the month of October:

    Exhibitions

    In short, been really too busy to go any art exhibitions in the last couple of months. However, there are a few that I am trying to get to before they close in September.

    Work

    As I mentioned before, many things will change. How much/what kind will be detailed more in the next TWP blog entry, called “A Love Letter.”

    Indirectly, eventhough Project Charles ended in April, the Delta version of this site will be completed by the end of the year (if nothing else drops from the sky…).

    Fencing

    Well, fencing will be…fencing. Practice three times per week, one competition per month. Still working out the schedule for 2011-2012 season.

    Music

    Due to my work schedule, missed out on attending Met’s performance of Berg’s Wozzeck. However, looking at the 2011-2012 schedule, will be marking my calendar for the following operas:

    • Satyagraha – Philip Glass opera about Ganhdi (November 2011)
    • The Makropulos Case – Leoš Janáček opera, based on a story by Karel Čapek (May 2012)

    Apart from the classical scene – Elbow comes to DC in September (Yeah!!!)

    That is that I have for the next couple of months…

    And yes, I will be taking a vacation. Back to the PNW (Portland, OR/Vancouver, Canada) for my birthday.

    What’s that sound? That’s the sound of my Google Calendar crying like a baby…

  • (How) Geocaching Taught Me To Visualize Information

    (Originally published on CDG Interactive/Innate blog)

    Earlier this year I attended the IxDA Interaction 11 conference in Boulder, Colorado, one of most important in the field of interaction design. At this conference, I’m both an observer of the field and a student, gleaning ideas I can use to improve my own skills.

    In my three years of attendance, I’ve learned that interaction design is not just about building products — it’s also about how to visualize information. One of my jobs is taking HTML/CSS code and making the content not only visible but easily accessible to the user. At a time when massive amounts of data are freely available, finding ways to making information not only understandable but also easier to use and manage has become its own field of study.

    Making Information Visual

    So what does “visualizing information” mean? For example, take a basic weather map we see on the local evening news. Apart from the physical location and geographical borders, information about air pressure and temperature are shown in graphics, instead of a straight list of numbers and statistics. This same information is given some sort of context (work, travel, agriculture) for viewing. From this, we make judgments about what activities we want to do at a certain time period (going to work, growing crops, flying on vacation).

    We can use maps to overlay any information we want, depending on what we need or want to do. But one use of a map is something that we have been doing since childhood: using a map with information to find something.

    And that’s just what I did at IxDA in Boulder. Each year’s conference has a different twist, depending on the location. Home to The University of Colorado, Celestial Teas and a growing tech/design area, Boulder is nestled near the Rockies and has a reputation as being eco-friendly. Well, when looking at the list of Friday activities, I found one that caught my attention: Geocaching: Treasure Hunt.

    The “Treasure Hunt”

    Geocaching is a hide-and-seek game where finders use GPS units or GPS-enable mobile phones to find caches. These caches are containers that have various items inside. They can be as large a small Tupperware case. Or they could be micro caches, which can be as small as a 35mm film canister. Either one, these are located in publicly accessible areas and are hidden from view. However, the owner of a cache will leave some clues (text, title name, or images) for the finder to locate it. Of course, having a GPS unit does not mean it will be easy to find. If you have ever used one, you know that there is a certain range of accuracy depending on the signal and location.

    Occasionally, these caches will have a travel bug, a type of GPS-enabled tag with a unique ID that the finder/owner can move to any location and place inside another cache. Once the cache has been found, the finder must leave something of equal/higher value in the cache, especially if something is taken from it. The finder marks that she/he found the cache via paper/app/website and replaces the cache in the exact spot for others to find.

    Hmmm. Hide and seek with GPS tools. Exercise with actual pay off. Sign me up!

    Following lunch on Friday, the group got together. I was matched up with Jill, one of the advisors, due to the fact that we both we the only ones in the group who had Android phones. (BTW…interaction designers luv iPhones. Just an observation… ) I downloaded an app (there are a number of apps for iPhone and Android) beforehand and played around prior to the trip. It also helps if you have the latest upgrade of Google Maps on your phone with navigation abilities.

    We traveled to an area in Boulder where we separated into three groups. The group I was in located a micro cache about 0.7 miles north and we walked down some streets to the location. This was located in a parking lot (caches need to be in a public place). The GPS trackers got to about a couple of feet nearby. However, it had snowed a few days prior and the parking lot was covered in snow mounds about a few feet thick. I tried digging with gloves to see if I could find it but to no avail. Everyone searched around the area but no luck. Considering the area was still snowbound and we were finding a small micro cache, we decided to search for another one.

    Looking at the geocaching app, we found another micro cache only a few meters away north. Unfortunately, we came up empty again – a snowbound area with little clue to finding it.

    We decided to move to another one, this time a regular sized cache. This one was about 0.3mi west from our present location. Crossing streets and more parking lots later, we finally got to the location. Many of us recognized the location because of the clue given in the title. Like I mentioned before, the GPS only gives you a close proximity to the location; you still have to figure out where it actually is. Another clue pointed to its actual location. That’s easy enough.

    Well, almost. Now, you have to try to get it out. Remember, these caches were not meant to be easy to find in the first place…

    Finding the Prize

    The tallest of the group reached in and pulled out the prize – one round metal candy tin. After a few hours of searching and coming up with the third choice, needless to say we were all ecstatic (judging from the group picture afterwards). Then we opened our prize.

    Caches contain any sort of object left over from the previous finders or owner. (There are rules to what can or cannot be put there). This one had a simple log book, with list of names and dates, referring when the cache was discovered. One of the more interesting items is a small tale/story in two small pieces of paper, folded in the cache. It also had a squashed penny. This cache had a travel bug, which was taken by our advisor to be placed in another cache. As the custom, we had to put something back into the cache. A few items were put into the cache from other but someone shouted out “Does anyone have a coin?” I had some Canadian coins on me and threw in a “toonie” or a 2-dollar Canadian coin into the cache.

    [By mentioning this, everyone here in the Innate office will automatically reply “Of course, he has one!” Needless to say, I take a lot of trips to Canada.]

    Well after the celebration and signing of the small log book, everything was sealed up and the cache was place back in the same location before. The adviser marked the find on the site, along with the items that we placed in the cache.

    Mission completed. Smiles but tired walking back to the bus and then back to the hotel. For me, the day was complete.

    Now, when I work with information and its display, I’ll remember the connections between data and discovery that are made when geocaching.

    P.S. I mentioned the travel bug earlier. Beforehand, it was revealed that one of goals, besides finding the caches, was to have at least one of the travel bugs moved bit-by-bit to the location of the next conference – Interaction 12 in Dublin, Ireland in February 2012. If this one makes it, it will no doubt be very well received.

    For more information

    Your turn:

    • Have you ever been geocaching?
    • What are your favorite examples of interaction design?
    • How about visualization of information?