Створення адаптивного дизайну перед оновленням алгоритму Google 2015 :: Shopolog.ru

1. Суть відновлення алгоритму Google 2015
2. Як оптимізувати свій сайт для мобільних пристроїв
3. Корисні інструменти, які використовує команда розробників сайту Промокодабра:
4. Як швидко перевірити сайт на чуйність

Так як Google оголосив про оновлення алгоритму, яке відбудеться вже 21 квітня, варто серйозно задуматися вже зараз, яким буде найближче майбутнього вашого сайту. Прийдешнє оновлення експерти пошукача називають найпотужнішим серед усіх інших, але перш ніж починати панікувати, подумайте про те, що ж саме від вас хоча? А хочуть від вас мінімальних змін і сумлінної праці, що не так вже й багато.

Суть відновлення алгоритму Google 2015

26 Февраля Google розкрив всі карти і повідомив світові про те, що після 21 квітня ті сайти, які оптимізовані під мобільні пристрої, ранжируватимуться краще, ніж всі інші. Інформація засмутила багатьох веб-майстрів, особливо, тих, хто працює над міжнародними проектами і не мають більш милостивого Яндекса, який, в даному випадку, як сейф, збереже хоч частину трафіку. Так як проект Промокодабра є частиною міжнародного проекту Magic Coupons, для розробників питання оптимізації сайту для мобільних пристроїв став особливо гостро. Безумовно переробити все в такий короткий термін неможливо, але внести деякі зміни в скрипт сайту просто необхідно.

Як оптимізувати свій сайт для мобільних пристроїв

IT-розробники міжнародної команди сайту Промокодабра дали наступні поради тим, хто виявився не готовий до оновлення і кому необхідно в терміновому порядку заповнити цю прогалину:

1. Гектор Гавін Рівас - головний IT-розробник проекту:

"Для початку завжди використовуйте viewport. Це найпростіший метод створити чуйний дизайн. Для того, щоб ваш сайт добре виглядав на мобільних пристроях необхідно задати додаткові правила для області перегляду. Для цього можна використовувати мета-тег viewport, який підходить для всіх пристроїв. Необхідно додати наступне:

Device-width дає браузеру вказівку, що ширина області перегляду дорівнює ширині пристрою. Таким чином, він не буде ставити за замовчуванням 980px. Якщо ви задасте конкретну ширину смартфона, то на деяких пристроях з'являться спотворення, так як ширина у смартфонів різна, тому краще додати

initial-scale = 1.0, тоді вся рядок буде виглядати так:

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

2. Габріель Гамбаніні - провідний frontend розробник проекту:

"За допомогою медіазапросов CSS можна створити чуйний веб-дизайн. Як це зробити, Google докладно пояснює на сайті для розробників. Ми використовували атрибут max-width, який застосовується до браузеру з меншою шириною, ніж вказана в запиті. Таким чином вам не доведеться міняти контент, що заощадить багато годин роботи над оптимізацією сайту. Грубо кажучи, медаізапроси фільтрують стилі CSS і змінюють стилі на підставі характеристик пристрою, наприклад, тип контенту, ширину, орієнтацію і дозвіл екрана. Відповідно, корисними будуть наступні зміни:

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

3. Штефан Нольте - CEO компанії Global Leads Group:

"Якщо ви створюєте новий проект, то іспользуйтеfront-end фреймворки Bootstrap або Foundation по декільком простим причин:

1. Це спростить процес стандартизації при оптимізації сайту або форматуванні семантичної розмітки.

2. Ці фреймворки вже адаптивні, що на сьогоднішній день є дуже важливим фактором, тому що, як правило, частка мобільного трафіку будь-якого трафіку в середньому складає більше 30% загального трафіку (хоча, звичайно, злегка варіюється в залежності від аудиторії сайту).

3. У вас є багато різних нестандартних рішень вже інтегрованих в фреймфорк, тому немає потреби створювати стандартні компоненти дизайну, такі як галереї, модальні вікна і повідомлення. Зате ви можете повністю сконцентруватися на кастомізації. Я можу порекомендувати цей фреймворк не тільки для великих програмних додатків, але також для створення Лендінзі, тому що це значно заощадить ваш час ".

Корисні інструменти, які використовує команда розробників сайту Промокодабра:

• Інструменти веб-розробника Google Chrome

Даний інструмент використовується при налагодженні CSS і скрипта Java. Емулятор Хрома дозволяє протестувати внесені зміни в браузері вашого комп'ютера, а також на мобільному пристрої. Це, мабуть, два найбільш важливих переваги Google Chrome.

• Текстровий редактор Brackets

Даний текстовий редактор від компанії Adobe простий у використанні і радує великою кількістю тим і плагінів. Brackets може похвалитися унікальними розширеннями Inline Editor і Extract, при цьому надається абсолютно безкоштовно.

• Текстовий редактор Sublime

Базовий редактор коду, який також має багато тем і розширень, які спрощують роботу в рази. Встановити розширення можна за допомогою Package Control. Так ви самі формуєте свій текстовий редактор, можливості розширення якого практично безмежні.

Як швидко перевірити сайт на чуйність

Після внесення змін, перевірте, як відреагував Google. Нижче наведені два найпростіших способу, як це зробити:

1. Перевірка за допомогою Google пошуку

Спробуйте знайти сайт через Google з мобільного. C недавніх пір Гугл вказує в пошуковій видачі, мобільний сайт чи ні.

2. Перевірка зручності перегляду на мобільних пристроях

Гугл спеціально створив tool , Який покаже, чи зручний ваш сайт для перегляду на мобільних пристроях чи ні.

Ще в січні цього року Гугл розсилав попередження веб-майстрам, сайти яких не були оптимізовані для мобільних пристроїв. Якщо ви не отримували таке попередження, все одно перевірте ще разок, чи все в порядку, а якщо отримували, то варто поквапитися зі змінами, поки ви не полетіли на останні сторінки пошуку.