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

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

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

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

Какие факторы могут оказать влияние на лояльность клиентов?

В первую очередь на лояльность клиентов влияет:

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

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

Цена товара

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

Качество продукта

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

Выполнение условий поставки

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

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

Качество обслуживания

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

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

Отношение клиента

Любая компания желает заслужить признание и уважение клиентов. И не важно о каких клиентах идет речь: об индивидуальных потребителях или других организациях. Подходы к управлению лояльностью едины в любом случае. Для того чтобы клиент расставил приоритеты в вашу пользу выделите каждому сотруднику свою отдельную базу клиентов, так ему будет легче выстроить доверительные отношения с ними. Работник сможет выявлять индивидуальные потребности каждого клиента, что благотворно скажется на его лояльности по отношению к компании.

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

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

Как измерить лояльность?

Здесь приведены вопросы, ответы на которые помогут измерить лояльность ваших клиентов:

Как отзываются клиенты о компании? – показатель удовлетворенности потребителя;
Как давно была сделана последняя покупка? – показатель актуальности товара или услуги;
С какой частотой совершаются покупки? – показатель того, насколько регулярно клиент пользуется вашими услугами;
Давно ли человек (или организация) является вашим клиентом? – показатель длительность отношений с клиентом;
Сколько клиенты тратят? – показатель стоимости в денежном эквиваленте;
Какие отзывы оставляют о вас потребители? – позволит рассмотреть советы и предложения ваших клиентов;
Какую часть от расходов клиенты «оставляют» в вашей компании и у ваших конкурентов? – показатель доли в расходах клиента.

Для чего нужно знать какую часть от расходов клиенты «оставляют» в вашей компании? Анализировать расходы своих клиентов, приходящиеся на вашу продукцию необходимо для того, чтобы выстроить правильную маркетинговую политику и оценить уровень лояльности потребителя. Клиент верен и привержен к вашей компании до тех пор, пока доля вашей продукции в его расходах составляет 70-80%, когда этот показатель ниже 50 %, то клиент с легкостью примет предложение ваших конкурентов. Этот показатель требует точности, а не примерных подсчетов. Этот вопрос напрямую можно задать клиенту, и исходя из точных данных выстраивать стратегию дальнейшего развития.

Еще один важный вопрос, который должен задавать себе каждый бизнесмен: готовы ли клиенты помочь вашей компании? Помощь клиентов в первую очередь заключается в их желании и готовности распространять положительные или отрицательные отзывы о вашей компании. Часто люди с большей охотой ответят на вопрос об их готовности оставлять рекомендации, нежели на вопрос об их желании приобрести еще что-то из вашей продукции. Этот ценный вид сведений также поможет просчитать ходы в формировании системы лояльности.

Итоги:

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

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

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

Целью адаптивного дизайна является разработка универсального дизайна веб-сайта, который бы в свою очередь позволял просматривать и взаимодействовать с ресурсом с различных устройств.

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

Адаптивный веб-дизайн (англ. Adaptive Web Design) - дизайн веб-страниц, обеспечивающий корректное отображение сайта на различных устройствах, подключённых к интернету и динамически подстраивающийся под заданные размеры окна браузера.

Основные принципы адаптивного дизайна:

  • Адаптивный шаблон сайта , способность шаблона подстраиваться под различные разрешения экранов устройств от монитора компьютера до смартфона;
  • Адаптация и перемещение блоков контента , способность блоков контента в зависимости от разрешения экрана устройства принимать необходимые размеры, а также способность передвигаться на другую позицию в макете;
  • Адаптация изображений , способность изображений менять размер в зависимости от разрешения экрана или загружать более адаптированное изображение с меньшим весом и размером;
  • Использование гибкой сетки , позволяет максимально быстро изменять конструкцию макета;
  • Скрытие менее важных блоков , на небольших экранах некоторые блоки могут скрываться;
  • Переработка юзабилити элементов навигации , так как на мобильных устройствах в связи с небольшим разрешением элементы навигации становятся менее кликабельными, их перерабатывают, делая удобно-используемыми;
  • Упрощение ряда элементов на веб — странице , некоторые элементы упрощаются для использования на мобильных устройствах;
  • Адаптация видео контента , также следует учесть и адаптацию видео;
  • Использование медиа — запросов (media query), позволяют создавать адаптивный макет;
  • Сначала мобильные (mobile first), проектирование адаптивного дизайна начинается с макета для мобильных устройств.

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

Размеры макетов адаптивного дизайна

Как-то давно в 2012 году я писал небольшую статью о том, какие следует выбирать , разрабатывая дизайн — макет фиксированного сайта. Данная статья получила большой интерес среди читателей, оказывается, данный вопрос интересует многих начинающих дизайнеров и разработчиков. В связи, с чем в данной статье также решил осветить данный вопрос.

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

Если следовать принципу сначала мобильные то будут такие размеры разрешений, под которые необходимо разрабатывать макет 320px / 480px /768px / 1024px / 1280px может быть и больше зависит от задач.

Картина выглядит примерно, таким образом, но зачастую под какие-то разрешения нет необходимости создавать макет, к примеру, под 480px. если макет не ломается на промежутке 768 — 320px.

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

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

Мedia query и viewport в адаптивном дизайне

Для того чтобы сообщить браузеру как отобразить размеры страницы и изменить ее масштаб используется метатег viewport . Данный метатег прописывается в сайта. Он позволяет разработчикам установить ширину экрана для устройств, которая прописана в css.

Записывается мета тег viewport так:

  • width=device-width — означает что ширина страницы сайта устанавливается в соответствие ширине экрана устройства.
  • initial-scale=1.0 — данный атрибут скажет браузеру установить соответствие масштаба 1:1 для пикселей, что означает не масштабировать.

Слева без мета-тега, справа с использованием мета-тега viewport.

Также для мета-тега могут устанавливаться другие атрибуты и параметры.

Media Queries

В разработке адаптивных сайтов главную роль играют css3 media queries (медиа — запросы). Медиа – запросы включают в себя медиа — тип (принтеры, смартфоны, экраны, телевизоры, проекторы и др.) и условия, которое может принимать в свою очередь истину или ложь (true, false). В зависимости от того верный ли медиа — тип и выполняется ли условие будут применяться различные стили css. Если будет верно, то будут применяться те стили, которые прописаны в этом медиа – запросе, если же будет ложным, то будут применяться обычные стили css.

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

Записывается следующим образом:

@media screen and (max-width: 1000px) { .class { свойство: значение; } }

  • @media – медиа – запрос;
  • screen – медиа – тип (также называют тип носителя);
  • max-width: 1000px – условие, которое должно выполняться (в нашем случае стили будут применяться, если ширина окна меньше ширины 1000px);
  • . class – прописываются соответствующие селекторы (классы, id) в которых свойствам задаются новые значения.

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

  • max-width: width — означает, что если ширина окна браузера меньше заданной ширины, то выполняется условие и применяются соответствующие стили (пример: max-width: 768px, означает, что если ширина окна браузера меньше 768px то следует использовать стили, указанные в медиа — запросе).
  • min-width: width — означает, что если ширина окна браузера больше заданной ширины, то условие выполняется, и применяются указанные стили в запросе (пример: min-width: 480px).

Но также могут использоваться и другие функции: color, device-width, grid, height, orientation: landscape, orientation: portrait, resolution и другие.

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

  • 320px - мобильные
  • 480px - мобильные
  • 768px - планшеты
  • 1024px - планшеты, нетбуки
  • 1280px и более - персональные компьютеры.

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

В медиа – запросах также применяются и логические операторы такие как:

  • and – логическое И, применяется для объединения нескольких условий (пример: @media print and (color) { … }).
  • not – логическое НЕ, применяется для отрицания условия (пример: @media not all and (color) { … }).
  • only – применяется для старых браузеров, не поддерживающих медиа — запросы (пример: @media only screen and (max-width: 1300px) { … }).

Media queries прописываются в конце файла стилей, после всех основных стилей css.

Как сделать адаптивный дизайн сайта из фиксированного макета

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

  1. Первым делом делаем резервную копию шаблона (темы), на всякий случай.
  2. Далее нам потребуется программа для редактирования css, это может быть любой редактор кода, например brackets от adobe он бесплатный или Notepad++.
  3. А также браузер google chrome, с его инспектором кода (вызывается клавишей F12).

Далее начнем редактирование, для удобства можно перенести шаблон на денвер (локальный сервер), либо на поддомен, кому как удобнее, чтобы пользователи не видели все те правки, которые будут происходить с макетом. Первым делом добавим мета-тег viewport, о нем я писал выше в том виде как рекомендуется.
Далее нам необходимо перевести все статические единицы измерения в относительные единицы измерения.

Таковыми являются px, необходимо перевести их в %, а шрифты задать в em. В основном это касается ширин и шрифтов.

