Практические решения

Как оптимизировать Joomla под Ipad

Joomla
Добавление в избранное
Сохранить

Как оптимизировать Joomla под Ipad

Ранее в этом году я (Повествование в данной статье ведется от лица Кристоффера Сандвена (Kristoffer Sandven)) на пару дней посетил Лондон. И как преданный фанат Apple я должен был посетить местный Apple Store. Первый который я посетил находиться на Риджент-стрит, и проведя там некоторое время я решил купить IPad. Несомненно, я уже думал о покупке, но оказавшись внутри магазина я решился окончательно. Я так же побывал в новом магазине на Ковент-Гарден и купил несколько дополнительных аксессуаров для IPad. Кстати магазин просто великолепен, он огромный, хорошо спроектирован и там очень дружелюбные и квалифицированные сотрудники. Магазин был забит людьми пришедшими за новыми IPhone 4 (тогда он только вышел – прим. пер.). Так о чем то я… ах да! Когда я начал играться с IPad я понял, что он имеет огромный потенциал для веб разработки. Создание удобного сайта для IPad и других мобильных устройств важнее с каждым днем. Я и раньше оптимизировал сайт под IPhone, но после покупки IPad я занялся этим всерьез, т.к. он открывает огромные возможности для веб разработчика.

Я провел несколько экспериментов по оптимизации своего блога под IPad. В этой статье я покажу на примере конкретного блога, как оптимизировать свой сайт.

Настройка шаблона.

Первым и самым очевидным шагом будет добавление мета тега в head вашего шаблона (обычно в index.php вашего макета).

<meta name="viewport" content="width=device-width" />

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

Лиллиан Риго в блоге на templatemonster.com написал статью на эту тему под названием «Web design for iPad - WTF og FTW?», я не вижу смысла изобретать колесо поэтому просто вставлю сюда цитату:

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

При верстке шаблона под IPad рекомендуется использовать сетку 960gs. Эта сетка стала очень популярной благодаря тому, что она подходит большинству современных экранов, и если вы ее используете, то ваш сайт полностью заполнит IPad, с ним не будет не каких проблем. В целом сделает ваши страницы «бесшовными» как в портретном, так и в альбомном режиме. Примечание, Safari (основной браузер в IPad) всегда вычислять ширину устройства на основе портретной ориентации. Если вы повернете устройство то сайт не «пересоберется» а просто растянется.

CSS для IPad

Если вы планируете обширную модификацию своего сайта под IPad, то вам возможно придется добавить отдельную таблицу стилей. Я же хотел внести только несколько настроек, поэтому добавил код прямо в custom.cssв своем шаблоне от YooTheme. Что бы узнать в какой файл вам добавлять код, изучите документацию к вашему шаблону, обычно это файл template.css.

Что бы создать отдельный стиль для IPad используйте следующий код:


@media only screen and (max-device-width: 1024px) {
/* Специально для IPad */
div.right { display:none; }
} 

Портретный и альбомный режим

Интересной особенностью iOS является возможность задавать различные стили в зависимости от ориентации устройства. Таким образом, вы можете отобразить различные блоки в портретном режиме и в альбомном.

Что бы использовать разные стили для разной ориентации экрана используйте следующий код:

Портретный:

@media only screen and (max-device-width: 1024px) and (orientation:portrait) {
}

Альбомный:

@media only screen and (max-device-width: 1024px) and (orientation:portrait) {
} 

Если у вас есть IPad то вы можете увидеть изменения на сайте joomlablogger.net. Вот как это выглядит:

Как оптимизировать Joomla под Ipad

Обратите внимание, что на сайте присутствует правая колонка.

В портретном режиме я отключил ее, так же я увеличил размер заголовков и текст, это повышает читаемость в этом режиме, под основное меню я добавил баннер:

Как оптимизировать Joomla под Ipad

Как я это сделал

В первую очередь вы должны решить, что же вы хотите сделать из своего сайт. В моем случае это было довольно просто. Я хотел бы улучшить читабельность моего блога, поэтому я удалил правую колонку. В месте с ней я убрал все объявления и рекламу что не хорошо, поэтому я вывел отдельный баннер вверху страницы, он располагается в позиции top моего шаблона. Т.к. я не использую его не для чего больше я решил скрыть эту позицию по-умолчанию с помощью следующего CSS:

