background preloader

Mobile First Web Design

Facebook Twitter

Mobile Website Gallery. iOS Mobile Patterns Library. Mobile Patterns. WTF Mobile Web.

Web Development Patterns

Using the application cache - HTML. Introduction HTML5 provides an application caching mechanism that lets web-based applications run offline.

Use the Manifest Cache to cache your static images, JavaScript, and CSS. It won't affect your bandwidth on your server and offers great performance before the files load off the local device. This may be the better option, depending on your needs, especially if your app doesn't need to regularly be checked for an updated image or CSS. Just remember that a Manifest Cache requires the users to allow content to be stored on their devices and it has a limit. – indigetal

Developers can use the Application Cache (AppCache) interface to specify resources that the browser should cache and make available to offline users.

Using the application cache - HTML

Applications that are cached load and work correctly even if users click the refresh button when they are offline. Using an application cache gives an application the following benefits: Offline browsing: users can navigate a site even when they are offline. How the application cache works Enabling the application cache To enable the application cache for an application, you must include the manifest attribute in the <html> element in your application's pages, as shown in the following example: <html manifest="example.appcache"> ...

The manifest attribute references a cache manifest file, which is a text file that lists resources (files) that the browser should cache for your application. Loading documents The cache manifest file. S3, Cloud Computing Storage for Files, Images, Videos.

Amazon Simple Storage Service (S3) provides solutions for storing your images and CSS without affecting your hosting bandwidth or your hard-drive space. Big social network websites such as foursquare and Untappd use Amazon S3 to store the profile avatars, logos, CSS, and other images. The prices for storage and bandwidth are usually much lower for your hosting solution. – indigetal

Responsive Design with Mockups. We love responsive design # Responsive layouts on the web are exciting.

Responsive Design with Mockups

Many Mockups users are doing responsive layouts on their projects or are planning to. We've been talking with the Balsamiq community about how Mockups can work with responsive web design concepts, and we thought we'd explore some techniques that might help. Before diving in, here's how we see Mockups fitting in with responsive layout design scenarios. Eclipse - The Eclipse Foundation open source community website. ASF Git Repos - cordova-weinre.git/summary. Mobile Emulators and Simulators - The ultimate guide to mobile developers. The most useful tools for mobile web are emulators and simulators.

Mobile Emulators and Simulators - The ultimate guide to mobile developers

In Chapter 4 of Programming the Mobile Web I’ve made an extensive description and installation guideline for creating a desktop mobile testing environment. And in Chapter 13, I’ve also reviewed other solutions for mobile testing, including four device remote lab solutions. I’ve mixed all this information to create this ultimate guide to 37 download resources for hundreds of emulators and simulators. Enjoy! jQuery Mobile. Html5boilerplate - jQuery Mobile and HTML5 Boilerplate. HTML5 Mobile App Development Framework. Download Sencha Touch Free. Sencha Touch is the leading MVC-based JavaScript framework for building cross-platform mobile web applications.

Sencha Touch has touted itself as the best HTML5 Mobile Web App framework. It has built-in support for many browsers; it supports iOS, Android, and BlackBerry 6+, meaning that it has support for non-WebKit browsers. Most developers consider Sencha Touch to be the kitchen sink of JavaScript frameworks. It contains both UI and JavaScript methods, but unlike other frameworks, it doesn't have the same syntax and may be confusing to a first-time developer not well versed in object-oriented JavaScript programming. – indigetal

Sencha Touch leverages hardware acceleration techniques to provide high-performance UI components for mobile devices.

HTML5 Mobile App Development Framework. Download Sencha Touch Free.

With over 50 built-in UI components and native looking themes for all major mobile platforms, Sencha Touch provides everything you need to create impressive apps that work on iOS, Android, BlackBerry, Windows Phone, and more. A novel and adaptive layout engine, fluid animations, and smooth scrolling features allow developers to build applications that respond to user actions nearly instantaneously, much like native technologies. Janl/mustache.js.

Mustache is a JavaScript template library that helps developers work with JSON objects instead of having their data source return HTML. When you make a network call to gather data from mobile devices, it's best to keep the payload, or the return data, as small as possible. JSON, or JavaScript Object Notation, is a string of characters that can be transformed into any array to pull in data. Most of the popular social networks, including Facebook, Twitter, and foursquare, and APIs, use JSON to return data. Mustache has a lot of other features, including logic and loops that help you easily build out a list of data with a few lines of code. – indigetal

jQT (formerly jQTouch) — Zepto/jQuery plugin for mobile web development.

jQT (formerly jQTouch) is a plug-in for either the Zepto or jQuery framework that enables you to create UI elements and JavaScript functions in your web app. Just like Zepto, this is targeted to only WebKit browsers. This framework requires you to use jQuery or Zepto plus this library, so depending on your needs, it may be too much. The upside is that it has tons of great CSS3 animations built in so you can make your application feel more native with page transition, full-app mode, and more. – indigetal

Zepto.js: the aerogel-weight jQuery-compatible JavaScript library.

Zepto is an XUI-like framework that focuses on providing a syntax similar to jQuery's, but it is targeted for WebKit browsers only. Although the script file is around 5 to 10KB, depending on your use of its plug-ins, it contains most of the important mobile methods that are contained in jQuery. The downside is that the scripting language is targeted to only WebKit browsers, so Windows Phone 7, Mozilla Firefox Mobile, or other non-WebKit browsers do not have support from this framework. – indigetal

Xui.js - a simple javascript library for building mobile web applications. Backbone.js. Using CSS Frameworks - Treehouse Forum. Bootstrap. Responsive Web Design Sucks: Boilerplates & Frameworks - Chromatix Blog. In some ways responsive web design has regressed web design trends back to simplicity, flat designs, grid and box layouts.