Ширину основного контейнера wraper {max-width: 960px;} оставляем без изменения, если записано width измените на max-width. Для остальных контейнеров будем менять ширину на % отношение. Переводить мы будем по формуле:

Размер контейнера (px) / размер основного контейнера (родителя) в (px) * 100% = результат (%)

Например, статичный контейнер тела сайта 720px размер основного контейнера (его родителя), к примеру, стандартный 960px, тогда получим следующее 720/960*100=75% .

Таким образом, мы переведем нашу статичную верстку в резиновую. Далее переведем наши шрифты, если они в px в em для этого опять же воспользуемся формулой:

Размер шрифта (px) /16px (стандартный размер) = размер шрифта (em)

Например, размер шрифта 32рх, тогда 32/16=2em.
После чего сделаем наши изображения адаптивными. Для этого в css пропишем следующие свойства и значения.

Img{ max-width:100%; height: auto; }

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

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

Ну, вот наша с вами основа готова, теперь необходимо определить контрольные точки, в которых макет будет перестраиваться, продумать, как будут вести себя блоки, что будем скрывать и записать это все в медиа – запросы. Определять эти самые переломные точки мы будем при помощи браузера google chrome.

Откроем в нем наш макет, нажмем клавишу F12 и будем уменьшать размер окна браузера. В верхнем правом углу у нас будут писаться размеры окна, нас интересует первое значение, оно указывает на ширину. Необходимо сжимать до тех пор, пока дизайн не перестанет корректно отображаться. В том размере, когда макет выглядит не корректно, мы и будем создавать контрольную точку.
Определив первую переломную точку, запишем ее в файл style.css в самый конец после всех основных стилей. Допустим наш макет, имеет левый сайдбар и контентную часть с анонсами, и при 910px сайт начинает отображаться не корректно. В данном случае мы запишем следующий медиа запрос.

@media only screen and (max-width: 910px){ /* контентную часть мы делаем во всю ширину, отменяем выравнивание*/ section { width: 100%; float: none; } /* сайдбар мы делаем также во всю ширину, отменяем выравнивание*/ aside{ width: 100%; float: none; } }

Если у этих блоков есть какие-то отступы (margin, padding) их следует, либо обнулить, либо учесть при написание ширины. К примеру, padding: 2%; тогда ширину запишет следующим образом width: 96%; .

Таким образом, мы адаптировали наш макет на разрешение меньше 910px. Если окно браузера будет меньше 910px, то контент станет во всю ширину, а сайдбар отпустится под контентную часть и станет также во всю ширину.

По такому же принципу мы создаем и остальные контрольные точки, находим ширину, при которой макет ломается (смотрится не корректно) записываем медиа – запрос, формируем для него стили задаем ширину блоков, можем скрыть менее важные блоки (display: none ).

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

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

Ну, вот вроде и все что хотел рассказать в этой статье, хотел написать немного об адаптивном дизайне, а получилось довольно объемно, надеюсь, материал будет вам полезен.

Адаптивный дизайн современного сайта является одним из основных показателей его качества.

Ни для кого не секрет, что доля использования мобильных устройств для доступа в интернет постоянно возрастает. Эта тенденция характерна как для всего Интернета, так и для Рунета в частности.

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

К тому же и поисковые системы ранжируют сайты, адаптированные для мобильных устройств более лояльно. Особенно это относится к ПС Google, которая прямо предъявляет к сайтам такие требования.

Что такое адаптивный дизайн сайта

Смысл адаптивного дизайна заключается в возможности комфортного просмотра и чтения материалов, размещенных на сайте на самых различных устройствах.

Основными критериями оценки удобства просмотра являются:

  1. Зона просмотра.
  2. Ширина контента.
  3. Размер шрифтов, картинок, окон для видео.
  4. Активные элементы.

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

Как сделать Ваш сайт адаптивным

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

  • Адаптивный шаблон сайта.
  • Мобильная версия сайта.
  • Установка специального приложения на устройстве пользователя.

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

При использовании мобильной версии сайта количество затрат труда, средств и времени сопоставимо с созданием и доработкой адаптивного шаблона.

Но при эксплуатации добавляются действия для поддержания актуальности мобильной версии сайта, синхронизации информации с основным сайтом. Да и для СЕО продвижения добавляются дополнительные вопросы с дублями и т.п.

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

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

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

Подводя черту, делаем вывод: создание адаптивного дизайна для своего сайта будет наиболее выгодным решением для небольшого или среднего сайта.

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

Для создания адаптивного дизайна придется прибегнуть к технологии адаптивной верстки. Ее суть состоит в следующем:
Сделать шаблон «резиновым»

То есть, не привязываться жестко к ширине страницы, а использовать относительные единицы. То есть сделать свой шаблон пропорционально сжимаемым, то есть «резиновым».

Для этого ширина страницы задается свойством css max-width вместо width, а уже относительно этой величины, ширину других элементов подбирают в процентах (%).

Определить «контрольные точки» ширины экрана

Определиться с контрольными точками (КТ) ширины экрана необходимо для планирования дальнейших действий.

Например.
Максимальная ширина экрана 1000 пикселей. Ширина экрана планшета – 800 пикселей, смартфона – 420 пикселей.

Эти контрольные точки (КТ) могут быть разными для различных типов сайтов. Иногда достаточно одной, к примеру 600 пикселей, а качество просмотра на более мелких разрешениях обеспечивается за счет «резиновости» шаблона.

Планирование компоновки экрана для каждой КТ

Согласно этим контрольным точкам скомпоновать расположение отдельных блоков на сайте таким образом, чтобы они корректно отражались на мобильных устройствах.

Для этого некоторые блоки, сайдбар, например, придется разместить ниже блока основного контента, а от второстепенных блоков, таких как реклама, слайдеры, заставки можно и вовсе отказаться.

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

Медиа запросы

Для задания контрольных точек необходимо использовать медиа запросы. Эти директивы стандарты CSS3 для управлением отображения содержимым страниц сайта для разных разрешений экрана.
Выглядит эта директива примерно следующим образом:

@media only screen and (max-width:520px) { .art-Header-jpeg{ height: 80%; display: none; } .art-Logo{ position: fixed; top: 10px; } .art-Logo-text{ display: none; } ........... операторы css ..... }

Адаптивный шаблон для блогов на WordPress

Адаптивный шаблон для своего блога на WordPress можно обеспечить несколькими способами.

  1. Установить соответствующий плагин.
  2. Купить готовый адаптивный шаблон.
  3. Адаптировать существующий шаблон самостоятельно или заказать услугу специалисту.

Решив шагать в ногу со временем, я также начал подготовку к адаптации своего блога. О плагинах адаптации тем на WP в интернете много подробной информации. Я познакомился с работой и требованиями популярных плагинов и решил, что их применение будет не самым оптимальным решением для моего блога.

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

Короче я остановился на третьем варианте и решил адаптировать свой шаблон самостоятельно.

Адаптивный шаблон для WordPress самостоятельно

Ознакомившись с принципами адаптации дизайна для мобильных устройств, я бодро приступил к делу, но почувствовал, что моих знаний по html, css, php недостаточно.

И уже начал склоняться к покупке готового шаблона, но в этот момент получил информацию о курсе двух Андреев Бернацкого и Кудлая «WordPress-Мастер от Личного блога до Премиум шаблона». Один из блоков этого курса содержал уроки по адаптации готового шаблона для мобильных устройств.

Цена на курс была сопоставима с ценой нового современного адаптивного шаблона. И я решил потратить эту сумму на приобретение курса и получить вместо готового шаблона – знания. Считаю. Что вложение было правильным и себя полностью оправдало.

Сервис Google по проверки скорости загрузки сайта для мобильных и стационарных устройств — https://developers.google.com/speed/pagespeed/insights/
Здесь же нам дают рекомендации по мероприятиям для ускорения загрузки Вашего сайта.

Хотел кратко описать еще несколько сервисов. но наткнулся на толковую подробную статью и решил не напрягаться, а дать Вам ссылку на нее — http://habrahabr.ru/post/189726/ .

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

Перевод крайне ценной статьи «Responsive Web Design Techniques, Tools and Design Strategies» популярного интернет-издания для разработчиков Smashing Magazine.

Еще в январе мы опубликовали статью об адаптивном дизайне «Responsive Web Design: What It Is and How To Use It» (Адаптивный веб-дизайн: Что это такое и как им пользоваться). Адаптивный веб-дизайн продолжает привлекать к себе много внимания, но, учитывая, насколько он отличается от традиционных методов разработки сайтов, он может показаться заоблачно сложным для тех дизайнеров и разработчиков, которые его не пробовали.

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

Техники Responsive web design

1. CSS Transitions and Media Queries
CSS Transitions и Media Queries

