We're building a mobile web site that will mainly be used outdoors in bright sunlight. What design factors should I consider?
Some of the most important things are going to be high contrast, large text and dark on light design.
Some good examples of high contrast designs are here on Web Design Guru Blog. They have some nice color examples but remember to keep it minimalist.
Keep your text large to keep it readable and force yourself to cut out as much text as possible. Keep the interaction areas (buttons/links) large to make it easy for people to press them, keep the boundaries of such elements very clear so they can be seen.
Dark text on a light background will be important; brightness is the key to overtaking the sun on most smartphone models.
Most importantly: test your design on multiple leading smartphone models. To get a quick impression of some differences, see this video showing smartphone screen comparisons in direct sunlight.
Don't just test the iPhone 4S, the Galaxy Nexus and call it quits. Test the most popular (not the most high-tech) models of a variety of devices to see how well you can see the display in direct sunlight.
Have real users test the site on a sunny day in direct sun; they'll be able to tell you if your site is reasonably readable. Try a couple different models of phone as well if possible. You or your design team will know what they're looking for on the site and be able to parse things a new user might not. A fresh look is important.
This peculiar effect that appears with direct-sunlight is solarisation. It's also what happens to "old" plasma TVs if you see them from an angle.
Solarized, a sixteen color palette, has been scientifically designed and tested "in a variety of lighting conditions" to achieve, among other properties, selective contrast:
This may add some color to the already mentioned high contrast and big readable fonts recommendations.
These are valid for any website, especially on mobile devices and even more so outdoors:
|show 1 more comment|
Regarding the colors and the contrast...
The contrast equation is: contrast = (L1 + 0.05) / (L2 + 0.05) where L1 is the brighter of the two intensities and L1 and L2 are normalized to the range of [0,1].
You can see from points 1 & 2 vs. 3 & 4 of "under even brighter sunlight", that differing between shades is no longer possible and that bright text on dark background is preferable (the dark grey on white appears white on white and therefore is no longer readable).