iPad and Joomla

The Apple iPad is the buzzword of the day, and probably will stay on the top of many people's wishlist on the top - or near to the top. The iPhone's big brother arrived in early 2010, and Apple has sold a huge number of devices already. The iPad is a success, and as a mobile device for consuming information it's really great.

So how does this relate to your reality as a Joomla developer? In short: You need to make sure that your Joomla website works on the iPad. And not just that it works. It should be a delight surfing your website on the iPad. On a previous tip I touched already the subject, here are more tips on how you can build an iPad-friendly Joomla site.

A short history/background intro to let you think about the problem

Originally the iPad was only available in the United States. Later Apple began to sell it worldwide, even if in relatively limited numbers. The price for people outside of G7 (or, let's be optimistic, G20) countries is still prohibitive, in my country a price of an entry level version is about 2-3 monthly average salaries. But despite this fact, there are users all over the world using iPads already, though. For example every politician even in Eastern European countries have one... And with each day passing by, the number of iPad users will increase. One day or another, you will have, too. But the guys paying your bills will have one, before you - I can bet on it.

With the iPhone, Apple introduced apps, small applications which could be downloaded for free or bought through the Apple AppStore. This time around, Apple launched the iPad to a new reality: The iPad already had thousands of applications that works on it. Out of the box. And loads of developers are already releasing updates for their apps, incorporating special features and support for the iPad. So you should definitely look into what this means for you as a Joomla website developer. There are lots of apps targeting Joomla already, as admin interfaces aimed to control multiple Joomla sites, VirtueMart store admin interfaces, etc.

Testing on iPad - without an iPad

Safari on iPad is capable of delivering a "desktop" web experience. iPad has a large, 9.7" screen and fast network connectivity, and Safari on iPad uses the same WebKit layout engine as Safari on Mac OS X and Windows. You can ensure that your website looks and works great on iPad, and even create new touch-enabled web experiences for your customers, by considering a few specific differences between iPad and other platforms.

If you have access to an iPad, you will of course test your website using the iPad. If not, you need to test your website in Safari on iPad using the iPhone Simulator (Hardware -> Device -> iPad). iPad is available in the iPhone Simulator in iPhone OS 3.2 SDK beta 2 and later, which is available to iPhone Developer Program members. In cases where it is possible to simulate iPad-like behavior in Safari on a desktop computer, instructions are given here.

Clean up your design

Do you have a lot of elements on your pages? Are they all really necessary? The iPad will probably cope anyway, but keep in mind that the iPad is all about consuming information. So your website should focus on transmitting information, not on fancy features.

Consider using fluid width design. Because iPhones and iPads screens are different widths depending on whether they’re turned vertically or horizontally, be sure that your website can go with the flow. You can create CSS styles for both portrait and landscape layouts or, better yet, create content that can adapt to the screen resolution.

Adjust the view-port

Safari on iPhone OS displays web pages at a scale that works for most web content originally designed for the desktop. If these default settings don’t work for your web pages, it is highly recommended that you change the settings by configuring the view-port. You especially need to configure the view-port if you are designing web pages specifically for iPhone OS. Configuring the view-port is easy—just add one line of HTML to your webpage—but understanding how view-port properties affect the presentation of your web pages on iPhone OS is more complex. Before configuring the view-port, you need a deeper understanding of what the visible area and view-port are on iPhone OS. The view-port is the actual portion of the website shown by default on the iPhone or iPad. To optimize how the device shows your site, you should add the following meta tag to your template index.php file:

<meta name="viewport" content="width=device-width" />

This ensures that the site will be shown at the correct zoom level immediately, which enhances the user experience of your site. Read more over at Apple.com

Mouse over effect

Don't use mouse over effects on site that should work on iPad or iPhone. Why? Well, since both the pad and the phone uses a touch screen and there is simply no "mouse over" in these cases. This is especially important when you are designing the menu in the Joomla site.

Finger-friendly menus

 

Fancy menus are fine on a normal browser. On the iPad things work differently. The user navigates by use of her fingers. Thus, the navigation should be easy to use by pointing and tapping with the finge

Hover effects work very well for finding links with pointers, but not so well with the tactile experience of iPhones and iPads. Instead of burying links in text, design your website with larger, easier-to-identify links for simpler navigation.

Use conditional CSS

Use conditional CSS so that you can create iPhone OS-specific style sheets as described in “Using Conditional CSS.” CSS3 recognizes several media types, including print, handheld, and screen. iPhone OS ignores print and handheld media queries because these types do not supply high-end web content. Therefore, use the screen media type query for iPhone OS. To specify a style sheet that is just for iPhone OS without affecting other devices, use the only keyword in combination with the screen keyword in your HTML file. Older browsers ignore the only keyword and won’t read your iPhone OS style sheet. Use device-width, max-device-width, and min-device-width to describe the screen size.

For example, to specify a style sheet for iPhone and iPod Touch, use an expression similar to the following:

<link media="only screen and (max-device-width: 480px)" href="/small-device.css" type= "text/css" rel="stylesheet">

To specify a style sheet for devices other than iPhone OS, use an expression similar to the following:

<link media="screen and (min-device-width: 481px)" href="/not-small-device.css" type="text/css" rel="stylesheet">

Alternatively, you can use this format inside a CSS block in an HTML file, or in an external CSS file:

@media screen and (min-device-width: 481px) { ... }

Modify code that relies on CSS fixed positioning

CSS fixed positioning works in Safari on iPhone and iPad, but not as you might expect. While elements that use fixed positioning in Safari on Mac OS X and Windows always stay on screen, elements that use fixed positioning in Safari on iPhone and iPad can end up off-screen as users zoom and pan the web page. Why does this happen?

By definition, the containing block of a web page element that uses CSS fixed positioning is the view-port. This means that when you set position: fixed with a bottom and right value of 20px , you have "fixed" the position of an element 20 pixels above the bottom edge of the view-port, and 20 pixels from the right edge of the view-port. Read more about CSS fixed positioning and iPad

 

Video types supported

The following compression standards are supported on the iPad:

  • H.264 Baseline Profile Level 3.0 video, up to 640 x 480 at 30 fps. Note that B frames are not supported in the Baseline profile.
  • MPEG-4 Part 2 video (Simple Profile)
  • AAC-LC audio, up to 48 kHz
  • Movie files with the extensions .mov, .mp4, .m4v, and .3gp are supported.

Any movies or audio files that can play on iPod play correctly on iPhone and iPad. Read more over at Apple.com

Keep your important info above the fold

This may sound familiar for SEO conscious developers. Here is one more reason to develop your site to have important content on top area of the page. Remember, that the iPad can be turned around. This means that many (most) people will use the device in landscape mode. When viewing the site in landscape mode the page will normally fill the entire screen width. Which in turn means that the amount of information on the screen will be less than in portrait mode. This is why is very important to keep the key part of information close to the top of the page. Usability experts are saying for decades, that you should not have pages needing more, than one PageDown to have on your screen. Using a mouse to scroll either forces you to click the scrollbar or to roll the mouse wheel (if you have one). With the iPad, though, scrolling is a easy as a flick of a finger. The user will navigate the page faster and more efficiently, and consume more of the information than a normal PC user normally would. This can compensate the need to keep the 1 PageDown rule valid for iPads too, let's say we can extend it to 3 screens - and then we are exactly in the same situation as before. So, stick with that rule!

Code using standards

As always, it's important you create your site according to web standards. Validating HTML and CSS will get you a long way. We don't know too much about the standards compliance of the iPad yet. But makes sense, it's a proven tactics: if you stick to standards, you have an edge over your competitors (Forget IE... it's loosing marker-share at warp speeds, even if IE9 is the most standard-compliant software ever released in Redmond).

Don't use flash

No, is not my well-known Flash phobia. It's a fact: just like the iPhone, the iPad does not support Adobe Flash technology. So if you got a slide-show or a game on your Joomla site it wont show up on a iPad. This is normally not a problem for Joomla users, as Flash is not part of the Joomla core output. You might use Flash based extensions in your website, if you wish... but I try to avoid Flash as much as possible - as the majority of top Joomla developers. I prefer choosing extensions that utilize AJAX, other Java script libraries as jQuery or plain simple HTML5.

The Joomla admin on Apple iPad

There is no reason why the standard Joomla administrator wouldn't work on an iPad. Actually, administering your Joomla site should work without problems. Some developers have created admin themes for Joomla which work really well on the iPad. One of them are the Crisp Admin template from Joomla Bamboo. Another recently released iPad friendly Joomla Admin template is AdminPad from JoomlaPraise. And the same team has released the Simple Content Editor for iPad/iPhone.