011 027 5098 | 079 157 2902
  • About Us
  • Blog
  • Support
  • Contact
BP Web DesignBP Web DesignBP Web DesignBP Web Design
  • Home
  • Websites
  • E-commerce
  • Custom Design
  • Hosting
    • Web Hosting
    • Virtual Private Servers
    • Dedicated Servers
    • Reseller Hosting
  • Corporate Branding

UX Design for HTML/CSS Mobile Web Applications

    Home Uncategorized UX Design for HTML/CSS Mobile Web Applications
    NextPrevious

    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.

    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

    • Mobile HTML5 Boilerplate
    • Building an Offline Mobile Web Application
    • Web-based Mobile Apps Using HTML5, CSS, and JavaScript
    • 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.

    No tags.

    Leave a Comment

    Cancel reply

    Your email address will not be published. Required fields are marked *

    NextPrevious
    Copyright 2019 BP Web Design | All Rights Reserved. A BP Web Group Company
    • Home
    • Websites
    • E-commerce
    • Custom Design
    • Hosting
      • Web Hosting
      • Virtual Private Servers
      • Dedicated Servers
      • Reseller Hosting
    • Corporate Branding
    BP Web Design