jrf0110 · July 24, 2012 02:47 · Jul 24, 2012 · Jul 24, 2012 · Jul 24, 2012 · Jul 24, 2012
diff --git a/Retinafy.md b/Retinafy.md
@@ -51,7 +51,7 @@ This targets only devices that have a minimum `1:2` ratio.
 }
 ```
 
-Or this query that targets devices with a higher resolution:
+Or this query that targets devices with a minimum of `1:1.5` pixel density like before but for all of them:
 
 ```
 @media (min--moz-device-pixel-ratio: 1.5),

diff --git a/Retinafy.md b/Retinafy.md
@@ -17,7 +17,7 @@ If you name your files with the `@2x` suffix, retina devices will automagically
 
 ### Media Queries
 
-Literally it's this easy, this applies to devices with a minimum pixel ratio of 1:1.5
+Literally it's this easy, this applies to devices with a minimum pixel ratio of `1:1.5`
 
 ```
 @media all and (-webkit-min-device-pixel-ratio : 1.5) {
@@ -27,6 +27,8 @@ Literally it's this easy, this applies to devices with a minimum pixel ratio of
 }
 ```
 
+You aren't limited to just this, there are a whole slew of vendor-prefixes and min/max queries you can use; `1.5` as a value is generally good enough.
+
 Notes:
 
 * Full vendor-prefix to future proof rules.
@@ -35,6 +37,8 @@ Notes:
 
 #### Targeting Specific Densities for High Res
 
+This targets only devices that have a minimum `1:2` ratio.
+
 ```
 /* Targeting those high resolution screens */
 @media (min-resolution: 192dpi), 
@@ -47,7 +51,7 @@ Notes:
 }
 ```
 
-Or
+Or this query that targets devices with a higher resolution:
 
 ```
 @media (min--moz-device-pixel-ratio: 1.5),
@@ -59,6 +63,7 @@ Or
 }
 ```
 
+
 #### Resizing Images
 
 On standard sizes:
@@ -80,17 +85,20 @@ and for retina devices:
 }
 ```
 
+Now the media query above is just an example query, target your devices accordingly!
+
 ##### Jagged Edges
 
+Transforming something or just resizing in general and getting jagged edges? 
 Use `opacity: 0.999` in your css to fix these and blur those lines for resizing and transforms.
 
 ### Icon Fonts
 
 On mobile devices these may not work, use images for the most universal experience but for iOS use icon-fonts.
 
-Why? Everything looks right; Don't believe me? Try it, prove me wrong, that's what is great about this. 
+**Why?** Everything looks right; Don't believe me? Try it, prove me wrong, that's what is great about this. 
 
-Never done it before? Essentially it's just `@font-face` and utilizing a font that uses unicode namespace for icons. They show up sharp and crisp and you don't even have images you're using either the alphabet or some css classes and a span!
+**Never done it before?** Essentially it's just `@font-face` and utilizing a font that uses unicode namespace for icons. They show up sharp and crisp and you don't even have images you're using either the alphabet or some css classes and a span!
 
 **Some Nice Fonts**
 
@@ -108,19 +116,21 @@ Never done it before? Essentially it's just `@font-face` and utilizing a font th
 
 ### Inline Images
 
-There are a few solutions, I'll let you choose yours:
+Since your images on your devices are responsive, there is going to be a problem! Your images may not scale correctly or look all that great, lucky for you there are a few solutions out in the wild to cure this situation, I'll let you choose on your own:
 
 * [Jquery Plugin](http://troymcilvena.com/post/998277515/jquery-retina)
 * [Flowz Javascript Solution](http://flowz.com/2010/07/css-image-replacement-for-iphone-4-high-dpi-retina-display/)
 * [RetinaJS](http://retinajs.com/)
 * [Retina Images](http://retina-images.complexcompulsions.com/)
 * [Reasonable Way](http://www.fngtps.com/2012/reasonable-ways-to-use-high-resolution-images-on-retina-displays/)
 
+Generally a mix of CSS & Javascript is great to be as universal as possible.
+
 ### Hype
 
 Yep, its a hype. But, a good one, enjoy the hype, be a part of it. You'll probably get featured for doing it, and then you too will be a part of the hype. See how this circle goes around an around?
 
-Anyway, I hope you enjoyed this book. That'll be `20$` kthxbai.
+Anyway, I hope you enjoyed this book. That'll be `20$` kthxbai. (This book is constantly being updated)
 
 &nbsp;
 
@@ -143,3 +153,6 @@ Oh man, thanks for giving me 20 monopoly dollars, here are some extra resources
 * [Retina iOS APP Icon Template](http://appicontemplate.com/) favicon anyone? `114x114` you're welcome.
 * [Favicon Code](http://iconhandbook.co.uk/reference/examples/favicons/)
 * [Keeping filesize in check for Retina](http://erwinzwart.com/2012/03/18/new-ipads-retina-display-how-to-reduce-image-file-size/)
+* [SVG Support](http://caniuse.com/svg) or just a good site in general: [caniuse](http://caniuse.com)
+* [SVG Notes for Retina](http://coderwall.com/p/cljumw)
+* [Webkit HighDPI 1](http://www.webkit.org/blog/55/high-dpi-web-sites/) and [Webkit HighDPI 2](http://www.webkit.org/blog/56/high-dpi-part-2/)
diff --git a/Retinafy.md b/Retinafy.md
@@ -1,4 +1,3 @@
-
 # Retinafy Your Site / Device
 
 ### By Nijiko Yonskai
@@ -141,6 +140,6 @@ Oh man, thanks for giving me 20 monopoly dollars, here are some extra resources
 
 * [Layer Cake Tutorial](http://veerle.duoh.com/design/article/exporting_retina_designs_from_photoshop_with_layer_cake)
 * [Using CSS Sprites for Retina](http://miekd.com/articles/using-css-sprites-to-optimize-your-website-for-retina-displays/)
-* [Retina iOS APP Icon Template](http://appicontemplate.com/) favicon anyone? `114x114` your welcome.
+* [Retina iOS APP Icon Template](http://appicontemplate.com/) favicon anyone? `114x114` you're welcome.
 * [Favicon Code](http://iconhandbook.co.uk/reference/examples/favicons/)
 * [Keeping filesize in check for Retina](http://erwinzwart.com/2012/03/18/new-ipads-retina-display-how-to-reduce-image-file-size/)
diff --git a/Retinafy.md b/Retinafy.md
@@ -0,0 +1,146 @@
+
+# Retinafy Your Site / Device
+
+### By Nijiko Yonskai
+=====
+
+I made a book, its one page.
+
+### Why Use Larger Images?
+
+Higher resolution, twice the size, more detail, better experience on a device that provides it. There is also that thing where people make the desktop version and go to mobile more often than they do the reverse, why? Because, people like making complicated stuff first.
+
+Do it because it's your nature. Go either way, going up you can add in detail, going down you have to subtract. It's your option. But having larger images just gives a better experience on those devices otherwise it will be blurry and just imagine someone viewing your site without glasses even if they don't need glasses and or have them.
+
+### On Devices
+
+If you name your files with the `@2x` suffix, retina devices will automagically choose the high resolution image on those devices. Nifty? Hell yeah it is.
+
+### Media Queries
+
+Literally it's this easy, this applies to devices with a minimum pixel ratio of 1:1.5
+
+```
+@media all and (-webkit-min-device-pixel-ratio : 1.5) {
+    .logo {
+        background-image: url('images/[email protected]');
+    }
+}
+```
+
+Notes:
+
+* Full vendor-prefix to future proof rules.
+* Optionally you can use [prefix-free](http://leaverou.github.com/prefixfree/) javascript solution for these rules.
+* Use the `@2x` naming convention for high-res files.
+
+#### Targeting Specific Densities for High Res
+
+```
+/* Targeting those high resolution screens */
+@media (min-resolution: 192dpi), 
+       (-webkit-min-device-pixel-ratio: 2), 
+       (min--moz-device-pixel-ratio: 2), 
+       (-o-min-device-pixel-ratio: 2/1), 
+       (min-device-pixel-ratio: 2), 
+       (min-resolution: 2dppx) {
+  /* your styles here */ 
+}
+```
+
+Or
+
+```
+@media (min--moz-device-pixel-ratio: 1.5),
+       (-o-min-device-pixel-ratio: 3/2),
+       (-webkit-min-device-pixel-ratio: 1.5),
+       (min-device-pixel-ratio: 1.5),
+       (min-resolution: 1.5dppx) {
+  /* your styles here */
+}
+```
+
+#### Resizing Images
+
+On standard sizes:
+
+```
+.logo {
+    background-image: url('images/logo.png');
+}
+```
+
+and for retina devices:
+
+```
+@media all and (-webkit-min-device-pixel-ratio : 1.5) {
+    .logo {
+        background-image: url('images/[email protected]');
+        background-size: 200px 200px;
+    }
+}
+```
+
+##### Jagged Edges
+
+Use `opacity: 0.999` in your css to fix these and blur those lines for resizing and transforms.
+
+### Icon Fonts
+
+On mobile devices these may not work, use images for the most universal experience but for iOS use icon-fonts.
+
+Why? Everything looks right; Don't believe me? Try it, prove me wrong, that's what is great about this. 
+
+Never done it before? Essentially it's just `@font-face` and utilizing a font that uses unicode namespace for icons. They show up sharp and crisp and you don't even have images you're using either the alphabet or some css classes and a span!
+
+**Some Nice Fonts**
+
+* [Modern Pictograms](http://thedesignoffice.org/project/modern-pictograms/)
+* [Entypo](http://www.entypo.com/)
+* [Font Awesome](http://fortawesome.github.com/Font-Awesome/)
+* [Iconic](http://somerandomdude.com/work/iconic/)
+* [WebSymbols Typeface](http://www.justbenicestudio.com/studio/websymbols/)
+* [Raphael Icon-set](http://icons.marekventur.de/)
+* [Social Media Pictograms](http://fontfabric.com/social-media-icons-pack/)
+* [PulsarJS Fontface](http://xperiments.es/blog/en/free-pulsarjs-fontface-iconfont/)
+* [Pictos](http://pictos.cc/font/)
+* [IconSweets 2](http://iconsweets2.com/)
+* [Social Media Icons Pack](http://fontfabric.com/social-media-icons-pack/)
+
+### Inline Images
+
+There are a few solutions, I'll let you choose yours:
+
+* [Jquery Plugin](http://troymcilvena.com/post/998277515/jquery-retina)
+* [Flowz Javascript Solution](http://flowz.com/2010/07/css-image-replacement-for-iphone-4-high-dpi-retina-display/)
+* [RetinaJS](http://retinajs.com/)
+* [Retina Images](http://retina-images.complexcompulsions.com/)
+* [Reasonable Way](http://www.fngtps.com/2012/reasonable-ways-to-use-high-resolution-images-on-retina-displays/)
+
+### Hype
+
+Yep, its a hype. But, a good one, enjoy the hype, be a part of it. You'll probably get featured for doing it, and then you too will be a part of the hype. See how this circle goes around an around?
+
+Anyway, I hope you enjoyed this book. That'll be `20$` kthxbai.
+
+&nbsp;
+
+_By,_ Nijiko Yonskai
+
+
+#### Sources
+
+Legally I was forced to put this here, lol kidding I just always wanted to say that:
+
+* [Google Search](http://google.com)
+
+
+#### Extras for giving 20$
+
+Oh man, thanks for giving me 20 monopoly dollars, here are some extra resources for you:
+
+* [Layer Cake Tutorial](http://veerle.duoh.com/design/article/exporting_retina_designs_from_photoshop_with_layer_cake)
+* [Using CSS Sprites for Retina](http://miekd.com/articles/using-css-sprites-to-optimize-your-website-for-retina-displays/)
+* [Retina iOS APP Icon Template](http://appicontemplate.com/) favicon anyone? `114x114` your welcome.
+* [Favicon Code](http://iconhandbook.co.uk/reference/examples/favicons/)
+* [Keeping filesize in check for Retina](http://erwinzwart.com/2012/03/18/new-ipads-retina-display-how-to-reduce-image-file-size/)