Elliot Jay Stocks подробно рассказывает о методе сочетания CSS Media Queries и CSS transitions. Основная идея в следующем: разрабатывая адаптивный сайт с помощью Media Queries, вы постоянно изменяете ширину вашего браузера, чтобы посмотреть, как сайт ведет себя при этом. Но каждый раз, когда отрабатывает один из ваших Media Queries, виден жесткий переход между стилями (первый, например, для десктопов, второй — для планшетов). Почему бы не использовать CSS transitions для сглаживания этих жестких переходов с помощью анимации?

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

5. Fluid Images
Резиновые изображения (масштабирование средствами браузера)

Резиновые изображения — одна из центральных тем в адаптивном веб-дизайне. В статье Ethan Marcotte приведен подробный обзор создания их с помощью классического фрагмента кода img { max-width: 100%; } , а также все необходимые детали, необходимые для началы работы.

Адаптивные письма электронной почты

14. Optimizing Your Email for Mobile Devices With the Media Query
Оптимизация электронной почты для мобильных устройств с помощью Media Queries

Для просмотра больших писем часто необходима горизонтальная прокрутка, особенно когда к письму приложено большое изображение. В данном исследовании Campaign Monitor объясняет, как электронные письма могут быть оптимизированы для мобильных устройств с помощью Media Queries и предложено несколько полезных методов и фрагментов кода для использования на практике.

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

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

Это быстрый и малый по объему Polyfill (фрагмент кода, добавляющий неподдерживаемый браузером функционал) создан Scott Jehl для поддержки свойств min-width и max-width из CSS3 Media Queries в IE6-IE8 и выше.

Используйте информацию из этого маленького интрумента для создания адаптивного сайта.

Инструмент для быстрого прототипирования адаптивного дизайна. Вы можете спроектировать CSS для различных популярных размеров экранов, ориентаций и браузеров, будь то телефоны (BlackBerry Torch, Google Nexus One,iPhone, Motorola Droid), планшеты (BlackBerry Playbook, iPad,Samsung Galaxy Tab, Dell Streak), мониторы или телевизоры (720p, 1080p).

Вы можете просмотреть результаты проектирования прямо в браузере и использовать привычные вам средства разработки, такие как Firebug. Также попробуйте альтернативный инструмент ScreenFly .

Инструмент 320 and Up основан на принципе mobile first (сначала мобильные устройства), при котором дизайн создается сначала для экранов мобильных устройств, а затем расширяется для планшетов, настольных ПК и больших экранов. Он хорошо работает как в качестве дополнения к HTML5 boilerplate, так и отдельно.

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

Фреймворки для адаптивного дизайна

33. 1140 CSS Grid

1140 CSS Grid оптимизирован для работы на экранах от размера мобильных устройств до мониторов 1280px в ширину. Это простая и гибкая сетка, использующая Media Queries .

Этот CSS-фреймворк — хорошая основа для разработки на крошечных экранах (например, телефоны) и небольших экранах (например, планшеты) прямо из коробки с минимальными усилиями. Помимо этого имеется генератор для создания резинового CSS-фреймворка под себя.

Flurid — это резиновая сетка на 6, 7, 8, 9, 10, 12 и 16 колонок.

FluidGrids — генератор модульной сетки, который создает макеты из 6, 7, 8, 9, 10, 12 или 16 колонок.

CSS-фреймворк для создания адаптивных макетов. Он содержит 4 базовых макета и три набора типографики.

Резиновый фреймворк с упором на типографику.

Tiny Fluid Grid поможет вам создать свою собственную резиновую сетку из 12, 16 or 24 колонок, задать их максимальную и минимальную ширину и отступ в процентах.

Стратегии адаптивного дизайна

40. The Responsive Designer’s Workflow
Workflow разработчика адаптивного веб-дизайна

Luke Wroblewski законспектировал презентацию Ethan Marcotte о применении принципов адаптивного веб-дизайна в модернизации сайта одной из ведущих газет. Среди прочего, Ethan объясняет, как он подходит к методологии проектирования адаптивного веб-дизайна и что из себя представляет процесс прототипирования в контексте адаптивного веб-дизайна.

Luke Wroblewski делал заметки на Конференции Breaking Development во время выступления Stephen Hay о реалиях проектирования для различных устройств.

Дискуссии и различные точки зрения на адаптивный веб-дизайн

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

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

Публикация представляет собой сочетание философии и стратегии для аккумулирования лучших практик в области адаптивного дизайна.

Регулярно обновляемая коллекция веб-сайтов, которые используют Media Queries.

