Everything you'll ever need to know about Web browsing on iOS devices – Part I

[Menneisyys]

iOS devices (the iPhone, the iPod Touch and the iPad) are particularly well suited for Web browsing. For example, I do most of my Web browsing on my iPad and not on my desktop (notebook) computer(s). One of the reasons for this is the instant availability, the excellent battery life, the you-can-browse-anywhere approach and, of course, the great IPS screen of the iPad, which is way better than anything else on a desktop, unless it's also an IPS screen like those of old(er), pre-2007 high-end IBM / Lenovo Thinkpads or the iMac. For example, my high-end 17” MacBook Pro (late 2009 model) has a pale and much inferior screen compared to that of the IPS and it's only my old Thinkpads (a t42p and an a31p) that offer the same screen quality as that of my iPad. And let's not even bother with my other tablets (e.g., the HP TC1100) with their low-quality plain TFT screens...

In the following (multipart) article I explain how you can make your Web browsing as easy, effective and productive as possible on the iOS platform. I show you never-before-published tricks and tips you won't find anywhere else.

In addition to reading this article (and the ones that follow), you WILL want to check out the main Web browser comparison & feature chart, which has detailed, browser-specific information on all the subjects discussed here.

For example, the row “Quick (one-tap) scrolling to top / bottom of document?” explains if a given browser is able to scroll to the top and the bottom easily. The row “Quick scrollbar/pad?” elaborates on whether there's a way of quickly and arbitrarily reposition yourself in the document with either a vertical slider or a virtual touchpad as is done in iCab. The iCab tip in the row “View source?” is also explained in this article (see section 1.1). “Charsize increase / decrease / page-based saving?” is also thoroughly discussed – see section 1.2.

Also, don't forget to hide the browsers you aren't interested in by simply clearing their checkboxes at the top.

Finally, don't forget to check out my past articles on Web browsing. My last news post, Web browsing news: brand new 360 Browser and iCab Mobile out; chart heavily updated explains, among other things, how two major iCab additions, Search in Page with Previous / Next and Google Suggest work. It also shows the advantages and shortcomings of the brand new Web browser 360 Browser.

THIS article introduces Opera Mini. Note that it has been published before the iPad and iPhone / iPod Touch 4; today, I'd rate it far worse as neither of these new and high-resolution models are supported natively.

THIS article explains how scriptlets should be deployed and used. They greatly enhance Web browsers; no wonder they're the first subject I discuss.

Finally, THIS is the 18-months-old and, therefore, completely outdated previous Web Browsing Bible. Much as the browser-specific info contained in it is really outdated, some of the main chart rows are already the same as in the current chart; therefore, you might want to, at least, superficially read it. Also, my PDF Reader bible (last update HERE) elaborates on some subjects also listed in this chart; for example, why application locking may be advantageous (see the row “App password / locking?” in the chart.)

Note that this is only the first part of a multipart Web browser series. Nevertheless, it is self-contained and can be read “as is” and it already has some cool, never-before-published tips and tricks. Also note that I've only provided screenshots as links, as the blog engine doesn't like pictures wider than 470 pixels and I didn't want to generate a separate “thumbnail” set of all my (Retina-screen and/or iPad; that is, both way wider than 470 pixels) images.

1. Scriptlets

There are a lot of functionalities you simply can't access without making some tricks. One of them is adding on-page searching to Web browsers; another one is making the character size larger. The latter is of extreme importance when you, for example, are in a gym and do some workout on an ellipse machine with an iPad fastened to it. Then, should you want to browse the Web, you will surely want to increase the character size. The same stands for reading in a wobbling vehicle.

I've published several tutorials on how scriplets need to be added to the best Web browsers (most importantly, Safari and iCab); please consult THIS article fully packed with tutorial videos. Before you check them out yourself, you might want to read the following two sections first. The first explains how iCab Mobile makes it easier to access this kind of added functionality; the second discusses the problems of iCab's built-in character size setter.

1.1 Installing and using modules in iCab

Now, most advanced iOS Web browsers support so-called “modules”, which is basically just a pre-packaged scriptlet in a much-easier-to-deploy-and-maintain package.

If, after a fresh install, you put (and, then, remove) two fingers on the screen or tap the icon with the red oval in the screenshot below, you'll be presented the following dialog:

screenshot

(Note that the icon looks similar on the iPad but is placed in the upper right corner)

With the exception of the center (“Module Downloads”) icon, these represent pre-installed modules. The leftmost one inverts the colors of the screen, which may help with reading some kinds of Web pages (for example, ones with a black background).

