FlexNav - Flexible, Device Agnostic Navigation. A Device-Agnostic Approach to Complex Site Navigation FlexNav is a mobile-first example of using media queries and javascript to make a decent multi-level menu with support for touch, hover reveal, and keyboard tab input accessibility. Special attention is paid to touch screens using tap targets (the key feature of FlexNav). Note: If you find a bug, please file an issue and note device and browser versions. Download on GitHub → Basic Usage Start with a simple unordered list, adding in the class and data attributes:<ul class="flexnav" data-breakpoint="800"><li>...
Add the small screen menu button somewhere outside your navigation markup:<div class="menu-button">Menu</div> Add flexnav.css to the head of your document:<link href="css/flexnav.css" rel="stylesheet" type="text/css" /> Add jquery.flexnav.min.js before the closing body tag:<script type="text/javascript" src="js/jquery.flexnav.min.js"></script> Initialize FlexNav right before your closing body tag:$(".flexnav").flexNav(); Options. Hide the Address Bar within Mobile Safari. With both iOS and Android-driven devices using WebKit as their browser's rendering engine, web developers have many advantages: A rendering engine with capable of flawless CSS animationsA rendering engine that's fast...very fastA rendering engine that's modern and forward-thinking These advantages allow us to create web apps within that browser that look as good as native applications.
If your goal is to create web apps that look like native applications, the details count. One of those details: hiding the address bar. You may think hiding the address bar within the mobile browser is difficult but you'd be surprised how simple it is. The JavaScript window.addEventListener("load",function() { setTimeout(function(){ window.scrollTo(0, 1); }, 0);}); The window.scrollTo method is the key to hiding the address bar. Bonus: META Tag for Bookmarked Sites If a user has added your web application to their springboard, the following meta tag can remove the top bar from the browser: And that's all! 14 DIY mobile app development resources for small businesses. This post was updated April 8, 2014, to reflect the ever-changing mobile application development landscape. Many small businesses sill shrug off the idea of creating a mobile app but the case for doing so continues to become stronger, not just when it comes to engaging more effectively with customers but for empowering employees.
I wrote about one example of the latter scenario last month: ski and board shop Mount Everest in Westwood, N.J., created a mobile app to extend its LightSpeed point-of-sale (POS) solution so that the sales team is alerted when priority orders arrive. Its app helps the retailer boost credibility with certain search engines by responding more quickly. "This was essentially the only way to play. We wouldn't be able to do what we are doing without it," said Ryan McGarry, manager of e-commerce operations for the retailer.
I mentioned two similar examples involving FileMaker late last year. Jquery-ui-map - Google map v3 plugin for jQuery and jQuery Mobile. The Google Map version 3 plugin for jQuery and jQM takes away some of the head aches from working with the Google Map API. Instead of having to use Google event listeners for simple events like click, you can use jQuery click events on the map and markers. It is also very flexible, highly customizable, lightweight (3.2kB or 3.9kB for the full) and works out of the box with jQuery mobile. But one of its best features (atleast for SEO people) is that you can populate a map from microformats, RDFa or microdata on your site, which can be used as a fallback when a user doesn't have javascript enabled.
Download the plugin with examples or get the minified file here Donate Entities which have donated jQuery mobile demo jQuery Mobile example Demo Documentation Tutorial sample code. Demos and tutorials using jquery-ui-map Help? Post in the forum If you need professional help with any implementation please email me directly Links. Tiggzi: Mobile App Builder Help. Reference. Mobile Development Forums for Red Foundry.
Fixed Positioning for Mobile Browsers. Organizing Mobile. When it comes to organizing the content and actions on mobile, solid information architecture principles like clear labeling, balanced breadth and depth, and appropriate mental models remain important. But the organization of mobile web experiences also needs to: Align with how people use their mobile devices and why.Emphasize content over navigation.Provide relevant options for exploration and pivoting.Maintain clarity and focus.Align with mobile behaviors Article Continues Below In the previous part, we talked about the constraints and capabilities that make designing for mobile unique.
Looking at this intersection at a high level can illuminate how people are typically using their mobile devices and why. Because they directly align with why people pull out their mobile devices, these behaviors often determine how your mobile experience can be structured and organized to meet people’s needs.
Aligning with mobile behaviors also naturally aligns your website with real-world needs. Yahoo! Dev Center » Chris-Software.com. Add to home screen. Support Development Add To Homescreen is a free, open source javascript software. It is released under the MIT License which basically grants you complete freedom in usage for open source and commercial applications. That being said the only way for me to subtract hours from my day work and keep implementing this script is through donations.
If you find this widget useful and wish to support future development, please consider a donation. Overview The script opens an always-on-top message inviting the user to add the application to the home screen. ATH by default looks something like this But appearance is customizable with plain old CSS. The script is compatible with iOS 6+ and Chrome 31+. Languages The message changed in v3 so unfortunately all the languages supported in v2 are not available anymore.
Basic Usage v3 API changed drastically (sorry about that) and it’s not a drop in replacement for v2. <head><title>Add To Home</title> ... That’s all you need. Options Detect the homescreen. Adaptive Images in HTML. How To Build A Mobile Website. Advertisement Over the past few years, mobile web usage has considerably increased to the point that web developers and designers can no longer afford to ignore it.
In wealthy countries, the shift is being fueled by faster mobile broadband connections and cheaper data service. However, a large increase has also been seen in developing nations where people have skipped over buying PCs and gone straight to mobile. Unfortunately, the mobile arena introduces a layer of complexity that can be difficult for developers to accommodate. Mobile development is more than cross-browser, it should be cross-platform. The vast number of mobile devices makes thorough testing a practical impossibility, leaving developers nostalgic for the days when they only had to support legacy browsers. In addition to supporting different platforms, each device may use any number of mobile web browsers. Source: Nielsen Study, Image credit How To Implement Mobile Stylesheets Server-side Methods & The UA String Large image.