Оптимізуйте веб-сайти для використання зі смартфонами та планшетами
Оскільки все більше і більше користувачів переходять в Інтернет та переглядають веб-сайти на своїх смартфонах та планшетах, стає все більш важливим оптимізувати власну домашню сторінку для використання зі смартфонами та планшетами. Ми надаємо вам деяку інформацію та посилання, які можуть допомогти вам адаптувати існуючий веб-сайт (якщо він ще не оптимізований для мобільного використання). Також є поради для новачків цієї теми.
Реалізація домашньої сторінки для настільних ПК, а також для смартфонів та планшетів пов'язана з деякими труднощами:
У пошуковій системі Google є цікава стаття на тему мобільного Інтернету та того, як використання смартфонів та планшетів змінює наше життя під темою "Моменти прийняття рішення, або, англійською мовою, мікромоменти". По суті, мова йде про те, що Інтернет допомагає нам сотні разів на день у дуже маленькі моменти, наприклад, коли ми щось гуглимо на своєму смартфоні, під час перегляду телевізора під час перегляду публікацій у Twitter із відповідним хештегом або швидко шукаємо ціну на Amazon у роздрібному магазині для миттєвого порівняння цін. Ці мікромоменти повністю змінюють наш спосіб дії.
Якщо ви хочете перевірити, чи оптимізовано ваш веб-сайт для планшетів та смартфонів, ви можете зробити це в Google: google.com/webmasters/tools/mobile-friendly/?hl=de. Google пропонує ще один тест на testmysite.withgoogle.com/intl/de-de - це трохи детальніше, ніж перший тест.
На майстерні веб-дизайну ви також можете протестувати свій веб-сайт для відображення на смартфоні, планшеті та настільному ПК: web-designwerkstatt.de/url_test.html. За запитом майстерня веб-дизайну підготує безкоштовну пропозицію щодо адаптації веб-сайтів до мобільних пристроїв. Змінюються лише файли css, зміст залишається незмінним.
Далі ми покажемо вам різні можливі рішення для оптимізації веб-сайтів для мобільних пристроїв:
Приклад простої адаптивної домашньої сторінки HTML5
Як приклад для адаптивної домашньої сторінки HTML5 ми розробили невеликий шаблон, який повинен відповідати майже всім вимогам до сучасного, зручного та адаптивного веб-сайту. Ми розглядаємо сайт як "навчальний об'єкт" і з нетерпінням чекаємо порад та пропозицій щодо вдосконалення у такій темі форуму: homepage-forum.de/showthread.php?t=60227. Поточний статус шаблону домашньої сторінки HTML5 можна знайти тут: Meine-erste-homepage.com/html5_webseitenvorlage/index.php. Адаптивний шаблон веб-сайту HTML5 також можна завантажити у форматі zip-файлу: Meine-erste-homepage.com/html5_webseitenvorlage/responsive-html5-webseiten-vorlage.zip
Використання набору веб-сайтів, який також оптимізований для мобільних пристроїв
Найпростіший спосіб створити веб-сайт, оптимізований для смартфонів, планшетів та настільних ПК, безумовно, - використовувати набір для побудови веб-сайтів, який за замовчуванням включає цю оптимізацію. Вміст веб-сайту можна зручно підтримувати, наприклад, на настільному ПК у браузері; користувачі завжди можуть легко та легко отримати доступ до всього вмісту за допомогою смартфона, планшета та настільного ПК. Таку платформу пропонують Jimdo, Alfahosting або 1 & 1 на домашній сторінці DO-IT-YOURSELF:
- www.jimdo.de - на Jimdo.de ви можете створити домашню сторінку, не знаючи HTML, за допомогою конструктора домашньої сторінки. Існує безкоштовний пакет та різні професійні пакети - у платних версіях, наприклад, також із вашим власним доменом.
- Мій веб-сайт 1 & 1 Ionos - мій веб-сайт 1 & 1 - це повністю розміщена система управління вмістом, включаючи домен, електронну адресу, гостьову книгу, лічильник відвідувачів та багато іншого. Ви можете вибрати з різних конструкцій, наприклад, для приватного варіанту для народження вашої дитини, для весілля тощо. Ви знайдете багато галузевих шаблонів для фірмового варіанту. 1 & 1 Ionos MyWeb-сайт також оптимізований для смартфонів та планшетів! Створіть свою домашню сторінку дуже легко (навіть без попередніх знань) за допомогою веб-сайту 1 & 1 Ionos MyWeb.
alfahosting.de - за допомогою набору для створення веб-сайтів від Alfahosting.de ви можете створити свій веб-сайт за сім простих кроків.
Однак конструктор веб-сайтів підходить не всім. Тому подальші варіанти нижче.
Використання розширення Dreamweaver
Перед нами постало завдання створити веб-сайт для розплідника дерев Helmers, який в основному оптимізований для смартфонів. Із введенням у продажу рослинних ярликів із зображеннями QR-кодів, відповідна інформація також мала бути доступною через мобільний Інтернет. Оскільки рослини продаються в садовому центрі, і клієнт повинен використовувати там свій смартфон для зчитування QR-коду, веб-сайти також повинні бути оптимально розроблені для цього.
Оскільки ми використовуємо Dreamweaver лише для створення наших веб-сайтів і вже маємо позитивний досвід роботи з Project Seven як постачальником хороших розширень Dreamweaver, розширення projectseven.com знову постало під питання під час реалізації проекту. Ось огляд того, що ми вважаємо найкращими розширеннями Dreamweaver для створення адаптивних веб-сайтів самостійно та чудовими інструментами довідки:
- Гармонія: projectseven.com/products/tools/hmy/index.htm - чудовий інструмент для створення адаптивних веб-сайтів за допомогою Dreamweaver.
- Цайтгайст: projectseven.com/products/templates/pagepacks/zeitgeist/index.htm - створити адаптивний веб-сайт за допомогою Dreamweaver - за допомогою PVII Page Pack це можна зробити одним клацанням миші - шаблон веб-сайту готовий. Все, що вам потрібно зробити, це налаштувати вміст - і все. Демо
- Машини-майстри: projectseven.com/products/templates/pagepacks/typecrafters/index.htm інший пакет сторінок PVII. Демо-версії
- гармонія: projectseven.com/products/templates/pagepacks/harmony/harmonium/index.htm - інший пакет сторінок PVII. Демо
- Адаптивне меню Magic: projectseven.com/products/menusystems/amm/index.htm - повністю адаптивна система меню навігації. Демо-версії
- Художня галерея Магія: projectseven.com/products/galleries/agm/index.htm - галерея картин - повністю відповідає і дуже шикарна. Демо-версії
Ми хотіли б рекомендувати три шаблони:
Простий шаблон без ефектів: on-mouseover.de/templates/hp02/index.html, шаблон з безліччю ефектів (чуйне повноекранне зображення/прозорість за допомогою CSS-rgba/перемикання меню/анімація CSS типу "землетрус", Повернути "," спотворення "," зникати "," ефект слайда "): on-mouseover.de/templates/hp33/index.html, шаблон із" анімацією ключових кадрів "(слайд-шоу зображень та текстове слайд-шоу): on- mouseover.de/templates/hp26/index.html
Інші веб-сайти з інформацією про оптимізацію веб-сайтів для використання на мобільних пристроях:
Ми знаємо, що ми лише на початку розробки, коли йдеться про оптимізацію веб-сайтів для смартфонів та планшетів. Тому ми просимо всіх читачів, у яких є посилання та поради, надіслати їх нам, наприклад, у наступному полі для коментарів трохи нижче. Крім того, ви можете надіслати нам інформацію через наш розділ сторінки підписки.
Ви виявили помилку на нашому веб-сайті? Повідомте нас, щоб ми могли виправити помилку!