Developer Tips for Designers: Scaling & Gradients
There was once a time when I spent equal time designing and developing. Nowadays though, I'm almost 100% developer and the designs come to me (by some unholy magic I assume). In a lot of ways it's nice to be able to focus on developing and let someone else be creative with the visuals. Coming from both a design and development background has it's advantages though; developers are the guys who's job it is to turn great designs into standardized web compliant code and we have knack for spotting bottlenecks in design. Our unique perspective gives us an uncanny ability to predict if a design will translate into a slow loading page or if it'll have problems scaling. If all designers were also developers (with a wicked visual arts talent) we'd be a little closer to world peace... or at least "office peace". This is unrealistic, but teaching designers some key developer concepts is totally doable and is what I'll attempt to do in this article.
I'll be focusing on two common bottlenecks in web design: gradients and scaling. These two are not necessary independent issues and can overlap (chuckle). Inside joke revealed when one finishes reading this article.
Scaling
It would be pretty strange if Picasso's canvas suddenly grew ten times taller or shrank to half the height whilst he was in the middle of painting Three Musicians. But that's exactly what happens on the web. Our canvas is the browser and that browser can look a hundred different ways on a hundred different computers. (Actually, it's more like billions of computers and a plethora, but you get the idea.) Interestingly enough there are still designers who are oblivious to this. Don't worry designers, I'm not going to slap you on the wrist, you're already on the right track if you're reading this article. Consider these statistics for browser resolutions over the last decade. (Taken from w3schools.com )
According to this data, the current trend points to most users using displays set to 1024x768 pixels or higher. What's interesting to notice though is not too many years ago, 800x600 pixels was the De facto. Even though the current trend is a large majority, it's important to consider that minority with lower resolutions. How important are these people to you? If you're demographic is the elderly or visual impaired, then that number is very important to you as they constitute for most of the minority. On the flip side, what might you're design look like in ultra-high resolutions; maybe it's difficult to read text or your non-repeating background exposes some details that would otherwise be hidden at lower resolutions. To be extra sure that you’re designing with your demographic in mind, you’ll want to pay attention to your own demographic statistics instead of relying on generic web stats. If you’re designing for a brand new site, you may not have the benefit of visitor statistics and may have to rely on what you know about your audience already, or keep general best practices in mind. If you’re designing for a site that has been around for a while, take a look at the resolution statistics being used by your visitors. If you don’t have this data available, talk with Intoria about setting up an SEO starter kit on your site so that over time you’ll be armed with tons of visitor and traffic information that you can use in improving your site.
Equally important is what portion of the design will users experience without scrolling. By it's very design, content on the web is meant to be experienced from top to bottom and content that extends past the vertical resolution of the screen is accessed by scrolling down. Important content should exist in this top portion that is visible without scrolling. This "top portion" or "sweet spot" is equal to the height of our minimum resolution demographic as determined by the designer. For example, if we've determined a large portion of our audience will be entering our site at 800x600 pixels then our sweet spot is 550 pixels from the top our our design. This is taking into account that browser UI occupies some of that space as well.
Most designers don't throw together web designs that are 3000 pixels tall, usually they're the height of standard monitor's resolution. Sometimes these designs incorporate elaborate graphics on the header and footer that when 600 pixels apart look great but when 3000 pixels apart start looking out of place or loose their balance. It's important to stay away from relying on visual balance between elements that may be separated when a page grows. It is also important consider what a page might look like with very little content - when it shrinks. It's not as common, but sometime a client will request a page with a single line of text or more commonly a page that displays a 404 error situated nicely within your design. Instead of being too distant, these situations can create opportunities for elements to collide. In such a situation elements will pass over or under one another in respect to their position in the z-index stack. Alternatively colliding elements may stop a design from collapsing and create unwanted whitespace.
Gradients
Gradients will almost always translate into a repeating background and it is important that they do for the sake of speed. With respect to loading times, it is never economical to load large images, especially images that incorporate gradients since they posses more colours and therefore translate into larger file sizes.
To illustrate a common issue with gradients lets image a page design with a background that is a repeating horizontal gradient. In Photoshop, this design looks real good, but when we start populating it with real world content suddenly things aren't so pretty. For starters, all images within the content now have sharp borders; whereas with a solid background colour, images with the same background colour could blend seamlessly. Now, things would look a lot better if we used transparent .png's, but seeing how Internet Explorer 6 (which does not support transparent .png's) still constitutes for a significant audience this may not be an option for you. Alternatively we could use transparent .gif's, but these too are not ideal as they often leave annoying artifacts along the edges. The best solution is to imagine what your content might look like on top of your gradient - If you don't like how it looks, consider adding a solid background to you content block and have the gradient fall behind that. Again, this is a design issue and designers need to be making these decisions, not developers.
Let's also imagine a design that has a vertical gradient at the top, starting from black and then transitioning into white for the body of the design. But wait, there's more. At the bottom of the design there is another gradient transitioning from the white body colour to a royal blue. The desired effect is achieved when the design is 600 pixels or more tall, any smaller than this the two gradients begin to collide and suddenly what was intended to be a soft transition is now quite the opposite. See figures A and B.
This can be avoided in development with minimum height restrictions BUT it is most important that designers be made aware of this when attempting to create fluid designs. It is a designer's responsibility to express such restrictions to developers. Far too often developers are faced with making these types of design decisions later in development because designers haven't described the intended scale limits of their design.
Hopefully someone has been enlightened by this article. At the very least, I hope that designers have some sense of the dilemma developers sometimes face with their designs. Developers should not be making design decisions and designers need to define the boundaries which help them maintain design control over brands their creating.
For any artist it is essential to learn your medium and in the case of the web the medium is the browser. Imagine your designs as dynamic interactive art. Consider that your audience is constantly touching, moving, scaling, and playing with it. Think about how your canvas changes and how the environment effects the appearance of your design.
What we've learned
I'll be focusing on two common bottlenecks in web design: gradients and scaling. These two are not necessary independent issues and can overlap (chuckle). Inside joke revealed when one finishes reading this article.
Scaling
It would be pretty strange if Picasso's canvas suddenly grew ten times taller or shrank to half the height whilst he was in the middle of painting Three Musicians. But that's exactly what happens on the web. Our canvas is the browser and that browser can look a hundred different ways on a hundred different computers. (Actually, it's more like billions of computers and a plethora, but you get the idea.) Interestingly enough there are still designers who are oblivious to this. Don't worry designers, I'm not going to slap you on the wrist, you're already on the right track if you're reading this article. Consider these statistics for browser resolutions over the last decade. (Taken from w3schools.com )
| Date | Higher | 1024x768 | 800x600 | 640x480 | Unknown |
|---|---|---|---|---|---|
| January 2009 | 57% | 36% | 4% | 0% | 3% |
| January 2008 | 38% | 48% | 8% | 0% | 6% |
| January 2007 | 26% | 54% | 14% | 0% | 6% |
| January 2006 | 17% | 57% | 20% | 0% | 6% |
| January 2005 | 12% | 53% | 30% | 0% | 5% |
| January 2004 | 10% | 47% | 37% | 1% | 5% |
| January 2003 | 6% | 40% | 47% | 2% | 5% |
| January 2002 | 6% | 34% | 52% | 3% | 5% |
| January 2001 | 5% | 29% | 55% | 6% | 5% |
| January 2000 | 4% | 25% | 56% | 11% | 4% |
According to this data, the current trend points to most users using displays set to 1024x768 pixels or higher. What's interesting to notice though is not too many years ago, 800x600 pixels was the De facto. Even though the current trend is a large majority, it's important to consider that minority with lower resolutions. How important are these people to you? If you're demographic is the elderly or visual impaired, then that number is very important to you as they constitute for most of the minority. On the flip side, what might you're design look like in ultra-high resolutions; maybe it's difficult to read text or your non-repeating background exposes some details that would otherwise be hidden at lower resolutions. To be extra sure that you’re designing with your demographic in mind, you’ll want to pay attention to your own demographic statistics instead of relying on generic web stats. If you’re designing for a brand new site, you may not have the benefit of visitor statistics and may have to rely on what you know about your audience already, or keep general best practices in mind. If you’re designing for a site that has been around for a while, take a look at the resolution statistics being used by your visitors. If you don’t have this data available, talk with Intoria about setting up an SEO starter kit on your site so that over time you’ll be armed with tons of visitor and traffic information that you can use in improving your site.
Equally important is what portion of the design will users experience without scrolling. By it's very design, content on the web is meant to be experienced from top to bottom and content that extends past the vertical resolution of the screen is accessed by scrolling down. Important content should exist in this top portion that is visible without scrolling. This "top portion" or "sweet spot" is equal to the height of our minimum resolution demographic as determined by the designer. For example, if we've determined a large portion of our audience will be entering our site at 800x600 pixels then our sweet spot is 550 pixels from the top our our design. This is taking into account that browser UI occupies some of that space as well.
Most designers don't throw together web designs that are 3000 pixels tall, usually they're the height of standard monitor's resolution. Sometimes these designs incorporate elaborate graphics on the header and footer that when 600 pixels apart look great but when 3000 pixels apart start looking out of place or loose their balance. It's important to stay away from relying on visual balance between elements that may be separated when a page grows. It is also important consider what a page might look like with very little content - when it shrinks. It's not as common, but sometime a client will request a page with a single line of text or more commonly a page that displays a 404 error situated nicely within your design. Instead of being too distant, these situations can create opportunities for elements to collide. In such a situation elements will pass over or under one another in respect to their position in the z-index stack. Alternatively colliding elements may stop a design from collapsing and create unwanted whitespace.
Gradients
Gradients will almost always translate into a repeating background and it is important that they do for the sake of speed. With respect to loading times, it is never economical to load large images, especially images that incorporate gradients since they posses more colours and therefore translate into larger file sizes.
To illustrate a common issue with gradients lets image a page design with a background that is a repeating horizontal gradient. In Photoshop, this design looks real good, but when we start populating it with real world content suddenly things aren't so pretty. For starters, all images within the content now have sharp borders; whereas with a solid background colour, images with the same background colour could blend seamlessly. Now, things would look a lot better if we used transparent .png's, but seeing how Internet Explorer 6 (which does not support transparent .png's) still constitutes for a significant audience this may not be an option for you. Alternatively we could use transparent .gif's, but these too are not ideal as they often leave annoying artifacts along the edges. The best solution is to imagine what your content might look like on top of your gradient - If you don't like how it looks, consider adding a solid background to you content block and have the gradient fall behind that. Again, this is a design issue and designers need to be making these decisions, not developers.
Let's also imagine a design that has a vertical gradient at the top, starting from black and then transitioning into white for the body of the design. But wait, there's more. At the bottom of the design there is another gradient transitioning from the white body colour to a royal blue. The desired effect is achieved when the design is 600 pixels or more tall, any smaller than this the two gradients begin to collide and suddenly what was intended to be a soft transition is now quite the opposite. See figures A and B.
This can be avoided in development with minimum height restrictions BUT it is most important that designers be made aware of this when attempting to create fluid designs. It is a designer's responsibility to express such restrictions to developers. Far too often developers are faced with making these types of design decisions later in development because designers haven't described the intended scale limits of their design.
Hopefully someone has been enlightened by this article. At the very least, I hope that designers have some sense of the dilemma developers sometimes face with their designs. Developers should not be making design decisions and designers need to define the boundaries which help them maintain design control over brands their creating.
For any artist it is essential to learn your medium and in the case of the web the medium is the browser. Imagine your designs as dynamic interactive art. Consider that your audience is constantly touching, moving, scaling, and playing with it. Think about how your canvas changes and how the environment effects the appearance of your design.
What we've learned
- Your minimum resolution is of maximum importance.
- Make sure the main elements of your design fall inside the "sweet spot," but give attention to what's "below the fold" as well.
- A painters canvas doesn't change shape or size, but yours does. Understand your medium.
- Gradients can create subtle transitions that are really pleasing to the eye yet can present potential design disasters if used inappropriately.
- It is a designer's responsibility to consider all design effecting scenarios
- Both developers and designers can stand to learn a little from each other
posted by Joel Funk
at
12:52 PM
1 Comments :
Great comment Joel. Excellent insights.
Post a Comment