HTML5 relevant tags for iOS Web App

Here are some tags that are relevant to build great mobile experience. It is mostly for iOS but Android (Chrome) seems to follow it as well.

This is mostly for my own reference as I bump to this all the time.

 

<head>
        <!-- Run in full-screen mode. -->
        <meta name="apple-mobile-web-app-capable" content="yes">
       <!-- Android --> 
       <meta name="mobile-web-app-capable" content="yes">
 
        <!-- Make the status bar black with white text. -->
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
        <!-- Customize home screen title. -->
        <meta name="apple-mobile-web-app-title" content="Web App">
 
        <!-- Disable phone number detection. -->
        <meta name="format-detection" content="telephone=no">
 
        <!-- Set viewport. -->
        <meta name="viewport" content="initial-scale=1">
 
        <!-- Prevent text size adjustment on orientation change. -->
        <style>html { -webkit-text-size-adjust: 100%; }</style>
 
        <title>iOS 7 Web App</title>
 
        <!-- Icons -->
 
        <!-- iOS 7 iPad (retina) -->
        <link href="/static/images/apple-touch-icon-152x152.png"
              sizes="152x152"
              rel="apple-touch-icon">
 
        <!-- iOS 6 iPad (retina) -->
        <link href="/static/images/apple-touch-icon-144x144.png"
              sizes="144x144"
              rel="apple-touch-icon">
 
        <!-- iOS 7 iPhone (retina) -->
        <link href="/static/images/apple-touch-icon-120x120.png"
              sizes="120x120"
              rel="apple-touch-icon">
 
        <!-- iOS 6 iPhone (retina) -->
        <link href="/static/images/apple-touch-icon-114x114.png"
              sizes="114x114"
              rel="apple-touch-icon">
 
        <!-- iOS 7 iPad -->
        <link href="/static/images/apple-touch-icon-76x76.png"
              sizes="76x76"
              rel="apple-touch-icon">
 
        <!-- iOS 6 iPad -->
        <link href="/static/images/apple-touch-icon-72x72.png"
              sizes="72x72"
              rel="apple-touch-icon">
 
        <!-- iOS 6 iPhone -->
        <link href="/static/images/apple-touch-icon-57x57.png"
              sizes="57x57"
              rel="apple-touch-icon">
 
        <!-- Startup images -->
 
        <!-- iOS 6 & 7 iPad (retina, portrait) -->
        <link href="/static/images/apple-touch-startup-image-1536x2008.png"
              media="(device-width: 768px) and (device-height: 1024px)
                 and (orientation: portrait)
                 and (-webkit-device-pixel-ratio: 2)"
              rel="apple-touch-startup-image">
 
        <!-- iOS 6 & 7 iPad (retina, landscape) -->
        <link href="/static/images/apple-touch-startup-image-1496x2048.png"
              media="(device-width: 768px) and (device-height: 1024px)
                 and (orientation: landscape)
                 and (-webkit-device-pixel-ratio: 2)"
              rel="apple-touch-startup-image">
 
        <!-- iOS 6 iPad (portrait) -->
        <link href="/static/images/apple-touch-startup-image-768x1004.png"
              media="(device-width: 768px) and (device-height: 1024px)
                 and (orientation: portrait)
                 and (-webkit-device-pixel-ratio: 1)"
              rel="apple-touch-startup-image">
 
        <!-- iOS 6 iPad (landscape) -->
        <link href="/static/images/apple-touch-startup-image-748x1024.png"
              media="(device-width: 768px) and (device-height: 1024px)
                 and (orientation: landscape)
                 and (-webkit-device-pixel-ratio: 1)"
              rel="apple-touch-startup-image">
 
        <!-- iOS 6 & 7 iPhone 5 -->
        <link href="/static/images/apple-touch-startup-image-640x1096.png"
              media="(device-width: 320px) and (device-height: 568px)
                 and (-webkit-device-pixel-ratio: 2)"
              rel="apple-touch-startup-image">
 
        <!-- iOS 6 & 7 iPhone (retina) -->
        <link href="/static/images/apple-touch-startup-image-640x920.png"
              media="(device-width: 320px) and (device-height: 480px)
                 and (-webkit-device-pixel-ratio: 2)"
              rel="apple-touch-startup-image">
 
        <!-- iOS 6 iPhone -->
        <link href="/static/images/apple-touch-startup-image-320x460.png"
              media="(device-width: 320px) and (device-height: 480px)
                 and (-webkit-device-pixel-ratio: 1)"
              rel="apple-touch-startup-image">
    </head>

 

