Optimalizujte webové stránky na použitie so smartfónmi a tabletmi

S čoraz väčším počtom používateľov online a surfujúcich na webových stránkach vo svojich smartfónoch a tabletoch je čoraz dôležitejšie optimalizovať svoju domovskú stránku pre použitie so smartfónmi a tabletmi. Poskytujeme vám niekoľko informácií a odkazov, ktoré vám môžu pomôcť prispôsobiť vašu existujúcu stránku (ak ešte nie je optimalizovaná na mobilné použitie). Nechýbajú ani tipy pre nováčikov v tejto téme.

Implementácia domovskej stránky pre stolné počítače, ako aj pre smartphony a tablety je spojená s určitými ťažkosťami:

Vyhľadávač Google má zaujímavý článok na tému mobilný internet a o tom, ako používanie smartphonov a tabletov mení náš život, pod témou „Okamžiky rozhodnutia alebo v angličtine mikromomenty“. Je to v podstate o tom, že internet nám pomáha stokrát denne vo veľmi malých chvíľach, napríklad keď niečo googlíme so svojím smartfónom, pri sledovaní televízie a sledovaní príspevkov na Twitteri s príslušným hashtagom alebo pri rýchlom vyhľadávaní ceny na Amazone v maloobchode. pre okamžité porovnanie cien. Tieto mikromomenty úplne menia spôsob, akým konáme.

Ak chcete vyskúšať, či je váš web optimalizovaný pre tablety a smartphony, môžete to urobiť na stránkach Google: google.com/webmasters/tools/mobile-friendly/?hl=de. Google ponúka ďalší test na testmysite.withgoogle.com/intl/de-de - je to o niečo podrobnejšie ako pri prvom teste.

Na workshope webdizajnu môžete tiež otestovať, či sa váš web zobrazuje na smartphone, tablete alebo stolnom počítači: web-designwerkstatt.de/url_test.html. Workshop webdizajnu na požiadanie pripraví bezplatnú ponuku na prispôsobenie webových stránok mobilným zariadeniam. Menia sa iba súbory CSS, obsah zostáva nedotknutý.

V ďalšom si ukážeme rôzne možné riešenia optimalizácie webových stránok pre mobilné zariadenia:

Príklad jednoduchej responzívnej domovskej stránky HTML5

Ako príklad responzívnej domovskej stránky HTML5 sme vyvinuli malú šablónu, ktorá by mala spĺňať takmer všetky požiadavky na moderný, užívateľsky prívetivý a responzívny web. Web považujeme za „vzdelávací objekt“ a tešíme sa na tipy a návrhy na zlepšenie v nasledujúcom vlákne fóra: homepage-forum.de/showthread.php?t=60227. Aktuálny stav šablóny domovskej stránky HTML5 nájdete tu: Meine-erste-homepage.com/html5_webseitenvorlage/index.php. Responzívnu šablónu webových stránok HTML5 je možné stiahnuť aj ako súbor zip: Meine-erste-homepage.com/html5_webseitenvorlage/responsive-html5-webseiten-vorlage.zip

Používanie stavebnice webu, ktorá je optimalizovaná aj pre mobilné zariadenia

Najjednoduchší spôsob, ako vytvoriť web optimalizovaný pre smartphony, tablety a stolné počítače, je určite použitie stavebnice webu, ktorá štandardne obsahuje túto optimalizáciu. Obsah webových stránok je možné pohodlne udržiavať, napríklad na stolnom počítači v prehliadači; používatelia majú vždy prístup ku všetkému obsahu ľahko a ľahko pomocou smartfónu, tabletu a stolného počítača. Takúto platformu ponúka Jimdo, Alfahosting alebo 1 & 1 s domovskou stránkou DO-IT-YOURSELF:

