
Mobile Boilerplate: a best practice baseline for your mobile Web app - thankuz
http://html5boilerplate.com/mobile/
======
blauwbilgorgel
Wonderful! The HTML5 Boilerplate contained lots of little gems from different
front-end devs. If this is just half as good, I'll be really happy.

Paul Irish is really making front-end development exciting.

~~~
paulirish
Shi Chuan, an excellent frontend dev from Singapore joined our development
team last fall and spearheaded the Mobile Boilerplate. I'm just very happy we
have a smart avenue to distribute best practices-- mobile is a really hairy
area.

------
jrnkntl
I am bit reticent in using the .htaccess in this package; how would you go
about still offering the option to visit the standard website? This seems to
directly redirect all mobile user agents to the mobile variant.

~~~
paulirish
Right now that UA sniff to mobile redirect is a little undercommented. We'll
address this.

We just wanted to highlight one of the most robust detection sniffs available.
It is left commented out by default. And it's up to you in case you want to
hijack your mobile users to toss them to your mobile site. (And yes I agree we
should allow them to go back)

I've filed this ticket so we can do a better job of explaining this code's
presence: [https://github.com/shichuan/mobile-
html5-boilerplate/issues/...](https://github.com/shichuan/mobile-
html5-boilerplate/issues/15)

------
neovive
This looks great! I'm assuming you could then plug-in jQuery Mobile to take
advantage of the UI widgets for a very nice mobile-optimized website. Then use
something like PhoneGap to bundle it as a native app (if needed).

~~~
paulirish
Yup! That sounds ideal.

~~~
detst
The site says it works well with Sencha Touch. What would you gain there? It
seems many of these features are built in to Sencha Touch and it's limited to
iOS, Android and Blackberry 6, anyway.

Are you suggesting using Boilerplate as a complement where Sencha Touch
doesn't work? I can see how this might work well. Any suggestions on how one
might take this route?

Perhaps you could build around Boilerplate and conditionally include the
js/css for Sencha on iOS, Android and Blackberry 6.

------
fady
I love you guys and the whole Boilerplate projects. Amazing work; really helps
me learn best practices!

------
iki23
From
[https://groups.google.com/forum/#!topic/html5boilerplate/dNb...](https://groups.google.com/forum/#!topic/html5boilerplate/dNbB8ZGFNcM):

> This is the first time I've heard of Mobile Boilerplate. Can you provide >
> some background info? Specifically I am wondering, why desktop/mobile are >
> separate rather than combined into one download? What is the suggested >
> implementation of a site with both desktop & mobile versions?

HTML5Boilerplate is the one you should use if you are getting started on
websites. It is optimized to work and adapt on mobile browsers.

Mobile HTML5 Boilerplate is optimized for web apps that are explicitly written
to have different UX while on devices other than the desktop. * This means
they might want to imitate the UI of native applications or be close to it. *
They may make heavy use of touch-based UI paradigms and other interactions
that are not possible on a desktop browser. * They explictly use media queries
and other ways to detect a non-desktop browser and serve an experience that is
different.

When I say web apps, I mean websites that are used intensively to accomplish
certain tasks (like twitter.com / gmail.com / facebook.com / admin interface
of wordpress.com ). These sites are required to take advantage of the space
available and help users accomplish their tasks with minimal effort no matter
what device.

On the other hand, we do have websites that users visit occasionally because
they found it on some friend's email or on reddit which has content but users
rarely interact with it (other than just visiting it or at most leaving a
comment), in which case html5 boilerplate would be a good template to use.
This would be a good option for most sites that are content-rich and require
minimal user interaction.

Unfortunately for us, mobile platforms are also creating silos by specifying
custom meta tags to use to optimize for their platform. E.g. Apple recommends
using apple-touch-icon meta tag to specify things specific to webkit mobile
browsers. Nokia has its own. We did not want html5boilerplate to add such
cruft to the defaults, but this would be necessary for someone writing an
application tailored to take advantage of non-desktop devices. There is
already a lot of consistency, but we wish there was more standardization of
mobile optimizations.

Please do contribute suggestions for improving the mobile boilerplate here:
<https://github.com/shichuan/mobile-html5-boilerplate/issues>

------
thelizardking
Wonder how long for "The real HTML5 boilerplate" to arrive.
<http://csswizardry.com/2011/01/the-real-html5-boilerplate/>

~~~
binarysoul
His real html5 boilerplate isn't very useful. it's basically doctype html5 and
css reset. It seems to me he's complaining that <http://html5boilerplate.com/>
doesn't have a better builder UI.

Maybe his blog post is old? checkout <http://initializr.com/>

~~~
antidaily
Useful for me. I learned a lot picking through it. Watch Paul's talk if you
have the time: <http://www.youtube.com/watch?v=qyM37XKkmKQ>

~~~
kmfrk
Here to emphasize how thoroughly enjoyable and useful this is. Eye-opening, if
you will.

It's a must-watch for front-end designers and developers.

------
loganlinn
Awesome. These boilerplates are very useful. Good work, Paul and team (as
always)

Just a friendly heads-up that there are typos I noticed on the "Intro to MBP"
slides: (4) we leave e ass 4 u to kick (6) makrup

------
evo_9
An HTML5 Game Boilerplate is the only stone left unturned (hint hint).