WebKit Radial Gradients (Circle gradient)

WebKit in January 2011 released new gradient syntax that is closer to w3c recommendation and Mozilla implementation.

The new syntax has four gradient functions:

  • linear-gradient()
  • radial-gradient()
  • repeating-linear-gradient()
  • repeating-radial-gradient()

On this post I am exploring radial implementation, radial-gradient() and repeating-radial-gradient().  Notice that there is also linear gradient which is most likely be used  more often than the radial.

Using CSS gradients in a background lets you display smooth transitions between two or more specified colors; this lets you avoid using images for these effects, thereby reducing download time and bandwidth usage. In addition, because the gradient is generated by the browser, objects with gradients look better when zoomed, and you can adjust your layout much more flexibly.

A gradient specified using circles is called a radial gradient. You specify a radial gradient by setting the type to radial and specifying a start inner circle and end outer circle. Each circle is specified by a center and a radius. The color values change gradually from the circumference of the inner circle outward to the circumference of the outer circle.

Examples

-webkit-radial-gradient(circle, white, black);
-webkit-radial-gradient(circle, white, black);


-webkit-radial-gradient(center, 20px 20px, white, black);
-webkit-radial-gradient(center, 20px 20px, white, black);

-webkit-repeating-radial-gradient(left, red 10%, green 20%, blue 30%);
-webkit-repeating-radial-gradient(left, red 10%, green 20%, blue 30%);


-webkit-repeating-radial-gradient(black, black 5px, white 5px, white 10px);
-webkit-repeating-radial-gradient(black, black 5px, white 5px, white 10px);

-webkit-repeating-linear-gradient(top left, red, red 5px, white 5px, white 10px);
-webkit-repeating-linear-gradient(top left, red, red 5px, white 5px, white 10px);
-webkit-repeating-linear-gradient(-5px -5px, circle, #bfeeff, #bfeeff 15px, #fff 15px, #fff 30px, #bfeeff 30px, #bfeeff 40px);
-webkit-repeating-linear-gradient(-5px -5px, circle, #bfeeff, #bfeeff 15px, #fff 15px, #fff 30px, #bfeeff 30px, #bfeeff 40px);

See working demo here if you are running latest WebKit (tested on WebKit Version 5.0.3 (6533.19.4, r77734))

References

Spam blocking with JavaScript and CSS

I got inspired by kari patila’s post where he uses CSS class to hide spam text using CSS and I wrote something my own by using JavaScript and content to write email address.

.email:after {
content: “@jpkeisala.com”;
}

<a class=”email” xhref=”http://www.jpkeisala.com/v6/#” mce_href=”http://www.jpkeisala.com/v6/#” onclick=”window.location = ‘mailto:’+this.innerHTML+’@jpkeisala.com'”>jp</a>

a bit ugly but i think it works.

Creating Bar Graphs with CSS

Polls or graphs are usually images generated from desktop software or web scripts perhaps sometimes flash+xml, and when it comes to web it is too much resource consuming to generate image on the fly.
Since we don’t have CANVAS or SVG yet on wide use there is a CSS trick.
The idea of using CSS to generate Bar Graphs could be very interesting in this case, and Apples to Oranges have a pretty interesting article describing in details how to create Bar Graphs with CSS.

Web Developer Toolbar for IE

The IE Developer Toolbar provides several features for deeply exploring and understanding Web pages.

  • Explore and modify the document object model (DOM) of a web page.
  • Locate and select specific elements on a web page through a variety of techniques.
  • Selectively disable Internet Explorer settings.
  • View HTML object class names, ID’s, and details such as link paths, tab index values, and access keys.
  • Outline tables, table cells, images, or selected tags.
  • Validate HTML, CSS, WAI, and RSS web feed links.
  • Display image dimensions, file sizes, path information, and alternate (ALT) text.
  • Immediately resize the browser window to 800×600 or a custom size.
  • Selectively clear the browser cache and saved cookies. Choose from all objects or those associated with a given domain.
  • Choose direct links to W3C specification references, the Internet Explorer team weblog (blog), and other resources.
  • Display a fully featured design ruler to help accurately align objects on your pages.

Dowload here

The Healthy Alternative to Browser Text

Probably every single web designer have had to explain to their clients why in webpage they cant use font what is in their design guideline. I found this nice little hack that allows you to go around with this by replacing text with small flash movie. With sIFR you get nice anti-aliased headers or navigation elements to your page.
Check out sample and article about it.