Tag Archive / modeling

  • A Brief Note on Container Queries and RWD

    Well, while making the first steps in writing my next lecture about responsive design, I came upon a Tweeter discussion last week. Ethan Marcotte, author/mastermind behind RWD, talked about container queries and his support for them. Very interesting read.

    Ethan Marcotte “On container queries.”

    I’ve heard about container queries before during the last year or two. But I decided to read this article with much more intent because of topic relevance.

    To describe container queries, you need to think about web apps/sites as a system. Changes via media queries are macro, that is, applied to the whole system. It’s what we been doing for years. We build the base (preferable mobile first but any sort of initial state we want) and apply changes at certain breakpoints. So when we write the following media queries:

    @media (global conditions/breakpoints #1) {

    … some changes here...


    @media (global conditions/breakpoints #2) {

    … some changes here...



    what we are doing is

    Global Media Queries (Ottawa Model)

    Even though these changes are to certain areas such as footer/header/etc.., these are applied as if the whole app is one big container.

    But with container queries, we are applying changes at the micro level. Instead of the previous example, we are applying changes to local containers. The queries will be influenced by the container conditions, not by the overall viewport. So now instead of the previous model, we have the following:

    Container Media Queries (Ottawa Model)

    and with each part

    Container Media Queries - Expanded (Ottawa Model)

    we are applying changes on the local level/containers. These media queries are not global and [could] be different from other containers. You could have a combination of global and local conditions in this system as well (don’t know if this would happen but you never know):

    Container/Global Media Queries (Ottawa Model)

    As for the talk/lecture, nothing had really changed. The main focus of the talk is the “why’s” of what we do in terms of RWD. However, it is obviously something to think about further.

  • The End of Project Ottawa

    Almost three months ago, prior to me attending the IxDA Interaction 13 conference, I decided to put the project on hiatus for two months.

    Well, that time has passed and I have come to the decision that this hiatus will be indefinite.

    At this point, I am leaving this somewhat open ended because I do not know when I will come back to this, if at all. Some of the ideas here will return in different situations down the road. But as of now, no further work will be done and there will be no third draft. The previous version will still be online (see Second Draft) but no further revisions will be made in the near future.

    I want to thank everyone who helped me along the way, especially during the craziness of last year. Most important, I want to thank all those who let me bend their ears [constantly] about my ideas and gave me some much needed advice. Right now, Ottawa is at a state where I cannot devote any more time and there are other projects that need my attention. In some respects, Ottawa may have been a solution in need of a problem and I suspect it may be a couple of years before it is fully understood.

    Thank you all,
    Ivan Wilson

  • Happy Anniversary, Project Ottawa

    Last year, prior to going to Jonathan Snook ‘s inaugural SMACSS workshop in Ottawa, Canada, I was thinking. There was something that I was on my mind for the past year. Then, [place lightning description here], I got inspiration from looking at some of my old linear algebra books from college.

    What did I do next? I announced it on Twitter:

    I spent whatever free time, post-workshop, working on this in my [first] Moleskine notebook. The early sketches look more like algebra proofs that the visual model that exists today.


    However, these sketches and some rules that I wrote down became the basis of the project’s First Draft.

    Preview - New Project

    And as they say the rest is history.

    Though currently on hiatus, I am planning a few more sketches and notes in the current year.

    Hopefully, this project will still be around for year two.

    Happy Anniversary, Project Ottawa!

  • 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.

  • Why Is Project Ottawa Important?

    We [FEDs*] have tools for building,
    We just don’t have tools for describing what we build.

    FEDs* build things – things called web applications. We use code, graphics, etc. We have tools at our disposal to do this. But there is one problem. Architects and engineers can create blueprints and models to display their project.

    We don’t.

    We have have code and content. But all of this is just words without context. And unless your are willing to search and dig through all the code and comments, its still pretty useless.

    What I did with Project Ottawa was take the patterns of building – views, code blocks, scripts – and create visual symbols with reference to these items. Here, the advantage of Ottawa is giving a visual description of the web application. Not just its parts but also its interactions and their relationships among the various parts. Its not a comprehensive view, it just has to be as concise as possible without losing too much precision. And the possibility of manipulating this data to do more interesting things in the future.

    * FEDs – Front-End Developers