TUTORIAL - Sprites 2.0, CSS3 Scaleable Tile Sheets

Just thought I'd share the intermediate to advanced level tutorial I put together over on my site:

http://www.cutcodedown.com/tutorial/css_tile_sheets

Which covers an alternative to vector image formats, using higher resolution images and having the browser rescale them. It's what Apple does for their UI since they too recognize many of SVG's... shortcomings. I also make sure that there's a graceful degradation plan in place for older browsers that can't do the fancy CSS3 stuff like "background-size".

I think the next tutorial is going to be about making a mobile menu WITHOUT resorting to JavaScript. Garbage like bootcrap is throwing way too much markup and way too much scripttardery at a relatively simple task since its only functional when CSS3 is present. A lot of the new stuff from CSS 2.1 and 3 lets you do some really surprising things without JavaScript.

Also, I'd love to hear some feedback on stuff you folks think I should cover. I'd like to stick to intermediate to advanced level stuff that others either aren't discussing, or if others have covered it you think they did so in an incomplete or buggy manner...

I'm HOPING over at least the next three months to put up at least two major articles, tutorials or reviews per week since this is a one-man show for the moment... with my health where it's at though, stuff will get put on the site when it gets put on the site.

 

I'd gladly start using fonts for all my logos if we had good (creative) fonts supported by all browsers. That would be ideal. The web safe fonts are too plain for my taste.

Will scalable images still look slightly fuzzy in retina displays though?

 

If you get a decent font editor, you can make a lot of your lineart in fonts... and since webfonts are supported across all browsers (all the way back to IE5)

Sadly, MOST of the existing fonts and vector images are designed for display at higher resolutions, you get them down to 16px tall in the stripped down renderer that browsers use, they fall apart miserably across platforms with the glyphs typically formed quite badly.

IF you know what you are doing though, you can make your own font, use a service like fontsquirrel to convert them, and add any images you like to it. Good rule of thumb is to divide your font into a 8x14 grid with the top gridrow as the ascender limit at top and caps-line below that, the 4th line down as your x-height, and 10th line down as your baseline, leaving 3 to four lines free as your descenders. If the "major parts" of your glyph can fit that pattern, you can reliably render the glyph as recognizable down to 14px, sometimes even 12px.

I've actually made fonts for a number of years, my preferred tool is High-Logic Font Creator. Learning curve is a bit steep if you're not used to working with vectors, but if you can handle Illustrator or a CAD program, you can handle this.
http://www.high-logic.com/font-editor/fontcreator.html

Though my existing decades of experience with CAD software like Autocad and ProDesign may have made the concepts easier for me to grasp.

The "fuzzyness" appears because the low resolution image is being scaled up... if you use a higher resolution scaled down, you wont see these problems.

I say 200% in the tutorial on the idea that currently the largest default enlargement (display-scale) is 1.5x... So going to 2x as the upper limit gives a bit of wiggle room -- kind of like how I say to Mr. Scott your time estimates; figure out how long it should take, then double that on your quote so as to have some wiggle room. It's better to deliver when you say or before, than it is to miss.

Using the larger image and scaling it down also plays to a concept you'll hear from A&R guys in professional sound studios all the time -- garbage in, garbage out. Every time you process an image you damage it, so the better the "original" you work from, the better your results across the board.

My site actually uses the scaling technique of a larger image on modern browsers -- without the hover state -- for the site logo. See the relatively clean logo on my site? It's this image scaled down by the browser, at least on CSS3 capable UA's:
http://www.cutcodedown.com/template/images/h1Logo.png

Though I have the fallback in place so legacy browsers get this in a fixed size:
http://www.cutcodedown.com/template/images/h1LogoLegacy.png

Similarly, on all browsers since I'm treating it as a content image, that CSS3 logo?
http://www.cutcodedown.com/images/css3Shield.png

Is what I'm sending, even though I'm telling it to display as only 240 wide. Looks fine shrunk down, and looks fine on a retina display. Again, this is actually what Apple does in iOS, and I figured if anyone probably knows how to make something like this work on mobile, it's them!

My social media icons are generated in the same manner:
http://www.cutcodedown.com/template/images/socialIcons.png

Though I also have a font for those as they were designed as vector first, I just used the image as it was smaller than the font file would have been, and has less alignment headaches cross browser.

I also am able to keep the filesizes under control by making them 8 bit colour palette based, with "close enough anti-aliasing" and one colour palette transparency.

Scaling down on modern browsers isn't as ugly as it used to be, and doesn't really start to have issues until you get at or below 33% the original size. Again, if you plan for 2x the size needed for your intended "96dpi / 16px default font size" layout, that makes 50% the real world low end, and is over the high end avoiding a lot of the "issues" either direction.

Also, if you are dealing with photographs instead of line-art, those can be WAY more forgiving of resizing in both directions.