div#top { display:none; }

Теперь я должен был создать для iPad конкретные стилей, что бы удалить лишние элементы и добавить те, что мне нужны в портретном режиме:


/* Специально для iPad */
@media only screen and (max-device-width: 1024px) and (orientation:portrait) {
div#banner { display:none; } // Удалям баннеры
div#right { display:none; } // Удаляем правую колонку
div#main-shift { margin-right:0; } // Убираем отступы в средней колонке
div#middle-expand { width:200%; }
div#content p { font-size:120%; } // Увеличиваем размер текста
h1 { font-size:32px; } // Увеличиваем размер заголовков
div.joomla h1.title { width:100%; } // Разворачиваем заголовки страницы во всю ширину
div#top { display:block; } // Выводим баннер по центру сверху
}

То же самое касается и альбомного режима, но в данном случае я просто хочу удалить баннер в правой части.

 @media only screen and (max-device-width: 1024px) and (orientation:landscape) {
div#banner { display:none; } // Удаляем баннер
} 

Итак, вот в основном и все. Конкретные стили, вам нужно добавить зависит от шаблона, который вы используете. Если вы не знакомы с CSS, я рекомендую вам прочитать мою статью Joomla CSS for beginners.

Используйте Firebug!

Я настоятельно рекомендую вам использовать Firefox и Firebug для того что бы выяснить какие стили вам нужно изменить для IPad. Firebug это расширение для Firefox, которая дает вам много информации о CSS и HTML структуре веб-страницы. Когда у вас установлен Firebug, можно правой кнопкой мыши нажать на элементе и выбрать «Анализировать элемент» и тогда появится окно в нижней части экрана. Теперь вы можете увидеть структуру HTML слева и CSS справа (см. ниже). С помощью Firebug можно редактировать таблицы стилей в веб-обозревателе и сразу увидеть изменения. Таким образом, вы можете экспериментировать до внесений изменений в CSS. Экономит много времени.

Ниже в примере я добавил display:none для div с id=” right” что бы посмотреть что произойдет. Когда я сделал это, я понял, что еще мне нужно убрать отступ у основной части сайта что бы заполнить контентом всю область просмотра.

Как оптимизировать Joomla под Ipad

Добавление иконки специально для IPad

Это самые сливки. Добавляя иконки для IPad позволить использовать ее как ярлык при добавлении вашего сайта на домашний экран IPad (или iPhone).

Этот значок должен быть в формате PNG или JPG и размером не более 114px на 114px

Я создал этот значок для JoomlaBlogger.net:

Как оптимизировать Joomla под Ipad

Добавьте значок в папку с шаблоном, затем добавьте мета тег в Head ссылаясь на него:

<link rel="apple-touch-icon" href="/templates/ВАШ_ШАБЛОН/apple-touch-icon.png" />

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

В мобильном Safari нажмите на значок + и выберите «Add to Home Screen»

 

Как оптимизировать Joomla под Ipad

Выбор названия для значка

Как оптимизировать Joomla под Ipad

Иконка на домашнем экране

Как оптимизировать Joomla под Ipad

Идите и сделайте это!

Я надеюсь, что эта статья вдохновила вас попробовать оптимизировать ваш сайт под iPad / iPhone. На мой взгляд подобные улучшения работают лучше всего, когда они прозрачны для пользователя. Т.е. пользователь не замечает разницу сразу же, ему просто более удобнее работать с вашим сайтом.

Как оптимизировать Joomla под Ipad

Вы оптимизировали ваш Joomla сайт под IPad и IPhone? Расскажите нам об этом в комментариях ниже!

Оригинальная статья: JoomlaBlogger.net
Stepan Tyurin
Привет меня зовут Степан, 6 лет занимаюсь версткой, 5 лет работаю c Joomla. Вместе с Евгением "Sulpher" создал сайт joomlablog.ru, который нашел новых авторов и переродился в портал cmscafe.ru :)

Подпишитесь на рассылку новостей CMScafe