I had all my preparations taken care of and was to drive down to Halifax on the third of may, whereupon we would embark for New-York, Miami and Tegucigalpa the next day. The day of my departure from home was not without any surprises, however! As we were boarding the plane at Halifax at 1:15 PM, I had planned on departing at 9:00 in the morning. Plans changed quite fast when in the midst of my sleep I received a call from one of my friends who was coming over to pick me up within minutes.

We arrived in Halifax very early, with our parents and dearest friends. The flight to New-York was relatively uneventful, but there we found a plethora of shopping corners in the airport. I have probably had less than five hours of sleep in the last two days, hanging around in JFK or Miami International. We stayed a few hours in JFK, but we had a full 13 hours of wait in Miami. Our sleep was all to frequently interrupted by the automatic announcements they had in Miami.

Me and another of my friends, baffled by the carelessness of US security agents compared to their Canadian peers, and motivated by a sort of mischief spirit, exchanged passports to see if we would be intercepted at the gates. As the airport incessantly cautioned over showing proper identification papers when crossing the gates, we were surpised to see that the security agents saw no difference between our curly and straight hair. It did not leave the strong impression of security that we were led to believe from the US.

We found, very unfortunately, that most of the people at the US airports were rather reluctant to talk, or outright impolite. However, when we boarded the airplane from Miami to Tegucigalpa, we found out that we were going to stay with a nice people. We were immediately surrounded by Spanish advertising and newsletters, the air flight attendants seemed to talk Spanish better than they did English, and we were there, practicing short sentences in our seats. I will finally get the immersion I was looking for to master a third language… hopefully I will have time enough in four weeks of stay here.

Getting down just outside of Tegucigalpa was not without its difficulties, and we had quite an interesting experience there. Although there are currently to the best of my knowledge no officially reported cases of the Swine Flu here, we were greeted by a number of employees with masks urgently pressing us to sign some papers alledging we were free of the symptoms of the virus. There was a long lineup to get through the gates and the quick checkup that extended beyond the lower floor lobby and, quite problematically, into the escalators. Quite amusingly, people were piling up at the bottom of the escalator with all their luggage!

There we met with a nice lady from Argentina with whom we talked about Honduras and our own beloved country. She proved to be extremely useful (and nice!) later on when we tried to get through the gates. As we slept through part of the flight, me and another of my friends were missing some papers which the distributed in the airplane duraing the trip. We were trying to get our hands on a copy of those papers, to no avail. They were not letting us cross the gates, and we were going to be stuck somewhere between Honduras territory and international territory! Kinda reminded me of the movie The Terminal…

We were afraid we would not be able to cross the gates, as the agents there were not being very helpful to us, when this lady we met earlier came back and told us “you are my nephews now, quiet and follow me! Hide what papers you have beside your passport!”. She spoke to a few security officers, which in turn led us inside the gates. We went through without much trouble, and I daresay we might have had some if not for her.

We met with Nicholas (sp?) at the Terminal, who led us around Tegucigalpa and around the city. Let’s just say the people here do not drive like we do in Canada! We ended up rolling on a huge nail and getting a flat, so we had to drive slowly in order to preserve what air we had in the tires. We filled them up at a gas station on the way, and finally reached a roadside mechanic. That did the job for us!

We are currently staying at a 16$ a night hotel, which is surprisingly nice, with a large pool in an indoor court. I have eated a typical dish from this region, and I would venture to say that it was the greatest piece of food I have had in days, if not weeks. It looks like my allergy problems will not be of much consequence here, but hey- who know what the future holds!

This is the most beautiful place I have ever seen, and I would glady share some pictures here, but I fear the internet connection is rather slow, and I had to try for thirty minutes just to get my WordPress blog to load at all.

I will keep posting as frequently as possible, but now time flies by too fast and I need to try out the shower.

Why is it that the internet, so passionate about user-friendliness, does not go out of it’s way to produce a layout that is flexible to the screen resolution of an arbitrary device or window? In a time where netbooks are becoming more and more popular every day, where monitor sizes vary from laptop to desktop, or even from landscape to portrait mode on tablets, it seems the need for a more flexible framework is more than ever present.

