З моменту старту нашого проекту, який, хоч і є більше хобі, ніж справою і саме в цьому сенсі являє для нас особливий інтерес, ми отримали чимало критичних зауважень, які і взялися усунути своїми руками (хобі - є хобі). В першу чергу це торкнулося мобільної версії сайту.
Сайт наш виглядав, хоч і непогано, але досить незграбно з точки зору дизайну. Ми могли собі це пробачити, ми все-таки не веб-дизайнери, а журналісти, але відсутність мобільної версії було очевидним недоліком. На пристроях з невеликим дозволом, ресурс виглядав неважливо: см. Скріншоти:
У мобільній версії було видно тільки календар статей, трохи реклами і частина блоку "популярні статті". Цього, очевидно, недостатньо. У користувача, звідки б він до нас не прийшов, повинна бути можливість вибору, що йому дивитися, а тут її зовсім не було.
Рішення проблеми можна досягти різними шляхами. Перший, найбільш популярний, років так вісім назад але до сих пір активно використовується - створення окремої мобільної версії сайту з усіма його атрибутами в урізаному вигляді. Використовуючи власні програми, базу знань, а також сторонні ресурси, сайт, з більшою або меншою точністю визначає ваш пристрій і видає йому відповідний, урізаний дизайн з мінімумом можливостей.
Це досить грубо, оскільки користувач може і не захотіти переходити від звичної картинки до чогось зовсім іншого. Та й технічне рішення проблеми не виглядає ідеальним. Доводиться створювати повний набір HTML-файлів сайту, зовні подібних але з іншим функціоналом на які сайт буде перемикатися, визначивши мобільний пристрій . Сам мобільний шаблон - це десятки нових файлів, а десь і сотні. Який же вихід?
А рішення давно розроблено спільнотами веб-програмістів і дизайнерів. це - адаптивний сайт (Дизайн). Його концепція полягає в тому, що користувачеві мобільного пристрою ресурси видно в урізаному вигляді але якщо ви, раптом, захочете побачити повну версію сайту прямо на смартфоні, то вам не доведеться шукати відповідну кнопку (перейти в повну версію). Досить буде розтягнути браузер за краєчки сайту пальцями - і: вуаля, ви вже в повній версії! Причому, перехід виглядає практично непомітним.
Як же це зроблено? Та дуже просто. Перший і більш простий варіант - мобільні користувачі на своєму екрані побачать тільки частина великого сайту, яка, між тим, виглядає як повноцінний ресурс. Для цього не треба нічого масштабувати - досить один з блоків головної сторінки зробити зовні схожим на незалежний, повноцінний сайт з усіма елементами, доступними для мобільних пристроїв. Але це, все ж, грубувато. Ми вирішили піти більш оптимальним шляхом.
В основному шаблоні сайту, всередині основних сторінок, ми створили його мобільний "двійник" зі своїми стилями і скриптами, який містить спрощену версію. Як тільки надходить команда на розширення вікна браузера, ви можете побачити повний варіант сайту, без жодних проблем. Причому, варіантів у сайту буде кілька - для ПК, планшета і мобільника. Така доопрацювання вимагає мінімальних зусиль, деякого переосмислення основних елементів сайту і певної адаптації інших. Як це реалізовано на сайті "КВ" може побачити кожен:
Повний макет:
Адаптивний модуль макета:
Вся принадність подібного підходу в тому, що перехід абсолютно непомітний, а головне, переписувати весь дизайн, створюючи його повну версію для мобільника і задіяти сторонні скрипти або сервіси для визначення моделі пристрою не потрібно. Ви просто закладаєте в основний шаблон сайту можливості по його адаптації на будь-якому браузері, в тому числі і під мінімальний дозвіл. Вся переробка локалізується, максимум на двох-трьох сторінках HTML-макету.
Доброю практикою є створення блоків або модулів під мінімальний дозвіл, а потім розробка повної їх версії. До слова, в попередньому дизайні нашого сайту це було неможливо - ми зробили його з фіксованими розмірами картинок (що добре виглядало на екрані) і з несприйнятливими до зміни таблицями. А ось в новому варіанті ми свою проблему вирішили:
Зрозуміло, це вимагало зовсім інших, ніж раніше, підходів до верстки. Довелося геть відмовитися від таблиць і перейти до DIVам (блоковим елементам) з їх проблемами, пов'язаними з непередбачуваністю роботи і необхідністю створення додаткових класів в таблицях стилів CSS, а часто навіть з об'єктно-орієнтованим підходом. Але це було цікаво і тому проблем не викликало. Чи не зупинили нас і слабкі, спочатку, знання в області верстки HTML-документів. Зараз все можна почитати в інтернеті і ми шанували.
Майбутнім веб-майстрам бажаю удачі. Все не так складно, як здається. Головне - старання і завзятість. Запуск нового дизайну - в найближчі дні ... Щасливого всім листопада!
Посилання на проект
Який же вихід?Як же це зроблено?