Адаптивный веб-дизайн: bookmarklet

Отзывчивый веб-дизайн (Responsive Web Design или сокращенно RWD) имеет ряд преимуществ перед обычным дизайном:

  • Сайт одинаково хорошо выглядит практически на любом устройстве при любом разрешении экрана и любой ориентации дисплея;
  • Одна верстка вместо нескольких вариантов сайта под разные устройства (Mobile, PDA, iPone, iPad);
  • Это простая и веселая технология — все крутые парни используют ее.

В то время как отзывчивый веб-дизайн становится всё популярнее, инструментов для помощи разработчикам больше не становится. Многие из них похожи на утилиту Мэтта Керсли, которая показывает одну и ту же страницу во фреймах различного размера. Это полезно только для «живых» сайтов, которые уже есть в интернете, а что делать, если вы ведете разработку локально?

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

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

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

Букмаклер RWD

Нажмите на иконку в виде калькулятора, и вы увидите клавиатуру. Это уникальная особенность, о которой постоянно забывают веб-дизайнеры при проектировании форм.

Букмаклер RWD

Ссылки

Источник: https://www.kobzarev.com/makeup/the-responsive-web-design-bookmarklet/

Михаил Кобзарёв

Суровый русский тимлид. Жил в Магадане, в офисе московских веб студий и в Тульской деревне. Виртуозно знает WordPress, PHP, ООП, Vue.js и вот это вот все. Делает крутые высоконагруженные сайты, поэтому уже почти захватил весь рынок WordPress разработки в России. Не дает никому делать сайты без спроса. Ведет блог о разработке, дайджест в телеграмме и в ВК. Любит сиськи, баню и радиоэлектронику. 100% патриот (но это не точно). Тролль 542 уровня. Ездит в отпуск раз в 5 лет.

Добавить комментарий

%d такие блоггеры, как: