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

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

Статьи

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Новости

Как сделать красивую снежинку из бумаги
Красивые бумажные снежинки станут хорошим украшением дома на Новый год. Они создадут в квартире атмосферу белоснежной, зимней сказки. Да и просто занимаясь вырезанием из бумаги снежинок разнообразной

Пиротехника своими руками в домашних
Самые лучшие полезные самоделки рунета! Как сделать самому, мастер-классы, фото, чертежи, инструкции, книги, видео. Главная САМОДЕЛКИ Дизайнерские

Фольгированные шары с гелием
Для начала давайте разберемся и чего же выполнен фольгированный шар и почему он летает дольше?! Как вы помните, наши латексные шарики достаточно пористые, поэтому их приходится обрабатывать специальным

Все товары для праздника оптом купить
Как сделать правильный выбор в работе, бизнесе и жизни, о котором никогда не придется жалеть. Мы хотим рассказать вам об удивительной и очень простой технике 7 вопросов, которые позволят оценить ситуацию

2400 наименований пиротехники
В последние десятилетия наша страна может похвастаться появлением нескольких десятков отечественных производителей, специализирующихся на выпуске пиротехники. Если вы сомневаетесь, какой фейерверк заказать,

Как сделать из бумаги самолет
 1. Самолеты сделанный по первой и второй схеме являются самыми распространенными. Собирается такое оригами своими руками достаточно быстро, несмотря на это самолет летит достаточно далеко за счет свое

Надувные шарики с гелием с доставкой
На праздники часто бывают востребованы воздушные шарики, надутые гелием. Обычно, их покупают уже готовыми (надутыми) и привозят на праздник. Или, приглашают специалистов, которые приезжают и надувают

Аниматоры на детские праздники в Зеленограде
Уж сколько раз твердили миру…Что готовиться ко дню рождения нужно заранее, а не бегать в предпраздничный день угорелой кошкой. Нельзя впихнуть в 24 часа дела, рассчитанные на недели. К празднику нужно