iPhone/iPad Website Development: Meta Tags, Images and More

By Vamshi

In our last tutorial we showed you how to use CSS for iPhone and iPad layouts. This week we're going to show you a few more HTML tags you can use in your iDevice web development arsenal: iPhone meta tags, splash screens and icons.

Url and Button Bar Meta Tags

The iPhone uses the Safari web browser, so that's what we're going to focus on here. When the browser is opened, the URL bar appears at the top and the button bar appears at the bottom. When anyone visits your page from an iPhone, this is what they will see by default, as shown on Apple's Safari page:

To make the URL and button bars disappear, add this meta tag to the <head> of your document:

<meta name="apple-mobile-web-app-capable" content="yes" />

Can I Change the Appearance of the iPhone's Status Bar?

The iPhone's status bar appears at the very top of the iPhone, and is a standard feature that appears when one is using Safari. It can, however, be distracting, and although you can't make it disappear, you can change the color of it to black, the default, which is white, or make it translucent. You do this using another meta tag, like this:

<meta name="apple-mobile-web-app-status-bar-style" content="default" />

The values that you can change for content are default (white), black and black-translucent.

How Can I Prevent Users From Scaling (Pinching) My Website?

On the iPhone, if you make the gesture known as "pinching" while you are on a website or web app, it zooms in. iPhone applications don't do that, and you may not want users to zoom in on your website either--especially if you've taken the trouble to design a website that fits perfectly on the iPhone with maximum readability in mind. To prevent users from doing that, there is another meta tag you can use:

<meta name="viewport" content="user-scalable=no, width=device-width" />

How Can I Create An Icon for My Bookmarked Website?

When users are browsing the web via Safari on the iPhone, they can press "+" and "Add to Home Screen" to create an icon that will appear on their home screen (Apple calls these icons "Web Clips"). It will open up your website in Safari the next time the user selects the icon. Instead of the default bookmark icon, you can specify an image that the iPhone will use when it creates the "bookmark" icon on the user's home screen by using a link reference tag:

<link rel="apple-touch-icon" href="bookmark-icon.png" />

In order to create a home screen icon, you will need to create a 57 x 57 pixel .png file, and use that in the tag shown above. If you are creating a site for the iPad, the image size will need to be 72x72 pixels. Like the others in this article, the tag goes within the <head> section of your HTML document. The iPhone adds a glossy appearance to the icon, but if you don't want it, you can change the rel information to apple-touch-icon-precomposed in the link shown above.

How Can I Create a Splash Screen for My iPhone Website?

When you are developing websites for the iPhone OS, similar to native applications, developers are able to specify a startup image, or splash screen, that is displayed while the website is launched. It appears on the device as shown in this image which shows a startup image from Google on an iPhone:

You can create your own startup image by creating a 320x460 .png file, and then add a link to it in the <head> of your HTML document like this:

<link rel="apple-touch-startup-image" href="splash_screen.png" />

Keep in mind that the image size must be specifically 320x460 pixels, or the iPhone will ignore it entirely. If you are creating a startup image for the iPad, which works the same way, the startup image must be 1004x768. As you can see, the creation of a website for the iPhone (or iPad) requires the use of specific tags to make it look professional and take advantage of the features that the devices provide to web developers. Our next article will return to iPhone and iPad CSS, and we will get even deeper into the creation of your iDevice-ready website.

CSS MULTI-COLUMN LAYOUT MODULEPlease Note That This Module Is In CR (Candidate Recommendation) State

Multi-Column layout has always been a neccessity in publication industray. Web is not different and web designers and deveopers used several floating and positioning techniques to achieve the same result. CSS 3 introduces a multi-column (multicol) module which aimes at creating multi-column layouts an easier expirience.

A Quote From Specification

Specification claims that with following instructions cited in it:

Content can be flowed into multiple columns with a gap and a rule between them.

What it means? Simply remember a magazine or a newspaper page, which is composed of columns. Text starts from the top of first column (left column in ltr languages and vice vera in rtl) and goes down, until it reaches the end of the first column. It then flows to the top of the second column, down to the bottom of the second column, then flows again to the top of the third column, and so on and so forth. As they say, a picture talks more than a thousand words:

