Як оптимізувати Joomla під Ipad
- Налаштування шаблону.
- CSS для IPad
- Портретний і альбомного формату
- Як я це зробив
- Використовуйте Firebug!
- Додавання іконки спеціально для IPad
- Ідіть і зробіть це!
Раніше в цьому році я (Оповідання в даній статті ведеться від імені Кристоффера Сандвена (Kristoffer Sandven)) на пару днів відвідав Лондон. І як відданий фанат Apple я повинен був відвідати місцевий Apple Store. Перший який я відвідав перебувати на Ріджент-стріт, і провівши там деякий час я вирішив купити IPad. Безсумнівно, я вже думав про покупку, але опинившись всередині магазину я зважився остаточно. Я так само побував в новому магазині на Ковент-Гарден і купив кілька додаткових аксесуарів для IPad. До речі магазин просто чудовий, він величезний, добре спроектований і там дуже доброзичливі і кваліфіковані співробітники. Магазин був забитий людьми прийшли за новими IPhone 4 (тоді він тільки вийшов - прим. Пер.). Так про що то я ... ах так! Коли я почав гратися з IPad я зрозумів, що він має величезний потенціал для веб розробки. Створення зручного сайту для IPad і інших мобільних пристроїв більш важливе з кожним днем. Я і раніше оптимізував сайт під IPhone, але після покупки IPad я зайнявся цим серйозно, тому що він відкриває величезні можливості для веб розробника.
Я провів кілька експериментів по оптимізації свого блогу під IPad. У цій статті я покажу на прикладі конкретного блогу, як оптимізувати свій сайт.
Налаштування шаблону.
Першим і найбільш очевидним кроком буде додавання мета тега в head вашого шаблону (зазвичай в index.php вашого макета).
Цей тег вказує браузеру, що він повинен повністю заповнювати екран пристрою по ширині.
Лілліан Ріго в блозі на TemplateMonster написав статтю на цю тему під назвою "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. Ось як це виглядає:
Зверніть увагу, що на сайті присутня права колонка.
В портретному режимі я відключив її, так само я збільшив розмір заголовків і текст, це підвищує читаність в цьому режимі, під основне меню я додав банер:
Як я це зробив
В першу чергу ви повинні вирішити, що ж ви хочете зробити зі свого сайту. У моєму випадку це було досить просто. Я хотів би поліпшити читабельність мого блогу, тому я видалив праву колонку. У місці з нею я прибрав всі оголошення і рекламу що недобре, тому я вивів окремий банер у верхній частині сторінки, він розташовується в позиції 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" що б подивитися що станеться. Коли я зробив це, я зрозумів, що ще мені потрібно прибрати відступ у основній частині сайту що б заповнити контентом всю область перегляду.
Додавання іконки спеціально для IPad
Це самі вершки. Додаючи іконки для IPad дозволити використовувати її як ярлик при додаванні вашого сайту на домашній екран IPad (або iPhone).
Цей значок повинен бути в форматі PNG або JPG і розміром не більше 114px на 114px
Я створив цей значок для JoomlaBlogger.net:
Додайте значок в папку з шаблоном, потім додайте мета тег в Head посилаючись на нього:
<Link rel = "apple-touch-icon" href = "/ templates / ВАШ_ШАБЛОН / apple-touch-icon.png" />
Тепер, коли ваші користувачі додадуть ваш сайт на домашній екран, вони побачать спеціальний значок.
У мобільному Safari натисніть на значок + і виберіть «Add to Home Screen»
Вибір назви для значка
Іконка на домашньому екрані
Ідіть і зробіть це!
Я сподіваюся, що ця стаття надихнула вас спробувати оптимізувати ваш сайт під iPad / iPhone. На мій погляд подібні поліпшення працюють найкраще, коли вони прозорі для користувача. Тобто користувач не помічає різницю відразу ж, йому просто більше зручніше працювати з вашим сайтом.
Ви оптимізували ваш Joomla сайт під IPad і IPhone? Розкажіть нам про це в коментарях нижче!
Ви оптимізували ваш Joomla сайт під IPad і IPhone?