The reason I was thinking about this on a random Tuesday is that I recently saw an article that was shared on LinkedIn, and you can read it here: https://www.linkedin.com/comm/feed/news/4616588. It links to a BBC article entitled "How to exercise during the workday (and why it's important)."
We've all been told the benefits of exercise including having a better mood/positive outlook, reduction in disease, and better sleep among many other things. But sometimes I think it gets lost on people that exercise has a very significant benefit to how productive you are at work. And I'm not talking in terms of physical labor. According to the article, a 2013 study showed that regardless of age, people experience "immediate benefits" for cognition following "a single bout of moderate exercise", such as 15 minutes of moderately intense cycling on a stationary bike.
On a personal note, I can vouch for this. Virtually every Monday through Friday on my lunch hour, I've ventured over to the Y to get a workout in. I cannot tell you how many times I've been working on a problem at work, only to walk away from it for a bit, and then have an "Ah ha!" moment in the middle of my workout for something to try when I got back to the office. And funny enough, more often than not my thought worked! On the other side of this, how many of you have been at work looking at the clock realizing you still have a couple of hours left to go in the day and find that you're groggy? A mid-day workout can also help you get some of your energy back. I have had days in which I stayed in the office from 8 to 5 without taking a break. And those are very long days, even if I'm busy. When that happens, I'm absolutely burned out when it's time to go home. It makes a huge difference to me when I don't get to leave the office for some physical activity.
Now, I know what a lot of you are thinking at this point – I need my lunch break for various things and/or I don't have time because of my work or I only have a small window for my lunch break. There are also some of you out there that just utterly don't want to do anything physical during the day and/or want to get all hot and sweaty to come back to the office. I understand that sometimes life gets in the way, but I've heard all of the excuses. If you truly want to make any kind of difference in your life, you'll make it a point to make it part of your daily routine. And you don't need to be in the gym for hours on end. Take small steps, like going for a 10 – 15 minute walk around the block, or even around the office. You don't even have to do this on your lunch break. Find a few minutes each hour, or block off of five or ten minutes in the morning to just move, especially if you have a desk job. You'll find that as you do this over and over, it will become part of your daily routine. As I learned when I was a trainer at the Y, it takes 3 weeks to develop a habit, so stick with it! A healthier you, and a healthier work environment is just around the corner.
- Do you have a difficult time finding assets or spend too much time recreating assets that exist?
- Is there a duplication of effort (different groups doing similar work)?
- Are you creating/managing multiple renditions of a single message to support multiple channels (e.g. mobile, social, etc.)?
- Is there a lack of visibility into project status?
- Are review/commenting/approval processes awkward and difficult to navigate?
- Is it cumbersome and difficult to share assets with external collaborators?
- Are you struggling to keep up with increased marketing demand?
- Are you plagued with inconsistent branding across campaigns and/or channels?
- Are non-compliant uses of licensed content compounded by inadequate control over intellectual property?
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).