sketching, pencil and charcoal

<link media=”handheld” href=”mobile.css” type=”text/css” rel=”stylesheet” />

First of all, iphone and its default browser Safari.

Yes, iphone made everything easy for everyone, not just consumers but also iphone application developer as well as web designers So this approach is rather simple comparing to all other smart phone devices.

<link media=”only screen and (max-device-width: 480px)” href=”mobile.css” type=”text/css” rel=”stylesheet” />

In order to include all other devices which consider themselves as handheld, we tweak this line to be more general:

<link media=”handheld, only screen and (max-device-width: 480px)” href=”mobile.css” type=”text/css” rel=”stylesheet” />

To be even safer, there are times, the device width is 320 pixel or less. So here we are:

<link media=”handheld, only screen and (max-device-width: 320px)” href=”mobile.css” type=”text/css” rel=”stylesheet” />
<link media=”only screen and (max-device-width: 480px)” href=”mobile.css” type=”text/css” rel=”stylesheet” />

Everything works perfectly well with these two lines, except when you come to W3C CSS validator. Yes, W3C doesn’t recognize the mobile style lines, and it doesn’t let them pass through validation. And there is really nothing you can do about it. for more info, you can see some discussion here: http://csscreator.com/node/28171

Blackberry and its default browser.

Blackberry doesn’t pickup any mobile style sheet no matter what media you set to it, not handheld, not width 480px or 320px. There is only one way to give blackberry a mobile looking page - using javascript and direct the page to a blackberry. Below is the script that works. I also tried to apply some mobile style sheet without directing the page to another, but unfortunately didn’t work. more details hereinafter:

<script type=”text/javascript”>
var deviceBB = “blackberry”;

//Initialize our user agent string to lower case.
var uagent = navigator.userAgent.toLowerCase();
var cssFile = “mobile.css”;
//**************************
// Detects if the current browser is a BlackBerry of some sort.

if (uagent.search(deviceBB) > -1) {
//document.getElementById(’blackb’).href = ‘mobile.css’; // this doesn’t work
window.location = ‘home_bb.html’;

//document.write(’<link href=”‘+cssFile+’” type=”text/css” rel=”stylesheet”>); //this doesn’t work either

}
</script>

Opera Mini

It’s a cool mobile browser, which works well with most smart phones - blackberry, iphone, treo palm, etc. To display your mobile CSS on this browser, all you need is still the two lines:
<link media=”handheld, only screen and (max-device-width: 320px)” href=”mobile.css” type=”text/css” rel=”stylesheet” />
<link media=”only screen and (max-device-width: 480px)” href=”mobile.css” type=”text/css” rel=”stylesheet” />

There is this Opera Mini simulator http://www.opera.com/mini/demo/, which makes it possible to test your mobile styles without a mobile phone, however, it only gives you FALSE result. So don’t use it for testing. Install it to your mobile phone and do the real test from there!

Issues you see in real mobile phones but not in simulator:
Opera Mini doesn’t pick up the font size setting in css. Here is the sentence I got from wikipedia:  Opera Mini supports only one font, which can be set to “Small”, “Medium”, “Large”, or “Extra large” size.

http://en.wikipedia.org/wiki/Opera_Mini

The default setting of font size in mobile phone is “medium”. Be aware of this issue when you design the mobile styles, if you are targeting Opera Mini as your mobile browser - use one font size - medium for all text and let it fit in the page.

• Engage your users by delivering great content
  • User commentary enhances the experience
  • Putting in a system to “bubble up” the most interesting or useful
    content can dramatically improve the experience
  • Only a small percentage of visitors will participate
• Don’t fear trying out new ideas
• Eliminate tool time while delivering confidence (Goal time vs. Tool time - Goal time: When the user is improving the outcome of the experience; Tool Time: When the user is moving forward without any improvement in the outcome of the experience)
• Never forget the business
• Caution is warranted
  • Be careful when emulating features
  • Some experiments don’t pan out
  • Not all use cases are equal

All because of this: overflow: hidden
As soon as I removed it, the print preview is good. However, this overflow:hidden is there for a reason, if you remove it, you have to work on the overflow issues. So printing or overfow? you gotta choose one, or if you are flexibile enough, work around the content to prevent it from being overflown.

Well, Firefox also has bugs… it’s the hard cold fact, so deal with it

Many reports about this issue in FF suport:

report 1,  report 2, report 3, look at the comments down there, they are really helpful.

User Interface conference is a widely recognized conference organized by UIE Jared Spool once every year. It covers the biggest issues in the world of design, gives workshops, seminars in the perspective of usability, user testing, information architecture, persona, etc.

New technique for creative ideas is a full day workshop by Leah Buley, an experience designer in Adaptive Path. The workshop used an interactive way to gave us a full new perspective to fast design creating, sharing and exploring.

So here comes this great practice of sketchboards, which fixes the wrongs in wireframes.

Sketchboards
• Avoids unnecessary detail (so you don!t waste time documenting what you haven’t yet decided on)
• Reveals the best of multiple solutions (so you can be sure that you!re moving forward with the right design, not just the first design that comes to mind)
• Gets everyone!s input and buy-in (so the design can move forward with many supporters)

3 Types of Sketch:
- Icons and symbols add another level of meaning to text - they’re like visual summaries, or bullet points.
- Environment sketches give context to an idea by showing the user’s perspective - bringing in real people to your sketches can be a powerful orienting tool.
- Interaction sketches. They let you figure out how your idea works on the page, and then communicate that to other people.

