Guest post: Jonathan Slenders on CSS

In a previous post I wrote my idea's on how I would expect CSS to work. Jonathan is much more knowledgeable on the subject and wrote me a very interesting and insightful response. Since it was too long for the comments section, we decided to post it here as a guest post.


To begin with, use { display: inline; } instead of { float: left; } for the horizontal menu.


I understand your argument that a designer should be able to write his style sheet independent from the HTML to which it eventually will be applied. Working this way, would however require a third mark-up language to define the matches between the HTML elements and the style. But because a designer usually wants to see his changes in the CSS directly reflected in the resulting page in the browser; it causes that he too will need to maintain that third file. Too much overhead, in my opinion.

CSS should be applied directly to the HTML, and the designer should have knowledge of the HTML structure. I'd say, if the structure of HTML documents didn't change as often as they do in reality; it wouldn't be bad to write the structure conventions in an XML schema (or DTD-like format).

You say "I think the programmer should not be aware of the CSS class structure that the designer will use". It's weird, because it's actually the person who writes the HTML, who is responsable for choosing appropriate class names.
In my opinion, the most important guideline here is to use semantic class names.
Never write
<div class="italic"> text</div>

This requires not only a superfluous CSS rule: .italic{font-style:italic;}, but also moves styling back to the original HTML like it was years ago. Even, <i>text</i> or
<div font-style="italic">
text</div>
would be better, because they tell the same, but don't depend on a redundant CSS rule. There is a reason why the text has to be italic, maybe because it has to be emphasized or because it's a news title, use that as a classname.
<div class="newstitle">
or </div>
<div class="emphasize">
are much better. (Though, I would replace the latter with <em>text</em>, the HTML element reserved for emphasized text.) In CSS we can then write  .newstitle{font-style:italic;}.</div>


You came up with "inherit: .horizontal-menu;" to avoid redundancy. It can already be avoided, and the recommended way to to so is by using a comma-separated list of selectors like:

p.class1,
p.class2,
p.class3 { color: blue; font-size: 120%; }

This avoids declaring three times the same for each element. Unfortunately, this syntax forces the design declaration of class1, class2 and class3 to be in the same place. This could become hard to maintain, in larger CSS files. For instance, I usually group all the styling for news items together, the styling for blog entries together, etc... But suppose that a small part of a news items needs to have the same styling as a small part of the blog, there's no way to keep on that CSS structure.
Therefore, I defenitely see the advantage of your "inherit: .horizontal-menu". However, this syntax could result in obiguous declarations without proper priority rules. The current priority order is already complicated (inline CSS has priority over document level CSS, which has prority over external included CSS. The order of the rules is also of importance, and finally the "!important" declaration gets priority over everything. More specific matches like "body p" could also ofter get priority over a simple "p".) I guess that adding inheritance your way would even more layout declarations to be combined: those of all the parent nodes (e.g. in case of color:inherit), the inline declarations, document CSS, external CSS, all the inherited CSS declarations. I would design CSS like this:

%horizontal-menu { display: inline; }
.my-main-menu { inherit: %horizontal-menu; }

Similar to yours, except %horizontal-menu is never applied directly to any HTML element, it shouldn't match any class name, and is used like a preprocessor to the interpreter.

There are probably enough discussions about what's wrong with CSS, it shouldn't have been flat and CSS selectors should've been replaced with XPath. But this is the way HTML and CSS work are historically grown. The first designs were pure HTML. Positioning was always done with tables. Colors, font-styles and other styling was done by adding styling tags to the HTML. (e.g.
<div color="red" font="Arial">
text</div>
) It feels to me like CSS was designed to avoid repeating this layout tags on every single HTML element, but it didn't ever intend to totally separate the design from the data.
It happens too often that I need to rewrite my HTML to get a specific design. For instance, if I want to create a nice border around the site by using 8 background-images (one for each corner, one repeated for each side), I always end up nesting eight divs like
<div class="container1">
<div class="container2">
... </div>
</div>
and use one
<div>
for each background image.

Finally, a perfect website should be like:
html = data
css = design
javascript = behavior

and classnames are used to glue these together. But because of the limitations of CSS, desigers have to adjust the HTML to get their CSS working.

Google Nexus One Android: 5 things to die for, 5 things to cry for

