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.
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.
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.
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.
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.
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.
iOS Webapp Bookmark Reminder Bubble
Sexy iOS Webapp Bookmark Bubble
Definition List UI
iOS-Style Sliding Nav Menu
Flat Mobile Portfolio
iOS7 Style Switches
Sticky Header Sections
Android Address Book
Mobile Twitter Login Form
- Mobile HTML5 Boilerplate
- Building an Offline Mobile Web Application
- Getting Started with jQuery Mobile
- Create An HTML/CSS Mobile Web App Using Sencha Touch
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.
- Little Things That Hamper the User Experience
- Why Thinking Ahead Is Crucial in Web Design
- Why Is Microsoft Edge Adding Its Own UI to Websites?
- Tips for Building Charity & Non-profit Websites
- 10 Methods for Optimizing Your Forms for Mobile
- The Challenge of Designing Websites for Large Screens
- Web Designers No Longer Need to Sacrifice Performance for Beauty
- Critical Info: The Story Behind Building a Government COVID-19 Website
- How Are In-App Gestures Shaping User Experience?
- What COVID-19 Vaccine Scheduling Can Teach Designers