This link has been bookmarked by 177 people . It was first bookmarked on 14 Sep 2007, by jonathan Belisle.
-
25 Oct 12
-
30 Dec 11
Jeffrey LanghamAugust, 2007 A List Apart Article talking about Media Queries: http://t.co/kpOIqbIE
-
28 Sep 11
-
24 Aug 11
-
Developers on both Mac and Windows can use the Safari browser as a proxy for web development on the iPhone. For the most part, the way Safari renders content is identical to the way it’s rendered on the phone. There are some differences and caveats, which I’ll cover in the second article of this series.
-
Apple also has a website dedicated to web development on the iPhone. The Apple site is a great place to look for the latest news and information: if I’m having a problem with some aspect of iPhone web development, their “Web Development Guidelines” are the first place I look.
-
In my opinion, you’ll need to have an iPhone for this type of development.
-
Remind yourself (or your boss) that the IRS would consider the iPhone a valid business expense and pick one up.
-
The iPhone makes prominent a little-discussed web development concept: the viewport. To deal with the problem of fitting a relatively large web page onto a small phone display, the iPhone’s developers use a viewport to select the part of the page you are viewing.
-
<meta name="viewport" content="width=808" />
-
So how do you use styling rules that apply only to the iPhone? The answer is to use a media query on a
<link>tag. The following rule is recommended by Apple:<link media="only screen and (max-device-width: 480px)" href="iPhone.css" type="text/css" rel="stylesheet" />Other browsers will ignore
iPhone.csssince they have a maximum device width greater than 480px. -
It’s easy to have your page pass information to the Mail, Maps, and Phone applications—all you need to do is craft special
hrefs for your links. -
Mobile Safari handles links to Google Maps differently than other browsers, too. It checks to see if a link
hrefbegins with “http://maps.google.com/maps” and will automatically load the remaining part of the URL into the Maps application instead of a new web page. -
Now to the newest and most interesting linking feature on the iPhone: clicking on a link to make a call.
Say you have the following hCard microformat on your contact page:
<div id="hcard-Ernestine" class="vcard"> <span class="fn">Ernestine</span> <div class="tel">555-1212</div> </div>By default, the iPhone will turn the 555-1212 into a clickable link. It will take whatever styling has been specified for the parent (i.e. there isn’t any way to specify an id or class for the automatically generated link).
If you’d like more control over the link that is generated, you can use markup like this:
<a class="call" href="tel:555-1212">Call Me</a>
-
-
23 Jun 11
First Lastsers will display an error message because they don’t recognize the tel: protocol. You’ll probably
-
his feature to increase font size for important information on your page. As an example, you could increase type size in a header tag used for a weblog title with a rule like this:
-
- Size—Bigger is better. Make it easy for the user to manipulate your content. Element sizes should start at 40 pixels and go up from there.
-
I realize that a lot of information has been presented in this article—th
-
-
06 May 11
-
28 Apr 11
-
12 Feb 11
-
05 Nov 10
-
13 Oct 10
-
01 Oct 10
-
14 Sep 10
-
10 Sep 10
-
02 Sep 10
-
24 Aug 10
-
17 Aug 10
-
09 Aug 10
-
16 Jul 10
-
07 Jul 10
-
18 Jun 10
-
15 Jun 10
-
29 May 10
-
25 May 10
-
24 Apr 10
-
12 Apr 10
-
16 Mar 10
Alan DurkanA good article for beginning site development specifically for the iPhone
-
01 Mar 10
-
26 Feb 10
-
25 Feb 10
-
16 Feb 10
-
09 Jan 10
-
23 Nov 09
-
23 Sep 09
-
01 Sep 09
-
14 Aug 09
-
04 Aug 09
-
29 May 09
-
26 May 09
-
04 May 09
-
17 Apr 09
-
04 Apr 09
-
17 Mar 09
-
12 Mar 09
-
06 Mar 09
-
03 Feb 09
-
- Multimedia—Use QuickTime H.264 encoding and pay attention to bit rates. Reference movies allow you to serve up different sized content using the same HTML.
- Images—Use iPhone-specific CSS to load lower resolution images.
- JavaScript—Be careful about including large JavaScript frameworks—loading hundreds of KB of scripts to show and hide a
<div>doesn’t make sense.
-
-
22 Jan 09
-
08 Jan 09
Herve KablaUn article intéressant, pour concevoir des applications supportées par l'iPhone.
-
03 Dec 08
-
31 Oct 08
napoleon wilsonUnless you’ve been hiding in a cave with Osama bin Laden, you know that Apple is selling an iPhone and that it’s a hit.
-
28 Oct 08
-
25 Sep 08
-
02 Sep 08
-
28 Aug 08
-
17 Aug 08
-
15 Aug 08
-
07 Aug 08
-
04 Aug 08
-
28 Jul 08
-
26 Jul 08
-
09 Jul 08
-
20 Jun 08
-
30 May 08
-
28 Apr 08
-
16 Apr 08
-
03 Apr 08
-
31 Mar 08
-
26 Mar 08
-
31 Jan 08
-
16 Jan 08
-
09 Jan 08
BOK ™In this first of two articles on bringing your content to the iPhone, I’ll explain what your options are and give you some guidance for tuning your site and making changes that enhance your users’ experience. In the second part of this series, I’ll
-
05 Jan 08
-
08 Dec 07
-
02 Dec 07
-
26 Nov 07
-
14 Nov 07
-
08 Nov 07
-
08 Oct 07
-
05 Oct 07
-
28 Sep 07
-
24 Sep 07
-
21 Sep 07
Sheryl HutchersonIf your site relies on Flash, all iPhone visitors will see is a blue Lego-style brick with question marks.
-
20 Sep 07
-
18 Sep 07
-
17 Sep 07
Ady GouldUnless you’ve been hiding in a cave with Osama bin Laden, you know that Apple is selling an iPhone and that it’s a hit. Apple is well on its way to selling ten million mobile Internet devices by the end of 2008. Besides being a great phone, the iPhone
accessibility browser Usability user_Interface_Design Safari iPhone #delicious
-
15 Sep 07
-
14 Sep 07
-
11 Sep 07
-
08 Sep 07
-
04 Sep 07
-
31 Aug 07
-
30 Aug 07
Would you like to comment?
Join Diigo for a free account, or sign in if you are already a member.