The State of Resolution-Independence In Web Design: 2014
What is resolution-independence?
Today I’ll be writing about resolution-independence: designing websites with accessible, legible, crisp, usable layouts on devices of any physical dimension and screens of any resolution density. There are two main components to resolution-independence: the question of whether the layout is appropriate for the frame in which it’s being presented, and the resolution of visual assets — icons, photography, illustrations, and typography.
Knowing our history: from fixed frames to responsive layouts.
Historically, websites have been designed as “fixed frames” — a static layout that was designed for a single screen size. Web designers strove to make this layout look exactly the same on every browser, necessitating a vast number of hacks and polyfills to work around the quirks of each browser’s rendering engine. Designing a single, pixel-perfect layout mimics the world of print, where designers create a layout that’s proportioned perfectly for a specifically-sized sheet of paper. This approach made sense for a handful of years, when the internet was dominantly accessed using desktop computers with monitor resolutions that only ever got bigger — but as mobile phones have become ubiquitous and smaller viewports (as well as higher-density displays — such as Apple’s “Retina display”) entered the picture, fixed-frame design became obsolete: it is no longer possible to design a single fixed-frame website that looks good for most of the people viewing it.
Web designers have been considering how best to approach the problem of variable screen dimensions at least since John Allsopp’s 2000 article “A Dao of Web Design”(1). In those days, adaptive layouts represented the current thinking about designing universally accessible websites; from a technical standpoint, Allsopp focused on specifying margins, page-width, and typography in percentages rather than as absolute values (e.g. 14pt). Other approaches have come and gone since the days of designing adaptive layouts. For a while we experimented with splitting our efforts and creating separate mobile sites, but the limits of this approach became apparent in the excessive amount of development effort necessary to create a separate page and the frustration of users caused by the often-anemic content presented on mobile-only sites.
Responsive website design.
As you probably know, responsive website design is the latest and greatest approach to custom-designing layouts that are effective and resolution-independent for devices of any size. Responsive layouts are typically built on a flexible grid that adapts to the constraints of the device. For instance, a desktop computer might see the website’s layout spread across nine columns, while a mobile phone would collapse the same information into one or two columns in deference to the limited horizontal screen dimensions.
Responsive design’s escape from the confines of a given resolution involve a lot of thoughtful planning and defining of “breakpoints” — specific resolutions at which the number of columns shifts and the content re-flows into a different layout. This is one way in which responsive design focuses on prioritizing content over presentation: although fixed-frame layouts encouraged designers to create pixel-perfect presentations, layouts that shift the presentation of the content require web designers to organize content and define clear hierarchies so that important things come first, related information is always grouped together, and information is presented clearly. This is a big win for usability.
* * *
Visual assets: looking sharp at any size.
Visual assets can be divided into two categories: bitmap and vector. Bitmap (also known as raster) images are defined by grids of individual pixels. Bitmaps are best used to present extremely detailed imagery: photographs, for instance, are always presented as bitmap images. The problem with bitmap images in web design is that high-resolution bitmap images have correspondingly large file sizes and can take an exorbitantly long time to load — especially tedious when mobile users aren’t even able to enjoy the full resolution.
Vector images are shapes defined by mathematical curves that look crisp at any resolution — typography being the most notable example. No matter how many times you zoom in, the edges of a typeface’s letters will always look perfectly sharp.
Vector-first design.
Because vector images are inherently resolution-independent, and because their file-sizes at high resolution are so much smaller, vector-first design is emerging as a usability philosophy: whenever possible, design visual assets as vectors. Often this means a greater reliance on typography — choosing beautiful, functional type to serve as the core of the layout.
Shapes with simple geometry — rectangles, circles, and ovals, to name the obvious, can be defined as pure CSS, which delivers the best performance for vector shapes and gives us code hooks to create beautiful transitions that morph the shape of the object during an interaction.
Shapes with more complex geometry, from icons to illustrations, can be created as SVG (scalable vector graphics) or as icon fonts, each of which has its advantages and limitations. At JTech, we’ve focused on using icon fonts, which perform better in most browsers but are limited to a monochrome color palette. SVG is finally enjoying wide browser support as well, but still lags behind icon fonts in page-load and rendering performance. As SVG performance gets better, we look forward to adopting it for multi-color icons and illustrations on our websites — this will open up a whole world of visual possibilities.
Images with blurs, glows or drop shadows do not perform well as SVG files — in fact, those effects are typically stored as bitmap data within the SVG. These effects are in the same camp as highly-detailed photographs; the best approach is still to deploy them in a bitmap format such as PNG or JPG.
A few final words about bitmap images in responsive and resolution-independent design: Although vector-first design discourages us from using bitmaps, there’s something tangible and beautiful about photography — particularly large-scale photography — that cannot be replaced by carefully-crafted vector shapes. A new HTML standard is being developed for a <picture> tag(2) that will load an appropriately-sized image resource based on the screen pixel density, viewport size, and other factors. In the meanwhile, our Montana web development team is experimenting with techniques for presenting beautiful bitmap images with small enough file sizes to load on any device. The most successful method we’ve explored thus far involves extremely high-resolution images that have undergone heavy compression — offering a level of detail that looks good at high resolution and a small enough file size to tolerate on small screens and slower internet connections.
How JTech approaches resolution-independent design.
We’ve decided that responsive website design is currently the right approach to create websites that are resolution-independent, effective and accessible on all devices. Our Montana website design team developed our own custom responsive framework, which we’ve deployed on our own site and client sites: NRTRC, HRSG User’s Group, Next FX, and J.K. Adams, to name a few. Our framework gives us control over breakpoints, transitions, and very granular access to content grouping and hierarchy. We’re happy with the way this has allowed us to build advanced websites that are usable, beautiful, and device-agnostic.
As web designers and developers, we’re actively pushing the boundaries of how we approach the visual asset creation of our websites — crafting more and more of the assets as vectors (in line with vector-first design), judiciously employing typography, and experimenting with delivery methods for high-resolution bitmap assets. Our transition towards resolution-independence is ongoing as we keep discovering exciting new details — creating pixel-perfect icon fonts in Adobe Illustrator! New JPEG compression algorithms!
There’s a whole realm of technical web design knowledge that continues to reveal itself as we round each bend. We're having fun discovering all the ways in which we can further hone and perfect our process, and we'd love to hear how other people are solving the same problems.
Citations:
1. A Dao of Web Design: http://alistapart.com/article/dao
2. HTML Standard: https://html.spec.whatwg.org/multipage/embedded-content.html
Today I’ll be writing about resolution-independence: designing websites with accessible, legible, crisp, usable layouts on devices of any physical dimension and screens of any resolution density. There are two main components to resolution-independence: the question of whether the layout is appropriate for the frame in which it’s being presented, and the resolution of visual assets — icons, photography, illustrations, and typography.
Knowing our history: from fixed frames to responsive layouts.
Historically, websites have been designed as “fixed frames” — a static layout that was designed for a single screen size. Web designers strove to make this layout look exactly the same on every browser, necessitating a vast number of hacks and polyfills to work around the quirks of each browser’s rendering engine. Designing a single, pixel-perfect layout mimics the world of print, where designers create a layout that’s proportioned perfectly for a specifically-sized sheet of paper. This approach made sense for a handful of years, when the internet was dominantly accessed using desktop computers with monitor resolutions that only ever got bigger — but as mobile phones have become ubiquitous and smaller viewports (as well as higher-density displays — such as Apple’s “Retina display”) entered the picture, fixed-frame design became obsolete: it is no longer possible to design a single fixed-frame website that looks good for most of the people viewing it.
Web designers have been considering how best to approach the problem of variable screen dimensions at least since John Allsopp’s 2000 article “A Dao of Web Design”(1). In those days, adaptive layouts represented the current thinking about designing universally accessible websites; from a technical standpoint, Allsopp focused on specifying margins, page-width, and typography in percentages rather than as absolute values (e.g. 14pt). Other approaches have come and gone since the days of designing adaptive layouts. For a while we experimented with splitting our efforts and creating separate mobile sites, but the limits of this approach became apparent in the excessive amount of development effort necessary to create a separate page and the frustration of users caused by the often-anemic content presented on mobile-only sites.
Responsive website design.
As you probably know, responsive website design is the latest and greatest approach to custom-designing layouts that are effective and resolution-independent for devices of any size. Responsive layouts are typically built on a flexible grid that adapts to the constraints of the device. For instance, a desktop computer might see the website’s layout spread across nine columns, while a mobile phone would collapse the same information into one or two columns in deference to the limited horizontal screen dimensions.
Responsive design’s escape from the confines of a given resolution involve a lot of thoughtful planning and defining of “breakpoints” — specific resolutions at which the number of columns shifts and the content re-flows into a different layout. This is one way in which responsive design focuses on prioritizing content over presentation: although fixed-frame layouts encouraged designers to create pixel-perfect presentations, layouts that shift the presentation of the content require web designers to organize content and define clear hierarchies so that important things come first, related information is always grouped together, and information is presented clearly. This is a big win for usability.
* * *
Visual assets: looking sharp at any size.
Visual assets can be divided into two categories: bitmap and vector. Bitmap (also known as raster) images are defined by grids of individual pixels. Bitmaps are best used to present extremely detailed imagery: photographs, for instance, are always presented as bitmap images. The problem with bitmap images in web design is that high-resolution bitmap images have correspondingly large file sizes and can take an exorbitantly long time to load — especially tedious when mobile users aren’t even able to enjoy the full resolution.
Vector images are shapes defined by mathematical curves that look crisp at any resolution — typography being the most notable example. No matter how many times you zoom in, the edges of a typeface’s letters will always look perfectly sharp.
Vector-first design.
Because vector images are inherently resolution-independent, and because their file-sizes at high resolution are so much smaller, vector-first design is emerging as a usability philosophy: whenever possible, design visual assets as vectors. Often this means a greater reliance on typography — choosing beautiful, functional type to serve as the core of the layout.
Shapes with simple geometry — rectangles, circles, and ovals, to name the obvious, can be defined as pure CSS, which delivers the best performance for vector shapes and gives us code hooks to create beautiful transitions that morph the shape of the object during an interaction.
Shapes with more complex geometry, from icons to illustrations, can be created as SVG (scalable vector graphics) or as icon fonts, each of which has its advantages and limitations. At JTech, we’ve focused on using icon fonts, which perform better in most browsers but are limited to a monochrome color palette. SVG is finally enjoying wide browser support as well, but still lags behind icon fonts in page-load and rendering performance. As SVG performance gets better, we look forward to adopting it for multi-color icons and illustrations on our websites — this will open up a whole world of visual possibilities.
Images with blurs, glows or drop shadows do not perform well as SVG files — in fact, those effects are typically stored as bitmap data within the SVG. These effects are in the same camp as highly-detailed photographs; the best approach is still to deploy them in a bitmap format such as PNG or JPG.
A few final words about bitmap images in responsive and resolution-independent design: Although vector-first design discourages us from using bitmaps, there’s something tangible and beautiful about photography — particularly large-scale photography — that cannot be replaced by carefully-crafted vector shapes. A new HTML standard is being developed for a <picture> tag(2) that will load an appropriately-sized image resource based on the screen pixel density, viewport size, and other factors. In the meanwhile, our Montana web development team is experimenting with techniques for presenting beautiful bitmap images with small enough file sizes to load on any device. The most successful method we’ve explored thus far involves extremely high-resolution images that have undergone heavy compression — offering a level of detail that looks good at high resolution and a small enough file size to tolerate on small screens and slower internet connections.
How JTech approaches resolution-independent design.
We’ve decided that responsive website design is currently the right approach to create websites that are resolution-independent, effective and accessible on all devices. Our Montana website design team developed our own custom responsive framework, which we’ve deployed on our own site and client sites: NRTRC, HRSG User’s Group, Next FX, and J.K. Adams, to name a few. Our framework gives us control over breakpoints, transitions, and very granular access to content grouping and hierarchy. We’re happy with the way this has allowed us to build advanced websites that are usable, beautiful, and device-agnostic.
As web designers and developers, we’re actively pushing the boundaries of how we approach the visual asset creation of our websites — crafting more and more of the assets as vectors (in line with vector-first design), judiciously employing typography, and experimenting with delivery methods for high-resolution bitmap assets. Our transition towards resolution-independence is ongoing as we keep discovering exciting new details — creating pixel-perfect icon fonts in Adobe Illustrator! New JPEG compression algorithms!
There’s a whole realm of technical web design knowledge that continues to reveal itself as we round each bend. We're having fun discovering all the ways in which we can further hone and perfect our process, and we'd love to hear how other people are solving the same problems.
Citations:
1. A Dao of Web Design: http://alistapart.com/article/dao
2. HTML Standard: https://html.spec.whatwg.org/multipage/embedded-content.html
About Felix Wolfstrom
Felix Wolfstrom has 13+ years of experience in human interface design. He currently serves as JTech’s Senior Designer. Felix’s experienced approach to web design guides every website JTech creates. He focuses on useable, meaningful design that doesn’t compromise on aesthetic value.
More articles by Felix: Dark Patterns in Design | 17 UI Tips for Designing Mobile-Friendly Websites | JTech Brand Evolution