Mobile Boilerplate Ideas

[chuanxshi]

No offense to hard core DRY fans, this is an experiment of having a mobile only HTML, CSS and JavaScript template. Due to the load speed, performance, browser nature and HTML support of mobile devices, many developers argue it might be a good idea to keep Mobile site separate from desktop site from the presentation template layer.

updated link: https://github.com/shichuan/mobile-html5-boilerplate

Please feel free to give suggestions and contribute to the development. :)

Currently, it's still pretty experimental:

1. added in manifest file for offline caching
2. included cache busting for the manifest file using ?v=1...
3. added in apple-touch-icon-precomposed icon for Android
4. included wurfl-php but not yet integrated with index.html
5. removed hacks from index.html not needed for mobile

.... future development:

6. add in mobile css hacks
7. add in dynamic manifest file using apache, iis etc .....

[paulirish]

Just wanted to add a note on WHY:

We discussed this initially on the group: http://groups.google.com/group/html5boilerplate/browse_thread/thread/c11efe86ed4e74b2

Of course, we're committed to making the standard boilerplate work well on mobile devices. But a custom boilerplate makes a lot of sense for mobile web apps, where you're not targeting all platforms. During the development of this, we'll also be identifying where mobile/desktop best practices can be shared and brought to the other form factor.. :)

[iNils]

Hi guys, looks great so far. I think in a typical web app the user should not zoom in and out, because the site is already optimized for the screen size. Most of the time you have a table/list view which is used to display the content. (Like the mobile gmail site) So I suggest to add "maximum-scale=1.0; user-scalable=0;" to the meta viewport tag.

[chuanxshi]

@iNils: This is a really interesting issue, it has been discussed by many developers before at: j.mp/bplateviewport

The current setting is copied from the master branch, I see it from a few points:

1. According to Paul, Matt Henry and Divya, the current setting is used over:

"initial-scale=1.0; maximum-scale=1.0;"

1. I believed one of the reason to change it to the current one is: it was causing horizontal scroll bars on the iPad
2. This brings up a question, is iPad Safari considered a mobile device or a desktop device?

Theoretically, it's more of a mobile browser, because (quoted from: http://bit.ly/aGYiTz)

• iPad has an interaction model that is not ideal for sites built for the mouse and keyboard as the input devices.
• The average web site out there today will not be fully compatible with the context the iPad provides.
• The iPad has a “mobile phone operating system”, same as iPhone.
• The device comes with a SIM (some devices).
• The device is mobile.
• Preferred device for surf and read email and other “30 sec tasks” you wont use your PC or laptop for.
• Does not support flash.
• No multitasking...

But..........practically, I did a test by switching my PC Safari to user agent: iPad, and used it to surf google/yahoo, I didn't get redirected to the mobile site, instead, i landed at the main google/yahoo homepage, so I think most major website treats iPad as desktop device.

1. Since this is the mobile branch Boilerplate, I think for now we don't consider a person surfing a site will even land on the mobile boilerplate.
2. Conclusion: I think it's safe to set the maximum-scale, and I have found line on the official mobile safari site (http://bit.ly/9RVTgd):

So for now, i will adopt this, if anyone think otherwise, we can further discuss.

[iNils]

Hi Shi,

thanks for the long analysis, let me add some additional thoughts: I think the reason for a mobile template is to create a site which behaves and looks like a native app. For example if you have a GMail account you can visit mail.google.com with user agent set to "Mobile Safari iPad" and see that they have created a special iPad version which looks like a native iPad app. If you visit the same page with user agent set to "Mobile Safari iPhone" you will get an optimized page which looks like a native iPhone app. (different design patterns for iPad and iPhone) I guess we will see similar pages for Android and GalaxyTab (and what else is coming...). So these are the kind of sites I was thinking of when I read "mobile template". What these "web-apps" have in common is that it is not possible for the user to zoom in and out. As well as you mentioned you are not seeing the iOS scroll bars.

Just my two cents ;-) Btw. jQuery Mobile Alpha released, yay.

[rizkysyazuli]

just a quick question. are you going to replace the GA tracking script with the mobile version? AFAIK, some older version of BlackBerry phones have javascript disabled.

[chuanxshi]

the reason it's not added for now is that the mobile version of GA relies on server side language. It can be pointed out as an alternative or addon but won't be used to replace the normal GA code.

I am still in the process of testing all the A-grade mobile browsers and investigate some of the B and C grade browsers. Although smart-phone has less than half the market share in the mobile market, but nearly all web browsing is done on smart-phones and most have js enabled.

This brings out a bigger question about if there is a need to support D, F grade mobile browsers. For desktop, there are also 1000+ browsers. But we see most websites only support A grade browsers.

So far, I have doubt in a one for all solution like Blueprint, I posted some of the ideas in my blog post here: http://www.blog.highub.com/mobile-2/yahoo-blueprint-too-good-to-be-true/

[rizkysyazuli]

the user base might be a little different here in indonesia.

blackberry phones rules here.. and from what i can gather from several of our most popular sites. opera mobile, opera mini and blackberry are the top mobile browsers. while safari mobile or android webkit are nowhere to be seen.

but that's months ago. i have to get back to you on that. need to get more accurate data :) but i hope that can give you a few stuff to consider.

[chuanxshi]

