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:
Solarized reduces brightness contrast but, unlike many low contrast colorschemes, retains contrasting hues (based on colorwheel relations) for syntax highlighting readability.
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:
- high contrast
- dark text on light background
- sufficiently BIG font size for the actual content
- don't be afraid of negative space. give your content some room.
- prefer readability over pretty looks
- make it fast or at least not unnecessarily slow
- think about position of the fingers when holding a mobile device when you place button, links and such
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].
- White on black vs. black on white result in the same contrast.
- White on grey vs. grey on white result in the same contrast.
- Gray on black results in better contrast than gray on white.
- Black on white will appear dark grey on white (high contrast).
- Dark grey on white will appear bright grey on white (low contrast).
- White on black will appear white on dark grey (high contrast).
- Light grey on black will appear white on dark grey (high contrast).
Under even brighter sunlight:
- Black on white will appear bright grey on white (low contrast).
- Dark grey on white will appear white on white (no contrast).
- White on black will appear white on bright grey (low contrast).
- Light grey on black will appear white on bright grey (low contrast).
You can see from points 1 & 2 vs. 3 & 4, of "under sunlight", differing between shades of bright text is harder, therefore, if you have multiple colors of text and it is important to be able tell them apart, then dark text on a bright background is preferable.
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).