iWebKit framework: A sample project

· Tech · , , , , , ,

Last year I discovered the framework iWebKit and it instantly caught my attention due to it’s sleek design. iWebKit is a HTML/CSS framework used for mobile web design and it has it’s core design features from the iOS mobile operating system. The framework is well documented including a user guide and a nice demo.

Once I realized how easy it was to use iWebKit, I couldn’t resist trying to create a mobile web design myself using the framework. The “big” question was just “what to design”? After 30 minutes of brainstorming I ended up designing a mobile web page for a public transportation company in Bergen called Skyss. This is of course not official but rather an idea I had in mind.

When it comes to design, I have one philosophy and one only; make it clean and make it easy, especially if designing for mobile devices. The choice of colors is inspired from their own desktop web page, but the icons used from a company called Orangeriet. These icons are primarily used by Skyss, not in web design, but rather information booklets. Choosing well-known icons and color choice is far from a coincidence. Using familiar design elements ensures that the user will have far more smooth transition to a new type of user interface. With design in mind, I also implemented some basic functionality such as choice of multiple languages and basic navigation. The project was designed using Apache Tomcat server, Java Servlets for HTTP request/response, and Eclipse as an IDE.

How the mobile web page was tested:

Use “http://localhost:8080/projectname” as an URL in your mobile browser!

Sources

Design elements:

Technical elements:

Written by almirmesic · · Tech · , , , , , ,
NextWorking progress - The second month