websoft.biz.ua
НАДІСЛАТИ ЗАПИТ
Номер телефону:

Контакти
websoft.biz.ua
НАДІСЛАТИ ЗАПИТ
Номер телефону:

Контакти
websoft.biz.ua
Сайт-візитка$250
SEO оптимізація
Адаптивний дизайн для всіх пристроїв
Сучасні технології WORDPRESS
Протокол безпеки HTTPS
Висока швидкість: версія php 7+
Домен в подарунок!
Хостинг на рік в подарунок
ЗАМОВИТИ
Лендінг пейдж$300
SEO оптимізація
Адаптивний дизайн для всіх пристроїв
Сучасні технології WORDPRESS
Протокол безпеки HTTPS
Висока швидкість: версія php 7+
Домен в подарунок!
Хостинг на рік в подарунок
ЗАМОВИТИ
Корпоративний$450
SEO оптимізація
Адаптивний дизайн для всіх пристроїв
Сучасні технології WORDPRESS
Протокол безпеки HTTPS
Висока швидкість: версія php 7+
Домен в подарунок!
Хостинг на рік в подарунок
Корпоративна пошта в подарунок. Наприклад, info@websoft.biz.ua
Декілька годин навчання користуванню сайтом
Ручне додавання вашої компанії в 10-15 каталогів України
ЗАМОВИТИ
Інтернет-магазин$680
SEO оптимізація
Адаптивний дизайн для всіх пристроїв
Сучасні технології WORDPRESS
Протокол безпеки HTTPS
Висока швидкість: версія php 7+
Домен в подарунок!
Хостинг на рік в подарунок
Корпоративна пошта в подарунок. Наприклад, info@websoft.biz.ua
Декілька годин навчання користуванню сайтом
Ручне додавання вашої компанії в 10-15 каталогів України
Імпорт ваших товарів з Excel
Консультація і підтримка перші 30 днів
ЗАМОВИТИ
ПОРТФОЛІО
websoft.biz.ua створення сайтів Львів
TMT-CHAMPION.COM.UA
Інтернет-магазин спортивного бренду
websoft.biz.ua створення сайтів Львів
PROTEIN.BIZ.UA
Інтернет-магазин спортивного харчування
websoft.biz.ua створення сайтів Львів
REDROSE.LVIV.UA
Сайт візитка дому краси
websoft.biz.ua створення сайтів Львів
LEDLEO.COM.UA
Лендінг роздрібного магазину
websoft.biz.ua створення сайтів Львів
GUMA.LVIV.UA
Корпоративний сайт компанії «ГУМА ЛЬВІВ»
websoft.biz.ua створення сайтів Львів
AVEON.COM.UA
Інтернет-магазин гаджетів
websoft.biz.ua створення сайтів Львів
LEDLEO.COM.UA
Лендінг роздрібного магазину
websoft.biz.ua створення сайтів Львів
FABRIKSTYLE.COM.UA
Корпоративний сайт виробництва чоловічих сорочок
websoft
ЦЕ КРУТА АНІМАЦІЯ,
яка заворожує
ЕТАПИ РОЗРОБКИ САЙТУ
1
Планування
При зустрічі обговорюємо цілі, терміни і вартість
2
Реалізація
Ми покроково починаємо розробку сайту і відправляємо щоденні звіти
3
Тестування
Після розробки тестуємо адаптивний дизайн, функціонал сайту
websoft.biz.ua
4
Завершення
Переносим сайт на сервер. Віддаємо логін:пароль
розробка сайтів
Ми займаємось своїми проектами з 2013 року. За цей час добре розуміємо зміни і тренди в інтернеті, які способи працюють, а які тільки шкодять сайту. Націлені на кінцевий результат. По наявних кейсах можемо наглядно продемонструвати як працює та чи інша стратегія розвитку сайта. Не пропонуємо «секрет успіху за день», адже створення і розвиток сайтів це клопітка і послідовна робота, до якої варто ставитись серйозно і відповідально. З 2020 року ми почали розробляти сайти для підвищення ефективності бізнес процесів. За допомогою наших веб-рішень, ми створили портал для дропшиппінгу (автоматичних замовлень і відправок товару), котрий допоміг нам створити новий вид бізнесу в інтернеті. Ми постійно реалізовуємо нові ідеї і доповнюємо їх, тому що самі ними користуємось.
Створення сайтів Львів
75
проектів
9
партнерів
7
сертифікатів
5
працівників
websoft.biz.ua
websoft.biz.ua
websoft.biz.ua
websoft.biz.ua
ПОЧАТОК

Все почалось в далекому 2013 році, коли я вперше створив свій власний сайт. Тоді я не догадувався скільки інформації потрібно буде взнати, а просто хотів сайт, на який будуть заходити люди. Всі знання здобував по мірі поступлення нових завдань, які я собі ставив. Бувало і таке, що знищив свій сайт з відвідуваністю 2500 в день. Тепер я розумію, що через всі проблеми потрібно було пройти. Так я отримував дорогоцінний досвід.

Продовж декількох років я плавно розвивав свої сайти, які зараз приносять стабільний дохід з контекстної реклами (Google Adsense). Всю роботу я проводив паралельно з моєю офіційною роботою, тому приділяв стільки часу, скільки це було можливо.

Моя ціль: Орендувати офіс. Зробити так, щоб люди могли приходити, спілкуватись і ділитись новими ідеями. Зібрати команду до 10 осіб, щоб ми разом розвивали веб проекти. Створювати і підтримувати сайти(в майбутньому: мобільні додатки, масштабні веб проекти) для усіх бажаючих.

Що для вас? Ділитимусь інформацією і результатами. Буду робити якісь експерименти. Наприклад, кожен день, протягом 6 місяців робити якусь роботу і звітувати про результати. Так я і ви зможемо зрозуміти, що я роблю і який від цього ефект. Ідея створювати сайти під замовлення прийшла сама собою, коли люди самі почали пропонувати створити їм сайт. Так ось, маючи досвід створення і розкрутки різних сайтів, я зможу поділитись результатом.

На 2019(січень): Загальна відвідуваність близько 4 тис. на добу. Щоб досягти такого результату, було викладено багато унікальних статей на сайт і відео на Youtube. В цьому році я зрозумів, що сайти, це те, чим я займаюсь у вільний час, це мені подобається і я буду далі цим займатись. Тому виникло бажання зайнятись цим професійно: зосередитись на розвитку і надавати послуги іншим людям.

2019 червень. Офіс знято! більше 20м квадратних в прекрасній локації. Спочатку почнемо працювати вдвох. Тепер залишається працювати і розвиватись у своїй справі:)

Автор: Олександр Тишківський

крок за кроком адаптуємо сайт під мобільні пристрої

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

Х'юстон, у нас проблема

Найпростіший спосіб перевірити адаптацію сайту під мобільні пристрої - відкрити його на цих самих мобільних (смартфон, планшет). Явні ознаки проблем:

Сайт або якісь його частини (картинки, таблиці) не поміщаються цілком в екран:

Все дуже дрібне, не виходить з першого разу потрапити пальцем в кнопку або посилання:

Доводиться прокручувати кілька екранів шапки (або фільтрів), щоб дістатися до контенту:

Спливаючі банери (більше 50% екрану), або занадто багато реклами:

Якщо смартфона під рукою немає або він не підключений до мережі, можна скористатися онлайн-сервісами зі звичайного комп'ютера:

1. Mobile Friendly від Google : https://search.google.com/test/mobile-friendly

Вбиваємо адресу сайту, тиснемо «Перевірити», бачимо результат:

2. Перевірка мобільних сторінок від Яндекса : https://webmaster.yandex.ru/site/tools/mobile-friendly/ (якщо ваш сайт вже доданий в Яндекс.Вебмайстер)

Вибираємо адресу сайту, тиснемо «Перевірити», бачимо результат:

3. Перевірка в браузері в Інструментах розробника

Відкриваємо сайт в браузері і в меню (браузера) шукаємо пункт «Додаткові інструменти» - «Інструменти розробника». Або тиснемо на клавіатурі F12. Якщо не спрацювало F12, тиснемо поєднання клавіш CTRL + Shift + I. Справа або внизу браузера нам відкриється Панель розробника, на ній тиснемо на іконку перемикання на мобільні пристрої і вибираємо модель смартфона, на якій хочемо перевірити сайт:

