Рубрики
vam shop Заметки Новости Обучение

Настройка SMS уведомлений в VamShop 2

Настройка SMS уведомлений в VamShop 2

В VamShop 2 встроена отправка SMS уведомлений покупателям, оформившим заказ в магазине.

Пример получаемых покупателем SMS (Шаблон отправляемого письма правится в Админке — Настройки — Шаблоны писем — new-order):

2015-08-04 17.11.28  2015-08-04 17.11.40

В данной заметке расскажем как настроить SMS уведомления в VamShop 2.

1. Для отправки SMS в VamShop 2 может использоваться любой Email -> SMS шлюз.

Отправка SMS покупателям была проверена на сервисах MainSMS.Ru и AvisoSMS.Ru.

Настройка SMS уведомлений состоит из двух частей:

1. Регистрация в MainSMS.Ru и получение email адреса для sms уведомлений.
2. Указание этого email адреса в Админке — Настройки — Магазин — SMS Email шлюз.

Всё легко и просто.

Нам нужно получить email адрес для отправки sms, т.е. зарегистрировать шлюз email -> sms.

1. Регистрируемся в сервисе MainSMS.Ru.

vamshop2-sms-1

2. Подтверждаем свою регистрацию. После чего нам нужно зайти в личный кабинет, ссылка Вход в личный кабинет.

vamshop2-sms-2

3. Переходим в личный кабинет.

vamshop2-sms-3

4. В личном кабинете переходим по ссылке API.

vamshop2-sms-4

5. Нажимаем кнопку Добавить проект.

vamshop2-sms-5

6. Заполняем поле Название проекта и нажимаем Создать API проект.

7. Мы создали проект, переходим внутрь нашего проекта, нажав на названии проекта.

8. Из поля E-Mail to SMS копируем указанный email ящик.

vamshop2-sms-6

Всё.

Осталось указать этот ящик в настройках магазина и SMS будут отправляться покупателям после оформления заказа в магазине.

Указываем наш полученный в сервисе mainsms.ru email в Админке — Настройки — Магазин — SMS Email шлюз.

vamshop2-sms-7

Теперь Ваши покупатели будут получать SMS уведомления при оформлении заказа в магазине.

Шаблон письма, которое отправляется покупателям в виде SMS и email письма правится в Админке — Настройки — Шаблоны писем — new-order.

Отчёты об отправленных SMS можно смотреть в своём личном кабинете на сайте MainSMS.Ru в разделе Личный кабинет — История сообщений.

vamshop2-sms-8

Рубрики
vam shop Заметки Новости

Новая версия VamShop 2.35

Выпущена новая версия VamShop 2.35.

Что изменилось:

1. Новый шаблон админки.
2. Новое меню навигации в админке.
3. Добавлена кнопка scrollup в админку.
4. Исправлена ошибка с выводом картинки, с порядком сортировки картинки.
5. Добавлена настройка Маска телефона в Админке — Настройки — Магазин.
6. Добавлены подсказки https://dadata.ru/suggestions/ в модуль оформления заказа.
7. Корректировка кода запроса контента.
8. Корректировка скрипта открытия картинок colorbox.
9. Шрифт иконок FontAwesome обновлён до текущей версии.
10. Добавлена опция DaData.Ru API ключ подсказок в Админке — Настройки — Магазин.

Полный список изменений доступен на форуме поддержки http://forum.vamshop.ru

Рубрики
vam shop Заметки Новости

Добавлен сервис подсказок DaData.Ru в модуль оформления заказа!

Для удобства покупателей (особенно для пользователей смартфонов и планшетов) в модуль оформления заказа добавлены подсказки DaData.Ru — https://dadata.ru/suggestions/

Проверить работу подсказок можно в онлайн демо-версии http://demo2.vamshop.ru
Добавьте товар в корзину и перейдите к оформлению заказа.

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

Скриншоты

Подсказки для имени и фамилии:
Screenshot from 2015-07-29 21:05:07

Подсказка для поля Адрес и автоматическое заполнение полей Город, Почтовый индекс, Регион:
Screenshot from 2015-07-29 21:05:52

Модуль подсказок встроен в VamShop 2.36 и выше.
Регистрируетесь в сервисе https://dadata.ru/suggestions/, получаете свой API ключ и указываете его в Админке — Настройки — Магазин — DaData.Ru API ключ подсказок.

