«Сначала мобильные» — это сборник наблюдений, статистики и рекомендаций описывающий в общих чертах отличие дизайна мобильных приложений и сайтов.

Люк Вроблевски уделил много внимания описывая технологии и возможности времени когда писалась книга и провел сравнения между популярными сайтами раскрывая положительные изменения в различных решениях мобильных версий.

Общая идеология книги состоит в том, чтобы разработать сначала мобильную версию, а лишь затем делать десктоп. Объясняется это тем, что концентрация на самых необходимых элементах — более полезна — позволяет не ломать голову о том что убрать из имеющегося контента и элементов при разработке не наоборот.

В книге преобладают практические примеры, которые можно и нужно перенимать даже сейчас, но как бы смешно это не звучало, читается она нудно и с усилием.
 
Ниже собрана выжимка по разделам в виде скорректированных цитат, так чтобы они остались информативными и были значительно короче чем оригинал.

Рост

1. Мобильными версиями могут пользоваться лишь 7% общей аудитории, но это составит 35% всех поисковых запросов.
2. Для доступа к «железу», работе в фоновом режиме, продаж на апп-сторах без нативного формата вам, скорее всего, не обойтись.
3. Для каждой платформы необходимы отдельные технологии. Мало кто способен одновременно вести разработку с использованием всех технологий. Но это не важно, потому что поддержка каждой платформы приведет к непомерным расходам.

Ограничения

1. 84% опрошенных пользуются мобильными устройствами дома, и выходит, что типичный пользователь мобильного приложения — это не торопящийся бизнесмен, а человек, который находится у себя дома.
2. Ограниченное пространство дисциплинирует разработчиков. Для сложных интерфейсов или контента сомнительной ценности нет места. Приходится оставлять самое важное. Для этого нужно хорошо знать и своих клиентов, и суть бизнеса.
3. Главная ценность любого веб-сервиса остается неизменной и не зависит от форматов и устройств. Клиенты ожидают от мобильной версии практически того же, что и от версии для большого экрана.
4. Образ вашего пользователя — «один глаз и один палец», поэтому дизайн для мобильных устройств должен быть максимально простым и эффективным.

1. Мобильные устройства всегда находятся рядом, необходимо учитывать такие факторы, как место и время. По сути, вы создаете дизайн, пригодный всегда и везде.

1. Чаще всего обращаются именно к тем устройствам, которые лучше подходят для решения конкретных задач.

Потенциальные возможности

1. Instapaper на iPhone позволяет использовать акселерометр, чтобы пролистывать текст.
2. Sketch a Search от Yahoo! позволяет найти ближайшее заведение на карте внутри нарисованной линии или круга на карте.

Сценарии взаимодействия

Использование мобильных устройств обычно предполагает один из следующих видов взаимодействия: 

1. Поиск (срочно, местный масштаб): нужен ответ прямо сейчас (часто связанный с моим местоположением);
2. Изучение/развлечение (скука): у меня есть немного свободного времени, я хочу отвлечься; 
3. Проверка/статус (повторяющееся занятие / микрозадачи): то, что для меня важно, постоянно изменяется или обновляется, и я хочу быть в курсе;
4. Редактирование/создание (срочные изменения / микрозадачи): мне необходимо безотлагательно что-то сделать.

Организация

1. При разработке дизайна мобильного сайта пусть кнопка «Назад» останется уделом нативных приложений. Если вы хотите помочь пользователю вернуться на предыдущий уровень, дайте этому навигационному элементу другое название.
2. Мобильные сайты должны работать на любых устройствах, независимо от того, есть у тех физические кнопки под экраном или нет. Если для нативных приложений навигационное меню внизу экрана является неплохим решением, то для мобильных сайтов эта идея окажется не удачной с точки зрения юзабилити. Фиксированное меню лучше располагать сверху.
3. Общее правило при разработке мобильных приложений гласит: контент всегда должен иметь приоритет над навигацией.
4. Рассчитывайте на то что пользователя всегда что-то будет отвлекать. Поэтому мобильный дизайн должен быть ясным, не содержать лишних деталей и давать пользователям возможность быстро достигать нужных целей — желательно, обходясь минимумом навигационных опций.

Действия

1. Для этого, прежде чем приступать к проектированию тач-интерфейса, необходимо:
   1. Определить размер и расположение тач-зон;
   2. Изучить тач-жесты и понять, с какой целью они используются;
   3. Продумать как заменить операции, выполняемые ранее наведением курсора;
   4. Не забыть о средствах «непрямой манипуляции».
2. Пальцы разных размеров. Они регулярно соскальзывают, не попадая в нужный участок экрана. Чем важнее выполняемая задача, тем крупнее должна быть зона касания.
3. Результаты исследований показывают, что почти в половине случаев нажатие на рекламные баннеры в мобильном браузере происходит случайно.
4. Основной набор жестов одинаков для всех платформ:
   1. Нажатие (tap);
   2. Двойное нажатие (double tap);
   3. Перемещение (drag);
   4. Пролистывание (swipe);
   5. Уменьшение масштаба (pinch);
   6. Увеличение масштаба (spread);
   7. Продолжительное нажатие (press and tap);
   8. Продолжительное нажатие с перемещением (press and drag);
   9. Несколько разновидностей поворотов 
5. Старайтесь сделать так, чтобы предусмотренные в интерфейсе жесты были как можно более естественными: пользователям будет легче к ним привыкнуть.
6. Добавив в таблицу стилей описание состояний: hover и focus для всех ссылок, кнопок и меню вашего мобильного сайта, вы облегчите его использование на устройствах, оборудованных средствами непрямой манипуляции.

О вводе

1. Используйте оптимизированные для мобильных устройств теги label — это поможет предельно ясно формулировать вопросы; 
   1. Для упрощения ввода данных, применяйте различные типы ввода, атрибуты и маски;
   2. Выбирайте правильный дизайн для последовательных, нелинейных и контекстных форм;
   3. Минимизируйте любым способом количество полей для ввода данных. 
2. Если рассматривать элемент label внутри поля ввода формы: 
   1. Никогда не должен становиться частью ответа. Например слово «найти» неожиданно становилось частью вашего поискового запроса.
   2. Не должен быть похожим на текст, который вводится в поле. Иначе может показаться что программа уже ввела ответ за него.
   3. Как только пользователь начинает вводить текст в поле, label обычно исчезает и больше не появляется. Таким образом, заполнив форму, он не может проверить, на какой именно вопрос отвечал.
3. Общее правило работы с масками ввода гласит: изначально видимые маски ввода проще и удобнее, чем скрытые или появляющиеся постепенно. Огласите весь список, пожалуйста!
4. Выравнивание элемента label по верхнему краю позволяет не только оптимизировать пространство экрана (даже когда они достаточно длинные), но и сохранить их видимыми при открытии виртуальной клавиатуры, занимающей половину имеющегося пространства.
5. В рамках стандарта HTML5 новые типы полей облегчают ввод данных определенного формата.
   1. При заполнении поля url открывается виртуальная буквенно-цифровая клавиатура с кнопками «.», «/» и «.com».
   2. При указании типа поля e-mail возникает виртуальная клавиатура с символами «.» и «@».
   3. При указании типа поля number появляется цифровая клавиатура. 
6. Спецификацию HTML5 можно использовать без опасений — браузеры, не поддерживающие новые типы полей, обнаружив неизвестный им тип поля, интерпретируют его как стандартный текст.
7. Добавление к полям маскок, задающие параметры ввода и ограничивающие объем вводимых данных позволяет упростить заполнение полей.

Верстка

1. Основное правило разработки мобильных интерфейсов — чем проще, тем лучше