By Thomas Fuchs

With “Retinafy your sites & apps” via Thomas Fuchs (of and Zepto.js status) you’ll be in control very quickly, with effortless to keep on with step by step directions on developing stunningly appealing high-resolution web pages, that load speedy and paintings in any browser.

Learn about…

Why you can use high-resolution pictures by way of default
The best solution to objective retina monitors in CSS
Testing a website in the event you don't have a Retina gadget or laptop
How to exploit CSS and SVG to switch bitmapped person interface elements
Deciding if you want types of an image
Creating appealing favicons that paintings nice on any screen
Optimizing JPEG quality
How to maintain dossier sizes of pictures in check
Falling again to PNGs if SVG isn't supported
Avoiding universal pitfalls
Why JavaScript-based photo alternative suggestions are a foul idea
Keeping your sanity whereas making striking, responsive & retinay-ready websites

Show description

Read Online or Download Retinafy your Web Sites & Apps PDF

Best programming books

Craig S. Lent's Learning to Program with MATLAB: Building GUI Tools PDF

Author Craig Lent’s 1st version of studying to application with MATLAB: development GUI instruments teaches the middle techniques of laptop programming, akin to arrays, loops, functionality, easy info constructions, and so forth. , utilizing MATLAB. The textual content has a spotlight at the basics of programming and builds as much as an emphasis on GUI instruments, masking text-based courses first, then courses that produce pix. This creates a visible expression of the underlying arithmetic of an issue or layout. short and to-the-point, the textual content comprises fabric that may be switched over with supplementary reference fabric designed to appeal to clients to maintain their copy.

Lorna Jane Mitchell's PHP Web Services: APIs for the Modern Web (2nd Edition) PDF

Even if you're sharing info among inner platforms or construction an API in order that clients can entry their info, this functional advisor has every little thing you must construct APIs with personal home page. writer Lorna Jane Mitchell offers plenty of hands-on code samples, real-world examples, and suggestion in response to her broad adventure to lead you thru the process—from the underlying idea to equipment for making your carrier powerful.

Download PDF by John Mylopoulos, Hector J. Levesque (auth.), Michael L.: On Conceptual Modelling: Perspectives from Artificial

The growing to be call for for platforms of ever-increasing complexity and precision has encouraged the necessity for greater point strategies, instruments, and strategies in each zone of laptop technological know-how. a few of these parts, specifically synthetic Intelligence, Databases, and Programming Lan­ guages, try to satisfy this call for through defining a brand new, extra summary point of method description.

Additional resources for Retinafy your Web Sites & Apps

Sample text

This means that on a regular screen, a SVG number of “1” means one physical pixel, and on a retina screen it’s the same as 2 physical screen pixels. x, which still (as of July 2012) is used on about 90% of all Android phones. 1+ Firefox 4+ iOS Safari 5+ Android Browser 3+ Chrome for Android 18+ Retinafy your web sites & apps 44 So what to do for older browsers that are still widely used, especially Internet Explorer 8 and earlier and some Android versions? You can use the fallback technique outlined here.

Browser icons are hi-res PNG images that are downscaled with the “width” and “height” CSS properties. Button is CSS3 (border, gradient, text-shadow). The icon is a hi-res PNGs that is used in a CSS background and scaled with “background-size” attributes. Retinafy your web sites & apps 59 Every Time Zone Our one-page tool to easily compare the world’s time zones was launched back in 2010, when the original iPad was released. I recently did a full rewrite and it fully supports retina screens on phones, tablets and desktop computers.

The Canvas’ element “width” and “height” attributes controls the internal Canvas resolution, while the “width” and “height” CSS properties control the element size. You can clearly see that Retina screens on iOS form a major exception here—because you’ll need to do extra work to make Canvas elements work in high-resolution. transform(devicePixelRatio,0,0,devicePixelRatio,0,0) } /* ... */ Using this bit of trickery will ensure that your canvas elements look great everywhere (screenshot on iOS Retina): Note that you may have to adapt some other code, like when you Retinafy your web sites & apps 41 draw bitmapped images in the canvas.

Download PDF sample

Retinafy your Web Sites & Apps by Thomas Fuchs

by Brian

Rated 4.32 of 5 – based on 44 votes