UX Design for HTML/CSS Mobile Web Applications

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.

uscity fiddlefly mobile webapp design ui screenshot 2013

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.

barista prima homepage mobile webapp ui design

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.

sencha touch kitchen sink screenshot 2013 webapp

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.

benjamin moore paint webapp jquery mobile design interface

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!

visit idaho website mobile webapp jquery webdesign screenshot

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

ios mail app psd freebie graphics

Noise UI Kit Freebie

dark noise ui kit mobile app design

Dark iPhone UI Freebie

dark iphone psd ui kit freebie download

iOS Chat Elements

dark iphone ios chat messages interface psd

iOS Sidebar Menu

ios sidebar menu sliding navigation psd freebie

10 Free Navigation Bars

psd freebie dark ui navigation bars download

deviantART Splash Screen PSD

freebie psd ios app download deviantart splash homepage

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.

iOS Webapp Bookmark Reminder Bubble

bubble tooltip ios webapp bookmark codes

Sexy iOS Webapp Bookmark Bubble

yellow beautiful ui bubble save ios webapp

Definition List UI

ios style definition list user interface open source

iOS-Style Sliding Nav Menu

ios hidden sliding navigation menu design

Flat Mobile Portfolio

flat colorful mobile portfolio webapp open source

iOS7 Style Switches

animated colorful on off switches ios7 codes

Sticky Header Sections

sticky headers sections css3 web design open source

Android Address Book

simple flat android designed address book webapp

Mobile-Optimized Signup

mobile optimized signup form buttons minimal free codes

Mobile Twitter Login Form

mobile twitter login form inputs html5 css3 design

Related Links

The sphere of mobile Internet users is growing rapidly with no signs of stopping. As more countries around the world adopt smartphones it will be easier to access information than ever before. The official smartphone app stores are always a good choice, but there is nothing wrong with mobile web development. Sometimes it can be easier to launch a project on HTML/CSS/JS and I hope this article may spur ideas for any interested developers.

Author: (103 Posts)

Jake Rocheleau is a passionate web designer and social media entrepreneur. He is frequently researching the latest trends in digital design and new-age Internet ideas. He's also an advocate for the social media revolution - follow his updates on Twitter @jakerocheleau.

Comments