Being connected to the Internet at any given moment with a full web browser is really a factor that helped propel the iPhone's massive popularity. While browsing on a mobile device wasn't exactly a new concept when the phone first released, no manufacturer had ever put together such a smooth experience.
This power web browser was built on Apple's Web Kit rendering engine, which provided an experience similar to what was possible on Safari for OS X. Rich web content was already available out of the box and with a bit of code modification, any website could be optimized for the small screen.
In compiling the first public version of the iOS SDK, Apple gave the developers access to Web Kit through a Web View. In this recipe, we'll discuss different ways to go about including Web Views inside our application.
For this application, we should have access to mobile Safari on our iPhone or iPad device.
The mobile Safari browser built with Web Kit may have been one of the most significant aspects of the first iPhone release. With mobile Safari, Apple built the most complete and feature packed web browser ever to exist on a phone. Without modification, millions of websites were available as they were intended to be viewed and not in a stripped down mobile shell.
In developing the iOS SDK, Apple wisely included easy access in the same Web Kit rendering engine for use inside our applications. Using code to include a Web View in our app, gives a completely contained web engine that allows us to render HTML or load an external web page inside our application.
Web Views can be used in one of two ways inside our application. Let's take a look at the different ways in which we can use this view:
- To display local HTML code: First, we could use the view to display local HTML information stored inside of our application. This can be useful for rich text information, such as an acknowledgements page.
When propagating our application with data and text inside of a Web View, we can use common HTML page formatting to structure our work. Using common tags, we can make our text bold or italic and modify font color. Web Views can be a great tool for designers new to iOS, as HTML formatting is more common and could be more familiar to those migrating from web design.
- To display an external web page within our application: The second use of a Web View would be to use the view as a way to let our user navigate to a web page without leaving our application. For example, we may create an application that allows a user to quickly find local restaurants. By integrating a Web View, we can give our user the opportunity to view a restaurant web site quickly without ever leaving the application.
Tip
This ability may be the most beneficial use of a Web View from a design perspective that allows us to give our user the ability to quickly surf the web while remaining inside of our application.
By integrating a Web View in our application, we're able to capitalize on Apple's powerful Web Kit rendering engine to provide a dynamic app experience.
Being built on top of the Web Kit rendering engine, Web Views allow us to include an extensive range of web technologies natively into our application.
When we implement a Web View into our application, we should be aware that our app will perform much like we're writing code for the Web. HTML will render accordingly, text will format like in a browser, and our application will work much like having Safari embedded into our work. It's also important to note that the Web View will also automatically turn information such as a phone number into a link that will dial the number in the phone application as well.
The view also gives us the great ability to offer access to websites without pushing the user of our app. Twitter for iPhone uses a Web View for a similar purpose, allowing users to view links included within tweets without ever being kicked out to the actual Safari application. As shown below, this keeps the user from the frustrating experience of frequently switching applications while still offering a full web experience.
For developers looking to bring their existing web application to iOS, or for designers looking to pull from their previous knowledge of HTML, the Web View is a simple way for developers to expedite development and create quality applications.
Even though we're often integrating a Web View into our application and users will often be unaware that they're actually browsing a website, it's important to make the user feel natural while browsing.
If we integrate a standard Web View into the application, we also need to plan a way for the user to navigate through various web pages or web content. If we link to an outside website and the user is navigating, we'll need to design standard web controls into our Web View interface.
At the bare minimum, we need to integrate a way to move back and forward through web pages along with a button to go back into our application if we're pushing the user onto a page on the Internet. These functions should work identically to back and forward buttons found on a standard web browser.
If we have space and capability, adding email functionality for a web address may be another worthwhile feature to include into our Web View as well. If the user finds an interesting page while inside the view, they'll need a way to share it with friends. Because there is no built-in address bar in a Web View, an email function is an easy way for the user to get the link to the page they're viewing while inside of our application.