Рубрики
vam shop Заметки Новости

Бесплатный адаптивный шаблон E-Shopper для VamShop 2

Добавлен новый бесплатный адаптивный шаблон для VamShop 2 — E-Shopper.

eshopper-screenshot-1-ru  eshopper-screenshot-2-ru  eshopper-screenshot-3-ru  eshopper-screenshot-4-ru  eshopper-screenshot-5-ru

Скачать шаблон E-Shopper для VamShop 2.

Рубрики
vam shop Заметки Новости Обучение Продажи

Максимально упрощаем оформление заказа в VamShop 2!

По умолчанию в VamShop 2 оформление заказа выглядит на смартфоне/десктопе вот так:
vamshop2-fast-checkout8   vamshop2-fast-checkout6

В данной заметке расскажу как сделать на смартфоне/десктопе вот так:
vamshop2-fast-checkout9   vamshop2-fast-checkout7

Максимально упростим оформление заказа в магазине, даже со смартфонов/планшетов можно быстро и удобно оформить заказ.

Что мы будем делать:
1. Уберём обязательное поле email, обязательными будут только Имя и Телефон.
2. Уберём все остальные лишние поля.
3, Из модулей доставки оставим только курьерскую доставку.
4. Из модулей оплаты оставим только оплату наличными курьеру.

Приступим:

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

Для этого в Админке — Расширения — Тэги выбираем тэг checkout.
vamshop2-fast-checkout1

Внизу страницы нажимаете кнопку — Создать микро шаблон из тэга.
vamshop2-fast-checkout2

На следующей странице создания микро шаблона в опции Псевдоним указываем название нашего нового шаблона, например my-checkout и нажимаем Продолжить.

vamshop2-fast-checkout3

Шаблон создан для страницы оформления заказа.

2. Теперь нам нужно указать, что б страница оформления заказа отрисовывалась нашим шаблоном my-checkout, а не шаблоном по умолчанию.

Для этого в Админке — Содержание — Страницы редактируем страницу Оформление и меняем {checkout} на {checkout template=’my-checkout’}

vamshop2-fast-checkout4

т.е. мы указали, что страница оформления заказа должна отрисовываться нашим шаблоном my-checkout.

Нажимаем кнопку Продолжить.

Всё, мы указали, что страница офомления заказа теперь отрисовывается нашим шаблоном my-checkout.

Осталось лишь отредактировать наш микро шаблон my-checkout и убрать всё лишнее.

3. Заходим в Админку — Оформление — Микро шаблоны и нажимаем на нашем шаблоне my-checkout, откроется страница редактирования шаблона.

vamshop2-fast-checkout5

Удаляем всё лишнее, в поле Шаблон должен остаться только вот этот код:

<script type="text/javascript">
$(function () {

  $("#contentform :input:text:visible:enabled:first").focus();

  $("form#contentform :input").change(function() {
    $("input[id='" + this.id + "']").addClass("modified");
    $("radio[id='" + this.id + "']").addClass("modified");
    $("select[id='" + this.id + "']").addClass("modified");
    $("checkbox[id='" + this.id + "']").addClass("modified");
    $("textarea[id='" + this.id + "']").addClass("modified");
  });
      	
$("label.shipping-method").click(function(){
$("label.shipping-method").parent().removeClass("selected");
$(this).parent().addClass("selected");
});

$("label.payment-method").click(function(){
$("label.payment-method").parent().removeClass("selected");
$(this).parent().addClass("selected");
});
	
  // validate form
  $("#contentform").validate({
    rules: {
      bill_name: {
        required: true,
        minlength: 2      
     },
      phone: {
        required: true,
        minlength: 10,
     },
    },
    messages: {
      bill_name: {
        required: "{lang}Required field{/lang}",
        minlength: "{lang}Required field{/lang}. {lang}Min length{/lang}: 2"
      },
      phone: {
        required: "{lang}Required field{/lang}",
        minlength: "{lang}Required field{/lang}. {lang}Min length{/lang}: 10"
      }
    }
  });

  });
</script>
<div id="checkout">
<form action="{$checkout_form_action}" method="post" id="contentform" class="form-horizontal">
  <div id="bill_information">
    <div>
      <h3>{lang}Billing Information{/lang}</h3>
    </div>
	<div class="form-group">
		<label class="col-sm-3 control-label" for="bill_name">{lang}Name{/lang}:</label>
		<div class="col-sm-9">
			<input type="text" class="form-control" name="bill_name" id="bill_name" value="{if $customer.AddressBook.ship_name}{$customer.AddressBook.ship_name}{else}{$order.bill_name}{/if}"/>
		</div>
	</div>
	<div class="form-group">
		<label class="col-sm-3 control-label" for="phone">{lang}Phone{/lang}:</label>
		<div class="col-sm-9">
			<input type="text" class="form-control" name="phone" id="phone" value="{if $customer.AddressBook.phone}{$customer.AddressBook.phone}{else}{$order.phone}{/if}" />
		</div>
	</div>
  </div>
  <div id="shipping_method">
    <div>
      <h3>{lang}Shipping Method{/lang}</h3>
    </div>  
  <div class="clearfix">
	<ul class="shipping-methods">
    {foreach from=$ship_methods item=ship_method}
		<li class="item col-sm-6 col-md-4{if $ship_method.id == $order.shipping_method_id} selected{/if}">
      <label class="shipping-method">
      <span class="title">
        <input type="radio" name="shipping_method_id" value="{$ship_method.id}" id="ship_{$ship_method.id}" 
        {if $ship_method.id == $order.shipping_method_id}
          checked="checked"
         {/if}
        />
		<span class="name">{lang}{$ship_method.name}{/lang}</span>
		</span>
		<span class="image text-center">
				{if $ship_method.icon}<img src="{base_path}/img/icons/shipping/{$ship_method.icon}" alt="{$ship_method.name}" title="{$ship_method.name}" /> {/if}
		</span>
		{if $ship_method.cost_plain > 0}<span class="description">{$ship_method.cost}</span>{/if}
		{if $ship_method.description}<span class="description">{$ship_method.description}</span>{/if}
		</label>	
		</li>
    {/foreach}
	</ul>
	</div>
  </div>

  <div id="payment_method">
    <div>
      <h3>{lang}Payment Method{/lang}</h3>
    </div>    

  <div class="clearfix">
	<ul class="payment-methods">
    {foreach from=$payment_methods item=payment_method}
		<li class="item col-sm-6 col-md-4{if $payment_method.id == $order.payment_method_id} selected{/if}">
      <label class="payment-method">
      <span class="title">
        <input type="radio" name="payment_method_id" value="{$payment_method.id}" id="payment_{$payment_method.id}" 
        {if $payment_method.id == $order.payment_method_id}
          checked="checked"
         {/if}        
        />
		<span class="name">{lang}{$payment_method.name}{/lang}</span>
		</span>
		<span class="image text-center">
				{if $payment_method.icon}<img class="text-center" src="{base_path}/img/icons/payment/{$payment_method.icon}" alt="{$payment_method.name}" title="{$payment_method.name}" /> {/if}
		</span>
		{if $payment_method.description}<span class="description">{$payment_method.description}</span>{/if}
		</label>	
		</li>
    {/foreach}
	</ul>
  </div>
	    
  </div>

	<div class="form-group">
	  <div class="col-sm-offset-3 col-sm-9">
	    <button class="btn btn-warning" type="submit" value="{lang}Continue{/lang}"><i class="fa fa-check"></i> {lang}Continue{/lang}</button>
	  </div>
	</div>
</form>
</div>

Сохраняем наш микро шаблон my-checkout.

Теперь наше оформление заказа в магазине максимально простое.

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

vamshop2-fast-checkout9   vamshop2-fast-checkout7

Обратите внимание, что нам не пришлось копаться в php коде, подключаться по ftp, скачивать файлы и прочее-прочее, всё делается прямо в админке, никаких лишних программ, нет лишней траты времени, всё удобно и легко.

Спасибо за внимание.

Рубрики
vam shop Заметки Новости

Добавлена возможность изменения цветовой схемы любым посетителем магазина, по своему вкусу!

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

Демо-версия VamShop 2: http://demo2.vamshop.ru

Смена цветового оформления в правом верхнем углу.

Скриншоты:

Screenshot from 2015-06-25 22:19:06   Screenshot from 2015-06-25 22:20:19

Рубрики
vam shop Заметки Новости

