Pull to refresh

Как сделать один сайт для всех устройств (Responsive Web Design)

Website development *
Вчера была опубликована хорошая статья «Веб-дизайн. Каждому устройству свое представление». Несмотря на неплохие размышления, к сожалению, вывод в ней довольно глупый. А именно:

«Нужно определить, какими устройствами могут пользоваться ваши посетители, проработать и создать для этих устройств представление вашего сайта, определить устройство посредством проверки заголовков браузеров, и отправить наиболее подходящее представление

Почему это глупо


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



Это скриншот из презентации «Beyond the mobile web by yiibu» (очень рекомендую).

Во-вторых, если вы не facebook или yandex, скорее всего, вы не потянете создание и поддержку разных версий сайта для каждого устройства. Да и это не имеет особого смысла. Потому что ситуация становится похожа на реалии пятнадцатилетней давности. Тогда делали сайт «под браузер», а сейчас автор предлагает делать сайт «под устройство».

Как сделать один сайт для всех устройств

Читать дальше →
Total votes 159: ↑148 and ↓11 +137
Views 279K
Comments 75

Progressive enhancement + mobile first = responsive web design

Futubra corporate blog
futubra

5 месяцев, 26 дней и сколько-то часов прошло с момента коммита в git первых строчек кода Футубры. Столько времени у нас ушло, чтобы собрать команду, провести ряд исследований, проработать концепцию и реализовать проект, который сделает жизнь людей интереснее.

За эти полгода мы уже столкнулись (и продолжаем сталкиваться каждый день) c целым рядом задач и проблем логического, интерфейсного, технического и организационного характера. Опытом решения самых интересных из них мы и будем делиться с вами в этом блоге.

Первый пост хочется посвятить самому важному – базовым принципам, на которых строится Футубра:
  • progressive enhancement
  • mobile first
  • responsive web design

Так что же такое Футубра и как мы применяем эти принципы?
Total votes 111: ↑69 and ↓42 +27
Views 26K
Comments 155

Адаптивный веб-дизайн на практике

Futubra corporate blog Website development *
Мы уже писали о методах (Mobile First и Response Web Design), которые используем при разработке нашего сервиса. В этой статье я хочу поделиться с вами нашим опытом. То, что в теории кажется простым, на практике порой оборачивается кошмаром. Речь пойдет о том, как нам удается создавать универсальный веб-сервис, способный работать на большом количестве устройств.
Читать дальше →
Total votes 139: ↑133 and ↓6 +127
Views 84K
Comments 34

Эволюция проектирования с приходом адаптивного дизайна

AGIMA corporate blog Interfaces *
Хабр, привет!

Прошло около двух лет с момента запуска первого адаптивного сайта нашей компанией, примерно столько же этому вопросу в России вообще. С этого момента мне, как проектировщику, уже удалось пройтись по многим граблям, поэтому в первом своем посте хотел бы поделиться мыслями, что поменялось у нас в процессах проектирования сайтов вместе с приходом адаптива.
Читать дальше →
Total votes 51: ↑47 and ↓4 +43
Views 31K
Comments 13

7 способов улучшения процесса разработки адаптивного дизайна

UIDG corporate blog Web design *
Translation
image

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

Конечно, из-за того, что процесс работы над адаптивным проектом очень индивидуален и итеративен, проанализировать его и дать решения на все случаи жизни довольно трудно. Тем не менее, некоторые общие способы и техники можно применять практически всегда.

Мы рассмотрим семь техник по улучшению адаптивного дизайна начиная со структуры контента и заканчивая масштабируемыми изображениями.
Читать дальше →
Total votes 41: ↑39 and ↓2 +37
Views 45K
Comments 11

Почему Mobile First?

JavaScript *Client optimization *Development of mobile applications *
Sandbox
О Mobile First написано достаточно много и есть хорошие книги на эту тему. И все равно большинство разработчиков и компаний не используют его в своих проектах или не знают вообще об этом подходе.

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

  • Что такое Mobile First и его плюсы
  • Реализация подхода
  • Статистика результатов
Читать дальше →
Total votes 32: ↑23 and ↓9 +14
Views 102K
Comments 17

Moff.js и модулированный Bootstrap

Website development *CSS *JavaScript *Client optimization *Development of mobile applications *
Moff.js and Bootstrap

В предыдущей статье я писал о том, как фреймворк Moff.js может облегчить создание Mobile First страницы без использования CSS фреймворка.

Но на сегодняшний день большенство проектов используют какие либо CSS фреймворки и одним из таких фреймворков является Bootstrap. Смело можно утверждать, что Bootstrap является самым популярным Mobile First фреймворком.