sketching tools/supplies:
1-up and 6-up template, highlighter, sharpie markers - fat, regular and small, grey marker, sticky notes, scissors, tapes, etc.

Phases of sketching:
- ideation: e.g. coming up with lots of ideas
- big picture thinking: e.g. how to structure sketchboards
- collaborative critique: how to get the group to say the hard stuff

Case study - Sweet Potato, a dinning, cooking, diet iphone application oriented to healthy life

There are a number of products and web sites that cover aspects of what Sweet Potato
will cover. The Daily Plate from Livestrong helps you see the nutritive value of what you!re eating. But compared to the savory, life affirming experience of eating a nutritious meal, counting calories with the Daily Plate seems boring. We want to design a product that feels like more than just a calorie counter.

Now you can argue that you should use some sort of version control system(VCS) like svn, git, etc and implement some release process. But if you are talking about hetergenous developer profiles and experiences, not everyone uses VCS, and if you just have less than a handful of developers, you might not want to add too much overhead of implementing some kind of release process, which requires some training and authority of implementing it — and you might not have either.

So a much simpler approach would be just make sure before anyone puts code out there on the live site, make a diff between what’s on the live site code base and what you are going to push. If there is any diff that’s not from you (therefore from someone else), you need to merge that fix, or otherwise you unfix what the other developer fixes, or worse, breaks the site.

Now there is still one problem, you change might be big enough, and the other developer’s change might be just one line or two, so when you do a diff, you might very well miss the other developer’s change. So here’s an idea, I would set up a cron job on the webserver, and finds all the files that are modified in the last 24 hours (or whatever interval you like), and email the file list to the developers once a day. And the developer can also run this little command right before he pushes code, so that if he sees some files he’s going to push out is already in the last modified list (from the command), he will be extra careful, and make sure to resolve all the difference.

The command is rather simple:

cd /path/to/webroot; find . -mtime 1 -print | mail -s “files modified in last 24 hours” developer1@mysite.com developer2@mysite.com

Sometimes there are some cache files that keeps changing but irrelevant to the site codebase, you can just use “grep -v” to filter out those files, for example:

cd /path/to/webroot; find . -mtime 1 -print | grep -v ‘/caches/’ | mail -s “files modified in last 24 hours” developer1@mysite.com developer2@mysite.com

this will filter out any files/directories that has ‘/caches/’ in its path.

All right, so here we go, FF3.5. How much better is it ? It’s faster, it displays fonts even more nicely, and most of all - it supports CSS3 and above! well, while enjoying this advanced modern browser, I also noticed a few cons - forcing to update the add-ons: I have had the great add-ons of firebug, colorpicker and measurelt, they were working perfect and I had no intention of changing them. But as soon as I installed the FF3.5, it told me I have to update them otherwise they won’t be functioning… anyway, I am not so used to the new interface of firebug yet.

Overall I liked FF from day one. It never lets me down with 2.0, 3.0 and the updated 3.5 version, both as a regular computer/internet user and as a web designer. However, to be a web guy, we need to realize that what we produce is for the mass media, instead of for ourselves. Therefore, the two CSS3 tricks about the text effects are just for fun, but definitely not for real work practice. I am taking notes of those codes, but I would say it’s for the future only, when the market share of IE (of all versions), FF3.0 and below, Safari 3 and below and Opera 9 and below are all close to 0%. When will that happen? You tell me.

Text, images and color are the three important elements for graphic design. And they are the tools designers use to create visual communication solutions.

Images are usually used as the element in the first glance.  It can be the part that creates some interesting and appealing visual effects to attract audiences’ attention.

Text is used to convey direct message of the design work.  Text can create styles as well, by it’s font, position, size etc. When the audiences look further into the work, text will be the elements that he/she is looking for to find the details of the information.  However, when they look into the text, they still have the impression that the image left to them.  They read the text with their expectation from the image.  If the text message is within the expectation, they will read further and further to go through the design and get all the information that the design work want to convey.  However, if text message is off their expectation, they will leave the design work right away.  This tells us that elements in design have to be consistent in style, look and feel to create a clear message to the readers.

Color supports the design to create a style and the consistency principle applies to it as well.  Consistency basically integrates all the elements to create a united design.  Just to remember good visual communication needs the graphic elements strongly group together.

water color painting

Geogia O’keeffe is famous for her vibrant colorful paintings, mostly flowers, landscape, objects in nature… No one can be untouched when looking at O’keeffe’s paintings.  Ansel Adams is a great photographer of the nature and wildness. His black and white phtotos are stunningly powerful to express this artist’s insight of the nature. Despite the different styles and two unique ways to capture the essense of natural beauty and the 15-year age gap between these two American’s best-known artists, they developed a lifelong friendship.

The SF MOMA is now having the special exhibition for the art works from the two - Georgia O’Keeffe and Ansel Adams, Natural Affinities. It was such an joyful experience for me to be exposed to those precious and inspiring art works. This painter and this photographer have their own distinctive visions of the natural world, yet they share the same admiration to the beauty.

There are also site specific installation and woodcut prints from Ranjani Shettar, an Indian artis; Robert Frank’s “The Americans” photography, that reveals the life of Americans beyond the polished surface; Between Art and Life: the contemporary painting and scupture collection, etc.

If you go to San Francisco, go visit MOMA, it got those amazing exhibitions that you don’t want to miss.