Responsive Web Design Sucks: Boilerplates & Frameworks - Chromatix Blog

Some may argue that this limits creativity and innovation, which is partially true. Responsive Web Design Frameworks by Magdalena Faizov on Prezi.

Great slideshow summarizing the many Web Design Frameworks to choose from and the advantages and disadvantages of using Frameworks. – indigetal

PhoneGap. Project Walkthroughs. Mobile Nav. Responsive Retina-Ready Menu. A responsive, touch-friendly and Retina-ready menu with three layouts for different browser sizes.

Responsive Retina-Ready Menu

View demo Download source Today we will create a colorful Retina-ready and responsive menu inspired by the colors of the Maliwan manufacturer of the Borderlands game. The menu automatically changes to one of three different layouts depending on the browser window size: a “desktop” inline version, a two columns tablet-optimized version and a mobile version with a menu link to display and hide the navigation for smaller screens. To make the menu fully retina-ready, we will use an icon font so that the icons of the menu won’t get pixelized on resize. Please note: some effects only work in browsers that support the respective CSS properties. Preparing the icon font Creating a custom icon font might look a bit complicated, but with tools like IcoMoon it’s just a matter of creating the icons and importing them into the tool.

The first thing we need to do is to create the icons for the menu. Jon Abrams' Blog - How To Use HTML5 pushState. I recently made a simple web app over a weekend called diffbin.

Jon Abrams' Blog - How To Use HTML5 pushState

It gave me a chance to try out a really cool HTML5 feature called pushState (aka the History API). Browserstate/history.js. Window.onhashchange - Web API interfaces. The hashchange event fires when a window's hash changes (see location.hash).

Window.onhashchange - Web API interfaces

Syntax window.onhashchange = funcRef; Detect `onhashchange` support. How to Build a Three Line Menu for a Responsive Website in jQuery. Our goal is to build a “three line” or “3 line” (☰) menu for a responsive website.

How to Build a Three Line Menu for a Responsive Website in jQuery

We want to do this without adding additional markup to the page. Any additional markup we want to include must be added dynamically. We’re going to use jQuery to help us out. Initial State So here is our, initial state. 5 Advanced Mobile Web Design Techniques You’ve Probably Never Seen Before. Until recently, creating mobile web designs that look and feel like native apps has pretty much been an impossible dream.

5 Advanced Mobile Web Design Techniques You’ve Probably Never Seen Before

There are plenty of creative workarounds to try and bring that native ‘feel’ to mobile web browsing, but so far we've struggled to bridge the gap between native and the web. However, a slew of new, high-powered smartphones is allowing designers to finally unleash complex, performant, native-feeling smartphone UI patterns — designed and built for the web.

These patterns are blurring the lines between native apps and the web. Creating a Mobile-First Responsive Web Design. Introduction We're going to walk through how to create an adaptive web experience that's designed mobile-first. This article and demo will go over the following: There is even more up to date responsive guidance on our new Web Fundamentals site. Why we need to create mobile-first, responsive, adaptive experiences How to structure HTML for an adaptive site in order to optimize performance and prioritize flexibility How to write CSS that defines shared styles first, builds up styles for larger screens with media queries, and uses relative units How to write unobtrusive Javascript to conditionally load in content fragments, take advantage of touch events and geolocation What we could do to further enhance our adaptive experience The Need for Adaptivity.

3D Restaurant Menu Concept. A responsive 3D menu concept for a restaurant website. The idea is to show the menu as a folded flyer and unfold it in order to show the menu items. View demo Download source Applying CSS 3D transforms to components can bring some more realism to normally flat web elements. Thumbnail Grid with Expanding Preview. Tools. A Conditional Loader For Your Polyfills!

Modernizr: the feature detection library for HTML5/CSS3.

Modernizr takes the pain out of cross browser development for mobile or the desktop experience. Detecting if a browser has certain HTML5 or CSS3 functionality can be difficult, but Modernizr makes it easy. The tool enables you to build basic if…then statements to determine whether certain features are available for use. Once the JavaScript utility is initialized, it scans through all the HTML5 and CSS3 features of the browser and adds them as a class to the BODY element. – indigetal

Mobile Web @ W3C. Quick menu: W3C Mobile Web Initiative | Site navigation Combining the power of the Web with the strengths of mobiles devices. W3C’s mission includes ensuring that the Web be available on as many kind of devices as possible. With the surge of powerful mobile devices in the past few years, the role of the Web as a platform for content, applications and services on these devices is increasingly important. W3C accompanies this growth with its ongoing work in the following areas: Mobile - Table of contents. Mobile HTML5 - compatibility on iPhone, Android, Windows Phone, BlackBerry, Symbian and other mobile and tablet devices. IE Solutions. Mobile-first Responsive Web Design and IE8. Soon, Internet Explorer 11 will be released.

Yet IE8 is used by 4.5% of our users, and we want to serve them with a great reading experience on our new responsive website. Responsive Web Design (RWD) can be implemented in many fashions. In our case, we chose the mobile-first way, which means that we enhance the experience depending on your device, on top of the lowest common denominator: a simple mobile phone (dare I say: a feature phone). iScroll 4. Project info Last code update: 2012.07.14 – v4.2Device compatibility: iPhone/Ipod touch >=3.1.1, iPad >=3.2, Android >=1.6, Desktop Webkit, Firefox, Opera desktop/mobile.Discussion groupQR Code opens demo page.

Support development If this script saved your day and you wish to support future developments you may consider sending some funds via PayPal or Flattr. Overview iScroll 4 is a complete rewrite of the original iScroll code.