Phone Makers can now use Adobe's Flash Player 10.1

Adobe Systems is releasing the final version of flash player 10.1 especially for smart phones. But for now only few people will able to use it.

The phone users who are running Android 2.2 will be the first to get the player. The trouble is that version 2.2 has so far only been pushed out to review units of one phone model, the Nexus One. All Nexus One phones, Motorola's Droid and other Android models are expected to get the operating system very soon.

Flash Player 10.1 is designed to offer a consistent user experience across laptops, desktops, tablets, phones and televisions.

Adobe also is releasing the final version of the player to partners including Research In Motion, Palm, Symbian and Microsoft; however, it's unclear yet which phones currently on the market might get it.

Going Nuts with CSS Transitions

How CSS 3 transforms and WebKit transitions can add zing to the way you present images on your site?

Here’s the First markup:
Laying the foundations

You’ll notice we’re using a somewhat presentational class of pull-right here. This means the logic is kept separate from the code that applies the Polaroid effect. The Polaroid class has no positioning, which allows it to be used generically anywhere that the effect is required. The pull classes set a float and add appropriate margins—they can be used for things like blockquotes as well.

.polaroid {
width: 150px;
padding: 10px 10px 20px 10px;
border: 1px solid #BFBFBF;
background-color: white;
-webkit-box-shadow: 2px 2px 3px rgba(135, 139, 144, 0.4);
-moz-box-shadow: 2px 2px 3px rgba(135, 139, 144, 0.4);
box-shadow: 2px 2px 3px rgba(135, 139, 144, 0.4);
}

The actual Polaroid effect itself is simply applied using padding, a border and a background color. We also apply a nice subtle box shadow, using a property that is supported by modern Web Kit browsers and Firefox 3.5+. We include the box-shadow property last to ensure that future browsers that support the eventual CSS3 specified version naively will use that implementation over the legacy browser specific version.

The box-shadow property takes four values: three lengths and a color. The first is the horizontal offset of the shadow—positive values place the shadow on the right, while negative values place it to the left. The second is the vertical offset, positive meaning below. If both of these are set to 0, the shadow is positioned equally on all four sides. The last length value sets the blur radius—the larger the number, the blurrier the shadow (therefore the darker you need to make the color to have an effect).The color value can be given in any format recognized by CSS.

For Rotations Purposes:

For browsers that understand it (currently our old favorites Web Kit and FF3.5+) we can add some visual flair by rotating the image, using the transform CSS 3 property.

-webkit-transform: rotate(9deg);
-moz-transform: rotate(9deg);
transform: rotate(9deg);


Rotations can be specified in degrees, radians (rads) or grads). Web Kit also supports turns unfortunately Firefox doesn’t just yet.

For our example, we want any polaroid images on the left hand side to be rotated in the opposite direction, using a negative degree value:

.pull-left.polaroid {
-webkit-transform: rotate(-9deg);
-moz-transform: rotate(-9deg);
transform: rotate(-9deg);
}

Multiple class selectors don’t work in IE6 but as luck would have it, the transform property doesn’t work in any current IE version either.

10 Best practices to Improve Your Website Performance

There are several ways to improve the performance of your website. There are several areas like server performance, scripting optimization and the front end design of the site. The front end design is the most commonly accessible part of your website by a visitor so keep it tuned to perform better. A common problem among most website owners is they incorporate so many things into a website that it doesn’t deliver the response they hoped for.

However, not all hope is lost. If you make some simple changes to the front end design, you can increase the visitors perception of your website.

Here are the 10 simple steps to increase your website performance.

1. Optimize your web page components.
Identify the components, such as images, css files, html pages and JS files, that take a long time to load. To identify the problematic components, use tools like firebug for a quick and easy method. Make sure you have a fast loading website and limit the page to 19-25kb.

2 Avoid inline styling and inline JavaScript code.
Don’t use inline CSS and javascript in your HTML document instead use external css and javascript files, because your HTML code will weigh more, i.e. a web page riddled with similar code will have a KB size that is a lot larger than necessary.

