Patterns can save the day when your doing mobile design

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/ .

Mobile design yes its in the tiny details

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.

Designing for Windows phones

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.

Link https://dev.windowsphone.com/en-us

staff:

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.

staff:

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.

Fix Google Maps broken images on responsive sites

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

Show scrollbars on mobile safari browser iOS (iphone, ipad, ipod)

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.

Check if user is in web app / home screen mode on iPhone or iPad iOS

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 .