Новый модуль — Ярлыки товара

Добавлен новый модуль — Ярлыки товара.

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

Ярлыки товаров выводятся как в списке товара:

product-labels-1

так и на странице карточки товара:

product-labels-4

Кроме текстовых ярлыков можно добавлять ярлыки графические, в виде абсолютно любой картинки, в данном примере ярлык -50% добавлен в виде картинки:

product-labels-6

Соответственно, оформление ярлыков может быть абсолютно любым.

Настраиваются ярлыки в Админке — Настройки — Ярлыки товара.

product-labels-2

Сначала создаётся список ярлыков:

product-labels-5

Затем при создании/редактировании товара в закладке Данные, в опции Ярлык товара выбранный ярлык цепляется к конкретному товару:

product-labels-3

Рубрики
vam shop Заметки Новости

Сравнение VamShop с конкурентами используя сервис PageSpeed Insights!

В данной заметке мы сравним VamShop с нашими конкурентами, используя сервис Google PageSpeed Insights.

Просто цифры, ничего личного 🙂

Вот что нам говорит Google про PageSpeed Insights:

Page Speed Insights измеряет скорость загрузки веб-страниц. URL проверяется дважды – с помощью обычного и мобильного агента пользователя.

Оценка PageSpeed может составлять от 0 до 100 баллов. Чем больше оценка – тем лучше. Если страница набрала более 85 баллов, значит она загружается быстро. Обратите внимание, что PageSpeed Insights постоянно развивается, поэтому по мере добавления новых правил или усовершенствования аналитических алгоритмов оценка иногда меняется.

Рассматривать будем следующих конкурентов VamShop:
1. Shop Script 5официальный сайт, онлайн демо-версия.
2. PHPShopофициальный сайт, онлайн демо-версия.
3. SimplaCMSофициальный сайт, онлайн демо-версия.
4. и, собственно, VamShopофициальный сайт, онлайн демо-версия.

План следующий:
1. Заходим на официальный сайт с онлайн-демо версией.
2. Проверяем с помощью PageSpeed Insights.
3. Показываем результат для мобильной и desktop версии.

1. Shop Script 5, официальная онлайн демо-версия находится по адресу: http://demo2-ru.webasyst.com

Результат:
pagespeed-insights-demo2-ru-webasyst-com-mobile

pagespeed-insights-demo2-ru-webasyst-com-desktop

Mobile версия.
Количество баллов: 61 из 100

Desktop версия.
Количество баллов: 75 из 100

2. PHPShop, официальная онлайн демо-версия находится по адресу: http://demo.phpshop.ru

Результат:
pagespeed-insights-demo-phpshop-ru-mobile

pagespeed-insights-demo-phpshop-ru-desktop

Mobile версия.
Количество баллов: 54 из 100

Desktop версия.
Количество баллов: 66 из 100

3. SimplaCMS, официальная онлайн демо-версия находится по адресу: http://demo.simplacms.ru

Результат:
pagespeed-insights-demo-simplacms-ru-mobile

pagespeed-insights-demo-simplacms-ru-desktop

Mobile версия.
Количество баллов: 65 из 100

Desktop версия.
Количество баллов: 88 из 100

4. VamShop 2, официальная онлайн демо-версия находится по адресу: http://demo2.vamshop.ru

Результат:
pagespeed-insights-demo-vamshop-com-mobile

pagespeed-insights-demo-vamshop-com-desktop

Mobile версия.
Количество баллов: 74 из 100

Desktop версия.
Количество баллов: 90 из 100

Подводим итоги:

Первое место — VamShop: 164 балла.
Второе место — SimplaCMS: 153 балла.
Третье место — Shop Script 5: 136 баллов.

Почему это так важно, спросите Вы?!

Дело всё в том, что с каждым днём пользователей мобильных устройств всё больше и больше, прежде всего, пользователей смартфонов и планшетов, сервис PageSpeed Insights особенно интересен как один из возможных инструментов оценки мобильных версий интернет-магазинов.

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

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

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

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

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

Читайте так же в нашем блоге заметку про адаптивный шаблон VamShop.

Спасибо за внимание.

P.S. Читайте наш блог, оставляйте свои комментарии.

Рубрики
vam shop Заметки Новости

