Рубрика «адаптивная вёрстка»

Приветствую!

Примерно месяц назад я написал статью, в которой выдвинул идею об оптимизации @media screen. Идея заключается в том, чтобы иметь возможность писать значения для всех экранов в одну строку. Более подробно можете почитать по ссылке. Большинство комментариев — это критика относительно реализации, к сожалению идей никто не подкинул. Но если посмотреть с другой стороны, из каждой критики можно вытащить идею, поэтому опираясь на мнение читателей, я поставил себе цель написать миксин, который:

  • легко читается (максимально повторяющий синтаксис sass/scss/css);
  • легко поддерживать (чтобы через год ты понимал, что там написано);
  • гибкий (поддержка максимального количества описаний @media);

Давайте посмотрим, что у меня вышло (репозиторий Github)!
Читать полностью »

Доброго времени суток, коллеги!

Давно задавался вопросом, как оптимизировать и сделать более удобным код используя @media screen. Ибо код

body{font-size: 1em;}
@media screen and (max-width: 1024px){
    body{font-size: 0.8em;}
}

создает достаточно крупные файлы.Читать полностью »

Адаптивная вёрстка - 1

В чём разница между резиновой, адаптивной и отзывчивой вёрсткой? Как правильно их применять?

Давайте разберёмся в отличиях подходов и попробуем сформулировать один общий вместо трёх.

Читать полностью »

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

image
Читать полностью »

Грамотная посадка верстки на CMS WordPress – задача важная (после нескольких проектов мне стало ясно, что это занимает достаточно много времени). Чтобы ускорить процесс, начал искать фреймворк для написания тем WordPress. О Gantry 5 узнал от коллеги, который ведёт сайты на Joomla. Он рассказал, что есть движок, который может работать, как и на WordPress, так и на Joomla (а с некоторых пор и на Grav). Вот и решил узнать о нём побольше. Ведь согласитесь, — это хорошо: работать с одной системой и, перейдя на другую, продолжить пользоваться теми же инструментами.

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

Прочитав всё, что смог найти в русскоязычном интернете и частично документацию, решил изучить Gantry 5. Использование в качестве шаблонизатора twig, и хранение конфигов в yaml формате стало дополнительным плюсом (поскольку я давно присматривался к symfony, но времени не находил – получалось частичное изучение инструментов).
image
Читать полностью »

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

image

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

Читать полностью »

Беглый анализ открытых данных показывает, что ежедневно в среднем 5 человек оставляют заявки на создание калькулятора на биржах фриланса — а еще несколько сотен интересуются вопросом в поиске. Часто запросы стандартны — и, конечно, на рынке сложился целый набор готовых предложений: от плагинов для конкретных CMS до калькуляторов, которые можно приобрести у студий. Рекорд, обнаруженный нами (см. в первом комментарии) — 24 999 рублей за довольно обычное решение.

Да, рынок есть рынок. Но поскольку мы в основном работаем с людьми, чьи сайты сделаны на конструкторах, у них нет 25 тысяч на один виджет, возникло желание написать калькулятор, которым они смогли бы пользоваться самостоятельно — и без изучения HTML, JS, JQuery и CSS.

Делаем более-менее универсальный калькулятор услуг для сайта - 1

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

Читать полностью »

Рекомендуется к прочтению верстальщикам, а так же их руководителям. Не является руководством к какому-либо действию.

Сегодня 13 февраля 17-ого. История началась 3 дня назад. Собственно проблема появилась следующая. Есть каруселька (это тип слайдера), верстальщику компании «R&K» пришёл запрос, о том что каруселька не адаптивная, т.е. не сжимается как положено, при сжатии окна браузера по ширине. Баг выявлен в Firefox v50.1.0 32-bit, Win7 32-bit. При этом, на следующий день, появился странный телефонный звонок от заказчика, с сообщением о том, что всё работает, и благодарность за быстрое реагирование. Т.к. вёрстку вообще никто не смотрел, то люди почесали в недоумении репы и разошлись. Через два дня снова позвонил заказчик, и уже яростно/истошно/дико/люто начал орать, что вёрстка снова не адаптивная, и не ужимается в окно браузера при сжатии браузера. Вот тут-то люди призадумались и начали крутить вёрстку.
Читать полностью »

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

Сайт smashingmagazine.com на различных размерах экранов

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

Читать полностью »

image

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

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