Created
June 29, 2012 17:40
-
-
Save Error-331/3019534 to your computer and use it in GitHub Desktop.
Mobile development notes
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| http://www.sencha.com/products/io/ - cloud platform for building mobile web apps; | |
| https://addons.mozilla.org/en-US/firefox/addon/yslow/ - YSlow analyzes web pages and why they're slow based on Yahoo!'s rules for high performance web sites. | |
| http://www.blaze.io/mobile/ - mobile web performance tester; | |
| http://httparchive.org/ - about HAR files; | |
| http://www.smushit.com - site that deletes unnecessary bytes from the image; | |
| http://blog.cloudfour.com/ - good blog about mobile development; | |
| http://blog.cloudfour.com/responsive-imgs/ - about responsive images part 1; | |
| http://www.cloudfour.com/responsive-imgs-part-2/ - about responsive images part 2; | |
| http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html - about viewport; | |
| https://chrome.google.com/webstore/detail/kkelicaakdanhinjdeammmilcgefonfh - resize browser window to emulate various screen resolutions; | |
| http://chrispederick.com/work/web-developer/ - various web developer tools for chrome and firefox; | |
| https://gist.github.com/901295 - Improved version of JavaScript fix for the iOS viewport scaling bug; | |
| http://www.useragentstring.com/ - site with collection of useragent strings; | |
| http://detectmobilebrowsers.com/ - mobile browser detection script; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <meta name="viewport" content="width=device-width, initial-scale=1" /> - just what we need | |
| 480 px - most popular value of mobile screen width while in landscape mode; | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| - tells the browser about screen scale value (it also enables the zoom); | |
| 1em = 100% ≈ 12pt ≈ 16px (but this is not always true); | |
| <iframe src="http://www.youtube.com/embed/O-jOEAufDQ4" style="max-width:100%"></iframe> - a better way for inserting flash into the page; | |
| Flexible Box Model - the future of responsive design; | |
| <img src="http://src.sencha.io/http://[DOMAIN]/[PATH]/brews_images/bensons_bubbler.jpg" alt="Benson's Bubbler"> - example of how Sencha compresses the images; | |
| you can use the bookmarklet to check the images size using javascript; | |
| There is some sort of UAProfs besides user agent; | |
| Opera Mini transfers all requests through Opera caching server; | |
| XHTML-MP - mobile profile for "old" phones; | |
| <?xml version="1.0" encoding="UTF-8" ?> | |
| <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd"> - doctype for XHTML-MP; | |
| <a href="#dashboard" accesskey="1">Your Dashboard</a> - access keys in XHTML-MP; | |
| For correct work of Opera Mini site must use XHTML-MP profile; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment