Comparing Mobile Web (HTML5) Frameworks: Sencha Touch, jQuery Mobile, jQTouch, Titanium « InterfaceThis - Dave Feldman rants about product design It’s been an exciting year for the mobile Web. Adoption of HTML5 and CSS3, improved performance in mobile browsers, and an explosion of mobile app frameworks mean it’s more feasible than ever to create rich, interactive Web experiences for mobile devices. Using a wrapper like PhoneGap, you can distribute them via the native app stores for iPhone, iPad, and Android —targeting multiple platforms with a single codebase. Or can you? I needed a platform for Pints — a mobile app that answers answer the question, “Which beer should I order?” Pints isn’t complicated: a home screen, a few lists screens, a few forms. Mobile Web developers have a plethora of frameworks to do the heavy lifting for them: animated transitions, toolbars, buttons, list views, even offline storage. jQTouch jQTouch is easy to use and relatively well-documented. But even in my simple test app there were performance issues. jQTouch is available under the permissive MIT License, one of my favorite open source licenses.
Photoshop for Design PhoneGap Build and PhoneGap 3.0 Today we officially launched PhoneGap 3.0 support for PhoneGap Build. You can read the blog post on it here: PhoneGap 3.0 Now Supported in PhoneGap Build Before you get started, there are a few things I want to call out. The first thing you should note is that Build is not yet defaulting to 3.0 when you create a new project. If you want to use 3.0, please be sure to specify it in the config.xml file: Next - if you remember my blog post on PhoneGap 3 (PhoneGap 3.0 Released - Things You Should Know), then you remember that the biggest change was to core features. PhoneGap Build also has this rule! In order to include a core plugin with your PhoneGap Build project, simply add the gap:plugin tag to your config.xml file. PhoneGap Build now has a "Plugins" tab for each project. If you forget the value for a particular plugin, or want to see what PhoneGap Build supports from third parties, just hit the Plugins tab at the very top of the page. Finally, don't forget to peruse the doc updates.
18 Mobile Frameworks and Development Tools for Creating iPhone Apps The world of iPhone application development is evolving rapidly, and developers have a growing list of development tools from which to choose. I’ve created a list (incomplete I’m sure) of some of the more popular tools and frameworks. I have only used a few of these, so I won’t vouch for usability. If you know of any that I should add to the list, please let me know. iUI Warning: Division by zero in/home/cjcollett/www/wp-content/plugins/nextgen-gallery/products/photocrati_nextgen/modules/nextgen_basic_singlepic/templates/nextgen_basic_singlepic.phpon line13 iUI is a user interface (UI) framework for Safari development on iPhone. License: New BSD License Project Page Download iPhone-Universal The UiUIKit (Universal iPhone UI Kit) is a collection of HTML examples of what can be done with CSS3 and Safari’s Webkit License: GNU General Public License v3 Project Page Download iWebkit iWebKit is a file package designed to help you create your own iPhone and iPod Touch compatible website or webapp. 1.
8 jQuery And CSS Parallax Scrolling Tutorials | Bashooka | Web & Graphic Design Parallax scrolling is a type of web design where different elements of a website move at different speeds. As a user navigates through parallax websites, images will float on top of other images in several layers. Parallax scrolling sites can be used in many different ways to create a variety of captivating effects which have the potential to keep viewers on your site for a great deal of time. So if you are bored using the plugin and challenged to create you own parallax scrolling effects using jQuery and CSS, you might want to try these tutorials below. With this tutorial, you’ll learn how to integrate a simple scrolling parallax. Since then, parallax has blown up. A prototype parallax scrolling technique that uses CSS 3D transforms. Ready to enter the world of parallax scrolling websites? This parallax tutorial by Ian Lunn describes how to create a vertical-scrolling parallax website, taking inspiration from the Nike Better World parallax website.
OriDomi - origami for the web CSS Tools: Reset CSS The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning behind this was discussed in a May 2007 post, if you're interested. Reset styles quite often appear in CSS frameworks, and the original "meyerweb reset" found its way into Blueprint, among others. The reset styles given here are intentionally very generic. In other words, this is a starting point, not a self-contained black box of no-touchiness. If you want to use my reset styles, then feel free! Previous Versions v1.0 (200802) Acknowledgments Thanks to Paul Chaplin for the blockquote / q rules.
Why tables for layout is stupid: problems defined, solutions offered: Everything on one page) There are certain things that CSS does not do as well as table layouts. For instance, say you have a black side nav bar that you want to extend the whole height of your content. With a table layout, this is a piece of cake: just give that <td> a black background. We can do this with CSS, but it requires a different way of thinking. If we give our nav div a black background, the black will only extend until the nav 'runs out'. Instead we could tile a black GIF in our content div and give this div enough left padding, but if our navigation is longer than our content, this won't work either. Another way to tackle it is to tile the black GIF on the background of our <body>, which is fine unless you want to use another image for the background of your <body>. Or, we can wrap our content in a 'wrapper' div and tile the image in that div. And, of course tiling background images won't work at all if you want the width of your navigation to be fluid.
How to Make a Mobile-Friendly Website Regardless of the mobile configuration you end up using, there are some overarching mobile optimization takeaways that all marketers can benefit from. So, without further ado, here are 10 tips for creating a user-friendly, search-engine optimized mobile experience. 1. Work With a Designer Or at the very least, talk to a designer and get their professional input. At the end of the day, putting your website design in the hands of a qualified, experienced web designer will help ensure that you end up with a website that is not only mobile-friendly, but beautiful. 2. Here’s a perfect example of an area where an experienced designer can help out big time: font selection. At the most basic level, the font you choose needs to meet two requirements: a) The font needs to be large enough so people can read it without squinting or pinching. b) The font style needs to be clean, i.e. not overly decorative or cluttered. 3. 4. 5. 6. 7. 8. Use image maps to combine multiple images into a singe image. 9. 10.