07 5 / 2012

(Source: vimeo.com)

07 5 / 2012

iamaldomatic:

Adobe® Shadow is a new inspection and preview tool that allows front-end web developers and designers to work faster and more efficiently by streamlining the preview process, making it easier to customize websites for mobile devices.

Shadow will be updated regularly to stay in sync with web standards, web browser updates and support for new mobile devices entering the market, while incorporating user feedback to provide the best functionality and experience possible.

07 5 / 2012

The idea was to use the native look of the confirm box to give the user an option between viewing the site in a mobile view or stay on current view. I used a setTimeout method so i can have it fire 3 seconds after the pages has rendered in all its glory. The code below is pretty simple and straight forward.

07 5 / 2012

I wanted to recreate the slide out menu in the Facebook iPhone app. I also wanted implement it in a jQuery mobile layout. This is what I came up with.

04 5 / 2012

Guess how much of LinkedIn’s new iPad app is actually mobile web and not native.

Go ahead — guess. We’ve had a lot of fun asking people to guess this over the past couple days. They’ll start with 40 percent and edge up to 70 percent, but no one comes close to the real figure: 95 percent.

Yes, only one screen in the entire LinkedIn iPad app is actually native. The rest is good ol’ HTML5-based mobile web technology, running in the browser and leaning heavily on Node.js.

04 5 / 2012

In Windows and Node, we’ll take a look at Windows-centric Node development. In the first part, we’ll install Node (which now includes npm), take a look at the basics, then make a little Express web application to prove it’s generally portable with existing Node modules.

04 5 / 2012

9-bits:

Cascades is a rich UI development framework for Blackberry. Love that the attention to detail in all of the animations.

27 4 / 2012

taitems:

iOS Inspired jQuery Mobile Theme
jQuery Mobile doesn’t deviate far from the pattern established by its sibling libraries: provide something that normalises functionality and/or design across browsers and operating systems. 
The work by the Filament Group has been vital for standardising the look and feel of jQuery Mobile, especially when dealing with incredibly dated or under-featured mobile browsers. Borrowing upon conventions established by both the iOS and Android operating systems, they created something that is palatable across a range of devices.
There will be odd instances when you need an application to look as close to native as possible. I completely agree with the Filament Group’s arguments against this, but currently designers are forced to roll their own solution. What I have created is the beta framework for an iOS-inspired theme that attempts to bring jQuery inline with the native iOS UI elements. I actually began this project when the first alpha was released, but with taking on a new job and other responsibilities, I found myself lagging behind the release schedule. I’m not sure of the response this will get, so hopefully I can gauge how much time I should spend on this in future.

But without further ado: here is the iOS-inspired theme for jQuery Mobile. It works great in Chrome, Safari, iPhone and iPad mobile Safaris.
  
Some Caveats
To achieve the look of the iOS style back button with CSS3, the HTML is customised and therefore must be copied and pasted manually. The back button template can be found in the GitHub readme file.
The CSS3 back button isn’t perfect, there are some jaggedness and shadow issues.
Plenty of elements still remain unstyled, or are missing hit state styling.
Cross browser compliance is a low priority.
This is an add-on theming layer. It was impossible to fork the actual jQuery Mobile theme and attempt to keep up with their changes, so this just sits as a skinning layer on top.
Some Issues This Exposes in jQuery Mobile
Dialogs need some serious work. I could have spent a lot of time and made my dialogs look exactly like the iOS ones, but this would have involved some pretty hectic CSS and JavaScript. As is I had to do a bit of a work around to get them to dock to the bottom and not the top. Most notably broken, the inability for these dialogs to behave like modals - showing the background as obscured.
Back button syntax. They’re are definitely some cleaner ways to create the iOS style back buttons. I was keen to avoid images, but an image mask might have done really well in this situation. Regardless of that, you will probably find yourself plugging in custom HTML when working with jQuery mobile, and not just the buttons.
It’s bloody hard to keep up with the release cycle. This is not a bad thing ;)
I am, as always, open to merging pull requests and suggestions to help improve this project. I must also stress that it is important that truly innovative changes best be held off until jQuery Mobile makes it out of beta. ■

taitems:

iOS Inspired jQuery Mobile Theme

jQuery Mobile doesn’t deviate far from the pattern established by its sibling libraries: provide something that normalises functionality and/or design across browsers and operating systems. 

The work by the Filament Group has been vital for standardising the look and feel of jQuery Mobile, especially when dealing with incredibly dated or under-featured mobile browsers. Borrowing upon conventions established by both the iOS and Android operating systems, they created something that is palatable across a range of devices.

There will be odd instances when you need an application to look as close to native as possible. I completely agree with the Filament Group’s arguments against this, but currently designers are forced to roll their own solution. What I have created is the beta framework for an iOS-inspired theme that attempts to bring jQuery inline with the native iOS UI elements. I actually began this project when the first alpha was released, but with taking on a new job and other responsibilities, I found myself lagging behind the release schedule. I’m not sure of the response this will get, so hopefully I can gauge how much time I should spend on this in future.


But without further ado: here is the iOS-inspired theme for jQuery Mobile. It works great in Chrome, Safari, iPhone and iPad mobile Safaris.

  

Some Caveats

  • To achieve the look of the iOS style back button with CSS3, the HTML is customised and therefore must be copied and pasted manually. The back button template can be found in the GitHub readme file.
  • The CSS3 back button isn’t perfect, there are some jaggedness and shadow issues.
  • Plenty of elements still remain unstyled, or are missing hit state styling.
  • Cross browser compliance is a low priority.
  • This is an add-on theming layer. It was impossible to fork the actual jQuery Mobile theme and attempt to keep up with their changes, so this just sits as a skinning layer on top.

Some Issues This Exposes in jQuery Mobile

  • Dialogs need some serious work. I could have spent a lot of time and made my dialogs look exactly like the iOS ones, but this would have involved some pretty hectic CSS and JavaScript. As is I had to do a bit of a work around to get them to dock to the bottom and not the top. Most notably broken, the inability for these dialogs to behave like modals - showing the background as obscured.
  • Back button syntax. They’re are definitely some cleaner ways to create the iOS style back buttons. I was keen to avoid images, but an image mask might have done really well in this situation. Regardless of that, you will probably find yourself plugging in custom HTML when working with jQuery mobile, and not just the buttons.
  • It’s bloody hard to keep up with the release cycle. This is not a bad thing ;)

I am, as always, open to merging pull requests and suggestions to help improve this project. I must also stress that it is important that truly innovative changes best be held off until jQuery Mobile makes it out of beta. 

17 4 / 2012

When we started working on the next release of Ext Designer, we had very ambitious goals: we wanted to build a great visual tool to help you build web applications faster that didn’t get in the way. We wanted to make the development process more inclusive by lowering the barrier to collaborate, allowing UX designers to work effectively in the same environment that you use.

We wanted you to be able to create complete applications – not just the UI. We wanted a tool that would let you build an application quickly out of standard components, but also allow you to easily customize those components with your own code, right from within the tool.

What we created is no longer just a rapid interface designer, but a complete application builder, a place where the architecture and the interface of an application can be created and properly structured for development.

Continue reading at the Sencha blog. 

08 4 / 2012

simurai:

Small demo of animated CSS Mask Icons. Note: It uses the non-standard CSS masks that are only implemented in WebKit without a spec. I don’t wanna go into discussing if that’s ok or not, instead I just like to experiment with them because I think you can do cool stuff and hopefully one day it will become standard.
Using CSS masks for icons would have the benefit of being able to create a large icon-set and easily swap textures, colors, shadow effects. And also animate them. Basically everything you can do with CSS backgrounds. It could also be used for other stuff like tooltips, speech bubbles, funky shaped buttons and so on.
The basics of this demo goes something like this:
Add a texture and gradients to your element’s background.
Use SVG (or PNG) as mask-image to “cut out” the rectangle into the desired shape.
Use a second shape together with mask-composite to either add  (source-over -> robot), subtract (source-out -> apple bite, cloud arrow) or intersect (xor -> cloud arrow while pressing) with the first mask.
Add some transitions/animations to the mask-position.
So ya, basically you can mask a mask, combine multiple masks or even do the opposite depending if they overlap or not. In total there are a dozen mask-composite options that I’m not quite sure what the exact difference is. I just tried them all till it worked like I wanted. ;-)
Couple notes:
Pseudo elements (highlight on the cloud) also gets masked.
CSS filters (Chrome Canary, WebKit nightly) work great with CSS masks, unlike box-shadows. See how the drop-shadow follows the contures of the SVG shape.
For better cross-browser support you could just animate multiple backgrounds (background-composite works too), but then you loose the ability to use a seamless texture.
I’m pretty sure, you could do all the effects with SVG alone. It has masks, drop-shadows, animation.. I just haven’t really dugg myself deep enough into them.
Since it uses mask-position to animate the masks, you can’t rotate them, which is a little limiting.
See demo (WebKit)

simurai:

Small demo of animated CSS Mask Icons. Note: It uses the non-standard CSS masks that are only implemented in WebKit without a spec. I don’t wanna go into discussing if that’s ok or not, instead I just like to experiment with them because I think you can do cool stuff and hopefully one day it will become standard.

Using CSS masks for icons would have the benefit of being able to create a large icon-set and easily swap textures, colors, shadow effects. And also animate them. Basically everything you can do with CSS backgrounds. It could also be used for other stuff like tooltips, speech bubbles, funky shaped buttons and so on.

The basics of this demo goes something like this:

  1. Add a texture and gradients to your element’s background.
  2. Use SVG (or PNG) as mask-image to “cut out” the rectangle into the desired shape.
  3. Use a second shape together with mask-composite to either add  (source-over -> robot), subtract (source-out -> apple bite, cloud arrow) or intersect (xor -> cloud arrow while pressing) with the first mask.
  4. Add some transitions/animations to the mask-position.

So ya, basically you can mask a mask, combine multiple masks or even do the opposite depending if they overlap or not. In total there are a dozen mask-composite options that I’m not quite sure what the exact difference is. I just tried them all till it worked like I wanted. ;-)

Couple notes:

  • Pseudo elements (highlight on the cloud) also gets masked.
  • CSS filters (Chrome Canary, WebKit nightly) work great with CSS masks, unlike box-shadows. See how the drop-shadow follows the contures of the SVG shape.
  • For better cross-browser support you could just animate multiple backgrounds (background-composite works too), but then you loose the ability to use a seamless texture.
  • I’m pretty sure, you could do all the effects with SVG alone. It has masks, drop-shadows, animation.. I just haven’t really dugg myself deep enough into them.
  • Since it uses mask-position to animate the masks, you can’t rotate them, which is a little limiting.

See demo (WebKit)

(via simurai)