18 ms·

Mobile Boilerplate: a best practice baseline for your mobile Web app

159 points by thankuz 16y ago

thelizardking 16y ago
Wonder how long for "The real HTML5 boilerplate" to arrive. http://csswizardry.com/2011/01/the-real-html5-boilerplate/ http://csswizardry.com/2011/01/the-real-html5-boilerplate/
- binarysoul 16y ago
  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/ http://html5boilerplate.com/ doesn't have a better builder UI. Maybe his blog post is old? checkout http://initializr.com/ http://initializr.com/
  - tlrobinson 16y ago
    I'm inclined to agree with this: "A boilerplate should be added to, not subtracted from". I don't use "the" HTML5 boilerplate for that reason. At best I'll fork it, subtract all the extra crap, and use my fork.
  - JonnieCache 16y ago
    It is useful when you're just knocking something quick together as an experiment and you have no intention of ever deploying it in any serious way. The full boilerplate is overkill and actually creates more work for you in that scenario.
  - paulirish 16y ago
    Initializr was integrated into H5BP and launched last week. :) See the Boilerplate Custom button on http://h5bp.com http://h5bp.com
  - DanielRibeiro 16y ago
    It seems the biggest problem is that the boilerplate seems to act more like a framework instead of just a library. If that's the case, then using this with other frameworks like Sproutcore and Cappuccino can prove quite daunting...
    - shichuan 16y ago
      one of the thing about h5bp/mbp is that it gets your project off the ground quickly and right-footed if you are using other frameworks and feel hard to implement everything in, this can at least be used as reference or inspiration.
  - antidaily 16y ago
    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 http://www.youtube.com/watch?v=qyM37XKkmKQ
    - kmfrk 16y ago
      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.
blauwbilgorgel 16y ago
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 16y ago
  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.
- nimbupani 16y ago
  Yeah, this was mostly Shi Chuan's effort, and he wrote a few blog posts along the way too http://www.blog.highub.com/mobile-2/the-complete-idiots-guide-to-pixels-on-mobile/ http://www.blog.highub.com/mobile-2/the-complete-idiots-guid... and http://www.blog.highub.com/mobile-2/revisit-hardboiled-css3-media-queries/ http://www.blog.highub.com/mobile-2/revisit-hardboiled-css3-...
neovive 16y ago
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).
- 9ec4c12949a4f3 16y ago
  This is something I'm actually trying to do. It looks alright so far, but I'm working on the backend stuff mostly so far.
- paulirish 16y ago
  Yup! That sounds ideal.
  - detst 16y ago
    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 16y ago
I love you guys and the whole Boilerplate projects. Amazing work; really helps me learn best practices!
loganlinn 16y ago
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
jrnkntl 16y ago
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 16y ago
  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/15 https://github.com/shichuan/mobile-html5-boilerplate/issues/...
- shichuan 16y ago
  the boilerplate is always delete/add friendly, as Paul mentioned, we will hear more voices. thanks for bringing this up :)
evo_9 16y ago
An HTML5 Game Boilerplate is the only stone left unturned (hint hint).
iki23 16y ago
From https://groups.google.com/forum/#!topic/html5boilerplate/dNbB8ZGFNcM https://groups.google.com/forum/#!topic/html5boilerplate/dNb...: > 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 https://github.com/shichuan/mobile-html5-boilerplate/issues

159 points by thankuz 16y ago

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

binarysoul 16y ago
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/ http://html5boilerplate.com/ doesn't have a better builder UI. Maybe his blog post is old? checkout http://initializr.com/ http://initializr.com/
- tlrobinson 16y ago
  I'm inclined to agree with this: "A boilerplate should be added to, not subtracted from". I don't use "the" HTML5 boilerplate for that reason. At best I'll fork it, subtract all the extra crap, and use my fork.
- JonnieCache 16y ago
  It is useful when you're just knocking something quick together as an experiment and you have no intention of ever deploying it in any serious way. The full boilerplate is overkill and actually creates more work for you in that scenario.
- paulirish 16y ago
  Initializr was integrated into H5BP and launched last week. :) See the Boilerplate Custom button on http://h5bp.com http://h5bp.com
- DanielRibeiro 16y ago
  It seems the biggest problem is that the boilerplate seems to act more like a framework instead of just a library. If that's the case, then using this with other frameworks like Sproutcore and Cappuccino can prove quite daunting...
  - shichuan 16y ago
    one of the thing about h5bp/mbp is that it gets your project off the ground quickly and right-footed if you are using other frameworks and feel hard to implement everything in, this can at least be used as reference or inspiration.
- antidaily 16y ago
  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 http://www.youtube.com/watch?v=qyM37XKkmKQ
  - kmfrk 16y ago
    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.

blauwbilgorgel 16y ago

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 16y ago
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.
nimbupani 16y ago
Yeah, this was mostly Shi Chuan's effort, and he wrote a few blog posts along the way too http://www.blog.highub.com/mobile-2/the-complete-idiots-guide-to-pixels-on-mobile/ http://www.blog.highub.com/mobile-2/the-complete-idiots-guid... and http://www.blog.highub.com/mobile-2/revisit-hardboiled-css3-media-queries/ http://www.blog.highub.com/mobile-2/revisit-hardboiled-css3-...

neovive 16y ago

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).

9ec4c12949a4f3 16y ago
This is something I'm actually trying to do. It looks alright so far, but I'm working on the backend stuff mostly so far.
paulirish 16y ago
Yup! That sounds ideal.
- detst 16y ago
  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 16y ago

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

loganlinn 16y ago

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

jrnkntl 16y ago

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 16y ago
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/15 https://github.com/shichuan/mobile-html5-boilerplate/issues/...
shichuan 16y ago
the boilerplate is always delete/add friendly, as Paul mentioned, we will hear more voices. thanks for bringing this up :)

evo_9 16y ago

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

iki23 16y ago

From https://groups.google.com/forum/#!topic/html5boilerplate/dNbB8ZGFNcM https://groups.google.com/forum/#!topic/html5boilerplate/dNb...: > 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 https://github.com/shichuan/mobile-html5-boilerplate/issues