When creating websites, previewing them in different browsers to ensure that they are rendered correctly is a painful process. The same goes for the mobile websites. Many different browsers, models and sizes.
Mobilizer, a free Adobe AIR application, displays previews of any given URL or local files (HTML, image or Flash) inside multiple mobile devices.
It currently supports iPhone 4, Palm Pre, HTC Evo, + Blackberry Stormand more devices are to-be-added soon.
The previews doesn’t have to be one-by-one and each device-preview can be opened as separate windows for an easier comparison.
Also, the previews can be exported as .PNG files which is very handy.
Joshfire is an open source framework for developing web applications that can work in multiple devices.
It only uses HTML5 + JavaScript and web apps can be built to be compatible with browsers, desktops, smart phones, smartTVs and connected objects.
The content, design and data is separated for a flexible development process and the framework makes use of many popular resources like MediaElement.js or Zepto.js.
Currently, supported devices are desktop browsers, iOS, Android, GoogleTV, SamsungTV and there is an adapter for Node.js as well.
Applications can be controlled with keyboard, mouse, touch, tv-remoteand more depending on the capabilities of the device.
The library is improved continuously, documented in detail and comes with various examples.
leanModal is a lightweight jQuery plugin for displaying modal boxes with minimum effort.
The plugin doesn’t use any images and a very good solution for for displaying anything except image galleries as there is no built-in support for that. But that’s ok considering it only weights 780 bytes (when minified).
The width and height of the modal box is flexible and adjusts itself according to the content.
Multiple instances can be used on the same page and there are almost no settings or complicated usage instructions which is perfect for most cases.
Google has recently announced the launch of Google Swiffy which is a free to use web application for converting SWF files into HTML5.
It supports many common SWF features such as vector graphics, embedded fonts, images, timeline animation and basic ActionScript 2.0.
The output works only in WebKit browsers as it includes some SVG features that are not supported by other browsers.
The usage is very simple: just upload the SWF file and Swiffy will display the HTML5 result where you can “save as” the page and insert into any website with an <iframe> tag.
P.S. The code generated by Swiffy is pretty complex and hard to edit. You’ll still need the .FLA file for editing the source.
Developing mobile web applications is not so different and harder than developing standard websites. Even, considering the better support for the new HTML and CSS tags, it is sometimes easier.
However, debugging them is pretty hard as many features for that process doesn’t exist like viewing source code or JS errors generated by the mobile browser.
Socketbug, a remote debugging tool built with Node.js and Socket.io, brings a working solution to this issue.
It auto-determines what communication transport to use and enables your mobile application to send/receive messages from other connected devices (mostly mobile in this case) to your desktop browser.
The usage is not so complicated as well, you just need to setup theSocketbug server, connect to it (a console exists for connection) and insert a JavaScript code to your mobile application.
Kaiten is an impressive jQuery plugin for creating a flexible, simplistic and powerful browsing experience.
It helps quickly-building a column-based interface where each column can be a part of a sequence (like a breadcrumb navigation) and resized by the end-user.
The interface auto-arranges itself according to the browser-width by changing the number of the columns displayed. Simply, it will perform nicely on mobile and tablet browsers.
Kaiten can be extended very easily with its API. The plugin is also well-documented and comes with a demo that shows its features.
The plugin is included in a new web app platform named Officity and in alpha stage (yet very promising).
Requirements: jQuery
Compatibility: All Major Browsers
Website: http://www.officity.com/kaiten/
Demo: http://www.kaitenbrowser.com/
Download: http://www.officity.com/kaiten/download/
Tooltipsy is a jQuery plugin that provides a flexible base for creating tooltips.
Compared to other plugins, it comes with minimum default styles or animations but gives you the complete control over them.
It can be positioned however you wish, look and feel can be totally customized with CSS and any type of animations can be implemented.
There are also few settings like “the ability to aligning the tooltip according to the cursor or the element” and “its distance from them”.
Tooltipsy is very well-documented and a set of samples show the flexibility offered.
Requirements: jQuery
Compatibility: All Major Browsers
Website: http://tooltipsy.com/
Demo: http://tooltipsy.com/samples.html
Download: https://github.com/briancray/tooltipsy/archives/master
Perkins is a HTML5/CSS-powered framework for building websites quicker and easier.
It comes with a simple template which includes most of the supported tags and a set of LESS stylesheets + mixins for popular items like navigation, rounded corners, gradients and more.
All of the items (typography, forms, tables, buttons, etc.) are styled very nicely and there is a @font-face icon set included for instant-inline icons.
Compatibility: All Modern Browsers
Website: http://p.erkins.com/
Download: http://code.google.com/p/perkins-less/downloads/list
jRating is a very flexible jQuery plugin for quickly creating an Ajaxed star rating system.
It is possible to configure every detail from” the number of the stars” to “if the stars can represent decimals or not”.
There is also an option to display small or big stars and images can be changed with any other file easily.
Although the plugin can be used with any scripting language, a PHP file that handles the requests is already included in the download package.
Requirements: jQuery
Compatibility: All Major Browsers
Website: http://www.myjqueryplugins.com/jRating
Demo: http://www.myjqueryplugins.com/jRating/demo
ProcessWire is an open source CMS application that is built with PHP and simplicity in mind.
The application has a very low learning curve as there is no complexity and it is pretty developer/designer friendly considering it’s built to adapt to your way of doing things.
With the help of a jQuery-inspired API (a big “plus” for jQuery fans), it gives you the tools to reach data, but you make the markup.
Anything can be built with ProcessWire as all page fields in it are custom fields. It’s easy to edit, add, sort or remove fields from pages (via templates) as you see fit.
And, for maximum flexibility, fields can be as simple as containing raw text or numbers, or more complex like rich text editors, page-to-page relations and fields that hold files or images.
The application is friendly for end-users too as no details other than the “things-to-done” are displayed.
It has a modular plugin architecture for extending functionality and a must-check for any designer/developer (specially jQuery users).
Requirements: PHP 5.2.4+, MySQL 5.0.15+
Website: http://www.processwire.com/
Demo: http://processwire.com/demo/
Download: https://github.com/ryancramerdesign/ProcessWire