The next one invokes Google Translate, which translates the current page into English. If you'd like to change the language, go to Settings > Modules > Translation by Google > Dest.Language and select another language (screenshot). Note that only the biggest, most widely used languages are available here.

The third icon is the already-mentioned “Module Downloads” one. If you tap it, you'll be taken right to iCab's module download Web page, where you can select additional modules to be installed:

An example: assume you want to install the module to display the source code of a Web page. In the main module page (screenshot), scroll down to the “Source code of the Web page” item and tap the download icon on the right. (result) Answer OK to the question; the scriptlet will be downloaded and listed as the just-added last one in the module dialog (here, the <html><body> icon):

screenshot

Try tapping it right away: it asks whether it should continue execution (screenshot; allow it); after tapping OK, it'll switch to the source view mode, as is expected:

screenshot

Note that it's in the already-known Settings > Modules menu that you can disable “Confirm execution” to get rid of the above dialog:

screenshot

The fourth icon just reverts all changes (e.g., character size) made by modules. The fifth, A+, shows the character size in/decreaser dialog. An example screenshot showing the results of tapping + once on the iPhone Life main page:

screenshot

Just press the X in the upper left corner to get rid of the dialog – just like with the module dialog.

Important: in some cases, iCab Mobile's built-in character size setter is sub-optimal. This question is thoroughly discussed in the next section.

1.2 Increasing text size – the two approaches

With traditional zooming (“pinching”), you can't do this as the Safari engine doesn't repaginate the text based on the zoom level, unlike some more advanced engines like that of Opera Mobile on competing mobile platforms. The only solution is just overriding the character sizes of the page with a much larger one.

There are two approaches to this, one by the current version(s) of iCab and everything else based on for example my old character size increaser scripts.

There are fundamental differences between the two approaches. If you do go for iCab and find out it produces strange results with your favorite Web sites, you will most probably want to give a try to my scripts and vice versa. Note that, if you do use my 18-point script with the 1.5* line spacing one, I don't think you'll ever need to turn to iCab's built-in one.

Some examples of when the 18-point script (which, again, is most other solutions – except for iCab! - are based on) needs support from the line spacing one (in addition to the one shown HERE), showing the MSMobiles.com forums:

screenshot
(default, no character size increase)

screenshot
(my 18-point script; as can be seen, the line spacing between adjacent rows is so low that the text has become very hard to read)

screenshot
(after having applied my line spacing increaser script; everything is fine)

