In the context of screens, DPI (Dots Per Inch) or PPI (Pixels Per Inch) refer to the number of device pixels per inch, also called “pixel density”. The higher the number, the smaller the size of the pixels, so graphics are perceived as more crisp and less pixelated. The concept of DPI is also used in printing, although the dots and their formation is different there. In general, good quality printing uses around 300dpi which is higher than most displays. That’s why vector-based or high-res bitmap graphics usually look more crisp when printed.
A jQuery plugin for iOS style headers
For a project I was working on, I wanted to create a simple feature: as the user scrolls down the page, I wanted the heading for that section to follow the user. Partly so that navigation could follow the user, and partly to remind the user where they were. When getting the user to the next section, the headers needed to change, and a new header follow the user. I pretty much wanted to re-create the effect that headers do on iOS applications, such as contents or playlists.
So, I had a look around to see if there was anything around that would help me do this. There were plenty of tutorials for creating a similar effect. Bootstrap has the affix option, but nothing seemed to be exactly what I wanted. I not only wanted an element to follow a user, I wanted an element to follow the user, and then delegate the behaviour to another element.
So, I put together my solution, and then just continued to play with it. After realising that I could use the solution on multiple projects, I decided to create a jQuery plugin from it. I then thought other people would enjoy it, so I have opened it up to you all
Lots has happened in the world of Responsive Images since I wrote Mo’ Pixels, Mo’ Problems. And by lots, I mean nothing at all. It’s been over a year since The Great WHATWG Responsive Image Debacle and we’re still at square one.
Browsers want to implement srcset because “it’s easy”, but lots of developers (myself included) would feel great about using <picture> because it looks like every other new media syntax (audio & video) as well as a plethora of other reasons too. There have been a few more creative hacks (Compressive Images, Clown Car, etc) but no gold standard has arisen.
Here are some other developments you should care about:
- The average web page in June 2013 is 1426kb. 60% (891kb) of that is images.1
- Steve Souders notes that responsive images break the preloader.
- Tim Kadlec argues responsive images could reduce image asset weight by 72%.
- Google recommends using WebP, a great format, but it only works in their rendering engine.
- Progressive JPEGs are a web performance best practice even though support seems to be desktop-only. Progressive JPEGs aren’t a complete mobile solution because, if implemented, they’d make extra requests to cell towers.
-
Google’s brand is shaped in many ways; one of which is through maintaining the visual coherence of our visual assets.In January 2012, expanding on the new iconography style started by Creative Lab, we began creating this solid, yet flexible, set of guidelines that have been helping Google’s designers and vendors to produce high quality work that helps strengthen Google’s identity.What you see here is a visual summary of the guidelines, divided into two Behance projects:
-
Google’s brand is shaped in many ways; one of which is through maintaining the visual coherence of our visual assets.In January 2012, expanding on the new iconography style started by Creative Lab, we began creating this solid, yet flexible, set of guidelines that have been helping Google’s designers and vendors to produce high quality work that helps strengthen Google’s identity.
What you see here is a visual summary of the guidelines, divided into two Behance projects:
Apple’s new iOS7 is a great step forward full of useful innovations and a great visual refresh, but their work has been marred by the design details that people simply can’t look past.
Tim Cook unveiling iOS7 to the WWDC audience. (Image from Apple)
The other day Apple unveiled a series of updates to their products and operating system to a room full of designers and developers, as well as to those clever enough pull up apple.com on Safari. While the updates to OSX, Mac Pro and Apple Air were met with open arms, the highly anticipated iOS7 wasn’t. Some people welcomed the change. However, there was an overwhelming amount of people who told it to go back home (and they made sure to echo that sentiment via Twitter.)
This week was Apple’s Worldwide Development Conference—the time when the company announces all its new software, and generally a few pieces of hardware to boot. But Monday was especially significant, as it was the first time we saw the fruits of Jony Ive’s new position as head of human interface—with his sensibilities leaking into software as well as hardware.
Did Apple show anything radical? No. But they did give the iPhone a major facelift in iOS 7, and a series of updates in OS X Mavericks will make Apple’s laptops feel a bit more like Google’s Chromebooks, a decision that teases its unification strategy of mobile and desktop platforms in the years to come.
Here’s the news you need to read from the week, along with what we think it means for Apple’s future of design.
Many of the new icons were primarily designed by members of Apple’s marketing and communications department, not the app design teams. From what we’ve heard, SVP of Design Jony Ive (also now Apple’s head of Human Interaction) brought the print and web marketing design team in to set the look and color palette of the stock app icons. They then handed those off to the app design teams who did their own work on the ‘interiors’, with those palettes as a guide.