While I was doing some Indonesia mobile campaign, I did realized that the majority of Indonesians use Blackberry, and I know that everyone has a BB code, an alternative to a phone number.

Part of the mobile web is harder than i originally thought to develop due to the market and culture difference.

If you have any data related to Asia mobile market, it will be great if you can share. Any bit of data would help :)

[ghost]

I haven't really looked at the mobile branch until recently but I just wanted to say I agree on your first comment. There's no need for IE hacks etc. in a mobile version. Great work.

[nimbupani]

Bryan sent me a link to the Nokia's mobile web templates: http://www.forum.nokia.com/Develop/Web/Mobile_web_browsing/Web_templates/

I am yet to dig in though.

[chuanxshi]

I have borrowed some ideas from Forum Nokia :)

Here is a breakdown of some the current experiment on Mobile HTML5 Boilerplate.

Markup:

1. IE Mobile Optimized Layout Rendering (http://bit.ly/gAYLPb)
2. IE Mobile better Font rendering
3. Prevent BlackBerry Browser from scaling the content in page view (http://bit.ly/blMIej)
4. Nokia home screen icon (http://bit.ly/4bzrUX)
5. Optimized Viewport scale for iPhone and Android (http://bit.ly/c2b5GG)
6. Home page icon for Android
7. Home page icon for iPhone3/4
8. Option to enable iPhone start screen in full screen mode (http://bit.ly/c2b5GG)
9. SEO - avoid duplicated content

CSS:

1. Mobile helper class and media query
2. Prevent text resize in webkit browser
3. Prevent callout
4. HTML5 contenteditable attribute on mobile
5. S60 3.x and 5.0 devices which animated gif fix
6. Text overflow with ellipsis

JavaScript:

1. Touch events (touchstart touchmove touchend touchcancel)
2. orientationchange
3. Tap events (tap taphold)
4. Swipe events (swipe swipeleft swiperight)
5. Scroll events (scrollstart scrollstop)
6. Gesture events (gesturestart gesturechange gestureend)
7. textarea autogrow (http://bit.ly/4D1NnN)
8. Hide webkit chrome
9. Load Stylesheet

Server:

1. Added Blackberry MIME type for Apache, IIS server (http://bit.ly/gUBtIE)
2. Added Nokia MIME type

General:

1. HTML5 offline caching for smartphone (http://bit.ly/1yqPo2)
2. Mobile sitemap (http://bit.ly/uom43)
3. Mobile bookmark bubble (http://bit.ly/b1dh6a)
4. Browser Database Wrapper API (http://bit.ly/TJXll)
5. User Agent Detection (http://bit.ly/9deoAd)
6. GA for low end mobile devices (http://bit.ly/aMzwkO)

[rizkysyazuli]

@shichuan getting a bit too complicated isn't it? damn, mobile :P but the links you gave are great resources.. thx for the links.

btw, a bit off topic.. does anyone here will be attending the BlackBerry Devcon in Bali this January? maybe we can discuss more about this mobile issue.. send me a message if u do..

[chuanxshi]

yup, the mobile is complicated due to strong lack of standardization, different mobile vendors are making up their own rules. It ultimately depends on a common standard. But for now, I think we have to work out some creative way to make things work. It's still under testing, review, and experimentation etc. feel free to suggest any creative ways to implement these without make it bloated :)

[dustinhorton]

very nice work.

@shichuan, have you considered documenting how to make use of the wurfl stuff in the tools directory?

until now, i've been using chris schuld's browser.php (http://chrisschuld.com/projects/browser-php-detecting-a-users-browser-from-php/) and it's seemed decent enough...missed some winmobile phone running opera mobile that i need to add in there.

a brief search of stackoverflow & google in general showed some recommendations of: http://detectmobilebrowser.com/ http://detectmobilebrowsers.mobi/

really not sure of the caliber of either, and think wurfl is probably the most extensive, just contributing food for thought i suppose.

edit: of course, i see your 'user agent detection' link after i finally decide to comment. still think it could maybe be refined to more simply show how to serve up at least 2 different mobile versions...

[paulirish]

A brief chat on IRC (with Moo--) led me to believe WUFRL is actually good with features but spotty with real device detection/UA parsing.

He was a big fan of the accuracy of http://detectmobilebrowser.com/

[dustinhorton]

that'd be great if it works well enough...seems so much simpler/cleaner to implement.

for anyone interested, mobile tuts+ did a brief tutorial on using it: http://mobile.tutsplus.com/tutorials/mobile-web-apps/mobile-browser-detection/

[chuanxshi]

since we should keep html5 boilerplate platform independent, maybe the best is to use either the jQuery or JavaScript version of http://detectmobilebrowser.com/ ?

[dustinhorton]

i was thinking apache, for devices that don't support js.

[dustinhorton]

about to roll out the php version of this into a pretty big site...i'll report back with any issues i encounter, if any.

[chuanxshi]

@dustinhorton: cool, please keep us posted :)

[felipepodesta]

@shichuan Very Good!

[chuanxshi]

hey guys, it will be great help if anyone can try out the latest mobile h5bp @ https://github.com/shichuan/mobile-html5-boilerplate

There has been a lot changes, enhancement since the idea was out. let me know if you have any comments or thoughts, it will help the release. :)

[nimbupani]

I am closing this because any new ideas need to be on mobile-html5-boilerplate issue queue!