screenshot
(iCab's approach; apart from the small-sized user / thread control links at the top, everything is great)

An example (of the Iltalehti forums) when iCab's approach pretty much messed up the page layout, while my script rendered it just fine (this time, without having to increase line spacing):

screenshot
(default, no character size increase)

screenshot
(my 18 pixel script; no need to further increase line spacing as it's perfectly readable)

screenshot
(iCab's script; as you can see, the layout of the page is completely messed up; for example, some of the originally parallelly rendered table columns are now rendered sequentially etc.)

2. Making use of the favorite bar

You may have noticed that Safari lists the first few favorites on a dedicated favorite bar, just under the address bar. Fortunately, the best third-party browser, iCab, also support this.

If you take a look at my bar, you'll notice I've tried to “stuff in” as many favorites there as possible so that I can avoid tapping more than once when browsing through my favorite Web pages and forums. As the first two items, I've also listed my 18-point and 1.5* line spacing script. A screenshot (with a red oval around the favorite bar):

screenshot

3. Scrolling around

Particularly if you read long pages, you may find yourself longing for a quick way of scrolling to the top or the bottom of the page – or even to an arbitrary position.

The built-in Safari, as with most built-in iOS programs with lists, allows the user to quickly scroll to the top of the page by simply tapping the topmost status bar. Most (but not all) apps also support this. Unfortunately, there isn't a built-in way of doing the opposite in Safari; that is, scrolling to the bottom. This, however, can easily be helped with “bottom” scriptlets. Some Web browsers (most notably, iCab) already contain this as an easily-installable module.

In order to quickly scroll to anywhere in the document, you'll need a vertical, draggable slider (the approach of most Web browser allowing for quick scrolling around) or, as is the case with iCab, a virtual touch pad taking up almost the entire screen estate and also allowing for horizontal scrolling. In browsers different from iCab, this feature may be manually enabled; with iCab, it's enabled by default and can be easily invoked by placing three fingers on the screen. A virtual scrollpad will be displayed:

screenshot

The bottom of the scrollpad roughly corresponds to the bottom of the current Web page, the top of the scrollpad to the top of the page and so on. You can position yourself arbitrarily anywhere in between – and can also scroll horizontally.

4. Tabs

Tabs allow for keeping more than one Web pages in memory.

Basically, there are two kinds of tab management.

4.1 Small-screen devices (iPhone, iPod Touch)

Due to the screen estate constraints, Web browsers on small-screen devices don't display tabs (at least in most cases). This is because tabs cannot be easily tapped, not even on a large-resolution device like the fouth-generation, Retina screen-based iPhones and iPod Touch devices. This means you need to bring up a list of the opened Web pages (tabs) with, in most cases, tapping an icon (or making a gesture). This involves in (at least) one more taps when switching to another page as opposed to apps and/or platforms (iPad or desktop browsers) with always-visible tabs. Note that some (not many) Web browsers allow for gesture- or a Previous/Next icon-tapping-based switching to the previous / next tab from the current one.

I've shown how you can switch between tabs, how you can easily close them (should you not need them any more) and how you can create new tabs from, say, a link on a Web page HERE, in my dedicated article. Please consult the article so that you can see how you can make use of tabs. This knowledge is pretty much essential on a restricted platform like the iOS device, which almost always(!) reloads Web pages when you tap the “Previous page” icon. By making clever use of tabs by not letting the page you will surely return to overwritten, you can easily speed up browsing.

4.2 Large-screen devices (iPad)

On large-screen devices like the iPad, where dedicating some a row of 50-60 height doesn't lose much screen precious screen escape, all Web browsers use on-screen tabs. Using them, it's way easier to switch between the various opened Web pages. Note that very few Web browsers support tab context menus like those of all major desktop browsers; for example, to quickly and easily close all the tabs except the current one, or, to quickly add them all to your favorites. An example of such browsers is the, at present, new, iPhone-only and, otherwise, pretty mediocre 360 Browser. An example screenshot of the latter is HERE.

[Menneisyys]

5. Synchronizing, exporting/importing bookmarks

Due to the lack of direct file system access under iOS, it's much harder for iOS users to back up their mobile favorites to their desktops so that they can survive when they set up a brand new iPhone / iPad, without restoring a previous backup. (Incidentally, this is what I, in most cases, do – I try to stay clear from restoring over firmware updates so that restoring doesn't mess up anything.) It's only the, otherwise, inferior Safari that is supported by the online MobileMe and the offline iTunes bookmark synchronization; other Web browsers are not supported. As a third-party browser can't just access the favorites of the built-in Safari (the file containing them is in a private folder), for example iCab just can't import them. Unlike, say, Opera Mobile on Windows Mobile accessing IEM's bookmarks.

Very few Web browsers allow for exporting/importing bookmarks, which, in addition, can also be used for importing your bookmarks into another application. iCab, fortunately, does. The way this is done is explained in my original iPhone Web browser roundup in the section starting with “There’s another very nice feature I’ve already mentioned in the chart, but it needs to”.

In the meantime, iCab has also received DropBox support, which allows for remote backup and restore of bookmark files. Note that it, unlike with desktop-based saving, doesn't allow for saving and restoring your bookmark files using an arbitrary name – the file will always be /iCab Mobile/Bookmarks.html. That is, you can't keep separate versions of this file in your DropBox account.

Using DropBox for backing up and restoring your bookmarks is very easy. Go to Settings > Dropbox, link to your dropbox if it isn't already linked by tapping the uppermost “Link Dropbox” and entering your e-mail / password pair (you can even create a new account right from there) and, then, tapping Export Bookmarks to DropBox. Importing in the opposite direction is equally easy.

Note that the only other app, Aarde, to currently support DropBox, only offers image upload to there, not bookmark synchronization.

5.1 Atomic

I've, answering a question HERE, checked out the bookmark export/import capabilities of Atomic. Exporting is much simpler than in iCab: all you can do is mailing the bookmark file to yourself (Settings > Import/Export Bookmarks > Export Bookmarks). The HTML file this uses can directly be clicked to access the favorites in a Web browser – or imported into, for example, iCab Mobile (I've tested this).

Note that you can't directly upload to DropBox from inside Atomic and you can't just send the HTML file to iCab Mobile (or, for that matter, any iPhone Web browser) from inside Mail by using “Open In”, should you try to open the bookmark file you've mailed yourself.

[mudshark]

What is this and what is it doing in the apps section?!?

[Menneisyys]

What is this and what is it doing in the apps section?!?

Aren't third-party web browsers apps?

[mudshark]

Yep. Valid point. Just not used to seeing someone spend so much time/thought/energy on a single post! Thought it was a copy/paste job from a spammer! Good info!