After 5 years of Windows Mobile, this is my first Google phone. The Nexus One is better than anything that came before it, but it can still be improved.

This review is written on the Nexus One after my first weekend with it. Besides the various Windows Mobile phones that I used over the years, I have the habit of taking a different phone with me on each yearly holiday. In this way I have played with the likes of Nokia N95, iPhone, LG Cookie, etc.

Summary

This is the best smartphone on the market. It is fast, good looking and it has a rich feature set. It is the first phone that gives truly usable access to regular websites. I can just surf to blogger and type this review, right in the built in browser. What makes it stand out is that everything in and around the device is designed for each other, something that up till now only Apple succeeded in.

The review

Yes, the screen is marvelous, the voice search is amazing and it is stupid that you have to click a little bit above the hardware buttons in order not to miss them. I will not elaborate on that. There are already tons of reviews discussing those properties. Instead, I will present you with 5 good and 5 bad properties that might not be so obvious at first glance.

5 things to die for

1. Usablity
I'll start by telling you this is a very intuitive device to use. Yesterday I was visting friends who had just bought an iPod Touch. They formed the ideal test audience, since they didn't have any previous exeperience with neither an iPhone or an Android device. They made less mistakes on the Nexus. The iPhone left them more puzzled when something didn't work out like they expected. In brief, they found the Nexus easier to use.
Of course, most people will tell you the opposite. It is normal that when you are used to one way of working (be it iPhone, Windows Mobile, Symbian or Blackberry) that having to change your habits is difficult at first. But for someone who has not yet developed a habit, the outcome will be different.

2. Speed
Can you say blazingly fast? This phone responds faster then anything before it. It absolutely rocks. No matter how many applications you open (yes, it does do multitasking) it remains just as fast. For a device that is used for short periods of interaction this makes a very important difference. It is faster then an iPhone, and it certainly is faster then my Tytn 2.

3. The Nipple
I don't how what the official name is for the protrusion at the bottom of the the phone that is used to navigate around the screen, but let's call it "The Nipple". I read some people find this an unnecessary device and would prefer the inverse-optical-mouse of the yet to be released HTC Bravo. I couldn't disagree more. I very much like the haptic feedback that this controller gives you when scrolling around the screen. It is made of a sort of sticking material that grips your skin when you move over it. The feedback you get gives you much more accuracy in your movement then what you get from a flat, frictionless controller. I use it a lot for one handed operation. When you're reading a website without zooming in (yes, the high-res screen makes this entirely possible) it is much easier to use the controller to select a button then to hunt around with your fingers pecking on the screen.

4. Camera
This is not the best cameraphone. Sony still rules in that department. But it is a major step up from what we have seen before with HTC and on the iPhone. Compare to the latter, the addition of the flash makes all the difference in the world. Below you can see an image I took at a birthday party. It was completly dark when they brought in the birthday cake. The only illumination you see is from the candle and the built in flash. The image is not perfect and I would perfer less noise. But I managed to get a usable image that reflects the atmosphere and that is what counts in casual photography.

5. Marketplace
You can argue that Apple's Appstore has far more applications than Google's Marketplace. On the day where I compared the iPhone to the Nexus with my test-audience, we downloaded more then 50 applications on the Nexus and none on the iPhone. Why? Simple. The Nexus presents you with a lot of good and free applications. Whereas the iPhone presents you with mostly paying applications without a try-before-you-buy model. This makes the Marketplace a lot more attractive to endusers, which in the end will inevitably mean that there will be a stronger ecosystem around it and better applications generating more revenue.

5 things to cry for

1. Email
Yes, you can have Microsoft Exchange and Gmail mail pushed to your device. But both Blackberry and Windows Mobile manage this better. There is, for example, no way to tag multiple emails and delete them all at once. I'll probably look out for a better email client over the next week. But for most users, the built in capability will be OK.

2. Keyboard
There is no keyboard. The on screen keyboard and word suggestions work remarkably well, but I can type faster on a real keyboard. On the other hand, as a keyboardless device, the Nexus is a lot sleeker then my former Tytn II. I will probably get faster at using the on screen keyboard, but I will keep wondering if a Droid wouldn't have been a better choice for me. Like with cars, you don't buy a phone based on pure specs. The feeling and X-factor of the device certainly have to be taken into account (and the Droid is butt-ugly).