Ключ на старт

Отже, проблема виявлена, тепер потрібно визначитися, яким ми хочемо бачити свій сайт на мобільних пристроях.

Для розробки макета сайту для мобільних можна звернутися:

- До професійних дизайнерів. З ними відразу обговоріть, для яких розмірів екрану вам потрібні макети (наприклад, 320 пікселів в ширину для смартфонів і 768 пікселів в ширину для планшетів) і для яких розділів сайту (наприклад, головна сторінка, типова внутрішня сторінка, список статей в блозі і стаття блогу). Що ще варто перевіряти, приймаючи макет від дизайнера, читайте в статті .

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

- До власних образотворчим здібностям. Якщо у вас є розуміння, що ви хочете отримати в результаті, і ця підсумкова версія не вимагає окремого дизайну (використовує поточні рішення), то ви можете на словах і стрілочка розписати ТЗ для верстальника в тому ж ворде.

Поїхали!

Приступаємо до адаптації сайту під мобільні.

Крок 1. Вказуємо тег Viewport

Нам потрібно повідомити браузеру, що контент нашого сайту буде підлаштовуватися під ширину пристрою (звичайного комп'ютера, планшета або смартфона) і буде видно в оригінальному масштабі. Для цього додаємо мета-тег viewport в секцію <head> в коді сайту (можна поставити перед тегом title):

<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<title> Автосервіс Mr Red: ремонт та обслуговування автомобілів в Красноярську </ title>

Тут: 
width = device-width - говорить браузеру, що ширина його вікна повинна бути рівна ширині пристрою, 
initial-scale = 1 - сайт потрібно показати в звичайному масштабі (без збільшення або зменшення).

Якщо не вказати тег viewport, то браузер буде за замовчуванням вважати ширину контенту рівною стандартній ширині для робочого столу (1024 пікселів) - і на телефоні з шириною 340 пікселів ваш сайт буде зменшений в 3 рази. Тому щоб адаптивна верстка спрацювала, обов'язково прописуємо viewport з device-width.

Крок 2. Оновлюємо стилі сайту

Беремо макети сайту для мобільних пристроїв і додаємо в стилі сайту додаткові правила для відображення блоків на різній ширині екрану:

/ * 
  ... стандартні правила CSS ... 
  наприклад, виводимо картки товарів по 4 в ряд 
* / 
@media (max-width: 768px) {
  / * 
    ... правила для планшетів ... 
    виводимо картки товарів по 2 в ряд 
  * / 

@media (max-width: 320px) {
  / * 
    ... правила для смартфонів ... 
    виводимо картки товарів по 1 в ряд 
  * / 
}

Тепер браузер буде дивитися на ширину пристрою і застосовувати додатково потрібний блок правил для відображення сайту.

Що найчастіше роблять додаткові стилі:

- Зменшують число блоків в одному ряду. Наприклад, на звичайному комп'ютері виводиться 4 блоки в ряд (картки товарів). Очевидно, що на екрані телефону 4 картки просто не помістяться в 1 ряд, так що тут будемо показувати по одній картці.

- Приховують якісь блоки (зовсім або під посилання «Розгорнути»). Наприклад, у товару значне опис, яке на комп'ютері займає майже цілий екран. На телефоні такий опис може зайняти до 10 екранів. Їх доведеться довго і нудно перегортати, щоб дістатися до відгуків про товар. Щоб не навантажувати користувача, покажемо на мобільних перший абзац опису, а решта тексту сховаємо під посилання «Показати все». Хто захоче прочитати повний опис, розгорне його, в той час як всі інші будуть позбавлені від довгого гортання.

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

- Додають горизонтальну прокрутку таблицями. Якщо в таблиці багато стовпців, то вона не поміститься на екрані телефону. У такому випадку варто додати правила, щоб ці таблиці можна було прокручувати вправо-вліво на вузьких екранах.

Крок 3. Допрацьовуємо дизайн сайту

Для деяких елементів сайту знадобиться більш серйозне опрацьовування для показу на мобільних. Як правило, це шапка сайту, меню і фільтри в каталозі товарів.

- Шапка сайту і меню. Якщо просто перемістити всі рядки в шапці сайту один під одного (щоб помістилося в ширину), то на телефоні така шапка займе весь екран. Переходячи по сторінках сайту, людина буде змушений раз по раз перегортати екран з цією шапкою. Додайте сюди 5-6 пунктів меню - і користувач ніколи не долістает до контенту.

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

- Фільтри. У більшості випадків фільтр по каталогу товарів розташовують у лівій частині сторінки. Тобто в коді сайту спочатку йде фільтр, а потім список товарів. Через це на мобільних пристроях блок зі списком товарів «переїжджає» під блок з фільтром - і користувач сайту ризикує взагалі не зрозуміти, що список товарів на цій сторінці є (якщо фільтрів багато). Вирішується проблема просто - приховуємо фільтр на мобільних під кнопку «Фільтр». Натиснувши її, користувач розгорне необхідні фільтри. А за замовчуванням список товарів буде видно відразу в першому екрані.

Крок 4. Скорочуємо кількість реклами і спливаючих вікон

Якщо у вас на сайті є рекламні блоки, подивіться, чи не варто їх трохи «підрізати», щоб не займати все місце на аж ніяк не нескінченних екранах смартфонів. Не обов'язково прибирати всю рекламу, досить буде лише скоротити її кількість. Наприклад, залишити один банер замість чотирьох.

Аналогічно і для спливаючих вікон. Якщо через якийсь час після завантаження сайту «спливає» вікно з підпискою, спецпредложением і т.п. і при цьому займає більше 50% екрану - або зменшіть це вікно до чверті екрана, або взагалі відмовтеся від нього. По-перше, на телефонах такі вікна дратують користувачів набагато сильніше, ніж на звичайних комп'ютерах. По-друге, пошукові системи можуть знижувати позиції сайтів з «настирливої» рекламою .

Крок 5. Скорочуємо кількість контенту

Якщо на сайті є контент, який ви повністю приховуєте від мобільних користувачів (не під кнопки «Детальніше», «Фільтр» та інші, а зовсім приховуєте), то немає сенсу взагалі завантажувати цей контент на мобільний пристрій - це додатковий «вага» сторінки, і він буде збільшувати дорогоцінний час завантаження сайту.

Приклад: в статті на Хабре, яка відкривається з звичайного комп'ютера, коментарі до статті завантажуються відразу ж в кінці сторінки - https://habr.com/company/mosigra/blog/427133/ . А якщо відкрити цю статтю з мобільного, то сторінка буде містити тільки текст статті, без коментарів (і вони не приховані, вони просто не виводяться для мобільних пристроїв). Під текстом статті варто кнопка «Коментарі», і по ній вже можна потрапити на окрему сторінку з коментарями до статті. Саме для Хабра, де статті часто і досить охоче коментують, це може економити 3-5 секунд від завантаження сторінки.

Для розмежування контенту програміст може як написати свій модуль, так і скористатися одним з готових рішень по визначенню типу пристрою (наприклад, MobileDetect ). До багатьох CMS така функція вже вбудована за замовчуванням (наприклад, wp_is_mobile в WordPress).

Крок 6. Перевіряємо всі сторінки

Якщо на сайті до 200 сторінок - краще дійсно отсмотреть їх все. Тому що 20 карток товарів можуть відображатися нормально, а в опис 21-й хтось вставив відеоролик і прописав у нього строго ширину в 900 пікселів - і ось цей ролик вже не поміщається в екран мобільного.

Втім, якщо у вас тисячі сторінок, то отсматрівать кожну - не така вже й корисна трата часу. Тоді варто перевірити тільки важливі сторінки (продають сторінки, сторінки з високим трафіком і т.п.), і по 10-20 сторінок в кожному розділі сайту (в каталозі товарів, в списку статей і т.д.).

підсумок

Для сайту бути адаптивним під різні пристрої - як для людини дотримуватися правил етикету. Звичайно, ви можете не говорити «здрастуйте» і «до побачення», «будь ласка» і «спасибі», але тоді не ображайтеся, якщо бажаючих перебувати поруч з вами буде ставати все менше і менше. Так само і з сайтом - якщо ви не поважаєте своїх користувачів і не готові надати їм зручний сайт на будь-яких пристроях, не ображайтеся, якщо вони тихо і спокійно підуть до конкурентів.