На сегодняшний день создание мобильной версии сайта все больше и больше интересует не только владельцев уже раскрученных порталов, но и начинающих веб-масетеров. Информации касательно этого дела чрезвычайно много и если вас интересуют технические детали, то существует ряд продвинутых ресурсов, в которых подробно рассказывается о том, как выглядит мобильный интернет изнутри, каким образом следует раскручивать мобильные сайты и привлекать на них посетителей. Мы же остановимся на двух моментах - бесплатных сервисах по созданию мобильных версий веб-страниц и на наиболее удачных решениях в плане визуализации таких сайтов.
Итак.
В настоящее время можно выделить не одну сотню инструментов, которые созданы для того, что бы помогать веб-мастерам конструировать веб-страницы для мобильных телефонов. Есть, допустим, платные платформы, но существуют и совершенно халявные и, что самое главное, не менее функциональные. Рассмотрим же некоторые из них!
Совершенно бесплатный плагин для популярной платформы WordPress. Считается одним из самых популярных плагинов в своей нише, т.к. легко и просто позволяет создать мобильную версию блога любой сложности для мобильного телефона. Одно из главных преимуществ - наличие конструктора, посредством которого веб-мастер может самостоятельно создавать темы с учетом мобильных браузеров и, собственно говоря, самих моделей телефонов. Основная заточка плагина, тем не менее, выполнена под три платформы - iPhone, Opera Mini, Windows Mobile.
Тоже неплохой конструктор веб-страниц для мобильного интернета. При условии, что сайт будет использоваться в некоммерческих целях, администрация дает зеленый свет на бесплатное использование своего редактора.
Этот сервис совсем недавно занял одно из первых мест в рейтинге Top 50 Movers and Shakers in Mobile Services. Система по праву считается патриархом в создании веб-страниц для мобильных телефонов, т.к. начала свою деятельность еще в 2001 году. Позволяет создавать не только веб-страницы, но еще и дополнительные приложения, которые в эти самые страницы можно встраивать. В целом, сервис является бесплатным, но с бонусными фичами за деньги. Настоятельно рекомендуется к изучению!
Этот сервис имеет платную и бесплатную версии и надо сказать, что, конечно же, платный вариант более кошерен. Тем не менее, если вы новичок в деле мобильного сайтостроения, то фри-акаунт сгодится вам вполне. Вообще же Mobify содержит в основном функционал для создания коммерческих мобильных проектов и если вы ориентируетесь именно на это направление, то вряд ли сходу найдете лучший вариант!
Эта контора является одним из мировых лидеров по созданию мобильных CMS и пользуется весьма большой популярностью в среде веб-мастеров. На сегодняшний день платформа работает на платной основе, но наличие триал-версии практически не обязывает заводить премиум-акаунт.
Очень сильный сервис, обладающий неимоверным количеством возможностей по созданию, поддерживанию, мониторингу и обслуживанию мобильных платформ. Возможно, с первого раза функционал Mippin Mobilizer покажется вам и перегруженным, но, поверьте, это только первое впечатление. Конструктор сайтов от этого сервиса вне всяких похвал!
_________________________________________________________________________________________________
Думается, что вышеперечисленных ресурсов для начала более чем достаточно - теперь давайте перейдем к визуализации мобильных веб-страниц.
Все дело в том, что мобильный интернет, в частности, его графические аспекты, весьма сильно отличаются от привычного нам компьютерного варианта и, как следствие, веб-мастеру требуется ориентация именно на мобильную платформу.
Первое, на что рекомендуется обратить внимание - это на семантическую разметку страницы.
Дело в том, что мобильные девайсы весьма сильно разнятся между собой и поэтому чрезвычайно сложно сделать так, что бы один и тот же сайт отображался корректно в каждом из них. Поэтому-то такая вещь, как семантическая разметка в деле мобильного сайтостроения выступает одним из самых главных моментов - создавая обычный сайт на семантику можно и не обращать внимание (браузер все схавает и так), но в мобильном интернете все обстоит совершенно иначе. Поэтому следует досконально следовать инструкциям
и стандартам W3C и ни в коем случае от них не отклоняться.
Вторая особенность, которую следует учитывать, создавая мобильный сайт - это полное отделение контента размещенного на ресурсе от графики и
css-дизайна.
Все дело в том, что дизайн сайта, который просматривается на мобильном телефоне, играет второстепенную роль и ни в коем случае нельзя контентное наполнение подавать под видом графики - она может попросту не загрузиться в мобильный телефон!
Поскольку самое главное для посетителей мобильных сайтов - это контент (ссылки и тексты), то любые графические элементы, входящие в разряд контентного наполнения, обязательно должны быть снабжены текстовыми пояснениями (Alt -атрибутами).
Как известно атрибуты Alt важны всегда - даже в обычном сайтостроении их настоятельно рекомендуют ставить во всех учебниках по веб-дизайну - но в случае с мобильным Интернетом, Alt -атрибуты приобретают ключевое значение. Все что связанно с навигацией, логотипами и прочими важными элементами графического дизайна должно иметь текстовый эквивалент!
Третий значимый фактор - это текстовые метки для элементов всех форм.
Мобильная версия сайта этого требует исключительно для удобства посетителей, т.к. они будут воистину недовольны, если потребуется, допустим, ввести в форму определенную информацию, а самих форм будет несколько. Текстовые метки эффективно решают эту проблему!
Четвертая тонкость, с которой следует считаться при конструировании мобильной версии сайта, именуется заголовки. В обычном веб-дизайне заголовки выполняют ряд функций - их используют не только для того, что бы ориентировать посетителя, касательно значимости того или иного контента, но еще и в таких вещах, как СЕО.
С мобильным интернетом ситуация выглядит приблизительно таким же образом, однако, специфика различных мобильных браузеров такова, что заголовки зачастую отображаются не совсем корректно и поэтому крайне важно строго использовать принудительные теги -
H1, H2 и т.п.
Еще один аспект мобильного сайтостроения - фиксированный текст.
Если в обычном интернете можно запросто использовать свойство float
и текст будет красиво обтекать тот или иной объект, то в нашем случае это не приемлемо, т.к. экран мобильного телефона весьма мал и текстовый контент сместится в тонкую полоску, что, согласитесь, не есть хорошо. Поэтому использование плавающих блоков крайне не желательно в мобильном сайтостроении.
Теперь несколько слов о margins и
padding (полях и отступах).
Как и понятно, если головной сайт имеет большие отступы, то мобильная версия должна быть подкорректирована в плане уменьшения значений данного элемента. Тоже самое относится и к полям, т.к. на экране мобильного телефона свободное пространство ценится очень сильно и, чем больше вы его предоставите своему посетителю, тем лучше. Туда где раньше находились
margins и padding можно засунуть навигационный сайд-бар.
Кстати, о навигации!
Как известно, самое удобное место для размещения навигационной панели - верх страницы. Это правило работает и для мобильного интернета, однако, в силу того, что экран мобильного телефона крайне мал, следует всеми силами стремиться выкинуть из навигации все не нужное, дабы представить посетителю исключительно целевые разделы сайта и сделайте так, что бы к ним он мог быстро добраться.
Ну и в заключении про контрастность. В принципе, на сегодняшний момент современные мобильные телефоны вытягивают такую же глубину цвета, как, скажем, стандартный ноутбук. Однако, это не говорит о том, что следует полностью забыть о старом добром правиле времен WAP-соединений.
Как показывает практика, мобильным интернетом люди пользуются в дороге, на ходу, гуляя в парках и т.п. и, как правило, внешнее солнечное освещение, полностью забивает любые цветовые прикрасы мобильных веб-сайтов. Более того, навороченная цветовая гамма может полностью исказиться при определенных условиях. Поэтому позаботьтесь о том, что бы сайт имел строгое контрастное соотношение текста и дизайна.
Отсюда вполне легально можно брать статьи, пожалуйста, с указанием ссылки на источник :-)
(ссылка на тематический ресурс будет и вам полезна и нам будет приятно)
