Easy retina-ready images using SCSS. If you’re interested in adding retina image support to your website or app and you happen to be using SCSS, here’s a handy shortcut that makes it dead simple. Just include this SCSS mixin in any rule and specify the high resolution image’s path and device independent pixel dimensions. Here’s an example: Putting the high resolution alternative in the same rule as the normal image instead of putting it in a separate @media query rule or in different stylesheet altogether is a big win in terms of clarity in our CSS. It’s easier to read, easier to understand and easier to maintain. The image-2x mixin detects high resolution displays like this: The mixin not only makes development easier, but it centralizes the definition of high resolution displays so it can easily be changed globally as more devices come to market. A key insight here is that with SCSS, @media queries can be nested inside other rules. @media print { body { // print styles } } body { @media print { // print styles } }
Exporting Retina designs from Photoshop with Slicy. The term 'slicing' makes me think about the early days of the web, but it's basically what we still do today, only in a different way. Sometimes we need to export a whole bunch of icons to png or jpeg. Wouldn't it be great if we could export, 50 or more icons, or other images, all at once in a matter of seconds? Now, that would save a lot of time! Thanks to Slicy we can… Have a Slicy with your Espresso Slicy is another very well designed application by MacRabbit, founded in my home turf Belgium. The beautiful Slicy application icon in full size.
How does it work? It's very simple. I need to export 116 icons! First time I tried out Slicy was for the design of Fab's new iPad app (which is at the time of writing still in development). A preview of the 'Browse & Search' screen of Fab's new iPad application. Method 1: via layer naming Method 2: define the boundaries via @bounds layer 1 2 3… done! Magic Retina There are 2 ways how you can easily export all files automatically for the Retina display. Towards A Retina Web. Advertisement With the recent announcement and release of the Retina Macbook Pro, Apple has brought double-density screens to all of the product categories in its current lineup, significantly paving the way for the next wave of display standards. While the fourth-generation iPhone gave us a taste of the “non-Retina” Web in 2010, we had to wait for the third-generation iPad to fully realize how fuzzy and outdated our Web graphics and content images are.
In the confines of Apple’s walled garden, popular native apps get updated with Retina graphics in a timely fashion, with the help of a solid SDK and a well-documented transition process. By contrast, the Web is a gargantuan mass whose very open nature makes the transition to higher-density displays slow and painful. In the absence of industry-wide standards to streamline the process, each Web designer and developer is left to ensure that their users are getting the best experience, regardless of the display they are using. Device Pixels. The Lab » Retina MacBook Pro, what does it mean for web design.
With the new MacBook Pro, for the first time, a high resolution retina display is used on a computer. A large number of questions are raised about what software and web developers must do, to ensure their software products conform with what seems to be, a new generation of computers. First of all… Does the retina MacBook Pro signal a new generation of computers ? Yes it does. As the smartphone market already proved, Apple never had any interest in turning the river back. What exactly is the retina display ? It is a display with double resolution than the classic displays, most of us use in our computers. Does it mean that everything on the retina is smaller ? No. For example, a 960 pixel web layout will still occupy the same space on a retina display but will be rendered using four times more pixels.
OK, so what’s the catch ? While text is rendered using the operating system’s fonts which are already designed to be rendered equally good at any size, the same is not true for images. Web designers: you need a Retina MacBook Pro. Earlier today, I tweeted: If you’re a web designer, you really, really need to get a Retina MacBook Pro so you can see how bad your site looks on it and fix it. I quickly got a lot of negative responses from people pointing out that Retina MacBook Pros are a small portion of the market, and other platforms are more worthwhile to test for, represented best by Stuart Frisby’s response: There are still more IE6 users than Retina MBP users. Should I get a dell running Windows ME too? Or Niranjan’s: this is like trying to redo the site for IE5! Jeremy Meyers takes it in a slightly different direction: um no. we should not get to the point where we are designing sites around one unique piece of hardware. please.
Certainly, many other platforms are bigger than the Retina MacBook Pro market today. How much bigger will the IE5 or IE6 market be in a year? How much bigger will the high-DPI market be in a year? But if you can go further, you should. Designing on a Retina Screen: My Thoughts on the Retina MacBook Pro. 220.5 pixels per inch: 2,800 wide and 1,800 tall for a total of over five million pixels. That’s the screen that I work on now, full time. This gives rise to tons of questions: does Apple have any business making such a screen? Will it help or hinder the industry? Can you really do design work on that thing if you’re designing for non-retina screens?
Today I’m going to tell you all about my experience with the machine that threatens to change the way you do your job. Dang You Apple For the past decade, we designers have been focused on how to tackle a major paradigm shift in the form of ever varying screen sizes. Mediaqueri.es showcases responsive web design that looks great anywhere.
While we had our attention focused on one major paradigm shift though, another snuck up on us: resolution. Apple may not be the first or only electronics manufacturer to push high resolution displays, nor are they almost ever the first to anything. Should Retina Screens Even Exist? And that’s a good thing. Designing for Retina display, part 2.