Подивіться на розробку для мобільних пристроїв
Коли перший iPhone був випущений він взяв світ технологій штурмом. З тих пір минуло майже 5 років, і ринок смартфонів зародився в популярності, і навіть Microsoft потрапила в конкуренцію зі своєю ОС Windows 7 і партнерами. З такою кількістю користувачів Інтернету на своєму смартфоні в даний час, це здоровий сенс очікувати, що кількість мобільних веб-сайтів збільшиться агресивно.
Проте, проектування для мобільного Інтернету є зовсім іншою операцією зі звичайним веб-дизайном. Наші веб-сайти розраховані на величезний екран, але розмір екрану смартфона занадто малий у порівнянні з цим, що призводить до неприємних проблем із юзабіліті. Нові стандарти та практики проектування дуже потрібні для кращого дизайну веб-сайтів для мобільних пристроїв із зручним користувачем.
У цьому посібнику ми плануємо створити зручний веб-сайт для мобільних браузерів смартфонів. Я буду говорити про найкращі практики та корисний інструмент для розробників для розробки кращого мобільного веб-сайту, так що давайте потрапимо в нього після стрибка!
Планування сильного досвіду користувачів
Коли ви створюєте мобільний веб-сайт, це важливо постійно пам'ятати про ваших користувачів, як у кінцевому підсумку ваш сайт розробляється і створюється для користувачів. Це звичайно для користувачів очікують, що мобільний веб-сайт буде вести себе так само, як і робоче середовище збереження зручності в користуванні має бути вашим основним фокусом під час створення успішного мобільного сайту.
Існує багато концепцій зручності для користувачів. Ці міркування включають розмір екрану, вбудовані зображення, гіперпосилання, розмірів шрифту, і навігація по сторінках. Ми написали про дизайн мобільного юзабіліті, щоб ви вирізали свій веб-сайт для більш зручного використання. Крім керівництва, вам потрібно завжди пильнуйте про нові ідеї щоб покращити свій сайт.
Планування сильного досвіду користувачів також означає, що ви повинні це зробити розглянемо, як користувач буде взаємодіяти з вашим веб-сайтом. На робочому столі ваш сайт може взаємодіяти з мишею і клавіатурою, але на смартфоні користувачі будуть натискання, тряска, і зчитування свій шлях навколо вашого сайту. Ймовірно, вам потрібно розробити сайт так, як це можуть зробити користувачі легко отримувати доступ до інформації про сайт за допомогою цих фізичних рухів.
Тримайте сторінки Short & Sweet
М'ясо та картопля будь-якого сайту - це зміст сторінки. Кожна з ваших веб-сторінок містить значну кількість корисної інформації для користувачів, наприклад, текст, фотографії або відео. Ви також знайдете новини та публікації в блогах, які працюють на декількох сторінках, що може допомогти розбити текст, але це не рекомендується для мобільних пристроїв, як техніка вимагає більше завантаження сторінок, що означає більше часу на користування.
Якщо це не обов'язково, я рекомендую не змінюючи вміст сторінки. Ви також повинні враховувати, що вона виглядає солодко стиль шрифту набагато більший та можливо убік рухомих зображень. З вашим вмістом на повному дисплеї це природно привертає увагу, не кажучи вже про оптимізацію насправді робить сканування сторінок набагато простіше. Це також причина, чому a макет однієї колонки ідеально підходить.
У більшості випадків мобільні веб-переглядачі не збираються завантажувати веб-сторінки так швидко, як веб-переглядачі на робочий стіл, і це може дратувати ваших читачів, тому потрібно оптимізувати вміст і веб-сайт для швидкої завантаження вмісту. Ви також можете скоротити статтю, зберігаючи повний вміст, або просто видалити непотрібні зображення. Напишіть увагу на простоту, а не на красу.
Ваша основна навігація - це заставка для ваших відвідувачів, які бажають переміщатися між сторінками. На мобільному пристрої посилання на екран з'являться набагато меншими за природою, отже, набагато складніше підключити їх. Для вирішення цієї проблеми важливим є налаштування максимізуйте шрифт і простір для ваших навігаційних посилань, можливо, займаючи всю зону блоку. Або ви можете створити навігаційну панель так, щоб вона була схожа на панель вкладок реальної програми iPhone, подібно до того, що було показано вище.
Створення стилів мобільних CSS
Тепер, коли ми знаємо, як оптимізувати мобільний веб-сайт для кращої читаності та зручності, було б добре говорити про стилі CSS. Кожна таблиця стилів CSS містить безліч селекторів з властивостями, які відносяться до шрифтів, розмірів, позиціонування та налаштувань відображення. Коли мова йде про мобільний, ви повинні звертати увагу як ваші блоки потрапляють на свої місця.
(Джерело зображення: журнал Smashing)
Однією з областей для початку є скинути ширину обгортки вашого сайту на відсоток. Як правило, пікселі використовуються як одиниця для позиціонування, висоти рядка, розміру шрифту та ширини Div, але при роботі з мобільним пристроєм потрібно, щоб ваші сторінки були рідини і перехід між кожним пристроєм природно. Встановлення контейнерів div на 100% ширини дозволить вміст легко заповнювати між портретом / пейзажем, не перетікаючи край.
Якщо ви один з тих, хто хоче змінити структуру вашого макета, переконайтеся, що ви вдарив все з скидання. Також пункти, заголовки та навігаційні посилання повинні бути встановлені на дисплей: блок; таким чином ви отримуєте відчуття лінійного друку. Помістіть поля та доповнення, щоб видалити роздуття з вашого макета. Уникайте таблиць якщо це можливо, оскільки вони мають тенденцію надавати помилки між пристроями.
Великі зображення також створюють труднощі між пристроями. Більшість зображень вашого веб-сайту відображатимуться більше, ніж 480px, і ви, можливо, не захочете, щоб вони зламали контейнер. Перший варіант - це встановіть їхню ширину на 100%, щоб зображення могло змінювати розмір природним чином. Це, звичайно, можна створювати різні набори зображень для вашого веб-сайту і роблять їх по-різному на основі агента браузера, але, чесно кажучи, це просто додає більше робіт на вашу сторону, тому спробуйте використовувати цю техніку тільки тоді, коли вона дійсно потрібна.
Проектування веб-сайтів для iPhone
Частка мобільного ринку досить велика і розділена, але Apple отримала великий шматок пирога з iDevices. І iPhone, і iPad - це мобільні пристрої, що мають доступ до Інтернету з вбудованими функціями сенсорного екрану. Вони містять той самий веб-переглядач за промовчанням, Safari та цілий ряд інших варіантів.
Для конкретних веб-сайтів для iPhone потрібно націлити розмір екрану. Фіксований розмір екрана встановлено на 320px на 480px для старих моделей iPhone і 640px на 960px для iPhone 4 та iPhone 4S.
Екран iPhone обмежений простором. Ти повинен мати один блок вмісту, який охоплює стільки часу, скільки потрібно. Зберігаючи елементи в одному стовпці врятує вас головний біль і дозволяють здійснювати макет рідини “заповнювати” як портретний, так і ландшафтний. Для цього вам, швидше за все, доведеться розробити інший шаблон і знайти спосіб перевірити, чи відвідувачі використовують iPhone. Невеликий фрагмент PHP нижче має добре працювати:
В основному логіка тягне наше глобальне $ _SERVER змінна для агента HTTP і перевіряє, чи є слово “iphone” з'являється в будь-якому місці. Якщо так, то ми знаємо, що наш відвідувач використовує iPhone, і звідти ми можемо виставити дещо інший HTML або навіть новий шаблон макета! Це також можна використовувати включати таблицю стилів iPhone, змінюйте назви сторінок, видаляйте зображення або майже будь-які динамічні ефекти.
Коли справа доходить до обслуговування нових стилів, існує простіший спосіб. Як згадувалося раніше, максимальний розмір екрану для iPhone становить 960px. Таким чином, з новими медіа-запитами CSS3 можна додавати стилі безпосередньо до основної таблиці стилів вашого сайту тільки відображення на iPhone. Нижче наведено невеликий приклад коду:
Екран @media та (max-device-width: 960px) / * iPhone css * /
Це працює, тому що Тепер CSS може виявляти переглядачі та їх властивості. Максимальна ширина екрану є одним із властивостей, які також можна виявити.
Всемосійний мобільний веб-сайт для пристроїв iPhone не надто складно розробити, існує занадто багато прикладів для посилання, наприклад, CSS iPhone. Тримайте себе зайняті вивченням і не бійтеся експериментуйте з новими методами в дизайні інтерфейсу.
Мобільні сценарії JQuery
Більшість розробників веб-інтерфейсу знайомі з бібліотекою jQuery. Він пропонує деякі фантастичні скорочення для ефектів кодування, анімації, випадаючих меню, а також безліч інших функцій браузера в браузері, і це просто стає більш приголомшливим з оголошенням jQuery Mobile. це є Не рекомендується стрибати в техніку безпосередньо і завантажувати веб-сайт з ефектами всюди, але для цілей тестування розширені функціональні можливості можуть грати дуже добре.
jQuery Mobile трохи відрізняється від звичайного jQuery, оскільки дає вам повноцінне оточення. Коли ви працюєте з файлами, вони не просто JavaScript, але й стилі CSS для кнопок, посилань і ефектів переходу. Ви все ще пишете веб-сторінки в HTML-коді, але команда jQuery Mobile має надано багато додаткових функцій дизайну UI. Із цим принципом ми можемо багато чого зробити, але з того часу фреймворк все ще знаходиться в бета-версії, дотримуємося простих ефектів.
Невеликий підручник у блозі DevGrow містить деякі чудові приклади. Офіційний сайт також пропонує демо-версії, які можна спробувати. Зауважте, що ми використовуємо атрибут HTML, перехід даних додавати ефекти анімації з будь-яким із попередньо визначених значень. До них відносяться слайд, поп, фліп, вицвітання тощо. Перевірте невеликий приклад DevGrow, щоб отримати смак цих ефектів.
Ефекти і переходи досить акуратні, і той факт, що ви можете побудувати весь мобільний інтерфейс строго з jQuery, також є великим кроком вперед для цієї платформи, але з платформою тільки в бета-версії я б не рекомендував будувати весь ваш мобільний сайт з їх бібліотека, особливо з тим, що вона є не підтримується всіма основними смартфонами на момент написання (особливо Windows Phone 7), але з часом це буде краще.
Зрештою я рекомендую ознайомитися з цією новою мобільною системою раніше розгортання на будь-якому проекті.
Корисні інструменти розробника
Розробники мобільних пристроїв не просто вивчають ресурси кодування та дизайну. Існує також високий попит на програмні засоби та середовища розробки, не кажучи вже про потужні мобільні фреймворки. Веб-розробка - це складне завдання, яке вимагає зовсім небагато відданості, але використання додаткових інструментів зробить вашу роботу набагато простішою.
Операційний мобільний емулятор Opera
Шукаєте спосіб перевірки візуалізації мобільного веб-сайту? Це може бути величезним болем, якщо у вас немає смартфона з доступом до Інтернету. Або ви просто не хочете використовувати свій смартфон для тестування сайту кожного разу, коли оновлення надходить на ваш сервер. Ну, 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 є головним місцем для ознайомлення з інструментами розробки. Останній випуск комплекту, Aptana 3.0.3, має повністю інтегровану IDE для веб-розробки, стилів CSS і вкладеності HTML-тегів, а найкраща частина: Aptana повністю безкоштовно завантажувати! Вони пропонують пакети для всіх 3 основних операційних систем (включаючи Linux), що є величезною зручністю для розробників.
Те, що робить Aptana особливим, - як швидко ви можете розробити невелике веб-додаток і перевірити свій дизайн. Люкс-студіо дозволяє швидко розробляти та тестувати веб-додаток, запущене на Ruby on Rails, PHP, Python або просто HTML / CSS, і їх функції виділення коду нещодавно були покращені включають нові бібліотеки тегів HTML5 і CSS3. Вона також поставляється з інтеграцією Git, вбудованим терміналом, відладчиком коду і кількома іншими чудовими функціями.
Мобільні GUI набори та іконки
Якою була б мережа без халяви? Для веб-дизайнерів важливість інтерфейсу користувача посідає перше місце. Прості графічні інтерфейси є складними, і лише найбільш креативні дизайнери придумали робочі рішення.
Однак існує багато вільних, але якісних ресурсів, доступних для вас веб-дизайнером, щоб перевірити їх. Ці набори GUI в основному призначені для Adobe Photoshop або Fireworks, де ви можете переміщатися по елементам і експортувати їх як плоскі файли зображень.
Ікони є дуже зручним ресурсом. Дизайнери створюють безкоштовні набори і пропонують їх онлайн частіше, ніж будь-коли раніше. Один такий сайт Glyphish має вітрину як вільних, так і про іконок. Ці конструкції засновані на одній темі, яка буде використовуватися на шаблонах мобільних пристроїв і проектах додатків.
Наша колекція шаблонів прототипів мобільних пристроїв буде великою підмогою для вас на шляху розробки веб-сайтів та додатків. Ви не повинні починати кодування, поки у вас не буде сильного графічного інтерфейсу, і ці веб-комплекти допоможуть вам почати правильний шлях.
Комплект графічного інтерфейсу iOS 5
Елементи векторного інтерфейсу користувача інтерфейсу
Комплект іконок для iPhone
Каркасні магніти (комплект DIY)
Інтерфейс інтерфейсу Android
