iWebkit as a way to optimize your site for iPhone

iWebkit as a way to optimize your site for the iPhone.

Yesterday I noticed a site development library optimized for the iPhone and iPod Touch called PastryKit , the library includes a collection of css and javascript. Everything would be fine, but Apple did not take care of third-party developers and forgot (or did not want) to add documentation to its development.


Recently, I was tasked with optimizing my site, for devices such as the iPhone, iPod Touch and for devices using Android.
To do this, I chose a different, lighter library called iWebkit, which will be discussed now.
')
The first post on Habré, so do not scold too much.

By the time this article was written, iWebkit had grown to version 4.6, which could mean that it had already gotten rid of the major childhood diseases and using it in its projects could not cause any problems.

IWebkit work examples

First, let's look at what we can get with the help of iWebkit, that is, consider the examples of sites that use this library.

Attention: It is better to consider examples on sites using webkit ( more ).

The first example is the official demo version from the creators of iWebkit .






The second example is my website z-music.ru optimized for iPhone and Android (To view an optimized version, you must use iPhone or Android or change your user agent).

We look at iWebkit closer.

To get started, you need to download the library from here iwebkit.net/downloads , if you use cms (for example: Drupal or Wordpress), then you have the opportunity to download already optimized plugins for them.

The structure of the site is very simple, for completion you need to take the frame and supplement it with everything you need.

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
< html xmlns ="http://www.w3.org/1999/xhtml" >

< head >
< meta content ="yes" name ="apple-mobile-web-app-capable" />
< meta content ="text/html; charset=utf-8" http-equiv ="Content-Type" />
< meta content ="minimum-scale=1.0, width=device-width, maximum-scale=0.6667, user-scalable=no" name ="viewport" />
< link href ="css/style.css" rel ="stylesheet" type ="text/css" />
< script src ="javascript/functions.js" type ="text/javascript" ></ script >
< title > </ title >

<!-- 2 meta , user agent -->
< meta content =",," name ="keywords" />
< meta content =" " name ="description" />

</ head >

< body >

< div id ="topbar" >
</ div >
< div id ="content" >

<!-- , , ? -->
</ div >
< div id ="footer" >
<!-- , -->
< a class ="noeffect" href ="http://iwebkit.net" > Powered by iWebKit </ a ></ div >

</ body >

</ html >

* This source code was highlighted with Source Code Highlighter .

Simple list:

Now we will consider how to create a website with a simple structure, such as this.


You need to take our frame, which is listed above and add to the container < div id ="content" >
following:

< span class ="graytitle" > </ span >
< ul class ="pageitem" >
< li class ="textbox" >
< ul >
< li > </ li >
</ ul >
</ li >
</ ul >
< ul class ="pageitem" >
< li class ="textbox" >
< ul >
< li > 2 </ li >
</ ul >
</ li >
</ ul >

< span class ="graytitle" > 2 </ span >
< ul class ="pageitem" >
< li class ="textbox" >
< ul >
< li > 3 </ li >
</ ul >
</ li >
</ ul >

* This source code was highlighted with Source Code Highlighter .

So our simple website is ready, if necessary, you can also edit the < div id ="topbar" > , which is responsible for the title.

Examples of the implementation of other functions can be found in the folder Demo, the downloaded library, or read the User Guide, which also comes bundled with the library.