3. Default Homescreen
Don't get me wrong. The 5 homescreens that can be populated with icon's and widgets are a blessing. But why not already populate them with interesting presets, instead of putting seemingly random icons on them? Another thing I will never understand is why Google picked the annoying and ugly "Nexus neural network" live wallpaper. This will put off so many users. I quickly switched to the "Grass" background, giving a subtle effect that also gets darker when the night falls, reminding you it is time to go to bed.

4.Power Button
Packed with this much technology, I can't understand why there needs to be a power button. I would much prefer to just unlock the device with a swipe across the screen. Instead, I now have to press the power button and then unlock the device. A unnecessary two-step procedure.

5. Multi Touch
Google should not have left out multi touch features in the UI of the home screen, browser and media gallery. I understand the device hardware has the functionality and you can unlock the software to use it. If there is a patent problem with Apple, solve it.  But please, don't make users jump through hoops to get where they want to. BTW, I kind of like the double-tap to zoom in (just like in Opera Mobile) and the +/- buttons to zoom a picture. But I feel that multitouch will be essential for other applications so it should have been clear from the start that this is a genuine multi touch device.

PS: Pictures are available on my Flickr account with the tag Nexus under a Attribution-ShareAlike Creative Commons license

Common CSS bug with viewport scrolling

I just discovered a CSS bug in our new website www.mobilife.be. You might want to check out your own websites too, since this bug appears to be present in a lot of sites.

How to check if your website suffers from the viewport scrolling bug?

1) Open your site in a browser window that is wider then the minimum width of your design

2) resize the window so the site no longer fits in it. You now have a horizontal scrollbar

3) scroll to the right

If some of your site elements are "cut off" like the black background of the header bar in the Mobilife screenshot above, your website suffers from this bug.

To give an example of a website that is impacted more severly by this bug, check out these screen shots of the Pukkelpop website below. The whole body of the website is cut off beyond the viewport width.

(note: Pukkelpop is a fantastic site developed by the great people of Inventis. It just shows that even the best sometimes make small mistakes. I'm sure they'll have it corrected by the time you read this)

If you want to know how to solve this bug, browse to Mobilife and check out the CSS. You'll see we (or at least @ingo) solved it elegantly by adding a min width property to the containers DIV contained in the body and putting the width to 100%. This solves the problem in all browsers.

The Apple tablet will be circular!

Early pictures from the preparation of today's press conference have revealed a shocking truth: The tablet computer that Apple will reveal in a few hours is not square or rectangular, but completely circular!

It is a very logic step when you come to think of it. Apple has always tried to give us a more intuitive user experience. Nothing is more intuitive than holding a circle. The circular tablet will have position sensors so the image will always be upright, no matter how you hold it. It will use it's motion sensors so you will be able to scroll by simply rotating your tablet. And, best of all, the user interface will feature round icons that pop up around the edges of the circle.

The Pie

The first model that will be released will be the Apple Pie. It will be 0.8 inch thick, but in exchange for this thickness it will hold a DVD reader in the back. It is also equipped with a 2 TB harddisk and a non-replaceble battery that should hold up to 2 days of normal usage.
The Pie will be a real family oriented device. It will have pressure sensors on the bottom so you can use it like a Wii balance board. Games and advanced applications like a weight scale will be available over you iTunes Circle account.

The Pancake

The second model will be released in the spring an will be called the Apple Pancake. It will be an incredible 0.2 inch thin! Of course, no harddrive or DVD player will be present.
The battery will only be good for 3 hours of use, but it will recharge in it's docking station in less then an hour. The Pancake's docking station will be wall-mountable so you can attach it in your bathroom in place of a mirror. That's right: watch the latest news headlines whilst brushing your teeth.

Availability: the Circle

To keep up with Google's innovative go-to market model for the Nexus One, Apple will also revolutionise the distribution model for the Apple Pie and Apple Pancake. You will only be able to buy the tablets if you join The Circle.

The Circle is Apple's premium membership program. Joining The Circle will be free for everyone. However, you have to agree to the Code, which is a special code of conduct to ensure Apple Pie and Pancake owners use their devices with dignity. One element of this Code is that members will donate a small fee of 1% of their monthly income to The Circle. This will be used to further fund the evangelization of Pie and Pancake that is needed to let The Circle succeed.

If you want to sign up for early bird membership in The Circle, we're giving away a Circle invite code for the first 1000 people who register at Mobile Vikings.

