Building mobile websites (especially for iPhone)

Lately we were involved in some “mobile” projects, and since the iPhone is the most successful mobile device, we have focused mostly on developing “for” iPhone (this sounds almost as funny as those ’90s websites “optimized for Internet Explorer at 800×600 pixels”, huh? :P ).

So, if you’re also involved (or would like to be) in developing mobile websites, you should know some tricks that will make your “mobile programmer” life a bit easier.

First of all – the device. It’s kind of hard to build stuff that you cannot test periodically (and accurately), and owning an iPhone (or more) is not always possible. So… you need an emulator of some sort. And here comes Genuitec’s “iPhone Emulator for Windows” (as they call it) – MobiOne.

Personally I found it very user-friendly, complete and “honest” from the first test I’ve put it through. It’s true that it’s not a “complete” emulator (as Google’s Android one – that is quite a hustle to use, by the way) – meaning that you cannot install and test iPhone applications on it, but other than that… there’s nothing I can ask of it. It comes with an accelerometer emulator, some JavaScript libraries that could be used to interact with its “mobile functionality”, and since its latest version (milestone 6, at the time this article was written), it has even a “designer mode” (useful if you’re interested in drawing some iPhone-type interfaces for future projects – or for pitching on investors :D ). I’ll let you discover the rest of its functionality on you own…

Next: if you develop in php (as we do), you may also need a quick and reliable way of determining if the client accessing your website / web application comes from a mobile device or not. Well, we found that the “mobile_device_detect()” function from http://detectmobilebrowsers.mobi/ does this job brilliantly. It could be used very simple (just call the function and evaluate its response) or with various parameters, for very accurate results. Enjoy!

If you, as we did, find that the default mobile browser’s screen size is not enough for all your fancy web pages, you may use a nice trick to hide the browser’s address bar (well, you’ll save about 60 pixels in height!). Just add the

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

tag in your page’s head, and you’re all set. It doesn’t even mess up your valid HTML code :P

There are more tips and tricks related to mobile web development that we know and use, but… if you’re interested in more, ask us to write a “part two” on this topic. That’s it for now…!

2010
01/22
CATEGORY
browser
iphone
mobile
Write comment

Building a custom browser search engine

We’ll start this blog by presenting a neat trick: how to create and embed a browser search engine (you know, the box you see in the top-right corner of your [Mozilla Firefox or Internet Explorer] browsers), to be used for searching in any website that has a search capability.

First, you should have a basic understanding of programming (as in “what is a tag”, “what is a variable”, a “token”… those kinds of things) to follow this article.

So, if that is the case, start by creating a new XML-type document (in any text editor you like, even Notepad, Wordpad will do), and add the following lines:

<?xml version=”1.0″ encoding=”UTF-8″?>
<OpenSearchDescription xmlns=”http://a9.com/-/spec/opensearch/1.1/” xmlns:moz=”http://www.mozilla.org/2006/browser/search/”>
<ShortName>Your Search Engine Short Name</ShortName>
<Description>Your search engine’s description…</Description>
<InputEncoding>utf-8</InputEncoding>
<Image width=”16″ height=”16″ type=”image/vnd.microsoft.icon”>http://my.searched-website.com/theWebsitesIcon.ico</Image>
<Url type=”text/html” method=”get” template=”http://my.searched-website.com/?search={searchTerms}” />
<moz:SearchForm>http://my.searched-website.com/?search</moz:SearchForm>
</OpenSearchDescription>

Now, for what it all means. You should start, obviously, with an XML declaration.

Then, the OpenSearchDescription tag is simply a definition of the XLS document’s purpose (for the application trying to use the XML document). It shouldn’t bother you too much… just keep it that way!

The ShortName tag is the text you will see in the search box, as you should see by default “Google” or “Yahoo”. Try to keep it short.

The Description… to be honest, I don’t know where you use or will see this text. But as long as it’s in the “specs”… let’s keep it (and add a meaning to it).

InputEncoding represents the encoding of your search’s characters. I’m assuming you’re using the default English ASCII characters, so… also, keep it as it is. If you want to search using any other type of characters (latin, slavic, etc.), set the encoding correspondingly (if you know it :P ).

The Image tag holds your search engine’s icon (that you’ll see in the search box, after setting your engine as the default). I recommend you use the searched website’s favicon image (if applicable), else… don’t set it. You will see a default no-icon symbol.

The Url is the most important tag. It transmits the search query itself to the website you’re actually searching on. It has to contain that website’s search path, and as the search parameter you will use the predefined {searchTerms} token. You may set here how that website’s handling the searches (by GET or POST methods).

The moz:SearchForm tag is a Mozilla-specific tag, and it sets the search page’s main URL, to which it submits your search criteria.

So, this are the basic knowledge you’ll need to set up a custom browser search engine. Next, in order to install it in a browser’s search box, you’ll need another thing: to have a web page where to declare it, and from where to install it.

For this, you just need to add a simple line of code in the <head> section of any web page:

<link rel=”search” type=”application/opensearchdescription+xml” title=”Search my website using this fancy custom browser search engine” href=”http://my.own-webpage.com/mySearchEngineFile.xml” />

Of course, you need to modify (in both my code samples above) the “funny” values with real, proper ones. Once you did all that… the sky is the limit! :P Now you can search through any website in just one or two clicks (depending if you set your custom search engine as the default one or not :D ).

For a real-life example, we built an IMDb search engine, so we could search easily for movies. To install it, just one the search engines icons (by pressing the currently selected one’s icon), and select “Add MySearchEngine’sTitle” (or “Add Search Providers” > “My Search Engine’s Title” – depending on your browser). Try it yourself, if it sounds good!

This is not the “limit” of what can be done with custom browser search engines. For complete and detailed specs on using the OpenSearch format, follow this link: http://www.opensearch.org/Specifications/OpenSearch/1.1#OpenSearch_description_document

2010
01/22
CATEGORY
XML
browser
search engine
Write comment