Взгляд на дизайн для мобильных устройств
Когда был выпущен первый iPhone, мир покорил мир технологий. С тех пор прошло почти 5 лет, и популярность рынка смартфонов возросла, и даже Microsoft вступила в конкуренцию со своей ОС Windows 7 и партнерами. Сейчас, когда на их смартфонах так много пользователей интернета, здравый смысл ожидать, что количество мобильных веб-сайтов будет активно расти.
Тем не менее, дизайн для мобильного интернета - это совершенно другая операция с обычным веб-дизайном. Наши сайты рассчитаны на большой экран, но размер экрана смартфона слишком мал по сравнению с этим, что приводит к раздражающим проблемам с юзабилити. Новые стандарты и практики проектирования очень необходимы для лучшего дизайна мобильного сайта с гладким пользовательским интерфейсом.
В этом руководстве мы постараемся создать удобный сайт для мобильных браузеров смартфонов. Я расскажу о лучших практиках и полезных инструментах для разработчиков, которые помогут вам создать лучший мобильный веб-сайт, поэтому давайте перейдем к нему после перехода!
Планирование сильного пользовательского опыта
Когда вы создаете мобильный сайт, важно всегда помните о своих пользователях, в конечном итоге ваш сайт разрабатывается и создается для пользователей. Пользователи, как правило, ожидают, что мобильный веб-сайт будет вести себя аналогично среде рабочего стола, поэтому сохраняя дружественный пользовательский опыт должен быть вашим основным направлением при создании успешного мобильного сайта.
Есть много концепций юзабилити для пользователей. Эти соображения включают в себя Размер экрана, встроенные изображения, гиперссылок, размеры шрифта, а также навигация по страницам. Мы написали о дизайне мобильных юзабилити, чтобы вы могли вырезать свой сайт для лучшего юзабилити. Помимо руководства, вам нужно всегда будьте в курсе новых идей улучшить свой сайт.
Планирование хорошего пользовательского опыта также означает, что вы должны подумайте, как пользователь будет взаимодействовать с вашим сайтом. На рабочем столе ваш сайт может взаимодействовать с мышью и клавиатурой, но на смартфоне пользователи будут нажав, стряхивая, а также пролистывание их путь вокруг вашего сайта. Вам, вероятно, нужно спроектировать сайт так, чтобы пользователи могли легко получить доступ к информации сайта с помощью этих физических движений.
Сохраняйте страницы короткими и сладкими
Мясо и картофель любого сайта - это содержание страницы. Каждая из ваших веб-страниц содержит значительное количество полезной информации для ваших пользователей, таких как текст, фотографии или видео. Вы также найдете новостные статьи и посты в блогах, которые работают на нескольких страницах, что может помочь разбить текст, но это не рекомендуется для мобильных устройств в качестве метода требует большей загрузки страницы, что означает больше времени ожидания на стороне пользователя.
Если это не обязательно, я рекомендую короткое содержание вашей страницы. Вы должны также рассмотреть возможность сделать это выглядит сладким стилизация шрифта до гораздо большего размера и возможно движущиеся изображения в сторону. Когда ваш контент отображается в полноэкранном режиме, он, естественно, привлекает внимание, не говоря уже о том, что оптимизация на самом деле значительно упрощает сканирование страниц. Это также причина, почему макет одного столбца отвечает всем требованиям идеально.
В большинстве случаев мобильные браузеры не будут загружать веб-страницы так же быстро, как настольные браузеры, и это может раздражать ваших читателей, поэтому вам нужно оптимизировать контент и сайт для высокоскоростной загрузки контента. Вы также можете сократить статью при сохранении полного содержания, или просто удалить ненужные изображения. Сосредоточьтесь на простоте, а не на красоте.
Ваша основная навигация является спасением для ваших посетителей, которые хотят перемещаться между страницами. На мобильном устройстве экранные ссылки будут выглядеть намного меньше по своей природе, поэтому намного сложнее нажимать на них. Существенная настройка для решения этой проблемы заключается в увеличить шрифт и пространство для ваших ссылок навигации, возможно, занимая всю площадь блока. В качестве альтернативы вы можете сделать панель навигации похожей на панель вкладок реального приложения iPhone, как показано выше.
Создание мобильных стилей CSS
Теперь, когда мы знаем, как оптимизировать мобильный веб-сайт для лучшей читабельности и удобства использования, было бы хорошо поговорить о стилях CSS. Каждая таблица стилей CSS содержит множество селекторов со свойствами, относящимися к шрифтам, размерам, позиционированию и настройкам отображения. Когда дело доходит до мобильных устройств, вы должны обратить внимание на как ваши блоки становятся на свои места.
(Источник изображения: Smashing Magazine)
Одна область, чтобы начать это сбросить ширину оболочки вашего сайта в процентах. Обычно используются пиксели в качестве единицы для позиционирования, высоты строки, размера шрифта и ширины div, но при работе с мобильными устройствами вы хотите, чтобы ваши страницы были жидкость и переход между каждым устройством естественно. Установка div для контейнера шириной 100% позволит содержимому легко заполнять между портретным / ландшафтным режимом, не перетекая через край.
Если вы один из тех, кто хочет реструктурировать весь макет, убедитесь, что вы ударить все с сброс. Также абзацы, заголовки и навигационные ссылки должны быть установлены в дисплей: блок; так что вы получите это линейное чувство стиля печати. Поместите поля и отступы, чтобы удалить раздувание с вашего макета. Избегайте таблиц если возможно, так как они имеют тенденцию отображать ошибочные результаты между устройствами.
Большие изображения также являются проблемой между устройствами. Большинство изображений на вашем веб-сайте будут отображаться размером более 480 пикселей, и вы, возможно, не захотите, чтобы они ломали контейнер. Первый вариант заключается в установите их ширину на 100%, чтобы изображения могли естественным образом изменять размер. Это конечно возможно создавать различные наборы изображений для вашего сайта и отображать их по-разному в зависимости от агента браузера, но, честно говоря, это просто добавляет больше работ на вашу сторону, поэтому постарайтесь использовать технику только тогда, когда это действительно необходимо.
Разработка сайтов для iPhone
Доля мобильного рынка довольно большая и разделенная, но у Apple есть большой кусок пирога с их iDevices. И iPhone, и iPad являются мобильными интернет-устройствами со встроенным сенсорным экраном. Они имеют тот же веб-браузер по умолчанию, Safari и целый ряд других опций.
Для веб-сайтов для iPhone вам нужно настроить размер экрана. Фиксированный размер экрана установлен на 320 на 480 пикселей для старых моделей iPhone а также 640 на 960 пикселей для iPhone 4 и iPhone 4S.
Экраны iPhone ограничены в пространстве. У тебя должно быть один блок контента, который занимает столько времени, сколько необходимо. Хранение элементов в одном столбце избавит вас от головной боли и позволяют макет жидкости для “заполнить” как портретный и ландшафтный режимы. Для этого вам, вероятно, потребуется разработать другой шаблон и найти способ проверить, используют ли ваши посетители iPhone. Небольшой фрагмент PHP ниже должен хорошо работать:
В основном логика тянет наш глобальный $ _SERVER переменная для агента HTTP и проверяет, является ли слово “iphone” появляется где угодно. Если да, то мы знаем, что наш посетитель использует iPhone, и оттуда мы можем добавить немного другой HTML или даже совершенно новый макет шаблона! Это также может быть использовано для включить специфическую для iPhone таблицу стилей, изменить заголовки страниц, удалить изображения или почти любые динамические эффекты.
Когда дело доходит до подачи новых стилей, есть более простой способ. Как упоминалось ранее, максимальный размер экрана для iPhone составляет 960 пикселей в ширину. Поэтому с новыми медиа-запросами CSS3 вы можете добавлять стили непосредственно в основную таблицу стилей вашего сайта, которая будет только показать на айфоне. Ниже приведен небольшой пример кода:
экран @media и (max-device-width: 960px) / * iPhone css * /
Это работает, потому что CSS теперь может определять браузеры и их свойства. Максимальная ширина экрана является одним из свойств, которые также могут быть обнаружены.
В целом мобильный веб-сайт для устройств iPhone не слишком сложен для разработки, слишком много примеров, чтобы ссылаться, например, CSS iPhone. Занимайся изучением и не бойся экспериментировать с новыми методами в дизайне пользовательского интерфейса.
Мобильный JQuery Scripting
Большинство разработчиков веб-интерфейса знакомы с библиотекой jQuery. Он предлагает несколько фантастических сокращений для эффектов кодирования, анимации, выпадающих меню и множества других функций в браузере, и он становится еще более удивительным с анонсом jQuery Mobile. это не рекомендуется прыгать в технику напрямую и загружать ваш сайт с эффектами везде, но для целей тестирования расширенная функциональность может играть очень хорошо.
jQuery Mobile немного отличается от обычного jQuery, так как предоставляет вам полноценную среду для работы. Когда вы работаете с их файлами, это не только JavaScript, но и стили CSS для кнопок, ссылок и эффектов перехода. Вы по-прежнему пишете веб-страницы в HTML-коде, но команда jQuery Mobile поставляется множество дополнительных функций дизайна пользовательского интерфейса. С этим можно многое сделать, но так как рамки все еще в бета-версии, давайте придерживаться простых эффектов.
Небольшое руководство в блоге DevGrow содержит несколько замечательных примеров. Официальный сайт также предлагает демонстрационные версии для вас, чтобы попробовать. Обратите внимание, что мы используем атрибут HTML, Данные-переход добавить анимационные эффекты с любым из заранее определенных значений. К ним относятся слайд, поп, флип, фейд и т. Д. Посмотрите небольшой пример DevGrow, чтобы получить представление об этих эффектах..
Эффекты и переходы довольно аккуратны, и тот факт, что вы можете создать весь мобильный интерфейс строго с помощью jQuery, также является огромным шагом вперед для этой платформы, но с платформой только в бета-версии я бы не рекомендовал создавать весь ваш мобильный сайт с их библиотека, особенно с учетом того, что это не поддерживается всеми основными смартфонами на момент написания статьи (особенно Windows Phone 7), но со временем он наверняка станет лучше.
В конечном итоге я рекомендую ознакомиться с этой новой мобильной платформой до развертывание в прямом эфире на любом проекте.
Полезные инструменты разработчика
Мобильные разработчики не просто изучают ресурсы кодирования и дизайна. Существует также высокий спрос на программные инструменты и интегрированные среды разработки, не говоря уже о мощных мобильных платформах. Веб-разработка - это сложная задача, требующая большой самоотдачи, но использование дополнительных инструментов значительно облегчит вашу работу..
Opera Mobile Emulator
Ищете способ проверить, как работает ваш мобильный сайт? Это может быть огромной болью, если у вас нет смартфона с доступом в Интернет. Или вы просто не хотите использовать свой смартфон для тестирования сайта каждый раз, когда на ваш сервер отправляется обновление. Итак, Opera Mobile Emulator - это фантастическое программное обеспечение для тестирования вашего мобильного веб-сайта..
Эмулятор поддерживает 20 мобильных профилей такие как Samsung Galaxy S, HTC Desire и даже планшет, такой как Motorola Xoom. Также возможно установить пользовательское разрешение а также плотность пикселей для интенсивного тестирования. Лучше всего, вам не нужно делать слишком много работы по настройке, просто сделайте несколько кликов, и вы готовы идти.
Загрузка полностью бесплатна, и программное обеспечение работает как в Mac OS X, так и в среде Windows. Их разработчики усердно работают над созданием надлежащих веб-стандартов и настройкой своего движка для мобильного рендеринга. Я рекомендую их другие инструменты разработки, если вы ищете дополнительные инструменты, которые помогут вам в пути.
PhoneGap
Для построения надежных мобильных приложений не было разработано много API-интерфейсов на HTML5. Примечательно, что в мобильном ландшафте таких сайтов не хватает, и именно поэтому PhoneGap так хорошо заполняет эту нишу. Их платформа позволяет вам легко создавать приложения на основе HTML5 как собственные приложения на 6 разных платформах.
Процесс работает, сначала сжимая ваш код и передавая его через каркас приложения PhoneGap. Оттуда ваши приложения могут попасть на большую часть рынка мобильных устройств, включая Android, iOS, Windows Phone 7 и BlackBerry..
Если вы немного запутались, не беспокойтесь слишком сильно. Их страницы поддержки аккуратно обрисовывают в общих чертах процесс и предлагают ссылки на полезные ресурсы. Приложения, которые уже были разработаны, были собраны в прекрасном портфолио в стиле библиотеки. Проверьте их полную коллекцию приложений, которые вы можете затем отсортировать по устройствам со скриншотами.
Аптана Студио
Веб-сайт Aptana - главное место для изучения их инструментов разработки. Последний выпуск пакета Aptana 3.0.3 включает полностью интегрированную среду разработки для веб-разработки, стили CSS и вложение HTML-тегов, а также лучшую часть: Aptana полностью свободно скачивать! Они предлагают пакеты для всех трех основных операционных систем (включая Linux), что очень удобно для разработчиков..
Что делает Aptana особенным, так это то, как быстро вы можете разработать небольшое веб-приложение и проверить свой дизайн. Студия-люкс позволяет быстро разрабатывать и тестировать веб-приложение, работающее на Ruby on Rails, PHP, Python или просто HTML / CSS, и их функции подсветки кода были недавно улучшены включить новые библиотеки тегов HTML5 и CSS3. Он также поставляется с интеграцией Git, встроенным терминалом, отладчиком кода и несколькими другими изящными функциями..
Мобильные графические интерфейсы и иконки
Какая была бы сеть без халявы, валяющейся вокруг? Для веб-дизайнеров важность пользовательского интерфейса превыше всего. Сложно найти простые графические интерфейсы, и только самые креативные дизайнеры придумали рабочие решения.
Тем не менее, есть много бесплатных, но качественных ресурсов, доступных для вашего веб-дизайнера. Эти наборы GUI в основном предназначены для Adobe Photoshop или Fireworks, где вы можете перемещать элементы и экспортировать их в виде плоских файлов изображений..
Иконки - очень удобный ресурс. Дизайнеры создают бесплатные наборы и предлагают их в Интернете чаще, чем когда-либо прежде. На одном из таких веб-сайтов Glyphish представлены бесплатные и профессиональные иконки. Эти проекты основаны на одной теме, которая будет использоваться в мобильных шаблонах и дизайнах приложений..
Наша коллекция шаблонов для создания прототипов мобильных устройств станет для вас отличным помощником в процессе разработки веб-сайтов и приложений. Вы не должны начинать программировать, пока у вас нет сильного графического интерфейса, и эти веб-наборы помогут вам начать правильный путь..
iOS 5 GUI Kit
iPhone UI векторные элементы
iPhone App Icon Kit
Каркасные магниты (DIY Kit)
Графический интерфейс Android
