Адаптивна верстка: що це та як використовувати. Адаптивні інтерфейси Корисні сервіси та інструменти
На даний момент близько 11-12% зі 100 000 відвідуваних сайтів - адаптивні, і немає сумнівів, що в найближчі кілька років їх кількість зросте.
Оскільки все більше організацій закочують рукави, хапаючись за реалії Інтернету, використовуваного різними аксесуарами, буде зайвим розглянути кілька стратегій, що використовуються для досягнення нірвани:
Адаптивна модернізаціяАдаптивна модернізація - це процес, при якому береться існуючий сайт, призначений тільки для настільних комп'ютерів, і переробляється в адаптивний за фактом.
Ден Седерхольм
Для більшості організацій широкомасштабне створення нового дизайну з нуля навіть не розглядається. Саме тому адаптивна модернізація – це популярний підхід до створення гарного інтерфейсу для мобільних пристроїв.
Переваги- Щодо швидко.
Способів зробити адаптивну модернізацію досить багато, ця стратегія може полягати у додаванні файлу small-screens.css на сайт. Незважаючи на цей досить грубий приклад, адаптивна модернізація - привабливий варіант для великої кількості організацій, оскільки не потребує перебудови всього з нуля. - Знайоме.
Не збиває з пантелику користувачів . Люди роками звикають до інтерфейсу і роблячи модернізацію існуючого організації зберігають знайомий підхід, при цьому покращуючи життя людям з мобільними пристроями. - Організаційно швидше.
Говорячи політичною мовою, модернізувати інтерфейс безпечніше, ніж починати все з нуля. Менше суперечок про те, який відтінок зеленого вибрати, які банальні стокові фотографії використовувати, а управлінню не доведеться вивертати руки. Це дозволяє командам швидше запускати адаптивні веб-сайти.
- Торкається лише малої частини.
Знову ж таки, є безліч варіантів виконання модернізації, але ціль більшості з них – «зробити симпатично». Фокусуючись на переробці макета, модернізація часто упускає величезну кількість інших факторів, які потрібно враховувати при створенні успішного проекту для різних пристроїв. - 10 літрів води у трилітровій банці.
Так як сайти для настільних комп'ютерів розраховані тільки для них (і часто існують протягом тривалого часу), вони можуть містити багато непотребу. Оскільки модернізація, переважно, полягає у переплавці макета, більшість проблем із контентом, не враховуються повністю. - Продуктивність.
Є щось дивне написання коду для кращої підтримки невеликих пристроїв. Видалення зайвого може зайти надто далеко, але без концентрації на продуктивності вона сама по собі не зросте. - Найгірша підтримка.
Медіа-запити, розроблені для настільних комп'ютерів, погано підтримуються більшістю мобільних пристроїв. - Тимчасові виправлення.
Мені хочеться померти, коли я чую від людей прохання «зробити адаптивним» щось, начебто це просто чекбокс у плані проекту (який іноді насправді існує). Такий тип обмеженого мислення упускає реальні можливості, які пропонує адаптивний дизайн.
Мобільна версія дає можливість посадити насіння, яке виросте з вашого застарілого сайту.
З часом застарілий сайт можна видалити, а спочатку мобільний, адаптивний і майбутній, що враховує майбутні тенденції, буде розвиватися.
- Нижче ризик.
Більшість організацій досі зауважують, що трафік із мобільних пристроїв становить меншість. Тому запуск мобільного адаптивного сайту дозволяє таким організаціям протестувати ситуацію без необхідності кидатися в цю тему з головою. - Можливість навчитися бути гнучким.
Дизайнери можуть навчитися думати гнучкіше. Розробники дізнаються міріади хитрощів пристроїв на Android. Менеджери можуть зрозуміти, як уникнути вдосконалення пікселів. Адаптивний мобільний сайт може стати чудовою пісочницею для навчання. - Інфраструктура.
Команди можуть навчитися як раз і назавжди вирішити проблеми з керуванням вмістом, наприклад, зі створенням зображень - Видалити зайве.
Цей підхід пропонує чудову можливість для команд запитати себе: «Чи дійсно нам це потрібно», а також сфокусуватися на продуктивності. Чому? Тому що в першу чергу вони зайняті покращенням взаємодії користувачів зі своїм сайтом на мобільних пристроях. - Майбутнє за мобільними сайтами.
Незважаючи на спочатку неповноцінний контент або функціонал, за достатньої кількості часу та зусиль ці мобільні сайти, зрештою, можуть замінити своїх повноформатних предків.
- Це все одно мобільний веб-сайт.
Будь він адаптивним чи ні, цей підхід все одно зберігає велику кількість мінусів мобільних сайтів: проблеми з перенаправленням URL, керуванням вмістом, однаковим контентом, послідовністю, SEO-оптимізацією та інших. - Тимчасові виправлення.
Безліч мобільних сайтів створено як пластир - щоб зупинити кров. Такі сайти створюються з метою розвантажити зростаючий трафік, що надходить з мобільних пристроїв. Ці рішення все ж таки можуть задовольнити існуючі потреби, але враховуючи майбутні тенденції, це навряд чи врятує вас у довгостроковій перспективі. - Імовірність зачахнути на корені.
Деякі організації можуть розпочати такі проекти, пройти півдороги, а потім кинути всю цю справу, доки не буде прийнято бюджет наступного року. - Дизайн для невеликих екранів.
Так як спочатку акцент ставиться на маленькі екрани, наступне перенесення інтерфейсу на великі дисплеї без втрати якості може виявитися проблемою.
Недоліки - 50 відтінків недосконалості.
Цей підхід може виявитися невдалим, оскільки користувачам доведеться мати справу з інтерфейсом Франкенштейна, який одночасно і старий і новий. - Можливість зачахнути на корені.
Такі типи проектів потребують чітких кінцевих цілей, інакше вони можуть назавжди застрягти в чистилищі. - Технічне співіснування.
Що відбувається, коли один модуль, який використовує новітні технології та техніки, стикається чолом із застарілим модулем? У цьому підході є багато складнощів, пов'язаних з архітектурою.
Це переклад статті під назвою "Responsive Strategy" від Brad Frost. Переклали в компанії UXDepot із схваленням автора.
PS від перекладачів: Сподіваюся, вам сподобалася стаття. Ми будемо раді, якщо ви вкажете нам помилки в перекладі, щоб ми могли їх оперативно виправити. Пишіть нам на адресу [email protected], будь ласка:)
Адаптивна верстка змінює дизайн сторінки в залежності від поведінки користувача, платформи, розміру екрану та орієнтації девайса та є невід'ємною частиною сучасної веб-розробки. Вона дозволяє суттєво економити і не малювати новий дизайн для кожної роздільної здатності, а змінювати розміри та розташування окремих елементів.
У цій статті будуть розглянуті основні елементи сайту та способи їхньої адаптації.
Регулювання роздільної здатності екрануВ принципі, можна розбити пристрої на різні категорії та верстати для кожної з них окремо, але це займе занадто багато часу, та й хто знає, які стандарти будуть через п'ять років? Тим більше, згідно зі статистикою ми маємо цілий спектр різноманітних дозволів:
Стає очевидним, що ми не зможемо продовжувати верстати для кожного пристрою окремо. Але що ж тоді робити?
Часткове рішення: робимо все гнучкимЗвичайно, це не ідеальний спосіб, але він усуває більшу частину проблем.
Ітан Маркотт (Ethan Marcotte) створив простий шаблон, що демонструє використання гнучкої верстки:
На перший погляд, може здатися, що все легко, але це не так. Погляньте на логотип:
Якщо зменшити зображення повністю, написи стануть нечитаними. Тому, щоб зберегти логотип, картинка поділена на дві частини: перша частина (ілюстрація) використовується як тло, друга (логотип) змінює свої розміри пропорційно.
Елемент h1 містить зображення як фон, а картинка вирівняна щодо фону контейнера (заголовка).
Гнучкі зображенняРобота з картинками - одна з найголовніших проблем під час роботи з адаптивним дизайном. Існує багато способів зміни розміру зображень, і більшість з них досить просто реалізувати. Одне з рішень - використання max-width у CSS:
Img (max-width: 100%;)
Максимальна ширина зображення дорівнює 100% від ширини екрана або вікна браузера, тому що менше ширина, то менше зображення. Зауважте, що max-width не підтримується в IE, тому використовуйте width: 100% .
Представлений спосіб є непоганим варіантом створення адаптивних зображень, але, змінивши тільки розмір, ми залишимо вагу картинки колишнім, через що час завантаження на мобільних пристроях збільшиться.
Ще один спосіб: чуйні зображенняТехніка, представлена Filament Group, не тільки змінює розмір зображень, але й стискає роздільну здатність картинок на маленьких екранах, щоб прискорити завантаження.
Для використання цієї техніки потрібно кілька файлів, доступних на Github. Спочатку беремо JavaScript-файл ( rwd-images.js), файл .htaccessі rwd.gif(Файл зображення). Потім використовуємо трохи HTML, щоб зв'язати великі та маленькі дозволи: спочатку маленьке зображення з префіксом .r(щоб показати, що картинка має бути адаптивною), потім посилання на велике зображення за допомогою data-fullsrc:
Для будь-якого екрану ширше 480 px завантажиться зображення з великою роздільною здатністю ( largeRes.jpg), а на маленьких екранах завантажиться ( smallRes.jpg).
У iPhone та iPod Touch є особливість: дизайн, створений для великих екранів, просто стиснеться у браузері з маленькою роздільною здатністю без скролла або додаткової мобільної верстки. Однак зображень та тексту не буде видно:
Для вирішення цієї проблеми використовується тег meta:
Якщо initial-scale дорівнює одиниці, ширина картинок дорівнює ширині екрана.
Настроювана структура макета сторінкиДля значних змін розміру сторінки може знадобитися змінити розташування елементів у цілому. Це зручно робити через окремий файл зі стилями або, що ефективніше, через CSS-медіазапит. Проблем виникнути не повинно, тому що більшість стилів залишаться колишніми, і зміняться лише деякі.
Наприклад, у вас є головний файл зі стилями, який задає #wrapper , #content , #sidebar , #nav разом із квітами, тлом і шрифтами. Якщо ваші головні стилі роблять макет занадто вузьким, коротким, широким або високим, ви можете визначити і підключити нові стилі.
style.css (основний):
/* Основні стилі, які будуть успадковані дочірньою таблицею стилів */ html,body( background... font... color... ) h1,h2,h3() p, blockquote, pre, code, ol, ul() /* Структурні елементи */ #wrapper( width: 80%; margin: 0 auto; background: #fff; padding: 20px; ) #content( width: 54%; float: left; margin-right: 3%; ) # sidebar-left( width: 20%; float: left; margin-right: 3%; ) #sidebar-right( width: 20%; float: left; )
mobile.css (дочірній):
#wrapper( width: 90%; ) #content( width: 100%; ) #sidebar-left( width: 100%; clear: both; /* Додаткові стилі для нового дизайну */ border-top: 1px solid #ccc; margin-top: 20px; ) #sidebar-right( width: 100%; clear: both; /* Additional styling for our new layout */ border-top: 1px solid #ccc; margin-top: 20px; )
На широкому екрані ліва та права бічні панелі добре поміщаються збоку. На вужчих екранах ці блоки розташовані один під одним для більшої зручності.
Медіа-запити CSS3Розглянемо, як можна використовувати CSS3-медіа-запити для створення адаптивного дизайну. min-width визначає мінімальну ширину вікна браузера або екрана, до якої будуть застосовані певні стилі. Якщо якесь значення буде нижче min-width, то стилі будуть проігноровані. max-width робить протилежне.
@media screen and (min-width: 600px) ( .hereIsMyClass ( width: 30%; float: right; ) )
Медіазапит запрацює тільки коли min-width буде більшим або дорівнює 600 px.
@media screen and (max-width: 600px) ( .aClassforSmallScreens ( clear: both; font-size: 1.3em; ) )
У цьому випадку клас ( aClassforSmallscreens) буде працювати при ширині екрана менше або дорівнює 600 px.
У той час як min-width і max-width можуть бути застосовні і до ширини екрану, і до ширини вікна браузера, нам може знадобитися працювати тільки з шириною пристрою. Наприклад, щоб ігнорувати браузери, відкриті у маленькому вікні. Для цього можна використовувати min-device-width та max-device-width:
@media screen and (max-device-width: 480px) ( .classForiPhoneDisplay ( font-size: 1.2em; ) ) @media screen and (min-device-width: 768px) ( .minimumiPadWidth ( clear: both; margin-bottom : 2px solid #ccc; ) )
Спеціально для iPad у медіазапитів є властивість orientation, значеннями якого можуть бути або landscape(горизонтальний), або portrait(вертикальний):
@media screen and (orientation: landscape) ( .iPadLandscape ( width: 30%; float: right; ) ) @media screen and (orientation: portrait) ( .iPadPortrait ( clear: both; ) )
Також значення медіа-запитів можна комбінувати:
@media screen and (min-width: 800px) and (max-width: 1200px) ( .classForaMediumScreen ( background: #cc0000; width: 30%; float: right; ) )
Цей код буде виконано лише для екранів або вікон браузерів шириною від 800 до 1200 px.
Завантажити певний аркуш зі стилями для різних значень медіазапитів можна так:
JavaScript
Якщо ваш браузер не підтримує CSS3-медіазапити, заміну стилів можна організувати за допомогою jQuery:
$(document).ready(function()( $(window).bind("resize", resizeWindow); function resizeWindow(e)( var newWindowWidth = $(window).width(); // Якщо ширина менше 600 px , використовується таблиця стилів для мобільного if(newWindowWidth< 600){ $("link").attr({href: "mobile.css"}); } else if(newWindowWidth >600)( // Якщо ширина більше 600 px, використовується таблиця стилів для робочого столу $("link").attr((href: "style.css")); ) ) )));
Опціональне відображення контентуМожливість стискати та міняти місцями елементи, щоб вони вмістилися на маленьких екранах, – це чудово. Але це не найкращий варіант. Для мобільних пристроїв зазвичай використовується ширший набір змін: спрощена навігація, сфокусований контент, списки або рядки замість колонок.
На щастя, CSS дає нам можливість показувати та ховати контент із неймовірною легкістю.
Display: none;
display: none використовується для об'єктів, які потрібно сховати.
Ось наша розмітка:
Main Content A Left Sidebar A Right Sidebar
style.css (основний):
#content( width: 54%; float: left; margin-right: 3%; ) #sidebar-left( width: 20%; float: left; margin-right: 3%; ) #sidebar-right( width: 20 %; float: left; ) .sidebar-nav( display: none; )
mobile.css (спрощений):
#content( width: 100%; ) #sidebar-left( display: none; ) #sidebar-right( display: none; ) .sidebar-nav( display: inline; )
Якщо розмір екрана зменшується, можна, наприклад, використовувати скрипт або альтернативний файл зі стилями, щоб збільшити білий простір або замінити навігацію для більшої зручності. Таким чином, маючи можливість ховати та показувати елементи, змінювати розміри картинок, елементів та багато іншого, можна адаптувати дизайн під будь-які пристрої та екрани.
Як Яндекс використовує ваші дані та машинне навчання для персоналізації сервісів - .
Надіслати свою гарну роботу до бази знань просто. Використовуйте форму нижчеСтуденти, аспіранти, молоді вчені, які використовують базу знань у своєму навчанні та роботі, будуть вам дуже вдячні.
Розміщено на http://allbest.ru
1. Адаптивна модернізація
2. Адаптивні мобільні сайти
3.Адаптивний дизайн спочатку для мобільних пристроїв
4. Стратегія поетапності
1. Адаптивна модернізація
Адаптивна модернізація - це процес, при якому береться існуючий сайт, призначений тільки для настільних комп'ютерів, і переробляється в адаптивний за фактом.
На даний момент близько 11-12% зі 100 000 відвідуваних сайтів - адаптивні, і немає сумнівів, що в найближчі кілька років їх кількість зросте. Оскільки все більше організацій закочують рукави, хапаючись за реалії Інтернету, використовуваного різними аксесуарами, буде зайвим розглянути кілька стратегій, що використовуються для досягнення нірвани:
Щодо готових сайтів (зокрема комерційних), у команд не завжди є можливість все відкинути та побудувати заново. Для більшості організацій широкомасштабне створення нового дизайну з нуля навіть не розглядається. Саме тому адаптивна модернізація – це популярний підхід до створення гарного інтерфейсу для мобільних пристроїв.
Переваги:
· Відносно швидко. Тому що не потребує перебудови всього з нуля.
· Знайоме. Не збиває з пантелику користувачів. Люди роками звикають до інтерфейсу і роблячи модернізацію існуючого організації зберігають знайомий підхід, при цьому покращуючи життя людям з мобільними пристроями.
· Організаційно швидше. Модернізувати інтерфейс більш безпечно та просто, ніж починати все з нуля.
Недоліки:
· Зачіпає лише малу частину. 10 літрів води у трилітровій банці. Багато контенту
· Продуктивність.
· Найгірша підтримка. Медіа-запити, розроблені для настільних комп'ютерів, погано підтримуються більшістю мобільних пристроїв.
2. Адаптивні мобільні сайти
Адаптивні мобільні сайти є практикою створення окремого сайту формату «m.yourdomain.ru» з використанням технік адаптивного дизайну.
Мобільна версія дає можливість посадити насіння, яке виросте з вашого застарілого сайту. З часом застарілий сайт можна видалити, а спочатку мобільний, адаптивний і майбутній, що враховує майбутні тенденції, буде розвиватися.
Переваги:
· Нижче ризик. Трафік із мобільних пристроїв становить меншість.
· Адаптивний мобільний сайт може стати чудовою пісочницею для навчання.
· Видалити зайве. Цей підхід пропонує чудову можливість для команд запитати себе: «Чи дійсно нам це потрібно», а також сфокусуватися на продуктивності.
· Майбутнє за спочатку мобільними сайтами. Незважаючи на спочатку неповноцінний контент або функціонал, за достатньої кількості часу та зусиль ці мобільні сайти, зрештою, можуть замінити своїх повноформатних предків.
Недоліки:
· Це все одно мобільний сайт. Будь він адаптивним чи ні, цей підхід все одно зберігає велику кількість мінусів мобільних сайтів: проблеми з перенаправленням URL, керуванням вмістом, однаковим контентом, послідовністю, SEO оптимізацією та інших.
· Тимчасові виправлення. Безліч мобільних сайтів створено як пластир - щоб зупинити кров. Такі сайти створюються з метою розвантажити зростаючий трафік, що надходить з мобільних пристроїв. Ці рішення все ж таки можуть задовольнити існуючі потреби, але враховуючи майбутні тенденції, це навряд чи врятує вас у довгостроковій перспективі.
· Імовірність зачахнути на корені.
· Дизайн для маленьких екранів. Так як спочатку акцент ставиться на маленькі екрани, наступне перенесення інтерфейсу на великі дисплеї без втрати якості може виявитися проблемою.
3. Адаптивний дизайн спочатку для мобільних пристроїв
інтерфейс смартфон дизайн
«Спочатку мобільні» - це принцип, що передбачає розробку інтерфейсу, який враховуватиме обмеження мобільного середовища (маленький екран, низька пропускна здатність та інше), проте використовує всі переваги великих екранів.
Переваги:
· Початок з новими силами. Спочатку мобільні - початок із чистого аркуша.
· Найкраща підтримка. Підтримка більшої кількості мобільних пристроїв, особливо старіших, які не підтримують медіа-запити.
· Продуктивність. Незважаючи на те, що продуктивність сайту в першу чергу залежить від його реалізації, адаптивні проекти для мобільного середовища дають командам можливість від початку акцентувати увагу на продуктивності.
· З урахуванням всього і відразу. Дизайн "спочатку мобільні" (попри його назву) може враховувати велику кількість дозволів, а не тільки орієнтуватися на один клас пристроїв.
· Дизайн, орієнтований на майбутнє.
Недоліки:
· Займає багато часу
· Зрушення у свідомості
· Організаційно складно
· Незнайомо
4. Стратегія поетапності
Стратегія поетапного створення адаптивного дизайну розбиває великомасштабну кампанію на кілька щаблів. Як і при модернізації (ці стратегії не взаємовиключні), тут може не вийти зробити масштабний редизайн, тому деякі організації роблять це крок за кроком. Існує кілька видів поетапного створення адаптивного інтерфейсу: Сторінка за сторінкою.
Переваги:
· Помітно
· Можливість навчитися бути гнучким. Можна навчитися всьому, що стосується створення адаптивних інтерфейсів, а потім використовувати ці знання для решти сайту.
· Вищі шанси запуску
Недоліки:
· Відсутність цілісності
· Імовірність зачахнути на корені
Розміщено на Allbest.ru
Подібні документиПринципи та методи розробки інтерфейсів користувача, правила їх проектування. Класичні способи створення прототипів інтерфейсів користувача в Microsoft Expression Blend. Робота з текстом та графічними зображеннями у Expression Blend.
курсова робота , доданий 19.03.2012
Історія створення Інтернету та його ключові засади: протоколи, сервіси, послуги. Визначення понять інтернет-залежності, тролінгу, кіберпанку та цензури. Класифікація та влаштування веб-сайтів, розробка їх дизайну. Браузери Mozilla Firefox та Opera.
реферат, доданий 10.11.2011
Огляд методів та засобів зі створення та проектування Web-сайтів. Мови програмування створення Web–сайтов. Аналіз переваг та недоліків систем керування сайтом CMS. Розробка дизайну та макету сайту. Розрахунок витрат за розробку продукту.
дипломна робота , доданий 02.06.2016
Аналіз графічних інтерфейсів сучасних систем оптимізації програм. Створення математичної моделі та алгоритму системи управління СБкЗ_ПП, її архітектурно-контекстна діаграма. Технічна документація програмного засобу.
дипломна робота , доданий 18.04.2012
Огляд та аналіз використовуваних технологій, змісту та дизайну сайтів ВНЗ, у тому числі створених на основі CMS. Дослідження змісту сайту ПРИПІТ та інформаційних потреб різних груп його потенційних відвідувачів. Розробка дизайну веб-сайту.
дипломна робота , доданий 11.03.2010
Графічні компоненти екрана, системні об'єкти та функції. Система засобів взаємодії користувача із пристроєм. Історія графічних інтерфейсів персональних комп'ютерів, їх класифікація. Віконна система X Window System.
презентація , доданий 22.05.2012
Вибір способів конструювання та оформлення інтернет-сторінки для розробки сайту торгового підприємства. Особливості роботи з елементами web-дизайну: шрифтом, заголовками, графіками. Правове регулювання створення та використання інтернет-сайтів.
дипломна робота , доданий 11.11.2010
Характеристики інтерфейсів інформаційної взаємодії комп'ютерних ієрархічних систем Принцип "зворотного зв'язку". Властивості, простота та правила створення програмно-апаратних інтерфейсів. Нові напрямки у проектуванні комп'ютерних систем.
курсова робота , доданий 05.01.2017
Аналіз засобів інформації консалтингового бізнесу: огляд мов програмування та програмних засобів для створення сайтів, інформаційних систем та сайтів консалтингових фірм. Моделювання бізнес-процесів. Розробка інтернет-представництва.
дипломна робота , доданий 11.04.2012
Розробка інтернет-сервісу для створення візуального інтерфейсу системних служб хостинг-компанії. Критерії оцінки інтерфейсу та напрямки розробки. Робочий стіл GlideOS. Вибір архітектури сервісу, мови програмування та комунікаційних методів.