allan berger

Making your website ready for Retina displays doesn’t have to be a hassle. Whether you are building a new website or upgrade an existing one, this guide is designed to help you get the job done smoothly.

Make it Retina first

The easiest and most time-saving way to add retina support is to create one image that is optimized for retina devices and serve it to non-retina devices as well.

By now every modern browser uses bicubic resampling and does a great job with downsampling images. Here is a comparison of downsampling in Photoshop vs Google Chrome using an image from our Growth Engineering 101 website.

There are two ways to let the browser downsample images for you. Using img tags and using CSS background images.

If you have img tags serve the retina optimized image and set the width and height attributes to half of the resolution of the actual image (e.g. 400x300 if the image dimensions are 800x600).

<img src=”http://www.example.com/retina-image-800x600-2x.png” width=”400” height=”300”>

If you use images as CSS background you can use the background-size property of CSS3 to downsample the image for non-retina devices.

<div class=”photo”></div>

.photo {
    background-image: url(retina-image-800x600-2x.png);
    background-size: 400px 300px;
    background-repeat: no-repeat;
    display: block;
    width: 400px;
    height: 300px;
}

In both cases make sure to use even numbers in both dimensions to prevent displacement of pixels when the image is being downsampled by the browser.

When downsampling is not good enough

Usually browser downsampling should work very well. That said there are some situations where downsampling in the browser might make images blurry.

Here we have a bunch of 32x32 px social icons.

And here is how they look like downsampled to 16x16px by Photoshop’s as well as Google Chrome’s bicubic filter. It seems like we get better results from Photoshop in this case.

To get the best results for our users we can create two versions of the same image. One for retina devices and another one downsampled by photoshop for non-retina devices.

Now you can use a CSS media query to serve retina or non-retina images depending on the pixel density of the device.

/* CSS for devices with normal screens */
.icons {
    background-image: url(icon-sprite.png);
    background-repeat: no-repeat;
}

