background preloader

Mobile Boilerplate: A best practice baseline for your mobile web app

Mobile Boilerplate: A best practice baseline for your mobile web app
★ Analytics, icons, and more A lean, mobile-friendly HTML template; optimized Google Analytics snippet; placeholder touch-device icons; and several mobile-focused tools and helpers. ★ Normalize.css and helpers Includes Normalize.css v2 — a modern, HTML5-ready alternative to CSS resets — and further base styles, utilities, and media queries. ★ jQuery 2 and Modernizr Get the latest minified versions of jQuery 2 (a minimalist jQuery library for modern browsers) and the Modernizr feature detection library.

http://html5boilerplate.com/mobile/

Related:  Technos mobilesdesign/wireframe/color/ux/ui

Browser compatibility — viewports Page last changed today Related files: Last major update on 12 November 2013. Here’s the inevitable compatibility table that goes with my viewport research. It treats the viewports themselves as well as some related items. position: fixed was moved to the CSS test pages. 10 Ideas for Creating Innovative and Unique Web Designs I am a big fan of Twitter. I consider it the one tool that helped me develop from a person who simply knew how to make websites to a web designer because the exposure to fantastic designers, tutorials, recommended readings, and impressive examples helped me build my design toolset and grow my abilities on both a technical and creative level. So whenever someone asks my advice on how to become a better designer, things such as social networks (like Twitter and Facebook), design galleries and RSS feeds are at the top of my list of things that you should be using to learn and improve. With that said, I think it is important that we take all of these things in moderation and limit our consumption of design tutorials and sources of "inspiration". While all of this is a great method for keeping up with the design community and making sure you’re using the latest and greatest methods and standards, I find it a poor formula for sparking true creativity and innovation. 1.

The Markup · h5bp/mobile-boilerplate Wiki Conditional comment for Window Phone 7 Conditional comment to add class iem7 for Window Phone 7 Mobile viewport optimization The HandheldFriendly meta-tag was used initially by older Palm and Blackberry models as well as browsers like AvantGo. Microsoft introduced the MobileOptimized tag for the PocketPC. A Simple CSS Framework Toast is a CSS framework made as simple as it can be, but no simpler. A plain-English responsive grid makes simple layouts a breeze, and with box-sizing you can add padding and borders to the grid, without breaking a single thing. .unit.one-of-four .unit.one-of-three .unit.two-of-three .unit.one-of-two

Golden Grid System GGS was my next step after Less Framework. Instead of a fixed-width grid, it used a fully fluid-width one, without even a maximum width. The resources it was published with are still available on GitHub. The idea was to take a 18-column grid, use the outermost columns as margins, and use the remaining 16 to lay elements out. On smaller screens the 16 columns could be folded into 8, 4 and 2. This behaviour was inspired by Massimo Vignelli's Unigrid system.

HTML color codes and names HTML color codes are hexadecimal triplets representing the colors red, green, and blue (#RRGGBB). For example, in the color red, the color code is #FF0000, which is '255' red, '0' green, and '0' blue. These color codes can be used to change the color of the background, text, and tables on a web page. Major hexadecimal color codes HTML 5 mobile web app from start to finish HTML 5 mobile web app from start to finish It seems that these days the first app that anyone interested in mobile apps codes is a to-do list. The market places are overflowing with to do list managers, advanced to do list tracking and so forth.

Gridlock  /  Projects  /  Ben Plum Syntax Gridlock features three distinct grid sizes that correspond to specific screen sizes: desktop, tablet and mobile. Desktop features a full 12 or 16 column grid, tablet snaps down to 6 or 8, and mobile contains only 3. The syntax is simple and easily read: [target device]-[column count].

Related:  sego27