Why No Padlock? - Why is my SSL web page insecure? Find the culprit! ResponsiveImages: A Ruby Gem for Server and Client-Side Responsive Images A simple, flexible and elegant solution for responsive images in rails applications. Responsive images seems to be an ongoing problem without any great solutions yet. As we continue to develop responsive front-ends, we continue to develop better way to address the problem. The Problem Most solutions tend to be either client-side implementation like HiSRC or rwdImages or occasionally, there are server-side solutions for Apache that require .htaccess. Unfortunately, we don't use Apache and I'm not a big fan or relying on third-party services. A few months ago I developed a simple jQuery plugin to handle Responsive Images on the client-side. Our Solution The overarching problems is that we don't know what size the device is before the page is rendered. Using the responsive_image_tag helper, the gem will automatically load the appropriate size for the src attribute prior to rendering the page. The gem also handles background images with responsive_background_image.
Creating Retina Images for Your Website July 6th, 2012 by Kyle Larson Apple’s newest devices feature the Retina Display, a screen that packs double as many pixels into the same space as older devices. For designers this immediately brings up the question, “What can I do to make my content look outstanding on these new iPads and iPhones?”. First there are a few tough questions to consider, but then this guide will help you get started making your websites and web apps look amazingly sharp with Retina images! Things to Consider When Adding Retina Images The main issue with adding retina images is that the images are double as large and will take up extra bandwidth (this won’t be an issue for actual iOS apps, but this guide is covering web sites & web apps only). Simple Retina Images The basic concept of a Retina image is that your taking a larger image, with double the amount of pixels that your image will be displayed at (e.g 200 x 200 pixels), and setting the image to fill half of that space (100 x 100 pixels).
DOM Inspector Which responsive images solution should you use? There are a bunch of techniques going around for dealing with responsive images lately. That is, solutions to help us serve the right image for the occasion (e.g. size of screen and bandwidth available). They all do things a bit differently. To keep track, Christopher Schmitt and I have created this spreadsheet of techniques. The spreadsheet has the data, but let's digest it through thinking about it through the lens of practical questions. To choose which technique is right for you and your project these questions may help as a guide. Do I have legacy content? Which really means... do I have legacy content that is impractical to update? The only technique I know of that works with absolutely no markup changes is Adaptive Images. Another question to ask yourself is if you care about legacy content. Do I care about special markup? This is really a sub-question of the above. Do I care about semantics? Some responsive images techniques involve markup which isn't strictly semantic. Share On
5 Ways to Support High-Density Retina Displays An interesting point was raised by Brendan Davis in my recent post “Responsive Web Design and Scrollbars: Is Chrome’s Implementation Better?”: are RWD breakpoints affected by high pixel-density screens? The short answer is: no — but we need to delve a little deeper and look at the problems they can cause. What is Retina? “Retina” is Apple’s brand name for double-density screens but other manufacturers are creating similar displays. For example, the MacBook Pro 15″ has a resolution of 2,880×1,800 or 220 pixels per inch. Therefore, the device reverts to a standard resolution of 1,440×900 but the additional pixels can be used to make fonts and graphics appear smoother. What’s the Problem? Standard-resolution bitmap images can look blocky on a Retina display. Real-World Usage If you look around the web, you’d be forgiven for thinking everyone has a Retina display. That said, Retina-like screens will eventually migrate to all devices. 1. You may also be able to replace some images entirely. 2.
DOM Monster johnkoht/responsive-images