The advancement of smartphones and other mobile devices have further improved the quality of mobile web development. Now, it’s possible to generate entire web applications using only HTML5 and CSS3 techniques. Combined with many JavaScript libraries, the possibilities for mobile development are virtually endless.
In today’s article, we have put together 10 great resources for developing mobile websites and web apps. This collection is more on HTML5, CSS3 and JavaScript web apps, as opposed to frameworks or native applications. Check them out to see what speaks to you best!
jQuery NiceScroll
This cool plugin is perfect for mobile web developers. It will add native scrolling bars into any element of your choice. These are much better than the Mobile Safari toolbars which extend up into the browser header.
Android Interface GUI
Android Interface GUI is one of the best mobile elements related to Android-based native applications. Depending on how you want to style your mobile web app, these graphic packs will provide everything you need. Sticking with simple, basic styles will make your designs appear more blended into the device.
Fresh iPhone UI Kit
The folks over at MediaLoot publish both free and premium content. However, they have a lot of free content with exceptional quality. Fresh iPhone UI Kit, for example, displays a helpful iOS app design. You can work with the PSD graphics to duplicate similar title bars and gradients/textures in your own web app.
iOS 6 GUI PSD
This mobile GUI kit by Teehan+Lax is a popular resource for all mobile developers. Even native iOS programmers really enjoy this mobile kit for the precision of each element. All of the buttons, gradients, drop-downs, and menus look exactly as they would on a native iPhone 5.
HTML5 Mobile Web Applications Videos
Treehouse is a fresh and popular online learning library that helps web developers pick up new skills. Their video library includes HTML5, CSS3, jQuery, and even Objective-C programming. This page in particular handles HTML5 development for mobile web apps. Check out some of the features to see it you’d be interested in studying any of the topics they cover.
Free iOS TabBar Icons
This is a series of amazing iPhone toolbar app icons. When redesigning your ideas for an iPhone UI TabBar in HTML5/CSS3, it may require a lot of extra time debugging and fixing UI in different browsers. But with such powerful interface features, it will be worth the effort.
Tooltip iOS App UI
Menu tooltips may not be too common, but this doesn’t mean they serve no purpose in an HTML5 web app. The icons and button styles may be repeated either through images or CSS3 codes. The Tooltip iOS App UI will give you a leg-up on the competition, with its rich interface style.
Manymo
Manymo is a great online tool for emulating mobile browsers. You can double-check if your web applications are behaving properly even without owning the original devices. The basic services are free to use and provide satisfactory results.
@2X Navbar
Another not-so-common element is the tabbar found on many iOS applications. Mobile websites don’t often have a means of using this properly since the switching between pages would require some JavaScript. But if your heart is set on it, you’ll be providing a more native feel to the app. By using this free PSD, it’ll be much easier for you to customize the gradient and icons.
MFG Labs Icon Set
The MFG Labs Icon Set has an excellent track record of releasing freebies into the web design community. The landing page really pops out as you can see how these icons may be placed into a typical layout style. Grab a free download of this pack and experiment in your own time!