Сравниваем VamShop с основными конкурентами используя сервис YSlow!

В данной заметке мы сравним VamShop с нашими конкурентами, используя сервис YSlow.

Просто цифры, ничего личного 🙂

Вот что нам говорит Wikipedia про YSlow:

YSlow — расширение для браузера Mozilla Firefox, измеряющее скорость загрузки страницы и её отдельных компонентов. Кроме измерения скорости, проводится анализ всех компонентов: есть ли заголовки, вынесены ли стили и скрипты в отдельные файлы, используется ли компрессия, перенаправления, анализируется даже взаимное расположение компонентов на странице и даются рекомендации по оптимизации, основанные на собственных исследованиях и тестах Yahoo в этой области.
Расширение работает не самостоятельно, а в качестве компонента, встраиваемого в расширение Firebug.

Рассматривать будем следующих конкурентов VamShop:
1. Shop Script 5официальный сайт, онлайн демо-версия.
2. PHPShopофициальный сайт, онлайн демо-версия.
3. SimplaCMSофициальный сайт, онлайн демо-версия.
4. и, собственно, VamShopофициальный сайт, онлайн демо-версия.

План следующий:
1. Заходим на официальный сайт с онлайн-демо версией.
2. Проверяем с помощью YSlow.
3. Показываем результат.

1. Shop Script 5, официальная онлайн демо-версия находится по адресу: http://demo2-ru.webasyst.com

Результат:
yslow-demo2-ru-webasyst-com

Оценка: C
Количество баллов: 75 из 100

2. PHPShop, официальная онлайн демо-версия находится по адресу: http://demo.phpshop.ru

Результат:
yslow-demo-phpshop-ru

Оценка: D
Количество баллов: 68 из 100

3. SimplaCMS, официальная онлайн демо-версия находится по адресу: http://demo.simplacms.ru

Результат:
yslow-demo-simplacms-ru

Оценка: C
Количество баллов: 80 из 100

4. VamShop 2, официальная онлайн демо-версия находится по адресу: http://demo2.vamshop.ru

Результат:
yslow-demo-vamshop-com

Оценка: A
Количество баллов: 92 из 100

Подводим итоги:

Первое место — VamShop: 92 балла из 100 возможных.
Второе место — SimplaCMS: 80 баллов из 100 возможных.
Третье место — Shop Script 5: 75 баллов из 100 возможных.

Казалось бы, такая мелочь, кому это интересно…

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

Спасибо за внимание.

P.S. Читайте наш блог, оставляйте свои комментарии.

Рубрики
vam shop Заметки Новости

Адаптивный дизайн в VamShop

В VamShop по умолчанию используется адаптивный дизайн.

Что такое адаптивный дизайн по версии wikipedia.org:

Адаптивный веб-дизайн (англ. Responsive web design) — дизайн веб-страниц, обеспечивающий отличное отображение сайта на различных устройствах, подключённых к интернету.
Целью адаптивного веб-дизайна является универсальность веб-сайта для различных устройств. Для того, чтобы веб-сайт был удобно просматриваемым с устройств различных разрешений и форматов, по технологии адаптивного веб-дизайна не нужно создавать отдельные версии веб-сайта для отдельных видов устройств. Один сайт может работать на смартфоне, планшете, ноутбуке и телевизоре с выходом в интернет, то есть на всем спектре устройств.[1]

Почему адаптивный дизайн так важен?

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

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

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

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

Давайте посмотрим как выглядит интернет-магазин, созданный на VamShop в зависимости от устройства, на котором мы заходим в интернет-магазин.

1. Ноутбук.

vamshop-responsive-template-notebook

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

2. Планшет.

vamshop-responsive-template-tablet

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

В случае адаптации для планшета изменения следующие:

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

3. Смартфон.

vamshop-responsive-template-smartphone

Самый маленький экран у смартфона и шаблон адаптируется под экран смартфона, а именно:

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

Таким образом работает адаптивный шаблон в интернет-магазинах, созданных на базе VamShop.

Самое главное — используется один и тот же html, css код для всех типов устройств, нет никаких отдельных версий для мобильных устройств, шаблон един для всех типов устройств, все адаптации работают через css свойства media, min-width, max-width.

Дополнительная информация:
Статья на wikipedia.org — Адаптивный дизайн
Bootstrap
jQuery