On mobile there is little space for creating designs and each interaction has to have enough space for the thumb to be able to click it without activation something else.
Patterns have been a great way to improve this, subtlepattern.com has been my first stop for the best quality and they announce a plugin which i really want to have.
Check it out at http://plugin.subtlepatterns.com/ .
The ongoing debate about skeuomorphism in software interfaces misses the point.I really like this article, but the problem i have with articles about going more simple to be clear is that they mis out on a point that is very important. The emotional connect or feeling you get when you are using a app, device or tool. Going all about the functionality and focus can lead to dull looking and boring interfaces to work with.
We need to understand that when we all moved to this new trend of designing, we get bored with it. Just like we did with grungy, highly realistic and other trends of designs.
We should understand that this should not be about looks but about the tool. If flatt fits your identity and not your will to fit in then go for it, but else go for something that fits your product.
Last time i posted a menu button, it seems to be a succes and i agree after Sparrow now Wunderlist has this tiny menu button in the corner. It works great and always at your disposal to use but stays out of the way.
Just now i’ve seen this example on Dribbble, and would like to share it. The button is used to drag up the keyboard.
Today we got a newsletter with the link to windows website with design guidelines and tips for windows phones and xbox.
Have a look and get your next windows app design to a higher level.
Tumblr for Android just got a total facelift! We’ve completely redesigned the interface, added fancy post animations, made images pop, and a whole lot more. Download the update today.
Because most new sites are responsive we noticed working on our projects that Google Maps images got broken.
To fix the broken images you have to set the max-width to none on the images.
#map_canvas img { max-width: none; }
Solution found: http://stackoverflow.com/questions/9645355/why-are-the-google-maps-controls-infowindow-broken-skewed-when-using-jquery-mo
You can use the following css styling that has been added in ios5, in combination with a fixed or max height and width. You can use overflow hidden for other devices, but that makes it scroll only you need add the below styling to show the actual scrollbars.
-webkit-overflow-scrolling: touch;
Showing the scrollbar to the user gives them an indication of how much can be scrolled and that they can actually scroll the content. As this can be some what confusing without the scrollbars in safari ios.
http://webdesign.tutsplus.com/tutorials/site-elements/mobile-friendly-form-design-new-on-premium/
Adobe Shadow
http://itunes.apple.com/gb/app/id498621426?mt=8&affId=1709650&ign-mpt=uo%3D6
Live View
http://zambetti.com/projects/liveview/
Skala Preview
http://bjango.com/mac/skalapreview/
Reflection app
To check if a user has added the page to his or her home screen and visiting it from there. The example below adds a class to the body so you can adjust css or check for it with jQuery and shows an alert.
// Check if user is in homescreen mode
if (window.navigator.standalone) {
$('body').addClass('standalone');
alert('Standalone - home screen web app');
}else {
$('body').addClass('normalbrowser');
alert('Normal browser');
}
On how to prevent internal links from opening outside the web app:
http://uidesignformobile.tumblr.com/post/42435612992/prevent-links-in-iphone-ipad-home-screen-icon-from .