/* CSS for high-resolution devices */
@media only screen and (-Webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {
    .icons {
        background-image: url(icon-sprite-2x.png);
        background-size: 200px 100px;
        background-repeat: no-repeat;
    }
}

If you use a background color for small icons on the other hand, downsampling by the browser works pretty well. This is the same downsampling example with white background.

Polishing your Downsampled Images

If you’re still not satisfied with the results from Photoshop’s downsampling you can go the extra mile and hand-optimize the non-retina version to get super crisp results.

Below are some examples of images from the Blossom product website that I hand-optimized for people on non-retina devices.

Borders & Strokes

Here is an example of downsampling issues with hairlines where I re-draw the lines of the downsampled image.

View the Retina Version of this Image on Dribbble.

Text

Here is an example of downsampling issues with text. In this case I manually re-wrote the text “Feature Pipeline” to get to a crisp result.

Retina Version

When details, crisp fonts and clean hairlines are important you might want to go the extra mile.

Try to avoid Images

The main disadvantages of rasterized images are their big file size and that they don’t scale well to different sizes without affecting the image quality. Great alternatives to rasterized graphics are CSS, Scalable Vector Graphics (SVG) and Icon Fonts.

If you have any chance to build graphical elements of your website in CSS go for it. You can use it to add gradients, borders, rounded corners, shadows, arrows, rotate elements and much more.

Here are a few examples of interaction elements in Blossom that are implemented in CSS. The subtle gradient is powered by CSS gradients and the custom font in use on this button is Kievit served via Typekit. No images.

In the following screenshot the only two images used are the user avatar and the blue stamp. Everything else – the circled question mark, the dark grey arrow next to it, the popover, its shadow and the arrow on top of it are all pure HTML and CSS.

Here you can see how projects in Blossom look like. It’s a screenshot of a project’s website used as cover on a stack of paper sheets. The paper sheets are implemented with divs that are rotated using CSS.

Also the circled arrow in the righthand side of the screenshot below is pure CSS.

Here are some awesome tools that can help you to save time when you are creating effects using CSS.

CSS Generator:
Cross browser CSS3 syntax by @RandyJensen.
http://css3generator.com/

CSS Arrows:
CSS for tooltip arrows by @ShojBerg.
http://cssarrowplease.com/

Generating CSS for Sprites:
Sprite Cow helps you get the background-position, width and height of sprites within a spritesheet as a nice bit of copyable css. It’s built by TheTeam and it’s a real time saver and definitely worth giving a try.
http://www.spritecow.com/

The main advantage of SVG is that unlike rasterized graphics they scale reasonably well to various sizes. If you have simple shapes they usually are also way smaller than PNGs and are often used for things like charts.

Icon Fonts are often used as a replacement for image sprites. Similar to SVG they can be scaled up infinitely without any loss of quality and are usually smaller in size compared to image sprites. On top of that you can use CSS to change their size, color and even add effects like shadows.

Both SVG and Icon Fonts are well supported by modern browsers.

Retina ready Favicons

Favicons are really important for users who want to have an overview about which website belongs to which browser tab. A Retina ready Favicon will not only be easier to identify but also stand out among a crowd of Favicons that are not optimized for high resolution devices yet.

To make your Favicon Retina ready I can highly recommend X-Icon Editor. You can either upload a single image and let the editor resize it for different dimensions or you can upload separate images optimized for each size to get the best results.

How to make existing Images Retina ready

If you want to upgrade an website with existing images it is a bit more work as you need to re-create all images to make them Retina ready but this doesn’t need to be super hard.

First of all try to identify images that you can avoid by using alternatives like CSS, SVG and Image Fonts as mentioned previously. Buttons, Icons and other common UI widgets usually can be replaced with modern solutions that don’t require any images.

In case you actually need to re-create rasterized images you need to go back to your source files. As you might assume, simply resizing your rasterized bitmap images twice as big doesn’t get the job done because all the details and borders get pixelated.

But no need to despair – image compositions which mostly contain vectors i.e. in Adobe Photoshop or Illustrator are quite easy to scale up. That said don’t forget to check if your Photoshop effects in the blending options such as strokes, shadows and bevels still look as intended.

In general, making most Photoshop Compositions directly out of vectors (shapes) and Photoshop’s Smart Objects will save you a lot of time in the future.

How to optimize the File Size of Images

Last but not least optimizing the file size of all images in an application or website could effectively save up to 90% of image loading times. When it comes to retina images, the file size reduction gets even more important as they have a higher pixel density which also increases their file size.

In Photoshop you can optimize the image filesize via the “Save for Web” feature. On top of that there is an amazing free tool called ImageAlpha, which can reduce the filesize of your images even more with just a minor loss of quality.

Unlike with Photoshop you can use ImageApha to convert 24-bit alpha channel PNGs to 8-bit PNGs with alpha channel support. The icing on the cake is that these optimized images are cross-browser compatible and even work for IE6.

You can play around with different settings in ImageAlpha to get the right trade-off between quality and file-size. In the case below we can reduce the file size by almost 80%.

When you are done setting your desired compression levels ImageAlpha’s save dialog also offers you to “Optimize with ImageOptim” - another awesome free tool.

ImageOptim automatically picks the best compression options for your image and removes unnecessary meta information and color profiles. In the case of our stamp file ImageOptim was able to reduce our file size by another 34%.

After we’ve updated all assets of Blossom for high resolution displays and used ImageAlpha & ImageOptim to optimize the file size we actually ended up saving a few kb in comparison to the assets we had before.

Save Time, read this Book

If you want to learn more about how to get your apps and websites ready for retina displays I can highly recommend “Retinafy your web sites & apps” by Thomas Fuchs. It’s a straightforward step by step guide which saved me a lot of time and nerves.

Awesome Retina Ready Sites on the Web

http://kickoffapp.com/

http://www.layervault.com http://www.apple.comhttp://www.panic.com/

Last month I was at Silicon Valley Code Camp, where developers learn from fellow developers. It’s an event throughout a whole weekend held yearly (usually in October) at the Foothill College in Los Altos Hills, California. There was a long long list of speakers with loads of very interesting topics (#svcc on twitter) and a lot of volunteers helping out.

I attended a session called “Lean UX Anti-Patterns” by Bill Scott. He mentioned great productivity tips for product development teams in startups and enterprises which inspired me to share those and some of my thoughts with you. You can find the neat slides of Bill’s session at the end of this post. I’ll start right off now …

Being perfect

There’s nothing wrong getting a project to the point until all errors are fixed or until everything that bothers you is ironed out, in other words doing something until it’s perfect. But while bringing something to perfection, still seriously try to keep an eye on continuously delivering your changes. You don’t have to ship a completely perfect feature at a time, what for? Imagine yourself building something until perfection. You spend hours, months even years developing your baby, showing it to no one because you don’t want to disappoint people with a product which is lacking of features. After getting it out to the people you realize that they either don’t understand it in any way or don’t need it (anymore) because it was that time-consuming that the market has changed.

Instead of having that bad experience try shipping in smaller bits and steps. Just take care of that those simple bits work to a point that people can try it. You’ll get feedback earlier and you’ll might get aware of things you haven’t thought of much in the beginning. Don’t be afraid that people might don’t like it.

The most important thing is that you get your ideas out to the people and validate your assumptions as early as possible.

The earlier you get feedback you are able to pivot with less effort and prevent from building something into a wrong direction.

Not Enough Pizza

As teams scale up it gets harder to communicate and share knowledge with every single person. People tend to feel less accountable for what they are working on and devalued as the team is getting bigger. There is a good rule of thumb for team sizes:

“If you can’t feed a team with two pizzas, it’s too large.”

Depending on the appetite that usually makes teams at the size of 5 to 7 people. 
The term two-pizza team was originally coined by Amazon’s CEO Jeff Bezos while he transformed the companies product teams into small autonomous working task-forces.

Focus, communication, commitment, responsibility and self-coordination. All those principles become effective throughout every teammember in smaller teams.

You can read more about Amazon’s two-pizza teams in this FastCompany article.

Team Management with Emails

Communication between distributed team members can be a real challenge. If you have to work remotely email collaboration is usually not the best way to be productive. Chatting, making Skype- or Phone calls already offer better communication. But the most effective and best way to communicate is still a video call where both ends focus on the conversation and try to look into each others virtual eyes.

I’ve met somebody last week who told me that he is doing video calls regularly and if the person he is talking to looks at him while speaking, doing nothing else, it feels like a real conversation. The focus again is stronger and there is almost no loss of information.

That’s nice, but it doesn’t work for the Enterprise

Bill really inspired me by saying he is applying the principles of lean into his enterprise environment by starting with one pilot project, applying new habits and principles, going on with the next project and so on and so on. Slowly but surely lean thinking is understood and adopted, advantages are discovered and the team finds its own rhythm of development.

Especially in complex and settled environments, start with a pilot, learn and iterate.

Going dark

If one member of the team is working i.e. 5 days in a row on his own, shutting down for just straightly doing his tasks, collaboration with the team is obviously not that intense as it could be if you exchange thoughts in shorter and regular timeframes.

Communication and knowledge sharing is key for a good playing team.

Lack of communication could end up developing into a wrong direction, people are doing things twice or are unaware of product that changes might happen while working without communicating with the rest of the team. Big chunks of work are maybe already wired too complex to fix without much effort. A healthy communication culture is crucial for product teams to stay in sync. Without that it’s impossible to react to sudden changes or to go after new opportunities. Daily stand up meetings can help a lot with that.

Saying “No”

If you are the type of guy who is really visionary about future implementations or features in your project or product you know that your stream of ideas is never-ending. When it then comes to the point to share the idea with your team and there is someone who brings up half a dozen reasons that your ideas are not convertible or are fetched too far, it seriously decreases your and the whole team’s productivity. Assuming that your ideas will be vaporized by the naysayer anyway it narrows down your motivation to share them.

A reason for that might be, that at first sight the idea could be too overwhelming from the naysayer’s point of view. Explaining to break down the process into smaller steps, and explaining why that feature is important could be an approach to make everybody understand. The actual aim behind is to encourage every single team member being innovative and to come up with great individual ideas that eventually get implemented into the product.

In general, talking about the company culture regularly with the whole team empowers, connects and helps a lot to understand the reason why and how features are being implemented.

Have you made an experience based upon one of the topics mentioned above? Do you know some Lean Anti-Patterns everybody should be aware of? I’d love to hear your opinion.

Working on the images of the growth engineering ebook. This blueprint is symbolic for services that have great referral strategies. the k-factor = rate of growth, a k-factor greater than one indicates exponential growth. 
this section of the book shows how a great product combined with a viral loop can bring your customer acquisition cost down to zero.

I added a letter to the envelope which should be a symbol to retain and resurrect your customers. This version will be part of the landing page of our upcoming ebook.

An envelope design I dribbbled that will be part of the landing page for our upcoming ebook.

Yesterday I attended the Growth Hacks Conference hosted at the Broadway Studios, San Francisco. The speakers held inspiring talks (Rand Fishkin, AJ Kohn, Mike Pantoliano to mention just a few) and in each of them they gave hands-on tips on how to grow your business, how to attract people for your product and how to analyze the behavior of your customers.

So in this article I want to share 4 essential tips of the Growth Hacking Event with you:

Sell your Story instead of your Product

A story will always be easier remembered than just mentioning the name of a product. Telling your personal story and why you are building a specific product is something your customers can relate and connect to. They can truly imagine your point of view and the features you implemented start to make sense to them and if your story attracts the people they will even start to tell it to others.
Read more on storytelling methods in this great article.

Match the User’s Search Intent with the Results they get delivered

Aligning the expectations of your users and what they get delivered is essential for a great user experience. Clicking on a link with a certain title should guide the user to what the title promised. The result of a Google Search should guide the user to what he searched for. If you for example recognize that your blog article is always found through a different search term than your article title you should think about changing the title to the one people are searching for to match expectation and result.

Evaluate Your Bounce Rates

Bouncing != Bouncing. If you only have a single landing page to browse your product it is quite obvious that the bounce rate will be really high. To get more valuable information about your bounces you can filter the bounces i.e. by setting a timer of 30 seconds. If somebody stays on your site for 30 seconds it is likely that this person is actually interested in your product.

An different or additional way of tracking interest could be how far people are scrolling down on your site. To analyse that behavior you could add event listeners which are triggered if a particular section in your page has been reached.

Concrete & Emotional beats Abstract & Intellectual

Explaining something very intellectual to somebody who is not familiar with a specific topic can sound very abstract to the listener. It’s quite clear that being concrete and to the point is better than just beating around the bush. Consciously thinking about to phrase something short but precise and understandable for everybody is often a challenge, but the more and more you pay attention on explaining something concrete it will be an ease to make a habit out of it.

Additionally being emotional on top of being concrete shows more personality and gives your customers a sign that you truly care about them, that you are open and honest to them and that you deeply care about what you are working on.

Check these great sources out to learn more about Growth Hacking:

Defining a Growth Hacker - Great series about the meaning & practical application of a Growth Hacker by Aaron Ginn on Techcrunch.

Growth Engineering 101 - A step by step guide on Growth Hacking for Founders, Product Managers and Marketers, which will be published as a series of ongoing blogposts and as a book.

Hackers & Founders TV - I very recommend this source for watching most of the Hackers & Founders talks on video.

SEOmoz Blog - A great source for getting tips on SEO, Online Marketing and Business Development

Conversion Rate Experts Blog - Hands-on Growth Hacking Tips.

Blind Five Year Old - A blog by an online marketing firm specializing in search, owned by AJ Kohn.

Unbounce Blog - Find input specific on optimizing your landing page, online marketing & conversion rate here.

1000 Grand True Fans - An inspiring article on being aware of each and every of your fans/customers.

Which Growth Hacking Tips would you recommend and which are you applying? I’d love to hear them in the comments below.