Request a Demo
We tailor each demo to your specific business needs. See it for yourself and contact us today!
Thanks for reaching out! While you wait for confirmation from an Apptentive team member, you may find these free resources to be of interest:
Guide
View resourceGuide
7 Steps to Product Roadmap Success
Learn how to fight feature creep, deliver the right value, and translate vision into action. Let us help you revitalize your product roadmap today, and help make 2021 your year.
Request a Demo
We tailor each demo to your specific business needs. See it for yourself and contact us today!
Thanks for reaching out! While you wait for confirmation from an Apptentive team member, you may find these free resources to be of interest:
Guide
View resourceGuide
7 Steps to Product Roadmap Success
Learn how to fight feature creep, deliver the right value, and translate vision into action. Let us help you revitalize your product roadmap today, and help make 2021 your year.
Mobile Marketing
Retina, High-DPI & Your Web App
It all began with the iPhone 4. In 2010, Apple released the first popular consumer device with a display so sharp that it would change how designers and developers had to think about pixels. Apps and websites had to quickly find ways to ensure a new level of crispness or risk falling behind.
Fast forward to today where almost all mobile devices and many notebooks are running High-DPI displays.
Icons and art
Now a ‘pixel’, as a unit of measure, may actually be 1, 1.5, or 2 physical pixels wide on your screen. Designers and developers now must think very creatively on the best way to serve the sharpest art – and the best experience – to their customers.
This pixel-is-no-longer-a-pixel situation explains much of the recent backlash against skeuomorphism, and the move to ‘Flat Design’. Designing interfaces with rich textures and photo based effects is more of a technical headache than it used to be, so many designers are moving ‘flatter’ design for both convenience and aesthetic reasons.
That said, mobile app developers generally have easy ways to support High-DPI devices. iOS and Android both have robust systems in place for supporting different resolutions, and the onus is on the developer if your device isn’t supported. Web developers, however, have a very different set of problems to contend with. We have no standard way to make our sites High-DPI friendly, but many half-solutions each with their own benefits and possible pitfalls:
- Loading time: Page weight grew by 30% in the last year. This lengthens loading time for all your users, but it hurts mobile users with slow connections and limited data the most. In a space where every extra second may drop conversion rates by 7%, you have to ask – is that fancy ultra high resolution background really worth it?
- Maintainability: How easy is this approach to implement once? Does it require extra ongoing work with every asset pushed out?
- Durability & Compatibility: Does this approach work on all the browsers your customers use, and how well does it work?
- Power: And lastly, can this approach do all you want it do?
Icon fonts are a collection of your site’s icons stored in a separate typeface. They’re great for single-color icons that can change size and color to match the surrounding text.Icon fonts have a few serious downsides, however. They can only be one color, adding and removing icons can be a bit of a chore, and different font rendering between browsers and operating systems could wipe out some of the details in your icons.Finally, one small gotcha: If you are hosting your font files on a CDN make sure you check the page in Firefox. Without changing some server settings, Firefox will not render web fonts hosted on another domain, and will fall back to the next available font face defined in font-family.
Resources:
- HTML for icon font usage – and the great demo.
- IcoMoon – is one of the more popular icon font resources. IcoMoon makes it easy to add your own SVG files to a custom font-face.
The concept is simple: If a user is on a Low-DPI device, only download the small image. If they’re on a higher DPI device, download the larger image.It’s great in theory, but has proven to be a challenge technically. One hangup is just keeping up with it.Additionally, swapping images for higher resolution versions just throws the problem further down the line. New devices with higher resolutions are on the horizon, so tying yourself to the current high density mark may leave your site looking a little soft in the future.
Resources:
- Retina.js – a dead-simple image replacement tool. If you are comfortable making 2 versions of each asset this is the way to go.
- The Layered Look: Better Responsive Images Using Multiple Backgrounds – details the most interesting new approach
- Retina Display Media Queries – this approach works great if you’re rescaling backgrounds images.
Modern browsers are getting better and better about supporting the latest and greatest in CSS3. Prefixes for border-radius are a thing of the past, CSS gradients show up everywhere, and other CSS effects have been well supported by every browser released in the last year.All of these CSS effects are High-DPI ready by default. Sharp lines drawn in CSS don’t blur as the pixel count increases.A strong CSS foundation won’t make your photos sharper. But strong design and good CSS use can mean you use less images overall.
Resource:
- In Flux – Trent Walton covers using CSS, web fonts and image replacement to get a cohesive whole.
SVG – scalable vector graphics – files are simply a collection of XML code that describes the image. Open an SVG image with a text editor and you will see the code and numbers defining the perfect vector edges and boundaries of the artwork.SVG is my go-to alternative for icons and UI elements. It’s a finicky format that requires a lot of knowledge to make it work and look great in all browsers. But when you get it, a well constructed and compressed SVG can be lightweight but visually rich. If you embed it in your HTML it can be modified by your CSS directly, and since it’s all vector you only need to make one set of assets for all sizes and resolutions.The bad news: IE8 doesn’t support the SVG format. If you support IE8 you will need to create a 2nd set of PNG sprites to work along side the SVG sprite.
Resources:
- Using SVG – Is a good solid primer for using SVG in the most flexible way possible – embedded in your HTML.
- Creating SVG vector graphics for maximum browser compatibility – covers, in great depth, some of the advanced visual tricks you can pull off with SVG.
Coming Next time…
I’m working on a hybrid-solution that will have the best aspects of icon-fonts but with fewer of the limitations. It should also be just as maintainable and developer friendly as CSS3. Check back soon or subscribe to the blog to be notified of the next article in this series.