В 9 серии The Big Web Show Jeffrey Zeldman и Dan Benjamin пригласили Ethan Marcotte, чтобы обсудить адаптивный дизайн.

Отличным дополнением к статье будет блог об адаптивном дизайне, в котором разработчики делятся опытом и пишут обзоры responsive инструментов.

  • responsive web design
  • responsive design
  • css3
    • Добавить метки

    Приветствую вас, случайные посетители и постоянные читатели блога сайт!

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

    Краткий план статьи:

    В предыдущей статье я уже писал о том, и зачем он нужен. Но как достичь этой самой адаптивности?

    Для этого есть разные способы. Кто то использует javascript, кто то что то еще. Но я считаю, что самый простой и правильный способ – это адаптивная с помощью CSS.

    Как сделать адаптивную верстку сайта


    Во-первых, если вы взялись верстать адаптивный дизайн сайта, между тегами вставьте следующий код:

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

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

    Как так? Я стал перепроверять все стили, правильно ли я прописал классы, в итоге дошел до того, что через javascript проверил ширину окна браузера в px. Я был в шоке. При проверке на ноутбуке я получил результат 1024px, и примерно такой же результат я получил открыв сайт на смартфоне!

    Но ведь этого не может быть!

    Оказывается, если не прописать код, который я указал выше, мобильный браузер не понимает, что сайт адаптивный и пытается просто уменьшить страницу сайта, чтобы она влезла в маленький экран мобильника.

    Из-за своей глупости и некомпетентности я потерял очень много времени. Зато теперь запомнил навсегда))).

    Адаптивная верстка CSS media запросы


    Чтобы сделать адаптивную с помощью CSS, необходимо использовать media запросы.

    Это как? Да, очень просто. В CSS файле нужно прописать запросы типа:

    @media screen and (min-width: 1440px) and (max-width: 1599px){ }

    Это код означает, что стили заключенные между “{ } ” будут работать для экранов с минимальной шириной 1440px и максимальной 1599px.

    То есть те стили элементов сайта, которые должны быть адаптированны в зависимости от разрешения экрана, должны быть прописаны отдельно для каждой возможной ширины экрана.

    Самые важные разрешения экрана, при адаптивной верстке

    • 320 px - Мобильные устройства (портретная ориентация);
    • 480 px - Мобильные устройства (альбомная ориентация);
    • 600 px - Небольшие планшеты;
    • 768 px - Планшеты (портретная ориентация);
    • 1024 px - Планшеты (альбомная ориентация)/Нетбуки;
    • 1280 px и более - PC.

    Именно на эти разрешения и нужно делать упор и уделять им особое внимание при адаптивной верстке. Это самые распространенные виды разрешений экранов.

    bootstrap адаптивный дизайн


    Очень удобно использовать для создания адаптивной верстки bootstrap. Удобство в том, что все стили для адаптации блоков, кнопок, таблиц и т.д. уже прописаны в bootstpap. Нужно только разобраться какой класс к какому элементу присвоить.

    Для начала, качайте свежую версию bootstrap и подключите его к своему сайту. Учтите, что подключение стилей и скриптов к wordpress имеет свои особенности.

    Верстка на bootstrap отличается тем, что ширина блока или экрана делится на 12 равных частей. И присваивая определенный класс блоку, можно задать ширину блока равной нужному количеству частей.

    Например, такая конструкция позволит выделить один широкий блок для контента шириной в 8 частей и один узкий для сайдбара шириной в 4 части экрана:

    Ширина блоков будет рассчитываться автоматически в зависимости от ширины экрана. А при просмотре на мобильном устройстве эти блоки будут смещаться друг под друга.

    Также можно регулировать отступ блок от края, опять же, на нужное количество частей. Например такая конструкция:

    Будет создан блок шириной в 10 частей с отступом слева в 1 часть экрана.

    Если разобраться, то работа с бутстрап делает работу с очень быстрой. При чем эти стили точно работают корректно и не будет ничего кривого на сайте.

    В будущем я планирую выложить несколько уроков по работе с bootsrap. Поэтому советую , чтобы не упустить этот момент.

    Проверка адаптивности сайта


    Но возникает вопрос: как проверять адаптивность сайта? Вот прописали вы media запросы в CSS, подключили bootstrap и используете нужные классы. А как вы проверите, что на всех разрешениях экрана сайт правильно адаптируется.

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

    Ну как вам статья? Все понятно? Если нет, пишите в комментарии, будем разбираться вместе.

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