Category: HTML

Posted on

Perils of the viewport meta tag

Apple introduced the viewport meta tag in mobile Safari to help web developers improve the presentation of there web pages on the iPhone. We added support for the viewport tag in mobile Firefox for the same reasons.

The viewport tag allows web developers to set the width, height and scale of the browser area used to display web content. However, some websites are not doing a good job configuring the viewport tag and it affects the presentation in Firefox.

When setting the width or height, developers can use a fixed number of pixels or use the constants: device-width and device-height. The iPhone is 320px wide in portrait and 480px wide in landscape. Other devices have different screen sizes. It seems the “width=320” is a popular fallback though. See how Facebook and DeviantART display in Firefox on the N900 (480px in portrait and 800px in landscape):

touch.facebook.com
fennec-viewport-facebook

deviantart.com
fennec-viewport-deviantart

Don’t get me wrong. I like “touch-friendly” web pages on my mobile device. However, the iPhone is not the only mobile device out there. If a web developer has gone through the effort to make a “touch-friendly” web page, please configure your viewport to work in other devices. It’s easy!

Posted on

Fennec – Form Assistant & Password Echo

Firefox for Maemo (Fennec) beta 5 has been released! This release packs in a lot of good stuff. I’ve been trying to highlight a few of the new features. This time, I want to tell you about some web form features.

Entering data into web forms using a small keyboard on a small screen can be painful. This release of Fennec has a Form Assistant to make it easier to fill in forms. Whenever you tap on an input or select field, Fennec will attempt to zoom in on the element and also display a small UI ribbon for moving between other input fields. If the input field has an associated label, we try to make sure the label is visible too. Context is important when entering text and other data into a form.

fennec-form-assistant

Beta 5 also has a new Gecko feature, enabled for mobile platforms – Password Echo. Entering a password can be a tedious task on a mobile device. One common solution is for the system to show the last character you type as plain-text and after a short delay, convert it to a hidden password character. Echoing the last character really helps reduce errors when entering passwords.

Take Firefox for Maemo for a spin and let us know what you think.

Posted on

Fennec – Mobile Optimzed Web Pages

Back when MTV still played videos, the Internet was full of web pages designed to work in desktop browsers. Life was good – so were the videos. Fast forward to today. The Web is still full of “best viewed in a desktop browser” web pages, however, you can also find lots of “made for mobile” web pages too.

Mobile optimized web pages can range from boring, bare-bones pages designed for featurephones to visually pleasing, full-featured pages designed for touchscreen smartphones. Web designers have a few techniques they can use to tell a web browser that a web page is optimized for a mobile device. Learn the Mobile Web has a nice post summarizing these DOCTYPEs and meta tags. Web browsers can look for these hints and adjust how the page is displayed, making the site easier to use.

Mobile Firefox is built to display all kinds of pages. In the upcoming release of Beta 5 for Maemo, we added support for a variety for mobile optimization techniques. We support the DOCTYPE approach as well as the “HandheldFriendly” and “viewport” meta tags.

We could definitely use help testing these features, especially “viewport” since we don’t have a complete implementation of it yet.

Posted on

WordPress Turbo using Firefox Native Offline Cache

WordPress has had a Turbo feature for a while now. The feature uses Google Gears to store many of the Admin Dashboard resources (images, CSS, etc.) locally on the client machine. This improves overall performance and responsiveness of WordPress.

If you read the technical details on how Gears is being used, you’ll see that no fancy SQL or Worker Threads are needed to make this work. Only the offline cache is needed. Firefox 3.1 is shipping with the necessary HTML5 Application Cache support to implement the same feature natively – no Gears plugin needed.

In fact, a native approach means the “Turbo” link isn’t even needed – it just works. Better yet, the long list of instructions for downloading and installing Gears is completely avoided.

It. Just. Works.

Hopefully, the WordPress bug to add support for HTML5 Application Cache lands soon.

Posted on

XUL, Meet HTML – It’s All Good

One of the opportunities I had at MozCamp was to get caught up on the stuff happening in Thunderbird & Calendar. They have a goldmine of great data, functionality and UX possibilities. During some of the sessions and a small ad-hoc discussion, the use of HTML in XUL to create compelling, interesting and useful user interfaces came up. Thunderbird 3 will be using HTML to enhance to appearance and functionality of message display. Calendar might be using HTML to do the same for displaying tasks, IIRC. The examples I saw looked great.

I got the feeling that the designers and developers thought that using so much HTML in XUL was, in some way, anti-XUL. NO WAY! It’s my opinion that using HTML in this way – enhancing a user interface – shows the power of XUL. The ability to seamlessly mix different markup languages is quite impressive. How many other UI markup languages can do that?

The use of HTML, SVG and specifically, in XUL is not new. You’ll find many examples of add-ons and applications that go beyond XUL to create elements of the UI. XUL itself uses HTML as a foundation for implementing widgets.

Here are some examples from previous posts on using HTML, SVG and in XUL. Start spicing up your XUL UI today.

Posted on

Here We Go!

Mozilla just opened the new source repository (mozilla-central) meaning the next release features will start landing. David Baron posted about landing new CSS selectors. Robert O’Callahan posted about some kick-ass SVG-based CSS effects used to style HTML. This totally rocks and will help push SVG into more of a leading role on the Web.

