Оптимизирайте уебсайтовете за използване със смартфони и таблети

Тъй като все повече потребители отиват онлайн и сърфират в уебсайтове на своите смартфони и таблети, става все по-важно да оптимизират собствената си начална страница за използване със смартфони и таблети. Предоставяме ви информация и връзки, които могат да ви помогнат да адаптирате съществуващия си сайт (ако той все още не е оптимизиран за мобилна употреба). Има и съвети за новодошлите в тази тема.

Внедряването на начална страница за настолни компютри, както и за смартфони и таблети е свързано с някои трудности:

Търсачката 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 My е напълно хоствана CMS, включително домейн, имейл адрес, книга за гости, брояч на посетители и много други. Можете да избирате от различни дизайни, напр. за частния вариант за раждането на вашето дете, за сватба и др. Ще намерите много индустриални шаблони за фирмения вариант. Уебсайтът 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.
Zeitgeist: projectseven.com/products/templates/pagepacks/zeitgeist/index.htm - изградете реагиращ уебсайт с Dreamweaver - с PVII Page Pack това може да стане с едно щракване - шаблонът на уебсайта е готов. Всичко, което трябва да направите тогава, е да коригирате съдържанието - това е всичко. Демонстрации
Изработващи машини: projectseven.com/products/templates/pagepacks/typecrafters/index.htm друг PVII Page Pack. Демонстрации
хармониум: projectseven.com/products/templates/pagepacks/harmony/harmonium/index.htm - друг PVII Page Pack. Демонстрации
Адаптивно меню 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

Други уебсайтове с информация за оптимизиране на уебсайтове за използване на мобилни устройства:

Знаем, че сме едва в началото на разработката, когато става въпрос за оптимизиране на уебсайтове за смартфони и таблети. Затова ние молим всички читатели, които имат връзки и съвети за нас, да ни ги изпратят, например в следващото поле за коментари малко по-надолу. Като алтернатива можете да ни изпратите информацията чрез нашия раздел за абонаментна страница.

Открихте ли грешка на нашия уебсайт? Уведомете ни, за да можем да отстраним грешката!