25

We're building a mobile web site that will mainly be used outdoors in bright sunlight. What design factors should I consider?

Improve this question
13
  • 3
    Honestly, this should be a consideration for any mobile website because you just can't know up front where someone will use your site and what conditions they may face, even indoors.
    – Rahul
    Jan 9, 2012 at 14:26
  • 4
    @Rahul You should know your customer base to some degree. Do you consider how easy a button is to select when my fingers are frozen due to me sitting at a bus stop in 0F weather and my gloves are the size of my shoes? The belief of design for everything always feels like a scholastic answer IMHO. Know your customer base and usage situations or you're shooting in the dark; the 80-20 rule.
    – Aaron McIver
    Jan 9, 2012 at 15:05
  • 2
    @Rahul it should be a consideration but in this case it's a driving focus of the design.
    – Ben Brocka
    Jan 9, 2012 at 15:12
  • Give it a kindle look.
    – b01
    Jan 9, 2012 at 15:32
  • 1
    b01 - Is that a serious answer?
    – Tony Bolero
    Jan 9, 2012 at 15:58

4 Answers 4

Reset to default
12

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.

Improve this answer
2
  • Really though... this is just good general advice. Why do we need special sunlight-only advice? Are we designing for vampires?
    – Rahul
    Feb 9, 2012 at 0:58
  • @Rahul it's sensible advice specified for the usecase. Low contrast, too much text and not enough interdevice testing are general problems, but in this domain they're more important than usual. The sun is a powerful foe to LED visibility.
    – Ben Brocka
    Feb 9, 2012 at 14:20
7

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.

Improve this answer
2
  • 8
    I'm the designer behind Solarized. As you noted, it's not high contrast (intentionally). It is possible to create a high contrast mode in Solarized (there are some options for that in the Vim mode already) by using the distal values for background/foreground. The light mode of Solarized was definitely tested in outdoor, bright sunlight and is the mode I use when working outdoors (though in Seattle outdoors in the daytime may be less well illuminated than interior spaces, sigh).
    – altercation
    Jan 9, 2012 at 20:19
  • 2
    +1 for pointing out that Seattle outdoors is usually screen-friendly. ;)
    – DA01
    Jan 9, 2012 at 21:20
5

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
Improve this answer
6
  • Many of these items you list are adjustable within a device like the Kindle. Be careful, assuming one flavor is sufficient for all may not in fact be the case. Make it adjustable if you can; coloring schemes, font adjustment, etc...
    – Aaron McIver
    Jan 9, 2012 at 15:22
  • 1
    @AaronMcIver: Kindle is a different type of screen than mobile phones. Certain mobile design paradigms don't apply to it.
    – dnbrv
    Jan 9, 2012 at 15:40
  • Aaron - Thanks for the tip but I dont think it should be necessary to let the users adjust the parameters because they will not have the interest. I'm looking for a solution that is the most optimal for the majority of them.
    – Tony Bolero
    Jan 9, 2012 at 16:01
  • @dnbrv Agreed, however adjusting contrast, font size, etc... has been around before mobile and the Kindle. Certain paradigms transcend device type IMHO.
    – Aaron McIver
    Jan 9, 2012 at 18:54
  • @TonyBolero They won't have interest? If they can't see your site due to the sunlight they will.
    – Aaron McIver
    Jan 9, 2012 at 18:55
2

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].

In general:

  • 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.


Under sunlight:

  1. Black on white will appear dark grey on white (high contrast).
  2. Dark grey on white will appear bright grey on white (low contrast).

  3. White on black will appear white on dark grey (high contrast).
  4. Light grey on black will appear white on dark grey (high contrast).


Under even brighter sunlight:

  1. Black on white will appear bright grey on white (low contrast).
  2. Dark grey on white will appear white on white (no contrast).

  3. White on black will appear white on bright grey (low contrast).
  4. 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).

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.