Верстка \ Адаптивная верстка

Создаем адаптивную сводную таблицу

От автора: не так давно твит Smashing Magazine привлек внимание к моей статье по созданию элегантной таблицы с помощью OpenType. Спасибо, Smashing Magazine. Один комментатор справедливо заметил, что таблица была неадаптивной: при сужении окна браузера данные отсекались. Я не мог изменить таблицу, как в предыдущих примерах: порядок и направление данных в ней важны и не должны обрезаться. Однако есть другое решение.

Читать далее

Верстка \ Адаптивная верстка

Решение проблем поддержки адаптивного дизайна в Gmail

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

Читать далее

Верстка \ Адаптивная верстка

Балансировка текста в адаптивном дизайне

От автора: в прошлом году на сайте 24 ways я призывал вас делать шрифты выразительными. Я задал очень большой размер текста, чем привлек ваше внимание и объяснил свою точку зрения. Большой текст нужно рассматривать наравне с баннерами. Баннер – это такая большая картинка, создающая нужную атмосферу и привлекающая внимание к определенной области макета.

Читать далее

Верстка \ Адаптивная верстка

100% правильный способ делать адаптивные брейкпоинты в CSS

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

Читать далее

Верстка \ Адаптивная верстка

Что я узнал о макете CSS Grid

От автора: статья нашего гостя, Оливера Уильямса. Оливер уже давно работает с макетом CSS Grid и кое-чему научился за это время. В этой статье он расскажет нам про концепции, которые он изучил. Мне нравится сама идея изучения макета путем разбития его на небольшие куски. Так проще изучать что-то крупное.

Читать далее

Верстка \ Адаптивная верстка

Адаптивные изображения на основе клиентских подсказок

От автора: не нужно быть фанатиком производительности, чтобы знать, что изображения могут сильно замедлить загрузку страниц. Мы проделали долгий путь: от ленивой загрузки изображений и до использования улучшенных форматов типа WebP. Однако все методы включают в себя загрузку одного и того же статичного URL изображения, что может подходить для десктопов, но не для мобильных устройств, и наоборот. У нас появился атрибут srcset в img, но его довольно сложно обслуживать на динамических сайтах, где основной контент делают пользователи.

Читать далее

Верстка \ Адаптивная верстка

Как создать адаптивный макет CSS Grid

От автора: статья из серии понятие макета CSS Grid. В прошлых уроках мы изучили синтаксис сеток, изучили несколько способов расположения элементов на странице и попрощались с некоторыми старыми привычками. В этом уроке мы применим все наши знания для создания адаптивного макета на практике.

Читать далее

Верстка \ Адаптивная верстка

Адаптивный табличный макет

От автора: меня раздражает, что очень часто таблицы плохо оптимизированы под мобильные устройства. К примеру, я на википедии со своего iPhone просматриваю список серий сериала Звёздный путь: Следующее поколение (да, я вырос в поздних 80-х), а в таблице очень много колонок и информации. И мне приходится долго листать назад и вперед, переворачивать телефон. Все это сильно раздражает.

Читать далее

Верстка \ Адаптивная верстка

Элементные запросы: будущее адаптивного веб-дизайна

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

Читать далее