{"id":511,"date":"2016-04-30T09:07:11","date_gmt":"2016-04-30T07:07:11","guid":{"rendered":"http:\/\/www.designbrandes.de\/brandesblog\/?p=511"},"modified":"2019-08-24T15:16:02","modified_gmt":"2019-08-24T13:16:02","slug":"grundsaetze-fuer-mobile-websites","status":"publish","type":"post","link":"https:\/\/www.designbrandes.de\/brandesblog\/grundsaetze-fuer-mobile-websites\/","title":{"rendered":"Mobile Website"},"content":{"rendered":"

Responsive Design und Mobile Design geh\u00f6ren heute zum Standard beim Bau eine Internetseite: Die Elemente passen sich flexibel an extrem verschiedene Sichtfelder an. Es gibt kein starres Layout mehr.
\n<\/strong><\/p>\n

Die folgenden Punkte sollen Ihnen helfen, sich schon bei der Planung mehr in die Anforderungen f\u00fcr flexible Websites reinzudenken. Inhalt und Design sind sehr eng miteinander verbunden, denn die Inhalte sind es ja, die durch Gestaltung verst\u00e4ndlich werden sollen.<\/p>\n

01 . Mobile First<\/h2>\n

Smartphones haben einen stark eingeschr\u00e4nkten Sichtbereich, in dem nat\u00fcrlich zuerst das Wichtigste gezeigt werden sollte. Listen Sie auf einem Blatt Papier nach Priorit\u00e4t auf, welche Ihrer Inhalte wirklich wichtig und welche zweitrangig sind. Wenn Sie nicht wissen, was ich damit meine: Schreiben Sie die Startseite und die Kontaktseite ganz oben hin. Ohne Kontaktdaten<\/strong> ist die tollste Website nutzlos.<\/p>\n

02 . Inhalt straffen<\/h2>\n

Im gro\u00dfen PC-Monitor hat man 3 – 4 Spalten mit viel Platz in der Breite. Im Smartphone hat man nur eine einzige schmale Spalte und sieht nur einen kleinen Ausschnitt davon. Lange Texte liest niemand mehr. Legen Sie bitte die Priorit\u00e4t des Inhalts fest. Was ist wichtig, was kann man weglassen? Wieviel M\u00fche werden Ihre Interessenten haben, an den Inhalt zu kommen, den sie konkret brauchen und suchen? Wenn Sie nicht genau wissen, was ich damit meine: Die \u00f6rtliche Feuerwehr sollte zuerst die Notfallnummer anzeigen und auf ihre pusselige Entstehungsgeschichte ganz verzichten oder den Link dazu in der Fu\u00dfleiste versenken. Wenn Sie Seminare oder Veranstaltungen anbieten: Fakten zuerst. Wann, wo, Titel der Veranstaltung, Kosten, Link zum Routenplaner, Link zur Buchung.<\/p>\n

03 . Einfache Navigation<\/h2>\n

Das stark reduzierte Hauptmen\u00fc oben im Seitenkopf darf nicht viel Platz einnehmen, muss aber trotzdem f\u00fcr Touch Screens<\/em> ausreichend gro\u00df und antippbar sein.\u00a0 Men\u00fcleiste und Inhalt streiten im Smartphone um den arg begrenzten Sichtraum, daher vermeidet man volle Untermen\u00fcs und lange Men\u00fcfahnen.<\/p>\n

F\u00fcr gro\u00dfe Monitore gilt der Grundsatz:<\/strong>
\nMen\u00fcleisten immer stabil, immer sichtbar und erreichbar halten, stets \u00dcbersicht erm\u00f6glichen.<\/p>\n

Im Smartphone gilt das Gegenteil:<\/strong>
\nMen\u00fcleisten ausblenden, keinen Platz daf\u00fcr verschwenden, Struktur ganz einfach halten, Verwirrung durch viele Untermen\u00fcs vermeiden.<\/p>\n

\"mobile\"<\/p>\n

04 . Scrollen ist leichter als Klicken<\/h2>\n

Endlich: Scrollen ist erw\u00fcnscht, Klicks sind m\u00fchsamer im Smartphone. Ein langer vertikaler Inhalt, der sich nach unten fortsetzt, ist besser als ein Untermen\u00fc zum Anklicken. Das absolute Gegenteil zur fr\u00fcheren Benutzerregel! Die Unterseiten zu einem Hauptthema schlie\u00dfen sich gleich am Hauptinhalt fortlaufend an. Man scrollt ganz locker und spart Platz und M\u00fche f\u00fcr das Untermen\u00fc. Das bedeutet auch: Inhalte noch mehr straffen!<\/p>\n

04 . Lesbarkeit hat Vorrang<\/h2>\n

Schriften werden gr\u00f6\u00dfer zugunsten der besseren Lesbarkeit, in der Textmenge aber weniger. Optional: Man k\u00f6nnte f\u00fcr gro\u00dfe PC-Monitore andere Inhalte anbieten als f\u00fcr Smartphones, also eine schlanke und eine oppulente Version der Website aufbauen. Der Mehraufwand bedeutet aber auch mehr Kostenaufwand. Meistens gilt daher „Eine f\u00fcr Alle“, also identische Inhalte f\u00fcr verschiedene Sichtbereiche.<\/p>\n

 <\/p>\n

Fazit:<\/strong>\u00a0 Die Planung der Website ist ein umfangreicher Arbeitsprozess, der auch w\u00e4hrend der Aufbauphase noch andauert. Als Auftraggeber oder Kundin m\u00fcssen Sie sich nat\u00fcrlich nicht mit den kniffeligen Monitorproblemen befassen, sollten aber aus dem Verst\u00e4ndnis heraus<\/strong> Ihrer Webdesignerin Freiraum f\u00fcr L\u00f6sungen<\/strong> geben. Sie stellen nach dem Priorit\u00e4tenprinzip Ihre Inhalte zusammen und \u00fcbergeben dann der Webdesignerin die Aufgabe, diese Priorit\u00e4t f\u00fcr Websitebesucher erlebbar und verstehbar zu machen.<\/h5>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n","protected":false},"excerpt":{"rendered":"

Responsive Design und Mobile Design geh\u00f6ren heute zum Standard beim Bau eine Internetseite: Die Elemente passen sich flexibel an extrem verschiedene Sichtfelder an. Es gibt kein starres Layout…<\/p>\n","protected":false},"author":2,"featured_media":948,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[],"_links":{"self":[{"href":"https:\/\/www.designbrandes.de\/brandesblog\/wp-json\/wp\/v2\/posts\/511"}],"collection":[{"href":"https:\/\/www.designbrandes.de\/brandesblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.designbrandes.de\/brandesblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.designbrandes.de\/brandesblog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.designbrandes.de\/brandesblog\/wp-json\/wp\/v2\/comments?post=511"}],"version-history":[{"count":6,"href":"https:\/\/www.designbrandes.de\/brandesblog\/wp-json\/wp\/v2\/posts\/511\/revisions"}],"predecessor-version":[{"id":1338,"href":"https:\/\/www.designbrandes.de\/brandesblog\/wp-json\/wp\/v2\/posts\/511\/revisions\/1338"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.designbrandes.de\/brandesblog\/wp-json\/wp\/v2\/media\/948"}],"wp:attachment":[{"href":"https:\/\/www.designbrandes.de\/brandesblog\/wp-json\/wp\/v2\/media?parent=511"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.designbrandes.de\/brandesblog\/wp-json\/wp\/v2\/categories?post=511"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.designbrandes.de\/brandesblog\/wp-json\/wp\/v2\/tags?post=511"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}