Tag Archive / front-end

  • Revisiting The Art of Responsive Design

    The Art of Responsive Design (Innate Blog)

    About a year ago, I wrote a blog post about responsive design. But instead of the usual techniques, I decided to describe it with three terms – Constraints, Content, and Context.

    A year later, these three terms are more relevant than ever, especially Context. I am thinking about re-editing the post for brevity but the main points will remain.

    Update (12/9/2016): Innate republished the blog post today (thanks!) and it will be the source of a new lecture sometime in mid/late 2017. *fingers crossed*

    The Art of Responsive Design (2017) - Notebook

  • Coding The Problem

    There is this “thing” that has been nagging me for almost a year.

    Basically, it’s a conversion that I had with a CEO of a company. Anyways, during the course of the conversation, he brings out this remark:

    “Your job is to code, just like the designer’s job is to design.”

    That comment bothered me. It wasn’t a comment bore of malice or ignorance. It had some truth to it. But it missed an important point. It was the equivalent of saying “My job is to write HTML.”

    Now, there’s nothing bad; that is part of my job. But only a part.

    No, my annoyance is this:

    If my job was just coding, then I’m not doing a good enough job.

    OK. Let me explain.

    Coding is (relatively) easy. Businesses can pick and choose what company or freelancers to do the work. For a cheap price, the work can be farmed out to anyone of the many off-shore companies at will.

    Altogether, that the big talent pool of coding talent.

    You, (client/CEO) have to go through this massive pool to find the right person. But that is not what you are looking for. The truth is that you are not looking for someone to code.

    You need someone to solve your problem.

    As for coding? It’s a means to an end. Employers don’t hire people who code; they hire people who can solve their problems. (And also it’s the same thing that will keep them around…)

    Now, I wish he was around when I said this. I have no doubt that both of us would be agreement.

    There was another thing that he said, in jest, but in hindsight just as important. Basically, people like myself like the “shiny, new projects”. And yes, I admit, they are the nice ones to work on.

    But. There is a group of problems, the “old – fixed it just for now” problems that really need attention. The ones that are begging for someone to just look at and say “you know, if you give me some time, I think I could make this better.”

    There are lots of those problems that need serious attention, not the million dollar, new app of the month ones.

    Then, there is The Content Problem.

  • Building the Future, Day 1 – The Beginning

    Like all things, every story has a beginning. In this case, [Project] Ottawa started with the concept The Information Layer (2009). But what came before this?

    Well, it all started in Vancouver, Canada (February 2009) where I saw this film, in a lecture by BERG designer Timo Arnall:

    Wireless in the World 2 – http://vimeo.com/12187317

    In Wireless in the World, they were imagining wireless networks available in the surrounding environment. Now, this looks like an interesting film. But to me, it was a pretty eye-opening experience. You see, up until this time, I only viewed the Web as being static. That is, something that was only accessible from the comfort of a chair and a desktop computer.

    Step back for a moment. Now imagine all those dotted circles representing access points just like one of those desktop computers w/chairs. It would look funny at first but the main point is that each one of those access points is accessing data. They are accessing the same content I am through my desktop computer. If your concept of content is something that is seen through a desktop monitor, what does this do? The concept of having the same content available across all sorts of devices, being available at will – without the constraint of the standard web page format. Even without the author controlling how the information was displayed. The user now has the power not only to access the information but to display it in any fashion he/she wanted.

    That idea of information being free, not in the political sense but in accessibility, really changed how I worked. After that film and the lecture, I decided that my job as a front-end developer was not of creating layouts. My job became a person who tried to build products that allowed for easy access to information. Building the layout with excellent code was simply a means to an end. Improving upon the work simple meant improved access to information. Information, in my terms of my work, is equivalent to content.

    At this point, I was trying to find a way to explaining this way of thinking. It was only a few months later that I was looking at XSLT or XML transforms. Basically, it is a method of taking data in the form of a XML format and transforming into a format resembling a HTML web page. Well, XML is an open format, anyone can use it at will and modify the information to display it in any form they want. We have RSS feeds – XML format data streams that user can collect data and use. This is where all the dots began to connect. You see, XML or JSON, can carry content/information anywhere with the user applying the formatting.

    Going back to this point, I wrote some ideas and sketches which later became The Information Layer. What I realized was that the current UI model was not sufficient – it was simple not granular enough to fully describe what was happening at the time. One of the novel things I did was creating a separation of the Semantic (HTML) Layer from the Information (content) Layer. How important was this? It was very important because it depicted the free flow of information /content. It also displayed the fact that HTML has its own sense of meaning, which was further expanded with HTML5 semantic tags a few years later. This was not a new concept but was not fully realized until now.

    And so, that was the beginning. From here, I used this model for building my work.

    As I mentioned in an earlier blog entry, Project Ottawa is simply the first practical application of the model. This was revised recently to deal with the concept of content, which will be the main focus point of Project Ottawa/Third Draft.