HTML5 Video works everywhere except the iPad / iPhone / iOS devices.

Problem:

HTML5 Video works everywhere except the iPad / iPhone / iOS devices.

Solution:

Double check to make sure your video is H.264 encoded. Most other browsers will play other formats, even Safari on OS X via the Quicktime plugin. There are exceptions (notably browsers that require Vorbis), however, most mobile devices at this time require that specific codec.

HTML5 Video works locally, but not on the server

Problem:

HTML5 Video plays correctly on your local copy of a site you’re building, but once you upload it to a server, it breaks.

Solution:

This can happen if the server sends the video back with the wrong MIME-Type, usually text/plain or something similar. What you need to have the server send the correct MIME-Type. If you’re using Apache, add these lines to your .htaccess or server configuration file:

AddType video/ogg .ogv
AddType video/mp4 .mp4

Link: Website Mobile Programming Strategy Comparison

A solid overview of the various general techniques/strategies a web developer can employ in making a site that works in all resolutions, from desktop to mobile.  Focuses on Responsive Design, Progressive Enhancement, Server Side, and Hybrid approaches.

Read More Here: Mobile Web Content Adaption Techniques

How to Properly Mirror a Webpage (using wget)

When you’re building a front-end component for a client’s site, often times it’s useful to grab a working copy of the page in question for the purposes of testing if your code will work within their site.

The way most people (try to) do it is by navigating to the page and doing a simple “File -> Save as…”.  However, this rarely results in a complete working page.  Frequently, CSS embedded images and Javascript interactions will fail in your downloaded copy. Additionally, some browsers will re-write the HTML itself, resulting in a version of the page that doesn’t exactly reflect the original copy.  Finally, this process often involves changing where files themselves are located, which can break scripts and some images.

Solution? Use wget. After installing wget, use the following command:

$ wget -E -H -k -K -p http://example.com/path/to/page
 

This creates a local mirror of the page + all external elements with file paths rewritten to reflect this.  You’ll end up with a folder called “example.com” and possibly others if the page referenced other domains.  Drill down through the file path structure to your file (so in this example, you’d find your page in the example.com/path/to/ directory).