Working for Scriptnetics Inc. has given me enough time and resources to experiment with CSS and Javascript (amongst other technologies) to produce a corporate website which would reflect the need of our clients: since we mainly do software for tablet PCs, the aim was to provide content in an arbitrarily sized window, at an arbitrary width-to-height aspect ratio.

So why not start this exposé with a few screenshots?

You can see the website by yourself at http://www.scriptnetics.com/

While we’re at it, why not give out a few tips to the CSS newbies out there?

Firstly, let’s assume that pretty much every measurement is done in percentages—widths, padding, margins—and that floats are used to divide the columns. There you have it, it doesn’t become easier than that!

Let’s see how images behave, shall we? If you look at the above screenshots, you will see that two methods for displaying images are exploited. The first is through the use of the <img src=”" alt=”" /> XHTML tag, while the second uses the background url() property of CSS. The main difference between both is that the XHTML tag supports relative scaling, while the CSS background property provides an easy answer to relative positioning.

XHTML images

<!-- navMenu is of relative size -->

<div id="navMenu">
   <img src="" alt="" style="width: 30%;" />
</div>

CSS background images

/********************
The image will be displayed within #someParticularElement and will
be positioned relatively.

Therefore, when #someParticularElement changes size, it reveals
or conceals parts of the image at a different rate on each side,
according to the percentage values specified.
********************/

#someParticularElement {
   background: url(images/image.png) no-repeat 30% 40%;
}

To achieve either effect is simple; to get an image to scale down relative to it’s container, one only needs to specify the width of the image (say, 30% of container width) for the image to scale up and down in size, while preserving it’s aspect ratio. The main advantage of using XHTML images over CSS background images is that it represents a more semantic way of delivering information through images.

The CSS background image alternative effectively moves the background in a certain expected way when the window resizes. The biggest disadvantage of using background images to present content, semantics aside, is that images bigger than their container are needed. When you don’t know how big the image will display, you can only hope for the best—it hopefully won’t be viewed on an Apple 30″ Cinema Display…

Lets move on with another nifty trick for preserving the relative aspect ratio of a container element.

Go and take a look at this page to see an example of an aspect ratio preserving layout. Notice the use of the CSS background property to display the image, and how it is displayed at different resolutions (these things are better tried than viewed on a static image). What makes this one work is actually quite surprising : when you set a vertical margin or padding in percentages, it is calculated relative to the width of the parent container. What this means is that you can use padding to set the “height” of an element.

If the purpose of that element is to contain other children elements, you can make the children floats, or you can position them absolutely. The biggest problem with this technique, however, is that even though the parent is relatively sized, it can only accomodate so much content. Floats, for example, tend to overflow the parent container:

And so it often becomes easier to use absolute positioning.

Another nifty CSS trick is to use negative margins. The presence of a negative margin in one direction effectively pulls the displayed element an equal amount in that direction. This might not appear immediately intuitive, but it turns out very useful when trying to vertically (or horizontally) center an element.

How to center an element both vertically and horizontally

#parent {

   /**********************
   The parent element needs to be positioned.
   **********************/

   position: relative;
   /* position: absolute; would also work */

}

#parent #element {

   /**********************
   Define a width and a height.
   Here the height is taken care of by the padding, which will
   be 3/5 the value of the width.
   **********************/

   width: 50%;
   padding-bottom: 30%;

   /**********************
   Set the position to absolute.
   **********************/

   position: absolute;

   /**********************
   The margins need to be set to half the respective width and
   height of the rendered element.
   **********************/

   top: 50%;
   left: 50%;
   margin-top: -15%;
   margin-left: -25%;
}

I realize that in theory, all of these tricks are quite simple. It is however quite rare that I see a page that makes a genuine attemt to push the limits of ‘resizeability’. Ironically enough, however, at the time this article was written, this blog was fixed width. We all need to make design decisions, and they are not always the same. Besides looks, we need to consider the product’s application and the impact it has on users.