What is ResearchKit
- Brains, Not Money Will Pave the Way OffWhite was in New Orleans for some hands-on work with existing clients. As a marketing firm we also wanted to explore where we match up with new clients who want to grow. We observed some companies spending money on marketing without solid plans in place, without clarity in desired outcomes and without a command of the marketing toolbox. We saw exhibits that shouted and screamed in graphic outbursts that would chase off a thief. The disciplined companies, large and small, stood out as professionals who offer confidence and credibility along with the next best idea. We call that branding. Once again, we concluded that you can’t buy your way into this market; you have to think your way into it.
- Training and Education is the DNA of technology marketing. If you are a marketer, you’re an educator. Placing new technologies into context amid a global environment, and empowering the newest sales or service rep hired is essential to growth. That’s the curriculum. The best customer is an educated customer.
- Digital Asset Management is like herding cats. The ability to plan, organize, inventory and maintain a portfolio of intellectual property – from trademarks and patents to value statements, images, illustrations, videos and online libraries– is the foundation for professional brand management. There is no substitute, no shortcut.
- Integration is the key to efficiency. You don’t want to spend the same money twice. What you invest in one place must apply to another, worldwide. We connect the dots.
- Content is King. This takes me back to my early days where things were simpler but much less efficient. Today, with all of the websites and social media and gnashing of teeth, content still matters first in technology marketing. I’ve often quoted Marshall McLuhan who said “the medium is the message”. Mix this idea with websites, blogs, social media, SEO, analytics and blimps with flashing lights and we’ve stepped into a fine mess. Today, we see companies spending working capital (which we monitor through our analytic programs) without any understanding of what they get in return. Leading the way down this path are so-called marketing people, either inside or outside the company, who have never had to sell a thing, never called on a customer, never been in a lab, never watched a research project die because of a product failure, never had to make a payroll, never had to strip a technology down to its fundamental processes and explain why it’s valuable to your life’s work.
- Technology Marketing is Hard. If we were selling perfume, marketing would be easy. Selling perfume is selling hope. But in our world here in the weeds there is no glamour. You either understand the product or you don’t. You can explain it or you can’t. You can spoon feed value or you can try to cram it into a bundled purchase deal where an uneducated customer has no idea what’s in store. Weeds or not, there is no place to hide in our world. Accuracy and attention to detail can be so irritating, don't you think?
If your website isn’t accounting for retina users, it’s about time. Retina isn’t a mobile-only concern anymore.
Just to be clear, I use the word “Retina” to refer to all HiDPI displays. The word retina was coined by Apple, but I prefer to use it over HiDPI because I’ve grown tired of the endless acronyms used to talk about digital displays. Want to watch ESPN on my 2160p 4K LED LCD UHD TV?
Retina displays are not new. Apple’s iPhone 4 was likely the first of these displays that you saw in person, it was for me. It was a game changer. I suddenly enjoyed reading passages of text on a digital screen. The higher PPI (pixels per inch) pushed us closer to printed type. At this point, retina displays are standard on smartphones. The majority of tablets have these displays too, even bargain tablets like the Kindle Fire. But the change that is making a lot of companies finally take retina seriously is the emergence of retina screens on laptop and desktop computers.
Two years ago, when I chose a new MacBook Pro with Retina over a MacBook Air, retina displays on a computer were new… almost a novelty. Now, Apple is rumored to be putting the retina display on the Air and Lenovo, Samsung, Toshiba and Dell all have flagship laptops with retina displays. Then, late last year, Apple released a new Retina iMac. A 27” screen with 217 PPI, totaling a pixel count of 5120-by-2880. When I first saw one of these mammoth displays in person, I felt like Wayne Campbell staring at the white Fender Stratocaster through the music showroom window, “She will be mine. Oh yes, she will be mine.” And when she is mine, your website will look awful compared to the competition if you don’t take retina seriously.
For years now, many B2B companies have excused their sites' retina-ineptitude because they don't take their mobile traffic seriously. But now, retina displays have found their home on our laptop and desktop machines. Design-snob iPhone users aren’t the only ones taking note of what you look like on a good display.
screenshot showing an image that isn't retina-ready (left) and one that is retina-ready (right).
So what can we do about it?
There’s a lot to consider, but I’m not going to go insider-baseball here. Lets rebuild your site some other day, then we can talk about rem units, pixel-ratio media queries and .SVG file types. For now, here are some simple steps and considerations you can take as content creators and editors.
- Do not use images for text. I understand the temptation to create a text-graphic in Photoshop. Don’t. Web typography has expanded exponentially over the last few years, look into the @fontface technique if using a special font is the issue.
- Do not use images when simple CSS will do. Drop shadows, rounded corners and gradients can all be handled by the user’s browser now.
- Use double-sized images. One way to accommodate retina displays is to create your images twice as big as they’re displayed on web. A 200px by 200px image displayed in-browser at 200px will be blurry on a retina screen, but if you start with a 400px by 400px image and display it in-browser at 200px you will get the crisp edges and details retina displays are built for. This has some drawbacks, as it forces browsers to resize the images and it means increased image sizes; more on that below.
- Incremental improvement. Finding the original hi-res versions of images taken years ago to repair every image on your site is a daunting task. But don’t let it prevent you from moving forward with retina capability. If you never get around to fixing every image you’ve ever posted, so what? Retina users don’t expect your 2010 blog posts to be pixel-perfect to 2015 standards. Incorporate changes as you add and edit content.
So what could be the issue with retina images?
In short: they will get big. Doubling every image will hurt your page load times. Here are some tips to trim your image sizes, most are things that you should already be familiar with, but because we’re doubling image sizes, their impact is magnified:
- Know when to use .PNG and when to use .JPG. Simply put, use PNGs for graphics (hundreds of colors) and use JPGs for photographs (thousands of colors) or graphics with a lot of gradients.
- Compress your images. The save for web feature in Photoshop is a must, and there are plenty of web-app alternatives. If you’re using JPG, drag that quality slider down as far as you can before you see major artifacts (you should rarely be over 85). If you’re using PNGs, see what your graphic looks like when you select PNG-8. How many colors do you really need? Do you need transparency? Use services like TinyPNG to compress PNGs with transparency.
- Retina.js. Retina.js is a script added to your site templates that will read your users' screen resolution and only serve the double-sized images to the retina users. This means creating two images for every image that you use, but it means that non-retina users won’t need to download the double-sized images.
If your site design hasn't been evaluated since 2010 or is built on tables and uses flash, you probably have bigger problems to address than retina-compatibility. But if you think your site deserves mass 2015 usership, blurry images will be an immediate turnoff. The list above is a good start to account for those users fortunate enough have a retina display. Hopefully, your site is also responding to their screen size too (your site is responsive right?).
At OffWhite, we take retina seriously in every new web project we work on. We also have gone back and retroactively addressed low-res images for sites built before standard retina compliance. Retina images are an easy way to give your site a bit of a refresh without investing in an entire rebuild. Some simple updates to your CSS and addition of webfonts can also serve as a low-cost, non-invasive "tune-up" to your site's design. Want to talk about some more advanced retina-readiness techniques, or need help getting your site up to speed? Contact us today.
We'll talk about triple-size images next time (thanks iPhone 6 Plus).