Look for more cool features, big and small, to start landing with increasing frequency. Some will help chrome developers while others are focused on web developers.

Posted on

Firefox 3 – Offline App Demo – Part 2

Last year (wow, that long ago?) I made a simple demo to show Firefox 3 offline capabilities. A lot has changed between then and now. Firefox 3 offline capabilities changed significantly to align better with WHATWG offline specification. The biggest changes involve dropping support for our own mechanism and supporting WHATWG manifests and application cache. The specification gives some details on how it works. There is an MDC article on using offline resources in Firefox 3.

Since so much has changed, I decided to update the demo application. Here is the overview of the application, updated where needed:

A Simple Demo – Task Helper

The application is a simple task list system. The current functionality includes:

  • Add tasks – Enter text in field and press ‘Add’
  • Complete tasks – Mark completed tasks and press ‘Complete’
  • Remove tasks – Mark tasks and press ‘Remove’
  • Data is stored as JSON and XHR is used to interact with server (PHP)

offline demo app

Nothing fancy. However, the application is “offline-aware”, meaning:

  • Application resources (HTML & JS) are listed in the offline cache manifest. This manifest must be served as “text/cache-manifest” and follow the manifest rules.
  • Before interacting with server, online status is checked. If online, use XHR. If offline, use DOMStorage.
  • Online/Offline status is monitored using events. When the application switches from offline to online, data is resync’ed with the server.

There is really nothing fancy about the offline stuff either, but putting it all together does make for a neat application. Using the latest Firefox 3 (beta 5 or nightly), you should be able to:

  • Use the application while online.
  • Go offline using the “Work Offline” menu. The event log should show that the app went offline.
  • Continue to use the application while offline.
  • Restart browser.
  • Switch to offline (or have no network connection).
  • Enter URL to app (or use a bookmark).
  • Start using app with data from last session.
  • Switch to online. The event log should show that the app is back online and has updated the server with any offline changes.

Try it: Task Helper
Source code: todo-offline.zip

Note: The data is stored in a simple, shared JSON file on the server, managed with a simple PHP file and reset every hour. No fancy databases with multiple session support.

Posted on

Firefox 3 – Web Protocol Handlers

Web protocol handlers are a new Firefox 3 feature that gives more power to RIA web applications. Basically, when a user clicks on a link with specific protocol, Firefox can send an HTTP(S) request with the link data to a web application. An easy example is a mailto: link:


Web Master

Normally, if a user clicks this link, Firefox (or other browser) will open the default mail application on the user’s machine and start composing an email message. With so many web-based email applications in use today, it only seems natural that some people would want to use a web-based email application to compose the message.

With web protocol handlers, the web application can register the specific protocol it wants to handle. Firefox will then prompt the user to choose which of the registered applications (web or desktop) it should use to handle the action. Any protocol, real or imaginary, can be used – mailto: is only one example, webcal:, tel: and fax: are others. In the case of the mailto: example, the web-based email application could parse the data passed to it from Firefox to get the parameters of the protocol, perform a sign-on (if needed) and display its “compose” UI.

Firefox 3 will ship with some packaged web protocol handlers. For those developers interested in adding protocol support to their web applications, we have an MDC article explaining the details of setting up and using web protocol handlers. Also checkout the compliance test page we use to test the feature. During the process of getting the packaged handlers into Firefox 3, we ran into some common implementation misconceptions:

  • Web protocol handlers are not just for mailto:! The system is designed for any protocol.
  • Web protocol handlers have no idea about the protocol details. For example, the system does not know that mailto: support to or subject parameters. The system just sends the entire HREF of the link to the registered handler. Be prepared to do the parsing yourself.

Go forth and make web applications rock!

Posted on

I Call Shenanigans!

Zoho’s recent blog post about why they used JavaScript and not Flash when building their offline version of Zoho Writer has led to some interesting but somewhat predictable responses [1] & [2]. I could have fallen into a predictable (but not necessarily interesting) response myself, but didn’t. Until I saw Ryan Stewart post the following:

I don’t think it’s an accident that Zoho and Buzzword have such different design goals or that Flex applications generally tend to look more sophisticated than Ajax applications.

That quote (and the post) seem to suggest that AJAX webapps are less usable, less sophisticated and, generally, not as pretty as their Flex counterparts. Likely not Ryan’s intent and I did say “seem to suggest” right? I usually don’t define usability based on how an application looks, but on how productive I am using the application or how easy I can learn the application. Unfortunately, some applications try to get by on looks alone. I try to see the inner beauty.

Posted on

OpenKomodo is Open for Business

ActiveState is ready to start rocking the OpenKomodo project. They have everything ready to go:

All they need now is YOU! Head over and get involved. You can also start thinking about SnapDragon, the full-featured web development tool integrated with Firefox:

Komodo Snapdragon is an idea, a desire, a mission! Web development with Firefox benefits from excellent developer tools such as Firebug, but it needs more. We invite you to help define the future of Komodo Snapdragon. Join the Open Komodo community today and help shape the future!

Great mission! I look forward to SnapDragon planning and development.