The left image shows the content flow in left-to-right languages and the right image is for right-to-left languages.

Syntax

To be able to use CSS Multicol, there is no need to write extra HTML at all. Multicol is completely a CSS stuff. In other words, by changing the style (CSS file) of a page, you can get multicol layout or remove it. Applying multicol to an HTML element tells the browser to show the content of that element in columns. For using multicol, you should learn some knew CSS properties and values (new declarations). The list of these declarations is presented here:

column-width: 300px;

column-count: 3;

columns: 3;

column-gap: 15px;

column-rule: 1px solid red;

column-rule-width: 1px;

column-rule-style: solid;

column-rule-color: red;

column-fill: balance;

column-span: all;

break-before: column;

break-inside: avoid-column;

break-after: avoid-column;

Let's now understand these properties in simple languaeg.

Column-Width & Column-Count

Consider that you want the footer of your site to have three columns. Using CSS3 and by assuming that your footer is an HTML div element, and that your site's width is 960 pixels, you can write:

div#footer

{

    column-width: 300px;

}

Because footer div is 960px wide, using simple math we see that 3 columns with 300px width can be placed inside it. But the big problem of multi-column layout is to divide the space of the parent element equially. A stupid browser would render the footer as:

When browser dumbly dedicates space to columns

Therefore, column-width property only sets the minimum value for the column and browser would adjust the width of created columns according the the availabe space. In other words, column-width is not deterministic. So, when you set the width of your column to be 300px width, and you see columns with 320px width on the screen, don't get mad!

To have a good grasp of column-width property, imagine yourself as a browser. Someone has asked you to divide a space such that no division is shorter than a specified value. You first divide the width of the availabel space (here 960px) by the requested column width (here 300px) and you get number 3. So, up to here you know that 4 columns can't be placed there, and 2 columns are less than possible. Then you simply forget the specified value, and divide the available space (960px) by 3 and you get 320px. That's it. You draw 3 columns of 300px wide in the available space, though, columns with 300px width has been requested.

Up to here, we saw that we can determine the minimum-width of columns. But we had no control over the number of coulmns. Because sometimes our design is elastic and has no fixed width. Therefore if the user resize his or her browser, the available space would change, causing the number of columns to be increased or decreased. To explicitly define the number of columns, you use column-count property.

div#footer

{

    column-count: 3;

}

This rule tells the browser to always draw 3 columns in the available space of the footer. So, no matter how much the available space is, the browser always divide it by 3 and draws 3 columns. Now even if you site's visitor resize the browser, columns count stay 3, but columns width change to accomadate the new space.

Like always, column-width and column-count can be replaced with a shorthand property:

div#footer

{

    columns: 300px;

}

or,

div#footer

{

    columns: 3;

}

Column-Gap & Column-Rule

Paddings; Consider column-gap to be something like padding that you apply manually to some adjacent elements (like menu items) to make'em get a little separated from each other. It's that simple. Column-gap is the length of space between the content of two adjacent columns. In other words, a column-gap of 10px is equivalent to two paddings of 5px.

Now that we have applied some padding or column-gap between columns, we might also want to draw a line in the middle of the gap to show that these columns are separated. This can be done using column-rule property. Column-rule is exactly like border property and is a shorthand property.

div#footer

{

    column-rule: 1px solid blue;

}

Column gap is like the overall padding of two adjacent elements

If you break column-rule property into lengthier properties, you get:

div#footer

{

    column-rule-width: 1px;

    column-rule-style: solid;

    column-rule-color: blue;

}

According to deductional language theory, column-rule is one of those NDconcepts and an MDT for it could be columns-midline. My suggestion is that W3C change the name of this property to columns-midline.

Column-Fill & Column-Span

Column Breaks

Notes

One of the benefits of using CSS Multicol is that, columns count can vary depending on the size of the viewport (screen). This means that you can create your multicol design for high resolution desktop monitors and get sure that for small cell phone screens, the mobile browser uses less columns and reflows everything.

Learn with Vamshi

Wednesday, July 11, 2012