Skip to main content

Home/ Design for mobile/ Group items tagged screenshots

Rss Feed Group items tagged

Filter: All | Bookmarks | Topics Simple Middle
Vernon Fowler

Everything you always wanted to know about touch icons · Mathias Bynens - 0 views

mathiasbynens.be/...touch-icons

mobile touch icons ios apple iphone webdesign html

shared by Vernon Fowler on 03 Jun 13 - No Cached
  • Say adiós to the boatload of proprietary <link rel="apple-touch-icon"> elements on every single HTML page.
  • Just create different versions of the icon, use the correct file names and place them in the root.
  • So, what do we need? apple-touch-icon-57x57-precomposed.png or apple-touch-icon-57x57.png for non-Retina iPhone and iPod Touch; apple-touch-icon-72x72-precomposed.png or apple-touch-icon-72x72.png for the first- and second-generation iPad; apple-touch-icon-114x114-precomposed.png or apple-touch-icon-114x114.png for iPhone 4+ (with Retina Display); apple-touch-icon-144x144-precomposed.png or apple-touch-icon-144x144.png for iPad 3+ (with Retina Display); apple-touch-icon-precomposed.png and apple-touch-icon.png as a fallback for everything else (possibly including non-Apple devices).
  • ...5 more annotations...
  • It’s a good idea to include both apple-touch-icon.png and apple-touch-icon-precomposed.png for maximum compatibility: iOS 1 and BlackBerry OS6 don’t support precomposed icons. (Note that Android 2.1 only supports precomposed icons.)
  • Sadly, the no-HTML approach doesn’t work on the native Android browser (tested in 2.3 Gingerbread, 3 Honeycomb, 4.1 Jelly Bean), although I’ve had reports saying it does work in and 4.2 Jelly Bean’s default browser.
  • For web pages that don’t specify a custom touch icon, a thumbnail screenshot of the page is used instead. Android has a default icon, and some systems fall back to the favicon if it’s available.
  • I’d recommend to always use precomposed icons. It gives you full control over your icon, and it’s the only kind of icon Android 2.1 supports.
  • This way, older iOS versions download the smallest icon instead of the largest one. So, instead of forcing the largest icon to all devices unless they support the sizes attribute (iOS 4.2+), we now serve the smallest icon unless @sizes is supported. In other words, we’re now using progressive enhancement instead of graceful degradation :) When in doubt, always use this snippet. With support for nearly all iOS versions and devices, and as many different Android versions as possible, it’s the most robust way to add touch icons to your site.
Vernon Fowler

Make your website an iPhone web application | Luscarpa Blog - 0 views

www.luscarpa.com/...site-an-iphone-web-application

iphone web application mobile design webdesign

shared by Vernon Fowler on 18 Aug 12 - No Cached
  • Specifying a Startup Image On iPhone OS, similar to native applications, you can specify a startup image that is displayed while your web application/website launches. By default, this image is a screenshot of the web application with the page that the user has visited the last time. If you want customize it, add a link element to the webpage, like this: <link rel="apple-touch-startup-image" href="/startup.png">Copy this code to the clipboardView plain text1<link rel="apple-touch-startup-image" href="/startup.png">
  • All these tips only works for web pages that have been saved to the home screens and opened from there, if you access to your website using safari you don’t have this customizations. Remember also that any new link will be open in new browser tab so you lost these settings.
  • if you click on a post link you will be redirect to safari
1 - 3 of 3
Showing 20▼ items per page