Retinafy your Web Sites & Apps

By Thomas Fuchs

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

Learn about…

Why you can use high-resolution photos by means of default
The most productive method to objective retina displays in CSS
Testing a website in the event you don't have a Retina machine or laptop
How to take advantage of CSS and SVG to exchange bitmapped person interface elements
Deciding if you would like types of an image
Creating attractive 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 picture substitute ideas are a foul idea
Keeping your sanity whereas making remarkable, responsive & retinay-ready websites

Show description

Preview of Retinafy your Web Sites & Apps PDF

Similar Programming books

Joe Celko's SQL for Smarties: Advanced SQL Programming Third Edition (The Morgan Kaufmann Series in Data Management Systems)

SQL for Smarties was once hailed because the first ebook committed explicitly to the complex recommendations had to remodel an skilled SQL programmer into a professional. Now, 10 years later and within the 3rd version, this vintage nonetheless reigns excellent because the publication written via an SQL grasp that teaches destiny SQL masters.

Designing Audio Effect Plug-Ins in C++: With Digital Audio Signal Processing Theory

Not only one other theory-heavy electronic sign processing booklet, nor one other boring build-a-generic-database programming ebook, Designing Audio influence Plug-Ins in C++ grants every little thing you every little thing you want to comprehend to just do that, together with totally labored, downloadable code for dozens audio impact plug-ins and virtually awarded algorithms.

Effective C++: 55 Specific Ways to Improve Your Programs and Designs (3rd Edition)

“Every C++ expert wishes a duplicate of powerful C++. it really is an absolute must-read for someone contemplating doing severe C++ improvement. If you’ve by no means learn potent C++ and also you imagine you recognize every thing approximately C++, re-evaluate. ”— Steve Schirripa, software program Engineer, Google “C++ and the C++ group have grown up within the final fifteen years, and the 3rd version of powerful C++ displays this.

Cocoa Design Patterns

“Next time a few child exhibits up at my door inquiring for a code evaluation, this is often the booklet that i'm going to throw at him. ”   –Aaron Hillegass, founding father of huge Nerd Ranch, Inc. , and writer of Cocoa Programming for Mac OS X   Unlocking the secrets and techniques of Cocoa and Its Object-Oriented Frameworks   Mac and iPhone builders are usually beaten through the breadth and class of the Cocoa frameworks.

Extra resources for Retinafy your Web Sites & Apps

Show sample text content

On browsers that help SVG, that's demonstrated within the first couple of strains of code within the script tag, the SVG model is loaded, differently the PNG model is used. This little snippet works out of the field with no JavaScript library —it might be a kick off point basically and that i inspire you to conform it on your particular wishes. for instance, if you’re utilizing Zepto, jQuery or different DOM helper libraries you can most likely shop a number of bytes and enforce this in a marginally less complicated model. Or, you'll want to strength bitmapped photographs on cellular units (it’s attainable that these render a tad swifter! ) and simply do SVG on computer. Retinafy your websites & apps forty six Optimizing snapshot dossier sizes probably the most very important steps of retinafying is to optimize picture dossier sizes. whereas Photoshop (or no matter what software you utilize to create photographs) has a “Save for internet” function, there are committed instruments to get the dossier dimension down additional via stripping any meta info in addition to attempting a variety of compression recommendations and colour palette diversifications. for instance, the PNG layout enables 8bit colours (with a palette) together with an 8-bit alpha channel, whatever browsers express properly yet now not supported by way of Photoshop. on condition that your website most probably makes use of loads of pictures of every kind, accurately optimizing those can vastly enhance loading times—and can frequently offset the dossier measurement raise required by way of the higher-resolution “retina” pictures. a device I can’t suggest sufficient is ImageOptim, that is freely on hand at http://imageoptim. com. Retinafy your sites & apps forty seven It works via seamlessly integrating a number of command-line optimization instruments that you just most likely by no means heard of right into a deadsimple graphical UI. There aren't any options—just drop your venture folder on it and for every photograph, it's going to throw a complete arsenal of optimization instruments at it. be aware that for higher pictures this may take a little time, yet you’ll get very amazing advancements around the board, particularly when you basically use “Save for internet” in Photoshop. My advice is to simply drop your venture folder onto ImageOptim as soon as a week—just create a reminder for it. Retinafy your websites & apps forty eight What to do while issues get it wrong undesirable scaling caliber regrettably simply utilizing an even bigger photograph and scaling it down on common screens isn't a silver bullet—while it really works nice commonly you are going to ultimately bump into barriers in browsers. should you adventure undesirable scaling caliber, you’ll need to lodge to supply pre-scaled photographs on the correct dimension for every monitor density. this can be tougher than it sounds as a result of zooming on cellular units, so your mileage might fluctuate. Here’s a screenshot of a downscaled photograph on a iPhone four retina reveal. observe that you've a number of thoughts on how one can reveal a picture, the obvious one being a picture tag, yet you may also use a CSS background-image, in addition to a tag; and with the Canvas tag there’s a CSS solution and an inner answer. during this Retinafy your websites & apps forty nine example, none of those methods rather yield a passable consequence, so it can be essential to supply pre-scaled bitmap photos.

Download PDF sample

Rated 4.08 of 5 – based on 50 votes