5 моментов, которые необходимо учитывать при создания дизайна для мобильного

 моментов, которые необходимо учитывать при создания дизайна для мобильногоС появлением тач-скринов, всё перевернулось в мире дизайна. Только дизайнеры решили проблему больших мониторов, им опять приходиться сталкиваться с почти точно такой же проблемой, только с диаметрально-противоположными условиями — маленькие мониторы. Как известно, сейчас,  почти все шаблоны создаются с учётом мобильных устройств. Ведь дизайн сайта всегда должен корректно отображаться в независимости того, на чём его просматривают. Сегодня мы хотели поговорить о 5 важных моментах, которые необходимо учитывать при создания дизайна шаблона сайта для мобильного устройства.

1. Человеческие пальцы больше, чем курсор мышки.

2. Экраны мобильных устройств очень маленькие, это вам не iPad и иногда даже не iPhone.

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

4. Они не могут загружать очень большие файлы. Так что забудьте про красивые, наполненные текстурами, графикой и паттернами фоновые изображения.

5. Чистый HTML код. И валидация.

Вот наглядный пример

Вместо того, чтобы описывать список таким образом

<div id="navbar">
<ul id="navbar-ul">
<li class="navbar-li"><a href="#" class="navbar-a"><span class="navbar-span">Ссылка</span></a></li>
<li class="navbar-li"><a href="#" class="navbar-a"><span class="navbar-span">Ещё одна ссылка</span></a></li>
<li class="navbar-li"><a href="#" class="navbar-a"><span class="navbar-span">Третья ссылка</span></a></li>
</ul>
</div>

Его можно описать вот так

<ul id="navbar">
    <li><a href="#">Link</a></li>
    <li><a href="#">Another link</a></li>
    <li><a href="#">A third link</a></li>
</ul>

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



Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *