Практическое занятие №19

Наименование: Преобразование шаблона сайта под мобильную версию

1. Цель: Научиться создавать дизайн готового сайта для мобильных устройств

2. Подготовка к занятию: по предложенной литературе повторить тему «Юзабилити» и ответить на следующие вопросы:

2.1 Что значит мобильная версия сайта?

2.2 В каких устройствах используется мобильная версия сайта?

3. Литература:

3.1 Шомас Е.А. Конспект лекций по дисциплине «Веб - дизайн», 2014

3.2 Клименко Р.А. Веб-мастеринг на 100%. – СПб.: Питер, 2013

3.3 http://www.designonstop.com/tutorials/advanced/sozdaem-v-fotoshope-shablon-sajta-dlya-posleduyushhej-verstki.htm – Создаем в Photoshop шаблон сайта с последующей версткой

3.4 http://habrahabr.ru/company/alee/blog/117950/ - интерфейсы мобильных приложений: дизайн и эргономика

4. Перечень оборудования и программного обеспечения:

4.1 ПЭВМ, подключенные к сети Интернет

4.2 Браузеры

4.3 Графический редактор Photoshop

4.4 Текстовый редактор

5. Задание:

5.1 Разработать графический дизайн не менее двух страниц сайта (без кода, только графический макет)

для мобильных устройств

6. Порядок выполнения работы:

6.1 По предложенной литературе изучить необходимый материал и ответить на вопросы для допуска к практическому занятию;

6.2 Выполнить задание практического занятия;

6.3 Дать ответы на контрольные вопросы;

7. Содержание отчета:

7.1 Наименование и цель работы

7.2 Ответы на контрольные вопросы

7.3 Вывод о проделанной работе

8. Контрольные вопросы:

8.1 Опишите по шагам, что вы делали при верстке сайта?

ПРИЛОЖЕНИЕ:

Мобильная версия сайта должна быть предназначена для решения ограниченного числа задач. При ее создании необходимо особенно четко формулировать цели. Если место для сайта уменьшается на 80%, то и от 80% намеченных планов также придется отказаться. Функциональность мобильной версии сайта существенно ограничена по причине небольшого размера экрана.

· Работая над дизайном мобильной версии сайта, мыслите не в категориях страниц, а в категориях экранов. Каждый экран должен включать в себя не более трех функций или элементов;

· Ориентация на упрощение экрана не только облегчает, но и помогает вам прояснить цели, задачи, функции, возлагаемые на мобильную версию сайта.

Не стремитесь заполнять все пустые места на экране. У всех пользователей разная скорость соединения, поэтому сайт не должен «весить» слишком много. Избыточное количество изображений, текста, кода и т. п. не только ухудшает восприятие сайта пользователями, но еще и существенно увеличивает время его загрузки. Для пользователей мобильного Интернета важна оперативность: они не сидят перед компьютером, и обращение к тому или иному сайту необходимо им для решения срочных задач.

· Сведите количество изображений в мобильной версии сайта к самому необходимому минимуму;

· Не включайте в мобильную версию сайта текстов большого объема;

· «Облегчите» код посредством использования семантической разметки, а также сведения к минимуму числа CSS-стилей и вложенных файлов.

Навигация с помощью пальца или стилуса существенно отличается от навигации с помощью мыши и требует от разработчика большей изобретательности. Нужно использовать графические средства для того, чтобы продемонстрировать пользователю возможности управления тем или иным элементом.

· Для обозначения ссылок используйте кнопки, а не подчеркивание текста;

· Обозначайте доступ к более подробному содержимому при помощи стрелок;

· В оформлении кнопок пользуйтесь оттенением и рельефными линиями;

· Используйте знакомые и понятные иконки. Избегайте иконок непривычного вида для обозначения типов действий («добавить», «изменить», «назад», «вперед» и т. п.)

Даже на небольшом экране у пользователя не должно быть проблем с чтением текста. Если оптимальный размер шрифта для отображения на большом экране составляет 14 пунктов, то для мобильного устройства он должен быть как минимум в два раза больше. Следует, однако, учитывать, что чем крупнее шрифт — тем меньше информации удается разместить на сайте.

· Мобильная версия сайта не должна включать никакой лишней информации;

· Отбирайте тексты небольшого объема, написанные простым и понятным языком;

· Не пользуйтесь функцией прокрутки без особой необходимости;

· Включите в дизайн сайта кнопку «далее», нажав на которую пользователь сможет перейти к экрану с более подробным вариантом текста.

Экран мобильного телефона по размеру существенно меньше экрана стандартного монитора. Чтобы читать с такого экрана, нужно максимально приблизить его к глазам. Поэтому цвета мобильной версии сайта не должны быть слишком резкими.

Не нашли, что искали? Воспользуйтесь поиском: