An easy to use, powerful, and flexible framework for building prototypes and production code on any kind of device.

Strong points: Flexible grid system, Rapid prototyping, Mobility.

Check it out

• An object’s methods (like all properties) are found by walking up the object’s prototype chain;
• The entries in the prototype chain are references to ordinary objects;
• Object.create() or the new operator creates objects with a longer prototype chain.

Here is a simple Javascript inheritance example to learn from:

var user;

function Person (name) {
  this.name = name;
}

Person.prototype.hello = function() {
  console.log('Hello', this.name);
};

// Student inherits from Person

function Student (name) {
  this.name = name;
}

Student.prototype = new Person;

user = new Student('George');

// This method was defined on Person

user.hello();

If you are interested to read more about prototype chains check here: Inheritance and the prototype chain.

A great collection of templates for print and sketchbooks by Brad Reiken.

Before any tangible designs are made, any experienced designer should know that the first thing you do before any sort of web development project is map out a rough sketch first. Although most sketching is done on blank paper, many developers have now started using sketch templates for their web applications. This is definitely the most productive and organized way to start probably one of the most important phase of the application design process. Below are resources and templates to download or print off for designing your next great project!

Find out more and download you sketching paper

Currently, there are a wide varied range of Mobile Frameworks covering varied languages and platforms – in this post I will focus on Javascript Mobile Frameworks.

SixRevisions has point out some common characteristics of JavaScript mobile web development frameworks:

• Optimized for touchscreen devices: Fingers as input devices instead of mouse cursors provide an extra set of challenges in user interface design. Mobile web development frameworks provide standard UI elements and event-handling specifically for mobile device platforms.
• Cross-platform: Support for multiple mobile device platforms such iOS and Android allows you to get your app to a wide range of users.
• Lightweight: Because of current bandwidth limitations, a stronger emphasis on lowering file weight is placed into mobile web development frameworks.
• Uses HTML5 and CSS3 standards: Most mainstream mobile devices have web browsers that support HTML5 and CSS3, and so mobile web development frameworks take advantage of new features available in these upcoming W3C specifications for a better user experience.

Below you find my top picks of Javascript Mobile Frameworks that you should consider using to build you next mobile app.

jQuery Mobile

Touch-Optimized Web Framework for Smart-phones & Tablets

A unified user interface system across all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Its lightweight code is built with progressive enhancement, and has a flexible, easily theme-able design. jQuery mobile framework takes the “write less, do more” mantra to the next level: Instead of writing unique apps for each mobile device or OS, the jQuery mobile framework will allow you to design a single highly branded and customized web application that will work on all popular smart-phone and tablet platforms.

The devices supported by jQuery Mobile are determined by the project’s Mobile Graded Browser Support Chart which assigns a grade to each browser based on a test suite.  The browsers graded A or B will be fully supported by the framework.

The framework itself will combine jQuery Core and jQuery UI to create a touch framework that works across all devices.  This means that you will be able to use the jQuery you know and love (the selector engine, the DOM manipulation, the animations, etc.) without having to worry about it working across all of these wildly different browsers and devices. Additionally, the jQuery UI project is working to create touch enabled widgets and layouts that not only work across all devices, but look good and fit in with the surrounding environment of the device. If you know how difficult it is to build a cross browser UI framework for 4 or 5 desktop browsers, you can imagine how difficult it is to build and test a cross platform UI framework for more than a dozen mobile browsers, all with major limitations.  Not a task for the feint of heart!

Supported platforms: iOS, Android, Blackberry, webOS, Windows Mobile, Symbian, MeeGo, Bada

Appcelerator — Titanium Mobile

Appcelerator Titanium is an open source mobile application development tool for iPhone and Android which allows you to code apps with HTML, CSS and JavaScript. I tested out the platform this morning. Having developed an iPhone application with Objective C before, I can tell you that Titanium makes the iPhone development process a whole lot easier. Getting the Android SDK working was a bit tricky but development itself is simple. I love being able to compile native applications by writing standard web code!

Things I like about Appcelerator:

• The ability to build desktop and mobile applications using very similar approaches using HTML/CSS/Javascript;
• The ability to use Python, PHP or Ruby;
• The Appcelerator development environment is itself an Appcelerator application;
• Developer tools available for Linux, Mac and Windows like Titanium IDE;
• Access native functionality of both the iPhone and Android handsets, as per PhoneGap;
• Good API documentation.

Things I don’t like about Appcelerator:

• If you want to develop an application for iPhone you need a Mac, XCode and latest iPhone SDK;
• The ability to use Python, PHP and Ruby scripting is limited to desktop applications.

Supported platforms: iOS, Android, Blackberry (alpha)

PhoneGap

Open source development framework for building cross-platform mobile apps

PhoneGap is an open source development tool for building fast, easy mobile apps with JavaScript. If you’re a web developer who wants to build mobile applications in HTML and JavaScript while still taking advantage of the core features in the iPhone, Android and Blackberry SDKs, PhoneGap is for you.

Things I like about Phonegap:

• Phonegap gives you access to native functions of the smart-phone through creating some bridges through a native application container and some special javascript calls. For instance, if you want to access the GPS through your javascript code that’s a relatively simple thing to do;
• Using PhoneGap will still allow you to publish an application to the AppStore (in theory – see below);

Things that I don’t like about Phonegap:

• Apple are rejecting some applications written using PhoneGap. As I understand it this is due to the fact that once you have a PhoneGap application installed, you could reasonably easily extend the capabilities of that application simply by changing some code at an external web location. This means you can change the functionality of the application without having to route the application request through the AppStore. I’m not sure if this is resolved as yet, or whether I have the issue correct, but would be interested to hear more.

Supported platforms: iOS, Android, Blackberry, webOS, Windows Mobile, Symbian

jQTouch

jQuery plugin for mobile web development

JQTouch is a jQuery plugin for mobile web development on the iPhone and other various mobile devices. JQTouch comes with an easy setup, native WebKit animations, image preloading, callback events, flexible themes, swipe detection, sweet extensions, and more!

Things I like about jQTouch:

• It’s really easy to get started, and deploying an application to the iPhone is also easy;
• It is written as a jQuery plugin, and well I love jQuery.

Things I don’t like about jQTouch:

• It’s not an application framework designed for building AppStore deployable applications. I know this is contrary to one of the things I like, but it is something to consider. I’m sure you could fairly simply wrap your application up for AppStore deployment though (maybe – could you?).
• Access to the lower level functions of the device is not provided (except for the GPS, because as mentioned before the new OS permits access to the GPS through the HTML5 geolocation API)

Supported platforms: iPhone or WebKit

Sencha Touch

A Cross Platform HTML5 Mobile Application Framework

Sencha Touch is considered one of the first HTML5 mobile JavaScript framework that allows you to develop mobile web apps that looks and feel native on touchscreen devices. The framework supports touch events: not only simple touch events, but also non-standard events like doubletap, swipe, pinch and rotate. This allows for interactions previously only seen in native applications. It has many of the standard components that you would expect in a mobile application framework either native or otherwise.

Sencha Touch can load data from any data source on the server, including from JSONP sources like Flickr, as well as from your own server or YQL.  You can then bind that data to UI components, as well as make it available offline. Sencha Touch also has frameworks for geolocation, including a standard Google Maps widget.

Supported platforms: iOS, Android, Webkit

DHTMLX Touch

JavaScript Framework for Mobile and Touch Devices

DHTMLX Touch is an HTML5-based JavaScript library for building mobile web applications. It’s not just a set of UI widgets, but a complete framework that allows you to create eye-catching, cross-platform web applications for mobile and touch-screen devices. The framework is compatible with the major web browsers for mobile platforms but it is still in alpha version.

Supported platforms: iPad, iPhone, Android, Webkit

iUI

User Interface Framework for Mobile Web Devices

iUI is an open source user interface framework for iPhone web application (webapp) development created by Joe Hewitt that gives a web application running on Safari the look of a native application built with the iPhone SDK. iUI is a lightweight package consisting of a small JavaScript file, a CSS, and images to complete the appearance.