www.jimdo.de - na stránke Jimdo.de môžete vytvoriť domovskú stránku bez akýchkoľvek znalostí jazyka HTML pomocou nástroja na tvorbu domovskej stránky. K dispozícii je bezplatný balík a rôzne profesionálne balíčky - v platených verziách, napríklad aj s vlastnou doménou.
1 & 1 Ionos MyWebsite - 1 & 1 My website je plne hostený CMS vrátane domény, e-mailovej adresy, knihy hostí, počítadla návštevníkov a oveľa viac. Môžete si vybrať z rôznych vzorov, napríklad pre súkromný variant pre narodenie dieťaťa, pre svadbu atď. Pre podnikový variant nájdete veľa priemyselných šablón. Webová stránka 1 & 1 Ionos MyWebsite je tiež optimalizovaná pre smartphony a tablety! Vytvorte si svoju domovskú stránku veľmi ľahko (aj bez predchádzajúcich znalostí) s webovou stránkou 1 & 1 Ionos MyWebsite.

alfahosting.de - pomocou stavebnice webu z Alfahosting.de môžete vytvoriť svoj web v siedmich jednoduchých krokoch.

Tvorca webových stránok však nie je pre každého. Preto ďalšie možnosti nižšie.

Použitie rozšírenia Dreamweaver

Stáli sme pred úlohou vytvoriť webovú stránku pre škôlku stromov Helmers, ktorá je optimalizovaná hlavne pre smartphony. Vďaka zavedeniu štítkov s obrázkami rastlín s QR kódmi do predaja museli byť príslušné informácie prístupné aj prostredníctvom mobilného internetu. Pretože sa rastliny predávajú v záhradnom centre a zákazník tam má pomocou inteligentného telefónu načítať QR kód, museli byť na to aj optimálne navrhnuté webové stránky.

Pretože program Dreamweaver používame iba na vytváranie našich webových stránok a už sme mali pozitívne skúsenosti s projektom Seven ako dodávateľom dobrých rozšírení Dreamweaver, pri implementácii projektu opäť prichádzalo do úvahy rozšírenie projectseven.com. Tu je prehľad toho, o čom sa domnievame, že je najlepším rozšírením aplikácie Dreamweaver na vlastné vytváranie responzívnych webov, a vynikajúce nástroje pomoci:

Harmónia: projectseven.com/products/tools/hmy/index.htm - skvelý nástroj na vytváranie responzívnych webových stránok pomocou aplikácie Dreamweaver.
Zeitgeist: projectseven.com/products/templates/pagepacks/zeitgeist/index.htm - vytvorte responzívny web pomocou Dreamweaveru - pomocou balíka PVII Page Pack to urobíte jedným kliknutím - šablóna webu je pripravená. Musíte len upraviť obsah - to je všetko. Ukážky
Typecrafters: projectseven.com/products/templates/pagepacks/typecrafters/index.htm ďalší PVII Page Pack. Ukážky
harmónium: projectseven.com/products/templates/pagepacks/harmony/harmonium/index.htm - ďalší PVII Page Pack. Ukážky
Adaptívne magické menu: projectseven.com/products/menusystems/amm/index.htm - plne responzívny systém navigačného menu. Ukážky
Umelecká galéria Magic: projectseven.com/products/galleries/agm/index.htm - obrazová galéria - plne responzívna a veľmi elegantná. Ukážky

Chceli by sme odporučiť tri šablóny:
Jednoduchá šablóna bez efektov: on-mouseover.de/templates/hp02/index.html, šablóna s mnohými efektmi (responzívny obraz na celú obrazovku/priehľadnosť cez CSS-rgba/prepínacie menu/CSS animácie ako „quake“, “ Otočiť "," Skreslenie "," Vyblednutie "," Posuvný efekt "): on-mouseover.de/templates/hp33/index.html, šablóna s" animáciami kľúčových snímok "(obrázková prezentácia a textová prezentácia): on- mouseover.de/templates/hp26/index.html

Ďalšie webové stránky s informáciami o optimalizácii webových stránok na použitie v mobilných zariadeniach:

Vieme, že sme len na začiatku vývoja, pokiaľ ide o optimalizáciu webových stránok pre smartphony a tablety. Žiadame preto všetkých čitateľov, ktorí majú odkazy a tipy, aby nám ich poslali, napríklad v nasledujúcom poli pre komentáre o niečo ďalej. Prípadne nám môžete informácie poslať prostredníctvom našej sekcie so stránkou na prihlásenie.

Našli ste na našom webe chybu? Dajte nám vedieť, aby sme mohli chybu opraviť!