background preloader

Mobile Boilerplate

Mobile Boilerplate
Related:  responsive design

Skeleton: Beautiful Boilerplate for Responsive, Mobile-Friendly Development 320 and up MEDIAPORTAL - a HTPC Media Center for free! The Great WebKit Comparison Table Page last changed today On this page I compare 24 WebKits in order to prove that there is no “WebKit on Mobile” and to figure out which one is the best. My hope is that eventually I’m going to gain some insight in the “family tree” of all WebKits. This page only contains tests of CSS and JavaScript items that work in some WebKits but not in all. I will probably add some HTML5 items to this list later on, provided they’re supported by at least one WebKit (probably Safari or Chrome). These tests focus solely on compatibility. Note: I’m in the process of splitting this page into a desktop and a mobile one. The comparisons are sorted according to support, with the best-supported items coming first. OK, so which WebKit is best? You can mine the data by selecting browsers. I devised a scoring system that I will certainly tweak in the future, so scores of individual WebKits may change without notice. The scoring works as follows, with unmentioned verdicts scoring 0 points:

HTML5 Boilerplate - A rock-solid default template for HTML5 awesome. A better Photoshop grid for responsive web design Posted on 20 January 2012 • 90 comments In making the move to responsive web design, one of the potential hurdles is the rather awkward maths for calculating the percentage-based widths necessary for fluid layouts. If, for example, you’re designing with a 960px grid in Photoshop and you have six columns, each 140px wide, you divide 140 by 960 to get your percentage-based width: 14.583333%. Compare that to a container that has a width of 1000px. 1000 is a nice, easy, round number. Here’s the PSD. But what about our precious 960 grids? I should point out here that I’m not proposing a new framework. Caveat 1: margins A small caveat is that the 1000px grid assumes you’re not bothered about gutters on either side of the container, which might bother some people depending on the way you do your column margins. Caveat 2: rounding errors I’d love to know if you find this useful! © 2005 – 2014 Elliot Jay Stocks.

jQuery Mobile Creating a (mobile friendly) multiple choice quiz with images or multimedia Ingredients: Google FormsGoogle SpreadsheetsPicasa (optional)BloggerGoogle Forms is a great tool for creating short surveys, polls and of course quizzes. It’s easy to create a math or vocab quiz and view the results in an associated Google spreadsheet. There is even a script that automatically grades the answers. One thing you cannot do in Google form is to use images or html code to embed images, audio files or videos. Blogger might give you a warning that the html code is not complete. If you want to make a mobile friendly quiz all you need to do is enable the “mobile template” in the Blogger settings (email & mobile). Directions: Create quiz in Google FormsCopy the html code from the finished formPaste the code into Blogger in html modeAdd your own media using either design or html modeSend the link to the post to your students

Адаптивный и мобильный дизайн с CSS3 Media Queries Разрешение экрана в наши дни колеблется от 320px (iPhone) до 2560px (большие мониторы) или даже выше. Пользователи больше не просматривают сайты только на настольных компьютерах. Теперь пользователи используют мобильные телефоны, небольшие ноутбуки, планшетные устройства, такие как iPad или Playbook для доступа в интернет. Для начала посмотрим это в действии. Пред началом посмотрите на финальное демо, что бы увидеть, как хорошо это выглядит. Другие примеры Если вы хотите увидеть больше примеров, посмотрите следующие темы для WordPress, которые я сделал используя media queries: iTheme2, Funki, Minblr и Wumblr. Обзор Контейнер страницы имеет ширину 980px для любого разрешения, больше 1024px. Не будем останавливаться на подробном описании HTML. HTML5.js Обратите внимание, что в демо используется HTML5. Сбрасываем HTML5 элементы в block Следующий CSS сделает HTML5 элементы (article, aside, figure, header, footer, etc.) блочными. Описываем основную структуру в CSS Шаг 1 CSS3 Media Queries

Initializr - Start an HTML5 Boilerplate project in 15 seconds!

Related:  Mobile Frameworks