Cамым большим недостатоком этого фреймворка является его размер. Даже минифицированная версия весит 154.9KB и это только CSS и JS файлы.

Зачастую разработчикам нужна только часть функционала, но подключают они весь фреймворк целиком. И поэтому пользователям мобильных устройств приходится загружать большой объем лишнего трафика. Решением этой проблемы было разделение фреймворка на группы из часто и не часто используемых модулей, которые удобно использовать в Mobile First подходе. Каждая из этих групп была вынесена в виде отдельного модуля в Moff.
Читать дальше →
Total votes 10: ↑8 and ↓2 +6
Views 9.1K
Comments 12

Смартфоны наступают

BYYD corporate blog Research and forecasts in IT *


Мы стоим на пороге величайшей эры смартфонов.

Таков вывод из нового доклада ZenithOptimedia. В нем говорится о том, что к концу 2018 года 66,5% людей на ключевых digital-рынках будет иметь смартфоны.
Читать дальше →
Total votes 8: ↑7 and ↓1 +6
Views 3.4K
Comments 16

Для чего нужен mobile-first? Отвечают лидеры мобайла

BYYD corporate blog Web analytics *Internet marketing *


О mobile-first сегодня не говорит только ленивый. На сегодняшний день, когда мобильные устройства по уровню популярности находятся практически на одной ступени с зубной щеткой, не обращать внимания на такой подход — довольно опасно для будущего компаний. Что же нужно знать об этом термине маркетологам, и что полезного нам могут рассказать те, кто уже активно задействует такой метод в своей практике? Об этом — в сегодняшней статье.
Читать дальше →
Total votes 7: ↑1 and ↓6 -5
Views 2.5K
Comments 2

Google Developer Days приходит в Европу

Google Developers corporate blog Open source *Google Chrome Development for Android *

image


Нам в Google очень нравится встречаться и общаться с разработчиками. Это помогает нам лучше понимать ваши потребности и улучшать наши продукты, чтобы они подходили для самых разных регионов, где вы работаете. Мероприятия для разработчиков — отличный способ сделать это. Именно поэтому мы проводим различные мероприятия, где мы можем общаться напрямую с разработчиками. Сегодня мы запустили специальный сайт и открываем регистрацию для европейской части нашей глобальной серии мероприятий для разработчиков – Google Developers Days (GDD).

Читать дальше →
Total votes 31: ↑31 and ↓0 +31
Views 5.3K
Comments 2

Не пропустите крупнейшее мероприятие Google для разработчиков в Европе

Google Developers corporate blog Open source *Google Chrome Development for Android *Machine learning *

Напоминаем, 5 и 6 сентября в польском городе Краков пройдет одно из крупнейших событий для разработчиков Европы — Google Developer Days. Начинающие специалисты и опытные профессионалы смогут поучаствовать в обучающих семинарах и мастер-классах, узнать о последних тенденциях в мире технологий, а также пообщаться с разработчиками и экспертами из разных уголков Европы.


В Центральной и Восточной Европе более миллиона высококвалифицированных разработчиков. Каждый год суммарно в Польше, Украине, Чехии, Словакии и России из университетов выпускаются больше IT-специалистов, чем в США. Именно поэтому, нам кажется, что Краков — идеальный город для европейского Google Developer Days.


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

Total votes 28: ↑27 and ↓1 +26
Views 5.9K
Comments 1

Открытый вебинар «CSS препроцессоры»

OTUS corporate blog JavaScript *Programming *
Всем привет!

Делимся с вами очередным открытым уроком, который проходил в рамках курса «Разработчик JavaScript», на тему «CSS препроцессоры». На вебинаре Юрий Дворжецкий рассказывает как настроить и использовать LESS и SASS/SCSS для ускорения профессиональной вёрстки, о возможностях и особенностях препроцессоров, которые позволят эффективно использовать Mobile-first вёрстку, БЭМ и UI фреймворки.


Если есть вопросы, комментарии по теме ждём их тут или заходите на день открытых дверей.
Total votes 9: ↑8 and ↓1 +7
Views 2.6K
Comments 0

Force Update — механизм принудительного обновления мобильных приложений

Skyeng corporate blog Development for iOS *Development of mobile applications *Development for Android *

Абсолютное большинство мобильных приложений имеет интересный нюанс – «хвост» старых версий, которыми все еще продолжают пользоваться. В этой статье мы посмотрим, какие проблемы это приносит и как с этим бороться. Материал будет полезен и мобильным разработчикам, и тем, кто каким-либо образом связан с разработкой мобильных приложений, к примеру, разрабатывает backend сервисы, которые используются в приложениях.

Читать далее
Total votes 17: ↑14 and ↓3 +11
Views 5.7K
Comments 13