What to display in mobile app web view when the URL won't load

I've done some quick analysis of existing applications to see what they do in such a situation.

• Facebook - Red message saying 'no internet connection'

• Vine - Greyscale sad smiley saying 'couldn't load posts'

• Safari - Greyscale icon saying 'cannot open the page because your iPhone is not connected to the Internet

• Flipboard - Empty (Grey) containers with 'No Content' written in them

• Engadget app - shows grey panel with 'Internet is Unavailable' message

• Alien Blue - Red message overlayed saying 'please check your internet connection'

• Met Office App - Red ! and message saying 'Failed to update due to a problem with the network connection'

Some info taken from this analysis:

1. Don't try to load something that you know won't display. That's wasting users time. If the app has no use at all without internet connectivity then tell them so. However tell them as accurately as you can why this is the case. (The Vine and Flipboard examples above aren't really much help. 'No Content' is mostly obvious, but if it were to say 'No Content because there is no internet connectivity' that would be more useful to the user)

2. Give the user some feedback as to what is wrong and how to rectify this (all the apps tested on iOS popped up an OS message suggesting I check my WifI / Airplane mode).

3. Use colour (sparingly) as additional feedback - many of these apps used Red as an indicator, and also others used plain grey backgrounds or images to signify the 'inactive' nature, while presenting the feedback information. However don't rely 100% on colour as the only feedback, use colour to enhance the message but don't assume everyone sees colour the same as everyone else.

In cases like this: be as specific as you can. If you know (you're app that is) there is no internet connection - tell the user that the phone isn't connected to the internet or that internet connection has been switched off or you're currently in Airplane mode.

The more information you can give to the user - the better. Then you leave it up to the user to correct what is wrong like finding a spot where internet is available, switching 3G back on or turning off Airplane mode to use your app again.

You should try to give a user as much useful information as you can. "Page can't load" isn't nearly as useful as "There is a problem connecting to the internet" or "Our servers are down".

In general you should give information about what the problem is, and provide users with options of what they can do (if anything) about it.

Now if you're opening an app web view, you may not have any easy way of doing this. How you can do it becomes a technical question and outside the scope of this site. But I would look into trying to determine whether there is an internet connection before I display the web view. That way you haven't offloaded the handling to the browser yet and have more control over what you display.