UX Design for HTML/CSS Mobile Web Applications

By kaimbi | Uncategorized | 0 comment | 25 October, 2013 | 0

Mobile iOS devices were a step towards popularizing the idea of web applications. Web developers could build pages with HTML meta tags creating app icons to be saved onto the homescreen. Modern JavaScript techniques are able to duplicate animations in combination with responsive web design.

For this article I want to go over some user experience trends for mobile webapps. These are commonly built for users on any mobile platform who would rather access the content over an Internet connection. Building a web application is also easier if you don’t wish to learn Objective-C or Java programming.

Common Usage

There are plenty of methods to build a single HTML/CSS web application from scratch. JavaScript is helpful when you need image galleries or dynamic menus. But there is certainly no requirement to use JS codes in your mobile project.

This example for the USCity website tries to access HTML5 data location from the browser. It is built using minimal CSS along with simplistic page elements. The design is honestly superb with their unique menu lists and icons. The photo gallery uses a plugin named Swipebox for mobile responsive images.

Now the website for Barista Prima is a great example of mobile responsive design. The user interface changes when you resize the browser and generally looks the same for mobile devices. Both tablets and smartphones provide a single viewing experience which is planned inside the website code. I like to contrast this example because it demonstrates how you don’t need to build just a web application.

In some instances this will be a smarter idea if your webapp needs to be seen like an application. But other times you may want to build an entire website that is also supported to behave like a mobile application. There are no rules or regulations when it comes to responsive updates. Do whatever you feel is right and do what will ultimately look best for your project.

Sencha Touch

I don’t often recommend libraries for web applications but Sencha is fascinating. The JavaScript is very complex but if you spend a couple weeks studying I guarantee you can learn the basics. Sencha Touch is a free library for building common UI components like data lists, tab bars, back buttons, and other similar ideas.

If you have the time I would recommend checking out the Sencha HTML5 gallery full of websites. Not all of these examples provide beautiful designs but they can demonstrate what is possible using this library. I have always loved Sencha Touch although it is fairly difficult to learn.

The online kitchen sink is like a tour of Sencha’s features. This online demo showcases almost everything you can do and the various components which may be coded into a webapp. If you are a JavaScript developer and want to try this out it may be worth your time. Getting started is rough but with some practice you can learn how to build thorough applications quickly.

One personal favorite example is the Railsberry website which was designed solely for mobile users. Unfortunately the conference has updated their website now, and the mobile app doesn’t work anymore. But you can see various shots on Dribbble which illustrate just how sleek this Sencha library can be.

jQuery Mobile

The other big mobile library I would recommend trying is jQuery Mobile. This is built on top of the jQuery foundation coupled with its own set of traits. This library adds effects onto HTML5/CSS3 elements which makes it so much easier to learn in comparison with Sencha Touch.

You will notice from the Benjamin Moore website that mobile webapp development can be very easy. These pages each load onto another page using a URL. This means it could require an Internet connection unlike some other local web applications. I really love this example because it provides all the features you would expect in a mobile app. And it even performs nicely on a wide desktop monitor too!

Another example of the jQM interface can be seen on the Visit Idaho website. They use brilliant textures and background imagery to blend into the concept of visiting their state. I really love the menus and graphics, which admittedly look a lot nicer on a mobile screen. These few webapps should give you ideas about how to implement the jQM library and what is possible with just a bit of HTML and CSS customization.

Free Graphics

Along with the examples above I want to showcase a large number of freebie graphics for mobile web design. Most of these graphics were designed for mobile apps native to Android or iOS. But obviously you can implement the graphics in HTML/CSS if you have the patience. They’re also perfect to construct a PSD mockup or wireframe in Photoshop.

iOS Mail App PSD

Noise UI Kit Freebie

Dark iPhone UI Freebie

iOS Chat Elements

iOS Sidebar Menu

10 Free Navigation Bars

deviantART Splash Screen PSD

Free Source Codes

Along with PSD graphics there are also lots of source code examples online. My favorite website to play with example projects is CodePen. The interface is magnificent and it’s so easy to fork your own copy of a project and mess around in the source. See if you can utilize any of these projects when crafting your own HTML/CSS webapp.