Optimierung für Mobilgeräte - Vorgehensweise, Erfahrungen...
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
agentur
algorithmus
april
auswahl
auswirkung
bild
code
design
http
kiste
ladezeit
minute
nachteil
optimieren
optimierung
prozent
umstellung
url
warnung
weben
-
Vor ein paar Wochen kündigte Google an
Ab dem 21. April gilt die Optimierung für Mobilgeräte auch als Rankingsignal. Diese Änderung wirkt sich auf mobile Suchanfragen in allen Sprachen weltweit aus. Daher werden Nutzer bei Suchanfragen eher hochwertige Ergebnisse erhalten, die sowohl für ihre Anfragen relevant als auch für ihre Geräte optimiert sind.
siehe:
http://googlewebmastercentral-de.blogspot.de/2015/02/mehr-fuer-mobilgerate-optimierte-suchergebnisse.html
Wie seid ihr mit dieser Ankündigung umgegangen?
Ist euch das egal, weil die Masse eurer Besucher ohnehin nicht über Google auf eure Seiten kommt und/oder ohnehin nur mit der großen Kiste im Web ist?
Wie seid ihr vorgegangen, falls ihr eure Website angepasst habt? Komplettes Redesign oder altes Design umgemodelt?
Welche Tools ( außer https://www.google.de/webmasters/tools/mobile-friendly/ )und Ressourcen (z.B. mit Designvorlagen) habt ihr genutzt?
Ich persönlich habe nach ersten Versuchen, alte Designs aufzumotzen, festgestellt dass ein komplettes Redesign oft schneller zu machen ist. Neben dem genannten Mobile-Friendly-Prüfer nutze ich noch die angepasste Größenvorschau der Devoloper Toolbar und GenyMotion.
Bei der Umstellung von Wordpress Websites habe ich mich in erster Linie auf vorhandene responsive Templates gestützt und diese mit Hilfe eines Child Templates angepasst. -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
bei mir ist eine Seite mit statischem html betroffen, da hab ich auch die Warnung von den Webmastertools bekommen.
Diese Seite will ich ohnehin schon länger modernisieren, also ist das jetzt der Anlass dafür, weil ich das (für mich zufriedenstellende) Ranking nicht verschlechtern möchte.
Ich sehe mir jetzt html5 - und WP-Templates an, ob ich etwas finde das mir gefällt (+ das ich gut anpassen kann).
zb bei ...
... http://www.bypeople.com/web-templates-html/
... http://templated.co/
Beitrag zuletzt geändert: 16.4.2015 10:39:29 von flamm -
Schriftbasisgröße skaliere ich stufenlos in jQuery bis zu einer Mindestschriftgröße, alle weiteren Schriftgrößen und borders dann in em, also abhängig von dieser. Die Größe von Blockelementen und Bildern definiere ich immer in Prozent.
Für Mobilgeräte (screen.height>screen.width) verwende ich meta viewport und reduziere das Design auf ein einspaltiges Layout. Für Desktop lade ich Bilder die höher als breit sind und für Mobil Bilder die breiter als hoch sind.
Vorteile:
Dauert 5 Minuten, sieht sehr schön aus, skaliert stufenlos.
Das Design sieht auf jedem Gerät exakt gleich aus und nicht nur ungefähr gleich
Wird auch von älteren Browsern unterstützt.
Nachteile:
Browserzoom geht nicht.
Javascript erforderlich.
Beitrag zuletzt geändert: 16.4.2015 15:28:32 von gruppenbann -
Ich habe seit dem ich mit HTML angefangen hab Responsive Homepage Wendesign gelernt.
Und ich würde sagen wenn man mit Media querys arbeitet ist es nicht so schwer. Man muss nun theoretisch den Text und Bild herunter skalieren.
Bilder habe ich 4 verschiedene um die Ladezeit bei bestimmten Geräten zu optimieren. -
Große Auswirkungen auf das Ranking sind laut den neuesten Artikeln im Blogbereich auf https://www.seo-agentur-muenchen.de/ kaum ersichtlich. Sistrix vermutet hier unter http://www.sistrix.de/news/nutzt-google-ankuendigungen-von-algorithmus-aenderungen-fuer-eigene-ziele/ , dass Google Ankündigungen für persönliche Ziele anstrebt. Wenn man sich ansieht, wieviele neue mobilfreundliche Seiten entstanden sind, ist das nachvollziehbar!
Beitrag zuletzt geändert: 29.4.2015 18:21:35 von luxxx -
Live Demo (Breite des Browser-Fensters mal verkeleinern um effekt sichtbar zu machen)
http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
im head
<meta name="viewport" content="width=device-width; initial-scale=1.0">
Beispiel wenn bildschirmbreite <640px (40em) wird smartphone.css genommen
<style type="text/css"> @import url("smartphone.css") screen and (max-width: 40em); </style>
Schriftgrößen
em oder vw vh nutzen siehe
http://www.w3schools.com/cssref/css_units.asp
mit vmin, vmax kannst du minimale und maximale schriftgröße (vom viewport) festlegen
1em = 16px
Pixel em rechner :D
http://pxtoem.com/
um design mal zu testen (praxistest am smartphone, tablet ist besser)
http://cybercrab.com/screencheck/ (http://localhost geht auf der Seite auch)
Gruß mg
Beitrag zuletzt geändert: 29.4.2015 19:00:11 von mg123 -
Sie können fertige Vorlagen zu verwenden. Es erspart Ihnen Zeit und Geld. Vor kurzem Ich will eine persönliche Website erstelle. Und Ich bevor http://www.templatemonster.com/de/ . Es gibt eine große Auswahl an kostenlosen Vorlagen + geben Sie Garantie .
Beitrag zuletzt geändert: 29.5.2015 11:00:51 von clarasss -
Hier ist es auch nochmal erklärt: http://www.heise.de/ix/artikel/Allen-recht-1058764.html
Beitrag zuletzt geändert: 4.7.2015 1:41:55 von karlsve -
Die Framework Bootstrap lohnt sich,
da sich dort die Webseite dynamisch an die Größe des
Displays anpasst:
http://getbootstrap.com
Tutorial:
http://www.w3schools.com/bootstrap/bootstrap_get_started.asp
Alternativ kann man es auch selbst mit Media Queries im Stylesheet versuchen:
http://wiki.selfhtml.org/wiki/CSS/Media_Queries
Beitrag zuletzt geändert: 3.7.2015 17:19:28 von cashkingdom -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