iUI gives you the ability to create navigations menus, iPhone interfaces from standard HTML, basic web pages, and a true “iPhone-like” experience for users

Supported platforms: iPhone

Zepto.js

The aerogel-weight mobile javascript framework

Zepto.js is a JavaScript framework for mobile apps and sites, with a jQuery-compatible syntax. Their goal is have a 2k library that handles most basic drudge work with a nice API that you might already know so you can concentrate on getting stuff done.

Zepto.js contains a lot of tricks to keep the library size down. Targeting WebKit is one way it keeps a smaller size — if you follow our framework series you’ll know how much work cross-browser support can be. Zepto.js is currently in early beta but still very promising.

Supported platforms: iOS, Android, webOS, Webkit

XUI

A simple javascript framework for building mobile web applications.

XUI is a simple JavaScript framework that helps anyone with some basic JavaScript knowledge build mobile web applications. XUI strives to be a framework for first class mobile device browsers such as WebKit, Fennec and Opera with future support under consideration for IE Mobile and BlackBerry.

Jo

The simple app framework for HTML5

Jo is a lightweight JavaScript framework designed for HTML5 apps, originally designed to work on mobile platforms as a GUI and light data layer on top of PhoneGap. Since its creation, Jo has also been tested successfully as a lightweight framework for mobile browsers, newer desktop browsers, and even Dashboard widgets.

Supported platforms: iOS, Android, webOS, ChromeOS or anything else with HTML5.

Conclusion

We have a long list of Javascript mobile frameworks and I think that there might be also other frameworks that can quality for “mobile” that I missed. So, if you are aware or played with any other framework that is not on the list let me know and I will update the post.

In terms of the “best framework” or the “worst framework” it’s very hard for me to say because I played just with Appcelerator Titanium, jQuery Mobile. So far I like Appcelerator but I would like to dig more into PhoneGap.

I’m looking forward to see you opinion on this framework, things that came up from your experience and applications that you developed.

Last week newmediacampaigns.com released a mobile client for the website Hacker News. After they discovered that an API had been generously built and made public for the site, they decided to take an action to build a quick mobile website against the API. After the web-app launch they wrote a blog post detailing how it was developed, which tools they have used and what was their strategy to build a site quick and easy almost client-side. They promised also to present the part II which will cover the server-side caching approach.

Read more about their approach on the frontend side.

Brian Fling from pinch/zoom, a company dedicated to mobile development presents in a great post their “stack” for building HTML5 Mobile Apps.

[...] Consider this as a starter roadmap of the tools and technology needed to create a cross platform mobile web strategy. This is why HTML5 Mobile Apps are hard. In many cases you will need to create every part of this diagram. If you don’t create it, you can borrow it, but you’ll still need to test and debug each piece. [...]

Continue reading the stack prezentation in details

Patternry is a Web design pattern library where you can find solutions to your design challenges. It is also a tool for organizations to document, share, and collaborate on design patterns.

When building our first design pattern libraries we understood the benefits of the libraries, but we were surprised how much work it required to build and maintain one. At that time (late 2009) the idea behind Patternry was born. Our vision was to make Patternry The fastest way to build pattern libraries.

Android Patterns is a community-contributed site with interaction patterns for Android app design. The site is created by UNITiD, a Dutch interaction design agency. The also provide an mobile wireframe templates for Android and Blackberry devices. Great work!

Post via Konigi

Magento is preparing to introduce till end of February 2011 a new turnkey online service a solution which comes to help small and emerging businesses to build a powerful store, to sell your products and services online, quickly and easily. With Magento Go there will be no software to install and configure and no servers to manage.

Some possible facts regarding the new Magento Go Platform:

• New REST API’s are coming with Magento Go that give developers much deeper control of Magento
• The new API’s will be very extensive . When pressed we were told: “We are going to be be very good at covering everything”
• Eventually this sort of API functionality will migrate to CE, PE & EE but that will not be in 1.5 nor 1.10
• Developers will extend Magento by writing Go Apps which make use of these new API’s
• Your App will be written mostly in Javascript and included as a div on the page (no slow iframes)
• Apps will be able to make RESTful calls out to other cloud based services
• The foundational code that runs your App is made out of plain Javascript (No Prototype powering it, nor jQuery)
• The entire App platform is based on Widgets that already exist in CE, PE & EE
• With the new RESTful API, the power of Widgets increases so dramatically that a leading number of existing extensions can now just be Widgets
• Eventually we will have connectors that enable apps to be language agnostic of Javascript. (There was little details as to how this would be achieved)
• Before that you will have to sell your Magento Go apps on your own and there will be some sort of authentication system for commercial extensions
• The Magento App Store may probably come at the same time as Magento CE, PE & EE support for Apps also

You can read more on the official blog post.

ILUVUXDESIGN from lyle on Vimeo.

Who doesn’t love a good UX design, and who doesn’t get totally frustrated with bad experience design.
Hail to all the great UX designers of the world. Spread the love for UX design !!!

I’m happy to inform all developers that are using Drupal as their main tool for building custom website for their clients that Drupal 7 is officially launched. The latest version of the well known open source web content management system has been 3 years in the making.

What is new to Drupal 7

Easier to use & setup

Drupal 7 has a totally revamped administrative interface lets you and your audience navigate functionality with ease. You can now easily and securely install and update add-on modules or themes right from within the site’s administration interface, which is especially useful for small sites on shared host accounts.

Better theming

The new Drupal 7 has a better theming support, semantic web markup and a new Render API which allows you to control exactly what gets shown where on the screen.

There are already some very promising themes in the community like Omega Theme or Square Grid theme which are based on the famous 960.gs grid framework.

Flexible content

Drupal 7 has now a more powerful content management features. The old Content Construction Kit that’s been around for a number of years as an add-on module has finally been incorporated into Drupal core, which means that Drupal now allows site builders to create a completely flexible content structure out of the box. You can now add custom data fields not only to content but also to users, comments, taxonomies and more.

Better files and images support

A new file handling system, which allows for advanced file storage setups, including support for content delivery networks, which is great for large websites. Private file handling can now be used alongside public files.

The support for image content was improved and now the image processing system is included in Drupal core, like you can generate different versions for thumbnails, previews and other image styles.

More performant and scalable

Performance and scalability has been improved with a new suport for caching, master/slave replication, reverse-proxy and content delivery networks and to handle more anonymous traffic with lazy sessions.

Improved database support

From a developer’s standpoint this release has a lot of new features that will facilitate our work, but also requires some new learning. The theming layer makes it easier to do crazy things with the page layout and gives a lot of additional power to site builders. It includes a new database layer which provides out-of-the-box support for SQLite, MySQL/MariaDB, and PostgreSQL. (The support for the PostgreSQL and SQLite still has some issues which will be ironed out in 7.1.)

For site builders you can read the full Drupal 7 new features and improvements list.

In conclusion

The new Drupal 7 offerts an amazing CMS development experience and I recommend to any WordPress, Joomla or other solution developer. Now we just have to wait for the contributed modules to catch up meanwhile give it a try:

Start with Drupal 7

… and then let me know what do you think or if you already played with it please post your thoughts.

Build your website based on evidence, not false beliefs!

UX Myths collects the most frequent user experience misconceptions and explains why they don’t hold true. And you don’t have to take our word for it, we’ll show you a lot of research findings and articles by design and usability gurus.

Myth #22: Usability testing is expensive

Myth #21: People can tell you what they want

Myth #20: If it works for Amazon, it will work for you

Myth #19: You don’t need the content to design a website

Myth #18: Flash is evil

Myth #17: The homepage is your most important page

Myth #16: Search will solve a website’s navigation problems

Myth #15: Users make optimal choices

Myth #14: You are like your users

Myth #13: Icons enhance usability

Myth #12: More choices and features result in higher satisfaction

Myth #11: You need to redesign your website periodically

Myth #10: If your design is good, small details don’t matter

Myth #9: Design has to be original

Myth #8: Stock photos improve the users’ experience

Myth #7: Graphics will make a page element more visible

Myth #6: Accessible sites are ugly

Myth #5: Accessibility is expensive and difficult

Myth #4: Design is about making a website look good

Myth #3: People don’t scroll

Myth #2: All pages should be accessible in 3 clicks

Myth #1: People read on the web

Read more

Wireframe Showcase is a user-contributed wireframe and UI sketch gallery. I quite like the idea and it’s good that designer can share their ideas with sketches and wireframes.

Here is a nice presentation form NetTuts as they try to build a iPhone App, of a service called Appcelerator which allows developers to build native desktop and mobile (iPhone in my case) apps using the web technologies that we already know, like JavaScript, HTML, CSS, Python, Ruby and PHP! This is a alternative to Abobe AIR but it’s also supports mobile platforms. I recommend this platform for anyone who doesn’t have Objective-C experience.

Learn More.

This is something created by Eren Emre while playing with the new CSS3 features like the transform & box-shadow. This is a awesome example which proves the power of CSS3.

See yourself how to do it

    var Event = new JS.Class({
        include: JS.Observable,

        fire: function(data) {
            this.notifyObservers('fire', data);
        }
    });

JS.Class is designed to make JavaScript behave like Ruby in terms of its OOP structures. It provides Classes and modules with Ruby-compatible inheritance, Subclassing and mixins, Singleton methods and eigenclasses, Method binding, Ports of various standard Ruby modules, including Enumerable, Hash, Set, Observable, Comparable, Forwardable.

The library looks pretty interesting, the documentation is good and there are a lot of cool modules. I have to try it.

What do you think about it? Write down your thoughts and experience with it.

Read more

Before any tangible designs are made, any experienced designer should know that the first thing you do before any sort of web development project is map out a rough sketch first. Although most sketching is done on blank paper, many developers have now started using sketch templates for their web applications. This is definitely the most productive and organized way to start probably one of the most important phase of the application design process. Below are resources and templates to download or print off for designing your next great project!

Find out more and download you sketching paper

Nick Finck and Raina Van Cleave’s presentation slides from the SXSWi talk are up. Here’s a summary:

User experiences are your everyday experiences—anything from operating a car, to making a pot of coffee, to ordering a pair of shoes online. User experience is the result of your interactions with a product or service, specifically how it’s delivered and its related artifacts according to the design.

In this presentation Nick Finck and Raina Van Cleave will explore the ten characteristics of a great user experience. They will cover all aspects of user experience design such as user research, information architecture, information design, technical writing, interaction design, visual design, brand identity design, accessibly, usability and web analytics. Nick and Raina will also explain how following the ten commandments can boost your web sites, web app, or mobile app’s ease of use, appeal, conversion rates, and more.

Read more on Nick’s site.

Design, develop, and deploy feature-rich Magento online stores with PHP coding.

If you are a PHP developer who wants to understand the architecture of Magento, learn how to extend the system with PHP code, add new features, and integrate Magento with a third-party CMS, this book is for you.

You are expected to be a confident PHP 5 developer. No experience of Magento development is expected, although you should be familiar with the operation of Magento. No experience of the Zend framework is expected.

What you will learn from this book

• Install and upgrade Magento to get ready for development
• Get familiar with the architecture and internal structure of Magento
• Learn about the best modules available and what they can do for you out of the box
• Build a Shipping module for your Magento store to give users options for receiving their items once they have paid for them
• Create a payment method for Magento and the various aspects that go together to complete the payment process
• Speed up your module creation process using the Module Creator script
• Build a basic brand-management module for Magento to manage brands and display their details
• Integrate your favourite CMS into Magento including a walkthrough of integrating WordPress into Magento
• Create, update, delete, and retrieve customer data from within Magento by implementing the customer API
• Integrate Magento data into an existing external web application or script using the Magento Core API
• Import/export files to retrieve and store information from and to external sources using Excel Spreadsheet or CSV data

Find out more