Photo resize for dummies

I discovered a nice tool to do 1-click batch image resizes.
On http://www.rw-designer.com/picture-resize you can download an executable called PhotoResize400.exe. Put it on your desktop and drop a folder on it. When you open the folder, you will discover that every picture in it has been duplicated and resized to 400 pixels on its longest edge.

My first idea was: how boring. You can't even resize to another dimension. Here comes the surprise: rename the executable to  PhotoResize1600.exe, and pics will be resized to 1600 pixels. How ingenious! I really like this way of setting application parameters, it's immediately visible in the executable name itself. On the author's website you find further customisation options that you can use in the executable name.
Of course, many of you will argue that command line tools like Imagemagick provide far more flexibility. But for non-technical people it is much easier to just drop a folder on an executable and be done with it. In fact, I discovered this tool when one of my website customers complained that she couldn't upload her 10 megapixel images onto her website. For people like that, this tool is ideal

CSS class inheritance: the way I would expect it to work

Disclaimer: I am a CSS newbie. So don't take this blogpost as an expert opinion. On the other hand, that gives me the unique point of view of someone with no predispositions on how things should work.

The problem

In my opinion, the purporse of CSS is to free the programmer from layout issues whilst keeping the freedom of layout with the designer. The way this works is as follows:

The programmer writes code that outputs HTML, eg:

<div class="foo">
<p class="bar">
Hello, world. This is a very short paragraph!
</p>
</div>

The designer then can make sure this looks nice without having to touch the html, like:

.foo {
  background-color: white;
  color: black;
}

.bar {
  background-color: inherit;
  color: inherit;
  font-weight: normal;
}

What bothers me with that?

Well, I think the programmer should not be aware of the CSS class structure that the designer will use or is using. Imagine a programmer making a main menu:

<div class="my-main-menu">
<ul>
<li>butter</li>
<li>cheese</li>
<li>eggs</li>
</ul>
</div>

The designer might like to use a CSS structure like:

.menu {
  background-color: white;
  color: black;
}

.horizontal-menu {
  float: left;
}

Suppose the designer wants to lay out the main menu as a horizontal menu. This requires him to write the following CSS code:

.my-main-menu {
  background-color: white;
  color: black;
  float: left;
  font-size: larger;
}

What I would like him to write is something like:

.my-main-menu {
  inherit: .horizontal-menu;
  font-size: larger;
}

What he needs to do with the way CSS is currently working:

1) he needs to write the custom site code:

.custom-menu-extension {
  font-size: larger;
}

2) he needs to tell the programmer what classes to use:

<div class="menu horizontal-menu custom-menu-extension">
<ul>
<li>butter</li>
<li>cheese</li>
<li>eggs</li>
</ul>
</div>

This approach violates the very idea of separating code and design. There is a tradeoff between either giving up your "modular" css structure or giving up separation between code and layout.

The solution

As you see above, I would add an "inherit" property to a class. This would include the definition of the inherited class to the newly defined class. In this way, programmers would only need to assign 1 class to each piece of content (instead of the clutter of divs / class names we see in current HTML). Designers could then declare that class using their favorite CSS framework as a basis and expand it with the specific properties for the given content and website.

Of course I could be missing the point, since my CSS experience is very limited. I'dd like to get more suggestions in the comments.

Google sync for Windows Mobile: bye bye, Microsoft Exchange

The one area where Windows Mobile has the edge on it's competitors is the instant push mail functionality in collaboration with a Microsoft Exchange server. Google now managed to leverage that to give you instant email on Windows Mobile.

Gmail is a wonderfull service, but the Gmail application for Windows Mobile has the disadvantage that you need to start it up to check your emails. It is not possible to glance at your home screen to see if you have new mail.

The Google Sync beta feature of Gmail solves that problem. You just enter m.google.com as the adress of your Microsoft Exchange server and you're all set. Besides your emails, also your calendar and contacts can be synced. When you receive a new email, within secondsyou will see it appear on your home screen.

One thing I would like to see is that someone sets up an email aggregation service. You would enter your different email accounts (Gmail, Hotmail, Exchange, pop3/smtp) in the aggregator and your various mail clients (outlook, windows mobile activesync) woudl sync against the aggregation service.

If anyone knows of such a service, let me know!