3. Avoid CSS Expressions
One way to reduce the number of times your CSS expression is evaluated is to use one-time expressions, where the first time the expression is evaluated it sets the style property to an explicit value, which replaces the CSS expression.

4. Simplify tables and avoid nested tables (tables within tables).
In general, the best way to design tables for visual and non visual users is to simplify the layout as much as possible. Avoid placing one or more tables inside on another – hence, “nesting.” …for those who don’t know … The more tables that are nested, the longer it will take for the Web browser to render the Web page.

5. Specify image WIDTH and HEIGHT attributes for faster loading in the browser.
If you want to increase the size of the images in your web pages don’t use the Width and Height attribute instead use a image editor to shrink it.

6. Reduce DNS Look ups
The Domain Name System (DNS) maps hostnames to IP addresses just like phonebook maps people’s name and their address. When you type in your domain name into your browser, a DNS resolver contacts the browser to return with the servers IP. Usually the browser takes some time to complete this process. Reducing the number of unique hostnames has the potential to reduce the amount of parallel downloading that takes place in the page. Avoiding DNS lookups cuts response times.

7. Reduce 301 and other kinds of redirects
Redirects of a web page can be done in server ways like 301 and 302. Meta refresh tag and JavaScript are other ways to direct users to a different URL. The whole purpose of a Redirect is to connect the old web page to a new URL. But reducing this to a minimum is the best practise to increase the performance of a web page.
Redirects slow down the users experience because inserting a redirect between the user and the HTML document delays everything in the page since nothing in the page can be rendered and no components can start being downloaded until the HTML document has arrived.

8. Remove Duplicate scripts
It is not a good practise to include multiple versions of the same JavaScript in a single page. Duplicate scripts increase unnecessary HTTP requests during page loading. Even if the script is cacheable, extra HTTP request will occur when the user reload the page.

9. Minimize the Number of iframes
Inline Frames (IFrames) are windows that cut into your web page that allow your visitor to view another page on your site or off your site.

10. Reduce Cookie Size
HTTP cookies are used for several reasons – information about cookies is exchanged in http headers between a web sever and browser. Making the cookie size as small as possible to reduce the impact on the users response time.

As I said, there are several ways to improve the performance of your website. If you’ve got more additional inputs and thoughts which you’d like to disucss, please share that with us in the comments.

http://tinyurl.com/yaducrd

Examples of Effective Uses of Typography Within Web Design

The combination of web design and great typography can be used effectively, along with clever color selection, and create usable web sites thats base design is dominated by text, for either navigation, a good headline, a logo or even used for the entire content. There is no limitation to using typography within web design. Examples you can see of creative and effective typography within web design for different cases.

Design for the Mind

Design that impacts cognitive processes (fit to the mind) including interpreting and understanding the experience.

#1 User Interface Design: Screen layout and design that focuses on user interactions and screen behaviors. User Interface (UI) design is an important component of user-centered and task-oriented design. The focus of UI Design is to improve the “user experience” or usability of the design. Since the mid 1980's, UI design has refined an understanding of human behavior and screen design. Also called "GUI" design, often confused for combined design and programming (see this post). UI Design is often seen as symbolic of green-screen era interfaces or coding, since developers used to be UI Designers before it was recognized that this was a special skill set...

#2 Information Architecture: Skeleton mock-ups or "wireframes" of screen interactions, layout, navigation and features. Used to review, concept and test initial functionality. Information Architecture (IA) is officially unrecognized by academic institutions, because it overlaps too closely with the already existing field of UI Design above. Few realize that IA was invented for commercial purposes originally by Argus Associates in the late 90's, (Rosenfeld & Morville, yes, the polar bear book guys) to promote consulting and book sales, as revealed by former employee Keith Instone at his 'alphabet soup' talk a few years ago in Portland, Oregon.

#3 Interaction Design: Focuses on how the user interacts with a page, application or product. Interaction design follows a task centered design approach ensuring the flow of the interaction as the central goal. Interaction design predates the Web world, and finds its roots in the wider field of Human Computer Interaction. Interaction design is a more general umbrella that many working on Web 2.0 interfaces and web applications prefer, since IA appears stuck in web-page centric paradigms.

Sanity check: Are the three design disciplines above different? Not really, their goals are all the same.

Design for the Heart

Design that impacts sensory processes (fit to the emotions) including the feelings and emotional or affective qualities of the experience.

#4 Graphic Design: The "eye-candy or look and feel". Graphic design is widely known and it's similarity to UI Design in what is often called "visual design" by people like Luke W at Yahoo! (Luke is a graphic design by background but does great UI design and visual design today).

In a usability process, once wire-frames are finalized, they are graphically treated to enhance the interaction design with aesthetic flavor. Graphic design focuses on enhancing layout, buttons, colors, icons and branding elements. The focus of graphic design is to improve the “look and feel” or stylistic aspects of the design. Because graphic designers operate from the heart, they are often accused of producing "fluff". If you give a graphic designer user interface specifications, however, their results can be outstanding. I see it every day at Experience Dynamics in Portland.

#5 Interactive Design: This Art college degree type is largely a hybrid discipline that captures a little of everything. An Interactive Designer produces good Flash pieces, animation, graphic design and some database programming or HTML. At the heart an Interactive Designer is great at graphic design and has a sensitivity and sensibility for usability. I taught Interactive Designers at the Art Institute of Portland (Oregon USA) and I kept telling the school the course should be called "Interaction Design" not "Interactive Design" but they wouldn't listen! My mistake.

#6 Emotion Design: Emotion design comes from the field of usability and product design. Emotion design is concerned with the specific social, environmental, personal and intimate qualities of user experience. Emotion design is a fringe discipline within the usability and user research communities that is gaining an "I told you so" voice with products like Apple's iPhone creating so many "ooooh, ahhhhs" from customers. Emotion design is an approach that can inform the outcome of any of the design types. e.g. "This user is influenced by this perception, expectation, color, shape, feeling..."

Design for the Body

Design that impacts anthropomorphic processes (fit to the human body) including the social and physical contexts of the experience.

#7 Industrial Design: Physical products that we can all relate to...the most obvious-- a mobile device. Like graphic design, industrial design is easy to spot in everyday experience. Physical product design has origins that can be found at any local history museum. Since the dawn of time, human civilization's has been defined by its tool or artifact creation abilities. Physical products with "good design" are intuitive: they feel, sound, look and work elegantly. Good industrial designers have, for much of the 20th century, mastered physically many of the design types described above, creating an impressive history of design for the human body, senses, environment and mind in a way that transcends, evokes and transforms experiences the user performs with the product.

The final group below are methodologies and approaches encompassing the design techniques above. Let's take a quick look at some of these approaches or methodologies that cross into the blurry line of "design".

Holistic approaches/ methodologies

#8 User Centered Design: The overall industry and ISO standard methodology and set of techniques that places the user at the center of the design. User-centered design (UCD) involves three key activities: User research; UI prototyping and Usability Testing. UCD is iterative by nature and has the most impact if conducted early on in a software, product or web development process. Its methods and techniques and general approach to design are proven from an ROI perspective and are widely accepted in industry, academia and in government sectors.

#9 User Experience Design: A relatively new term that updates the term and discipline of UCD or "usability engineering". User experience adding a more holistic element to the technique of designing the user experience (on web sites or web applications). User Experience or UX design I consider more an approach or umbrella of techniques or a general approach. It is not a type of design per say, as its practitioners will inevitably conduct UI design, IA or interaction design as the deliverable of the UX design approach.

#10 Experience Design: Experience design is often used as a short hand for User Experience Design, but is largely considered with what I call Environmental Design, or the design of the experience in retail or open space environments. Again, Experience Design is a general umbrella approach or methodology that penetrates all design decisions but with an experiential agenda.

"What will the customer experience as the do X?", must have been what the Starbucks experience designers were thinking...

Retail and public spaces can greatly benefit from improved loyalty (attachment feelings, comfort and personalization) and productivity (learning, exploring, browsing) studies have found. Experience Design makes use of the context, social and environmental phenomenon as well as the feelings, perceptions and intuitions of the user in that context.