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

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

Статьи

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Новости

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

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

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

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

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

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

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

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

Суши доставка меню
В последние годы японская кухня стала очень популярной в нашей стране. И найти современного человека, который бы никогда не пробовал суши и роллы очень сложно. Но как правильно кушать суши палочками

Обеденные группы для маленькой кухни
Любой дом начинается с кухонной комнаты, а хороший дом - с уютной кухни. Уютной назвать кухню можно, если все в ней гармонично подобрано в соответствии с вашими вкусами и в едином стиле. Многие люди