Sunday, May 15, 2011

The REAL reason you need Flash in a mobile device...

People keep going on about how you don't need Flash on a mobile device because most video sites like YouTube provide HTML 5 flash free versions. Therefore the limitation of no Flash on an iPhone isn't really a limitation (if you have been drinking Steve Jobs' Apple juice/kool aid).

Anyways, last Saturday I found out the REAL reason you need Flash on a mobile device and it has nothing to do with video.

It has to do with restaurant sites.

For some reason at least 80% of restaurants out there have Flash only websites. If you need to make a reservation and you can't find the phone number in Yelp or UrbanSpoon then you have a problem.

In any case, I was trying to find the number for a restaurant and Google gave me a link to their website. Unfortunately, their website is in Flash. Fortunately for me though, my phone is an Android phone and I was able to look up their phone number and address in spite of the limitation.

In general though, having Flash on a restaurant website is annoying. All I want is the address, phone number, a copy of the menu and a few pictures of the interior and the food. The ability to make reservations online is also a plus (not to mention online ordering if it's a take out restaurant).

PS In spite of their lousy Flash only website, I do really recommend the food at Anong Thai in Potts Point, Sydney. It is excellent!
http://www.anongthai.com.au/

Tuesday, May 10, 2011

CSS Back to basics: Here comes TRBL

So I guess CSS is not obvious to everyone. One of my coworkers asked today why you sometimes had 1 value after a "padding" attribute and sometimes you had 2 or 4 values.

Basically,


padding: 5px;

Puts a 5 pixel padding on an element.


padding: 5px 3px;

Means you have 5 pixels of padding on the top and bottom and 3 pixels on the sides


padding: 3px 4px 5px 10px;

Means you have 3 pixels of padding on top, 4 on the right, 5 on the bottom and 10 on the left.

A good way to remember this is the acronym TRBL (like "trouble").

The same applies to "margin".

As well as this, you also have extra attributes which can specify the top, bottom, right and left paddings on their own

i.e.

padding-left: 10px;


Sometimes, if only one side is unique, it's better to refer to it in the following way (for readability).


padding:5px;
padding-left: 10px;

The "padding-left" of 10px will override the "padding" of 5px, but only on the left side of the element.


padding: 5px 5px 5px 10px;

The above does the same, but is less readable in my opinion.