Crea sito

Mobile Frameworks for User Interface Design

March 13th, 2012 by Villa Tommaso Leave a reply »

If you are working on developing user interfaces for mobile websites here you can find useful resources i have collected recently.
I will give you more options on how you can select better your templates and grid regarding the needs of your next web Mobile Project, after that i will list some Mobile WebSites useful for your inspiration and then on how to redirect your site to a mobile version through JavaScript. Let’s start!

jQuery Mobile Framework

jquery-mobile-framework1

A unified, HTML5-based user interface system for all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Its lightweight code is built with progressive enhancement, and has a flexible, easily themeable design.
The jQuery mobile framework allows you to design a single highly-branded web site or application that will work on all popular smartphone, tablet, and desktop platforms.

ThemeRoller for Mobile

ThemeRoller is a web-based tool that makes it super simple to create custom themes without writing a single line of CSS. There’s a inspector panel on the left of the screen that has all the theme settings, and a preview panel on the right that shows you in real-time each change you make. Once you create your masterpiece, you can share it via URL or download a ZIP file with your custom theme stylesheet, ready for production (or additional tweaking).

Codiqa – jQuery

jquery-mobile-framework1
Codiqa provides drag and drop building of mobile interfaces within their application, allowing you to rapidly prototype your mobile site interface quickly and easily using the underlying jQuery Mobile libraries. This lets your designer get on with shaping the mobile UX experience, without needing any level of programming prowess. Here you can find very inspiring Mobile Websites made by Codiqua.
Mobile UI Patterns is an other excellent resource for mobile user interface patterns. The examples don’t just show you how to design mobile interfaces one way, but many ways, so that you can find an approach that suits your application. Use these resources to help you design, and inspire you with ideas that you never had before. Let’s look up also this inspiring Showcase of 21 Creative Mobile Websites

Gridless

Gridless
Gridless uses mobile responsive web design to make itself working to the device’s width. It can support any browsers, from old feature phones, to newer smartphones, tablets, notebooks and bigger desktops. Gridless is an optionated HTML5 and CSS3 boilerplate for making also cross-browser websites with beautiful typography,it is extremely simple and straightforward and it’s meant to be a starting point, which should be edited, tweaked and overwritten to suit each project’s design requirements.

iUI web framework

iUI web framework
iUI is a lightweight open source Web application framework consisting of a JavaScript library, Cascading Style Sheets (CSS), and images for developing advanced mobile web applications (webapps).
The core code of iUI is lightweight, but a lots of plugins, extensions & themes. Offline cache, Google analytics, system informations, events logs, theme switcher, main mobile OS themes. See extensions & themes gallery.

Moably

moably
Moably’s first product is a Mobile Web Application Builder. This product allows anyone to develop a mobile version of their website or blog. After someone creates their mobile site using Moalby, all they need to do is copy and paste one line of code on their website’s homepage. Once they add this code, created by Moably, users that visit their site using a mobile phone (iPhone, Android, Blackberry, etc.) will be automatically directed to the mobile web application created by Moably.

How to redirect your site to a mobile version

After a research browsing in Google, i have selected the best tutorials to redirect your site to a Mobile Version. There are different options but these solutions seem the best for people who are not very confident with Javascript files.

  • How to Redirect Mobile Traffic Using PHP Mobile Browser Detection
  • How to redirect your site to a mobile version through JavaScript
  • Redirect Mobile Devices
  • Advertisement

    Leave a Reply

    *

    Powered by AlterVista