Наша совместная команда Banwar.org

Связаться с нами

  • (097) ?601-88-87
    (067) ?493-44-27
    (096) ?830-00-01

Статьи

ITкваріат - мобільний дизайн

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

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

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

Рішення проблеми можна досягти різними шляхами. Перший, найбільш популярний, років так вісім назад але до сих пір активно використовується - створення окремої мобільної версії сайту з усіма його атрибутами в урізаному вигляді. Використовуючи власні програми, базу знань, а також сторонні ресурси, сайт, з більшою або меншою точністю визначає ваш пристрій і видає йому відповідний, урізаний дизайн з мінімумом можливостей.

Це досить грубо, оскільки користувач може і не захотіти переходити від звичної картинки до чогось зовсім іншого. Та й технічне рішення проблеми не виглядає ідеальним. Доводиться створювати повний набір HTML-файлів сайту, зовні подібних але з іншим функціоналом на які сайт буде перемикатися, визначивши мобільний пристрій . Сам мобільний шаблон - це десятки нових файлів, а десь і сотні. Який же вихід?

А рішення давно розроблено спільнотами веб-програмістів і дизайнерів. це - адаптивний сайт (Дизайн). Його концепція полягає в тому, що користувачеві мобільного пристрою ресурси видно в урізаному вигляді але якщо ви, раптом, захочете побачити повну версію сайту прямо на смартфоні, то вам не доведеться шукати відповідну кнопку (перейти в повну версію). Досить буде розтягнути браузер за краєчки сайту пальцями - і: вуаля, ви вже в повній версії! Причому, перехід виглядає практично непомітним.

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

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

Повний макет:

Повний макет:

Адаптивний модуль макета:

Адаптивний модуль макета:

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

Вся переробка локалізується, максимум на двох-трьох сторінках HTML-макету

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

А ось в новому варіанті ми свою проблему вирішили:

Зрозуміло, це вимагало зовсім інших, ніж раніше, підходів до верстки. Довелося геть відмовитися від таблиць і перейти до DIVам (блоковим елементам) з їх проблемами, пов'язаними з непередбачуваністю роботи і необхідністю створення додаткових класів в таблицях стилів CSS, а часто навіть з об'єктно-орієнтованим підходом. Але це було цікаво і тому проблем не викликало. Чи не зупинили нас і слабкі, спочатку, знання в області верстки HTML-документів. Зараз все можна почитати в інтернеті і ми шанували.

Майбутнім веб-майстрам бажаю удачі. Все не так складно, як здається. Головне - старання і завзятість. Запуск нового дизайну - в найближчі дні ... Щасливого всім листопада!

Посилання на проект

Який же вихід?
Як же це зроблено?

Новости

Banwar.org
Наша совместная команда Banwar.org. Сайт казино "Пари Матч" теперь доступен для всех желающих, жаждущих волнения и азартных приключений.