Kategorie-Archiv: Mobile Endgeräte

Mobile Webseiten erstellen: Bücher für Entwickler

Geschätzte Lesezeit: 1 Minute, 26 Sekunden

Anwendungen für Smartphones programmieren. Die richtigen Bücher für Programmierer. Effektiv Apps und Mobile Webseiten schreiben. Literaturempfehlungen für passionierte Entwickler und solche, die es werden wollen.

Mobile Webseiten

Das Online Business spielt sich immer mehr auf Smartphones und Tablets ab. Umso wichtiger sind Webseiten und Apps, die auf mobilen Endgeräten laufen. Die Herausforderungen:

  • Unterstützung aller relevanten Betriebssysteme: Android, iOS, Windows
  • Eine vernünftige Darstellung für alle gängigen Auflösungen, und zwar egal ob Hochformat oder Querformat

Die folgenden Literaturempfehlungen helfen beim Einstieg und beim Vertiefen der Kenntnisse für Entwickler.

Buchtipps für mobile Webseiten

Mobile Webseiten: Strategien, Techniken, Dos und Don’ts für Webentwickler

Florence Maurice

Das richtige Buch für den ambitionierten Webentwickler, der responsives Webdesign beherrschen möchte. Inklusive jQuery Mobile Kompendium und Leitfäden zum Erstellen mobiler Seiten. Der richtige Einsatz von CSS3 wird ebenso behandelt wie der Mobile-First Ansatz, Javascript-APIs, Geolocation, Browser Support und vieles mehr…

Mobile Web-Apps mit JavaScript

Tobias Bosch, Torsten Winterberg, Stefan Scheidt

Mobile Web Apps sind besonders effizient, wenn es darum geht, mit wenig Aufwand mehrere Betriebssysteme zu unterstützen. Mit einer einzigen Codebasis Android, iOS und Windows Phone bedienen. Dieses Werk zeigt praxisorientiert, wie es geht. Die Autoren demonstrieren einen vollständigen End-to-End-Durchlauf für die Erstellung einer App. PhoneGap fehlt natürlich nicht. Für Fortgeschrittene, die Javascript und HTML bereits kennen. Sowohl als Printversion als auch für den Kindle zu haben…

Apps mit HTML5 und CSS3: Für iPhone, iPad und Android

Florian Franke, Johannes Ippen

Hochwertige gebundene Ausgabe in zweiter Auflage. Enthält alles, was man braucht, um für die wichtigsten Plattformen und Betriebssysteme Apps zu entwickeln. HTML5 Anwendungen mit CSS und JavaScript. Mit dem PhoneGap Framework auch die nativen Funktionen von Smartphones verwenden (GPS, Push Nachrichten usw.). Auch das erfolgreiche und mächtige Framework Sencha Touch wird von den Autoren vorgestellt. Bootstrap darf nicht fehlen, ebenso erhält der Leser wertvolle Informationen zum Design von mobilen Apps…

Wir möchten weiterhin auf lesenswerte Bücher für Online Marketing(*) hinweisen.

* = Affiliate Links (Hilfe)


Wie haben Dir unsere Vorschläge gefallen?

Mobile Webseiten erstellen: Bücher für Entwickler: 1 Stern2 Sterne3 Sterne4 Sterne5 Sterne 5,00 von 5 Punkten, basieren auf 3 abgegebenen Stimmen.

Weitere Beiträge

Mobile Marketing – Geld verdienen mit Apps und Advertising

Geschätzte Lesezeit: 4 Minuten, 2 Sekunden

Geld verdienen mit Apps für Smartphones und Tablets, das geht hauptsächlich über Werbung. Admob von Google ist schon lange nicht mehr die einzige Möglichkeit dafür.

mobile marketing

Werbenetzwerke für mobile Endgeräte

Leadbolt

Leadbolt bietet sowohl HTML-Werbung als auch native Ads an. Beispielsweise habe ich HTML-basierte Werbung in der Dasbach Wetter App für Android eingebaut (früher AdMob, aber Google hat mich aus nicht genannten und mir unerfindlichen Gründen für AdMob und AdSense gesperrt). Das Einbinden der HTML Einblendung ist ziemlich einfach, auch dank des Beispiel-Projekts. Die nativen Werbebanner sind wohl eher Interstitials, also flächendeckende Werbeanzeigen, die auch mit Hilfe der AdMob Technologie eingebunden werden können. Die Anzeigen sind übrigens auch für den deutschen Markt geeignet.

Millennial Media

Der Anbieter mit dem Namen Millennial Media hieß früher Jumptap und ist hauptsächlich in den USA, aber auch in Europa vertreten und bietet ein SDK zur Integration der Anzeigen an. Die Werbeplattform wirbt damit, den mobile first Ansatz zu verfolgen. Die Werbeinhalte werden dabei nach Möglichkeit in inhaltlich passenden Apps ausgespielt. Millennial Media fährt auch den Ansatz des RTB. RTB steht für Real Time Bidding, hierbei wird das Werbemittel mit dem aktuell höchsten Gebot publiziert bzw. ausgespielt.

MobFox

Hauptsäctlich in Europa vertreten ist MobFox. Das Mobile Marketing wird nativ für iOS und Android unterstützt. Das Bestreben dabei ist, der Werbung denselben Look wie der sie einbindenden App zu verpassen, um die Grenze fließend zu gestalten. Auch MobFox unterstützt RTB. Ein SDK erlaubt sogar das Einbinden von Video Ads. Ebenfalls kann man MobFox Anzeigen über ein Javascript Snippet einbinden, das auf jQuery basiert. Über eine Auswahlliste kann man sich eine Bannergröße nach Wahl aussuchen (oder mehrere für verschiedene Werbeplätze). Die kleinste Bannergröße ist 320×50 Pixel groß. Um leere Anzeigenplätze zu vermeiden, gibt es das sogenannte Passback, mit dem man leeren Content übersteuern kann.

Übrigens habe ich mich gerade bei MobFox registriert, um die Möglichkeiten auszuprobieren, denn man kann auch auf mobile Webseiten so leicht Werbung machen. Nebenbei: Man darf sich nicht als Publisher registrieren, wenn man israelischer Staatsbürger ist (kein Scherz!).



Anscheinend ist es notwendig, sich jeweils bei verschiedenen Ad Networks, wie beispielsweise AdMarvel zu registrieren, um Anzeigen über MobFox anzeigen zu können. Denn in MobFox gibt es diverse Absprungmöglichkeiten sowie Eingabefelder für Ad Networ spezifische Publisher Ids usw.

Kiip

Hinter diesem originellen Namen  verbirgt sich eine ebenso originelle Variante der Werbung. Innerhalb von Apps kann der User für besondere Leistungen oder ein häufiges Verwenden der App von dieser belohnt werden. Und zwar in Form von Werbung, die kostenlose Angebote anpreist, etwa Gutscheine oder einen MP3 Download. Kiip ist für 18 Länder lokalisiert und bieten dem Entwickler Analytics Tools zur Auswertung der Effektivität der Einblendungen.

AdMob von Google

Hierzu möchte ich keine weiteren Infos geben, da ich ohne Begründung lebenslang gesperrt wurde (wie jeder, der gesperrt wird!) und keinen Grund für eine solche Sperre gegeben habe. Danke Google, das hilft mir, bessere Alternativen aufzuspüren und diesen Artikel überhaupt erst möglich gemacht zu haben 😉

iAd für iOS

iAd gibt es nur für iOS von Apple. Da ich kein Apple Endgerät besitze (weil Apple mir fremd ist und ich iPhones & iPads für eingeschränkt in ihrer Funktionalität halte, bei gleichzeitig zu hohem Preis), kann hier nur eine kurze Info von der Webseite von iAd folgen, mir liegen also keine Erfahrungswerte vor: Apple’s Advertising Plattform wirbt damit, in wenigen Minuten mit Hilfe der iAd Workbench eine Werbekampagne anzulegen (für Advertiser). Dafür muss man einen Workbench Account anlegen, sich also registrieren. Am einfachsten geht das mit einer vorhandenen Apple ID. Publisher können sich bei IAd for Developers registrieren.

NinthDecimalPlace

Früher hatte NinthDecimalPlace den Namen JiWire. Mir ist es nach einer längeren Suche auf der Website nicht gelungen herauszufinden, wie man mit dieser Werbemöglichkeit als Publisher bzw. mobile Developer Geld verdienen kann, daher ist es mir nicht möglich, weitere Infos dazu zu geben. Wer mehr weiß, dem wäre ich für einen Kommentar dankbar.

adfonic

Entweder wurde adfonic von Google abgestraft oder die Bedeutung der Domäne ist so gering, dass man bei Suche nach dem Namen dieses Netzwerks keinen Treffer erhält. Auch der Server der Website war gerade unten, so dass man dieses Werbenetzwerk wohl nicht unbedingt weiterempfehlen kann. Update 29.12.2015: Adfonic ist auf mehreren Webseiten nicht mehr erreichbar, man sollte seine Zeit mit anderen Dingen verbringen…

mojiva

mojiva wurde 2013 in New York gegründet und steht sowohl App Entwicklern als auch mobilen Webseiten offen. Die Vertragsbedingungen muss man im Microsoft Word Format herunterladen (warum auch per PDF). Update 2017: Die Webseite gibt es nicht mehr, mojiva somit anscheinend auch nicht mehr!

inmobi

inmobi nennt sich das größte unabhängige mobile Werbenetzwerk und hat auch eine deutsche Webseite. Etwas versteckt kommt man im Menü unter Kontakt -> Developers dorthin, wo es interessant wird: Zu Einnahmemöglichkeiten für Entwickler mobiler Anwendungen-

140 Proof

Die Webseite scheint veraltet, es gibt keinen offensichtlichen Link zum Registrieren als Publisher für Werbung. Eine wichtige Informationsseite datiert von 2012.

greystripe

Greystripe wird unter Conversant Media gelistet. Nennt sich selbst das weltweit größte Affiliate Netzwerk. Als Publisher kann man sich mit einer Website oder auch einer App bewerben. Als Deutscher kann man bei der Registrierung direkt seine Umsatzsteuer-ID eingeben, sehr praktisch! Leider akzeptiert das System keine gültige Deutsche USt.-ID…

Navteq Media Solutions

Nicht mehr wirklich auffindbar, wurde womöglich von Google abgestraft, warum auch immer.

Weitere Werbemöglichkeiten

Sowohl für Webseiten als auch für mobile Versionen geeignet sind die Anzeigeformen von Nativendo, die u.a. nach Klicks abgerechnet werden und lukrativ zu sein scheinen.

Wer sich von AdWords lossagen will, etwa weil er gesperrt wurde, sollte sich nach Alternativen umsehen. Übrigens gibt es auch zu vielen der anderen Google Service weitere Anbieter.

Erfolgreiche Websites: SEO, SEM, Online-Marketing, Usability

€ 39,90
Erfolgreiche Websites: SEO, SEM, Online-Marketing, Usability
93.25

Praxiswert

10/10

    Verständlichkeit

    9/10

      Umfang

      10/10

        Preis

        9/10

          Vorteile

          • Zahlreiche Praxisbeispiele
          • Viele wichtige Themen
          • Über 900 Seiten stark
          • Sehr aktuell
          • Infos zur Online Monetarisierung

          Nachteile

          • Buch ist schwer

          Wie hat Dir der Artikel gefallen?

          Mobile Marketing – Geld verdienen mit Apps und Advertising: 1 Stern2 Sterne3 Sterne4 Sterne5 Sterne 5,00 von 5 Punkten, basieren auf 6 abgegebenen Stimmen.

          Weitere Beiträge

          Webseitenoptimierung: Ladezeiten verringern mit System

          Geschätzte Lesezeit: 2 Minuten, 48 Sekunden

          Nicht nur als Ranking-Faktor ist die Ladezeit einer Webseite entscheidend. Auch der Besucher freut sich, wenn eine Webseite optimiert ist und schnell lädt.

          speed

          Maßnahmen für die Webseitenoptimierung

          Viele Webmaster merken erst, dass ihre Webseite zu langsam lädt, wenn sie es gefühlt wahrnehmen. Es reicht allerdings schon lange nicht mehr, wenn eine Seite nach gefühlt kurzer Zeit aufgebaut ist. Ein neutraler Webpage Speed Test gibt einen besseren Hinweis. Wer auf Nummer sicher gehen will, sollte seine Website mit PageSpeed Insights von Google prüfen. Mit dem Ping Test kann man sehen, wie gut eine Webpräsenz von verschiedenen Kontinenten aus erreichbar ist.

          Ohne Webseitenoptimierung ist es kaum vorstellbar, dass die Ladezeit einer Seite gut oder auch nur ausreichend ist. Es gibt zahlreiche Faktoren, die die Geschwindigkeit beeinflussen. Die wichtigsten davon werden vorgestellt. Wenn der Server schnell Inhalte liefert, freuen sich die Besucher und die Suchmaschinen! Vor allem, wenn über mobile Endgeräte wie Smartphones auf das Internet zugegriffen wird, denn dort mangelt es oft an einer wirklich guten Anbindung.

          Wahl des Webspace Providers

          Sicher hat kaum jemand heutzutage einen eigenen Server in Betrieb, sondern verwendet einen professionellen Provider. Da diese heute Dumping Preise anbieten, bieten viele Tarife nur virtuelle Server oder ganz kleine Maschinen. Auf jeden Fall empfehlenswert sind die Tarife von Strato, die ein paar Euro im Monat kosten.

          eins und eins (1&1) ist ebenfalls ein zuverlässiger Provider. Man sollte hier aber nicht einen der sehr günstigen Tarife nehmen, denn diese sind nicht besonders performant und bringen Probleme in der Ladezeit mit sich.

          All-inkl ist ein Innovativer Hosting Dienst, der 3 Monate lang gratis einen Tarif anbietet und zwar inklusive dreier Domains, WordPress, MySQL, PHP und allem, was man braucht. Erst wenn man drei Monate zufrieden hinter sich hat, zahlt man ab dem 4. Monat. Vorige Kündigung jederzeit möglich, ohne Kosten.

          Bilder komprimieren

          Häufig sind große Bilder ein Problem, das im Rahmen einer Webseitenoptimierung leicht gelöst werden kann. Mit dem genialen WordPress Plugin WP Smush kann man beliebige Bilder verlustfrei komprimieren. Das ist sogar möglich für JPEG-Dateien, also solche, die bereits in der Größe reduziert wurden! WP Smush verringert die Bildgrößen automatisch beim Hochladen in WordPress. Man kann die Erweiterung auch im Batch laufen lassen und beispielsweise 50 Images, die bereit früher hochgeladen wurden, nachträglich optimieren.

          Bildgröße und Dateiformat richtig wählen

          Man sollte allerdings Bilder grundsätzlich nicht größer anlegen als sie benötigt werden. Hier auf ERFOLGSREZEPTE ONLINE ist keines der manuell eingebundenen Bilder breiter  als 650 Pixel, der modernen Bildbearbeitung mit Hilfe von freien Tools sei dank! Außerdem braucht man fast nie PNG-Dateien, sondern sollte JPEGs verwenden und zwar mit einer Qualität von vielleicht 85% oder sogar noch weniger (je nach Motiv).

          Diese Tipps gelten eventuell nicht für Fotografen, die gerne mal Bildschirm füllende Motive präsentieren, für den Normalsterblichen reichen aber kleine Bilder fast immer! Gute Bilder gibt es übrigens bei Fotolia. Man kann ein kostengünstiges Abo abschließen und erhält die Lizenz zum Verwenden der hochwertigen Bilder. Besser, also bei Google Images zu suchen und illegal Files einzubinden!

          WordPress Plugins

          Wer das Content Management WordPress verwendet, der kann auf Erweiterungen zurückgreifen, die HTML, CSS und Javascript Files komprimieren und zusammenassen. Eine davon ist WP SuperCache, die sehr populär ist. Ich empfehle allerdings stattdessen das Plugin Autoptimize zu verwenden, da es mehr kann und besser funktioniert. Man kann übrigens bestimmte Codes gegen das Optimieren mit Autoptimize  sperren. Dazu verwendet man folgende Steuercodes:
          <!-- noptimize -->
          Hier Einbindung von nicht zu optimierenden Skripten oder PHP-Code
          <!-- /noptimize -->

          Server konfigurieren

          Mit Hilfe der htaccess Datei kann man die automatische Komprimierung für Dateien einschalten. Weitere Infos dazu und wie man den Inhalt der Datei gestalten sollte, gibt es im Artikel zu Suchmaschinenoptimierung.

          Nicht an den Inhalten sparen

          Der völig falsche Weg, um Webseiten zu optimieren und schneller zu machen ist, Inhalt wegzulassen. Vielmehr sollten so viele brauchbare und relevante Texte wie möglich auf einer Website vorhanden sein. Oder wie ich so schön geschrieben haben: Content is Bundeskanzler.


          Wie hat Dir dieser Artikel gefallen?

          Webseitenoptimierung: Ladezeiten verringern mit System: 1 Stern2 Sterne3 Sterne4 Sterne5 Sterne 5,00 von 5 Punkten, basieren auf 4 abgegebenen Stimmen.
          SEO Agentur Testsieger

          Weitere Beiträge

          Android App für ERFOLGSREZEPTE ONLINE

          Geschätzte Lesezeit: 1 Minute, 16 Sekunden

          Die App zu ERFOLGSREZEPTE ONLINE ist kostenlos im Google Play Store erhältlich.

          Die Android App zeigt alle Beiträge unseres Blogs auf Smartphones und Tablets an. Der Abruf der Beiträge geschieht automatisch.

          Bleibe mit der App für Dein Android Phone auf der Höhe der Zeit und hole Dir kostenlos die neuesten Infos zu den Themen

          • Suchmaschinenoptimierung & Onlinemarketing
          • WordPress: Allgemeine Tipps, Security Hints, Plugins, Themes, News
          • Webspace Hosting: Die besten Provider, Testberichte, Spezial Hosting, Managed Server
          • Webseiten: Erstellung, Optimierung, mobile friendly Entwicklung
          • Apps: Mobile SEO, Reichweitenoptimierung
          • Gewinnspiele, beispielsweise für ein kostenloses personalisiertes SEO Audit, um noch mehr Besucher auf Deine Website zu ziehen

          Jeder Beitrag kann als Favorit markiert werden, so dass er später sehr leicht zum Nachschlagen wiedergefunden werden kann. Dafür im Beitrag einfach auf das Herz-Symbol klicken. Über das Hamburger Menü können die Favoritenartikel dann später mit einem Klick aufgerufen werden.

          Und so sieht die App aus:

          Android App
          Android App von ERFOLGSREZEPTE ONLINE

          Wir haben die Darstellung schlicht und effizient gehalten: konzentriere Dich auf das worauf es wirklich ankommt, auf den Content. Lies in der Pause unsere Tipps zum Online Marketing und werde so spielend zum SEO Profi. Erfahre alles über WordPress, um Dein Blog, Deine Webseite oder Deinen Webshop noch effizienter zu machen und besser zu vermarkten.

          Download der Android App über den Google Play Store:

          Erfolgsrezepte Online
          Erfolgsrezepte Online
          Entwickler: Dr. Klaus Meffert
          Preis: Kostenlos

          Verpasse mit der Android App von ERFOLGSREZEPTE ONLINE keinen Beitrag mehr und hol‘ sie Dir jetzt im Google Play Store kostenfrei! Wir freuen uns auf Deine positive Bewertung zur App. Wenn Du Anregungen oder Wünsche hast, freuen wir uns auf Deine Rückmeldung!

          Jeder, der die App runterlädt und uns hier einen Kommentar samt seiner Webseite hinterlässt, bekommt eine kostenlose SEO Prüfung zugeschickt.


          Wie hat Dir der Artikel gefallen?

          Android App für ERFOLGSREZEPTE ONLINE: 1 Stern2 Sterne3 Sterne4 Sterne5 Sterne 5,00 von 5 Punkten, basieren auf 2 abgegebenen Stimmen.

          Weitere Beiträge

          Mobile SEO Quick Tutorial

          Geschätzte Lesezeit: 2 Minuten, 2 Sekunden

          Suchmaschinenoptimierung ist sowohl für Websites als auch für Apps wichtig. Mobile Endgeräte versprechen eine enorme Reichweitenerhöhung und sollte bei einer SEO Strategie unbedingt berücksichtigt werden.

          Mobile SEO

          Mobilgeräte sind ein Ranking Faktor

          Mobilfreundlichkeit ist mittlerweile ein Ranking Faktor bei Google. Wenn die Suchmaschine feststellt, dass eine Website die Kriterien für Smartphones und Tablets erfüllt, dann wird dies im Suchergebnis von Google durch den grau unterlegten Zusatztext Für Mobilgeräte ausgewiesen. Dabei wird auch berücksichtigt, ob eine Website mobilfeindliche Technologien wie Flash vermeidet und wie groß die Darstellung des Textes auf den kleinen Displays ist.

          Siehe auch dazu die unter Mobilegeddon bekannte Abstrafung für Websites, die nicht für mobile Endgeräte optimiert wurden. Es ist also wichtig, zumindest seine Webpräsenz so zu gestalten, dass sie als mobilfreundlich eingestuft wird. Besser noch ist es natürlich, dass auch tatsächlich die Darstellung auf Mobilgeräten perfekt ist, also die Schrift nicht zu klein, die Links nicht zu dicht aneinander sind usw.

          Auswertungen für mobile Geräte

          In den Google Webmaster Tools werden seit einiger Zeit Crawling-Fehler unterschieden zwischen Desktop und Mobilgeräten. Man sollte unbedingt seine Webseite bei den Webmaster Tools registrieren, um diese Infos zu erhalten. Außerdem erhöht es den Trust der eigene Website, wenn sie dort (von einer realen Person) angemeldet ist.

          SEO Agentur Testsieger

          Apps als Ergänzung zu Webseiten

          Zu einer mobilen SEO Strategie gehört selbstverständlich auch der App-Bereich. Je nach Anwendungsfall bietet es sich an, eine App für seine potentiellen Kunden anzubieten. Für ein Blog etwa kann mit dem WordPress Plugin von Worona recht schnell eine App zur Webseite für Android und iOS realisiert werden. Der Lohn ist eine enorme Erhöhung der Reichweite, denn nun wird man auch in App Stores gefunden, wenn ein Benutzer eine Suche startet.

          Mobile SEO Maßnahmen

          Die Gewichte zum klassischen Onlinemarketing für Webseiten haben sich im Mobilbereich verlagert. Andere Kriterien als im Desktop-Bereich gewissen für Smartphones und Tablets an Bedeutung.

          Ladezeit von Webseiten

          Naturgemäß ist die Netzwerkleistung bei Mobiltelefonen nicht so hoch wie in einem lokalen ortsgebundenen Netzwerk. Daher sind Ladezeiten auch ein großes Thema, wenn es um mobile friendly geht. Die Geschwindigkeit von Websites sollte also optimiert werden. Vor allem Mediendateien sollten komprimiert und ihrer Größe anders gestaltet werden. Eine Auswertung für die Ladegeschwindigkeit von Seiten liefert PageSpeed Insights von Google.

          Long Tail Keywords gewinnen an Bedeutung

          Die seit einiger Zeit etablierte Sprachsteuerung sowie die automatische Ergänzung von Worten und das Arbeiten mit Textbausteinen sorgen dafür, dass mobil tendenziell eher nach längeren Suchbegriffen gesucht wird. Diese Keywords werden als Long Tail bezeichnet und stellen das Gegenteil zu Short Head Keywords dar. Weitere Infos dazu im Vergleich Short Head und Long Tail.

          Die Anfänge

          Wer sich für die Anfänge von mobile SEO interessiert, kann diese hier nachlesen. Der neueste Artikel ist von Ende 2014, aber diese quasi schon historischen Infos sind lesenswert.

          Guerilla SEO: Do It Yourself: Schritt-für-Schritt-Anleitung für alle mit eigener Homepage

          € 15,84
          Guerilla SEO: Do It Yourself: Schritt-für-Schritt-Anleitung für alle mit eigener Homepage
          89

          Praxiswert

          9/10

            Verständlichkeit

            10/10

              Umfang

              8/10

                Preis

                9/10

                  Vorteile

                  • Ausgewiesenes Praxisbuch
                  • Für Anfänger geeignet
                  • Sehr verständlich geschrieben
                  • Schnelle Infos
                  • Unterhaltsam

                  Nachteile

                  • Erfordert Mut

                  Wie hat Dir der Artikel gefallen?

                  Mobile SEO Quick Tutorial: 1 Stern2 Sterne3 Sterne4 Sterne5 Sterne 5,00 von 5 Punkten, basieren auf 4 abgegebenen Stimmen.

                  Weitere Beiträge

                  Bootstrap 3, das CSS-Framework

                  Geschätzte Lesezeit: 4 Minuten, 38 Sekunden

                  Bootstrap ist das bekannteste und beliebteste CSS-Framework. Wenn es um responsive Layouts und Webseiten geht, ist Bootstrap die erste Wahl.
                  Dieser Artikel erklärt, was Bootstrap ist und welchem Prinzip dieses Frameworks gehorcht.

                  Bootstrap Framework

                  Was ist Bootstrap?

                  Bootstrap ist ein Open Source CSS-Framework von Twitter, das responsive Layouts für mobile Geräte unterstützt und für HTML5 Anwendungen bestens geeignet ist. CSS steht für Cascading Style Sheet und erlaubt es, Layoutangaben für HTML Webseiten zu definieren.

                  Das Framework legt ein Grid über die gesamte Page. Das bedeutet, die gesamte Breite wird in Spalten und die Höhe in Zeilen aufgeteilt. Das Grid hat üblicherweise 12 Spalten. Man kann daraus auch Zellen erzeugen, die sich beispielsweise über vier Spalten erstrecken. Geht ein Eingabefeld, eine Überschrift oder ein Button über alle Spalten, bedeutet das die volle Bildschirmbreite. Bei sich änderner Auflösung oder Fenstergröße des Browsers skaliert Bootstrap die Ansicht dann automatisch. Das geht, weil das genormte Gridsystem verwendet wurde!

                  CSS basiert auf Elementen wie <h1> (Überschrift erster Ebene für Titel), Identifikatoren (das sind frei wählbare Namen für Elemente, die pro Seite nur einmalig vorkommen sollten) und Klassen (das ist eine Bezeichnung für eine Menge gleichartiger Elemente, beispielsweise alle Erwähnungen eines Firmennamens).

                  CSS an sich kann alles, was Bootstrap auch kann, aber CSS erfordert es, dass man sich umfassend Gedanken zu Farben, Größen, Abständen und Designelementen macht. Mit Bootstrap sind viele dieser Aspekte in Komponenten vorgedacht und werden out of the box und kostenlos geliefert. Dazu gehören auch Buttons, Dialogboxen und vieles mehr.

                  Man verwendet Bootstrap, indem man es mit einem einfachen Befehl in eine HTML Datei im Kopfbereich (also innerhalb des <head> Tags) einbindet, etwa so:

                  <code class="language-html" data-lang="html"><span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"</span><span class="nt">></span></code>

                  Nun kann man alle vorgedachten Komponenten von Bootstrap verwenden, ganz einfach. Die Anzeige eines Bootstrap-Buttons geschieht beispielsweise so (unser Beispiel ist von der Bootstrap-Website und zeigt alle möglichen Button Ausprägungen, die man aber selbst leicht anpassen kann):

                  <code class="language-html" data-lang="html"><span class="c"><!-- Standard button --></span>
                  <span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-default"</span><span class="nt">></span>Default<span class="nt"></button></span>
                  
                  <span class="c"><!-- Provides extra visual weight and identifies the primary action in a set of buttons --></span>
                  <span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">></span>Primary<span class="nt"></button></span>
                  
                  <span class="c"><!-- Indicates a successful or positive action --></span>
                  <span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-success"</span><span class="nt">></span>Success<span class="nt"></button></span>
                  
                  <span class="c"><!-- Contextual button for informational alert messages --></span>
                  <span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-info"</span><span class="nt">></span>Info<span class="nt"></button></span>
                  
                  <span class="c"><!-- Indicates caution should be taken with this action --></span>
                  <span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-warning"</span><span class="nt">></span>Warning<span class="nt"></button></span>
                  
                  <span class="c"><!-- Indicates a dangerous or potentially negative action --></span>
                  <span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-danger"</span><span class="nt">></span>Danger<span class="nt"></button></span>
                  
                  <span class="c"><!-- Deemphasize a button by making it look like a link while maintaining button behavior --></span>
                  <span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-link"</span><span class="nt">></span>Link<span class="nt"></button></span></code>

                  Das Ergebnis ist folgende Anzeige:

                  Bootstrap HowTo
                  Bootstrap Buttons

                  Mit sogenannten Themes kann das Aussehen aller Komponenten weiter angepasst werden, was insbesondere für HTML5 Anwendungen wichtig ist (ansonsten würden sie viele ähnliche Elemente enthalten und man merkt sofort, dass die App mit diesem CSS-Framework erstellt wurde). Ein Theme ist bei Bootstrap im Prinzip das gleiche wie auch bei WordPress. Was HTML5 Websites angeht, sollte von darauf achten, keine Applications zu schreiben, die im wesentlichen aus einer riesigen HTML Datei bestehen. Das führt nämlich aus Sicht des Onlinemarketing zu großen Problemen!

                  Bootstrap hat an Bedeutung gewonnen

                  Spätestens seit Google verantwortlich für das Aufkommen des Begriffs Mobilegeddon ist, sollte man sich mit responsivem Webseiten beschäftigen. Allerdings macht das auch so Sinn, denn Eure Site sollte sowohl auf Desktop-Bildschirmen als auch auf mobilen Endgeräten wie Smartphones oder Tablets vernünftig dargestellt werden.

                  Abgesehen davon hilft Bootstrap dabei, das Layout von Webseiten sauber und einfach festzulegen, ohne sich mit table-Tags oder divs mit komplizierten styles-Anweisungen rumschlagen zu müssen.

                  Zum Problem mit responsiven Webseiten und dem Suchmaschinenmarketing haben wir einen extra Artikel geschrieben.

                  Bootstrap 3 ist übrigens die aktuelle Version, alles, was eine niedrigere Versionsnummer hat, könnt Ihr getrost ignorieren.

                  Installation

                  Wie installiert man das Framework? Ganz einfach: Herunterladen, entpacken und in ein Unterverzeichnis Deiner Webanwendung kopieren. Dann auf Deiner HTML-Datei einbinden, etwa so:

                  <link rel="stylesheet" href="css/bootstrap.css">

                  Ersetze dabei css durch das Unterverzeichnis, in das Du Bootstrap kopiert hast und bootstrap.css durch den Dateinamen der CSS-Datei, die versionsabhängig ist!

                  Alternativ kannst Du auch Bootstrap direkt aus dem Internet verwenden , ohne es vorher herunterzuladen. Dafür solltest Du aber ein sogenanntes CDN verwenden. Ein CDN ist ein Content Distribution Network, das hochverfügbar ist und Dir superschnelle Ladezeiten garantiert (bzw. suggeriert, denn manchmal sind CDNs auch nicht ereichbar). Einbinden mittels CDN:

                  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

                  Kombination mit Javascript

                  Ebenso Standard wie Bootstrap im HTML-Bereich ist jQuery. jQuery ist ein Javascript-Framework, das die Maniputation von Webseiten enorm vereinfacht. Es ist CSS3 konform und ziemlich leichtgewichtig. Man kann damit auch Elemente aus dem DOM-Modell auslesen.

                  Anstatt umständlich etwas zu schreiben wie document.getElementById(„myid“) heisst es dann nur noch $(„#myid“). Mit Hilfe von Selektoren können auch komplexe Bedingungen kodiert werden. Auch das Auslesen von Attributen, welches zumal für responsive Design wichtig ist, geht mit jQuery supereinfach.

                  Ressourcen zu Bootstrap 3

                  Das wichtigste zuerst: Die Bootstrap 3 Webseite. Dort könnt Ihr Bootstrap kostenlos herunterladen.
                  Wer es lieber auf Deutsch mag, kann die deutsche Bootstrap-Seite aufrufen.

                  Für Icons sollte unbedingt Font Awesome verwendet werden, denn damit sind alle Grafiken voll skalierbar und sehen auch auf Displays mit riesiger Pixelanzahl perfekt aus. Auch Font Awesome ist kostenlos!

                  Das Aussehen Deiner Website kannst Du mithilfe von Themes steuern. Diese beeinflussen Farben, Schriften, Icons, Aufteilungen usw. Auf Bootswatch gibt es kostenfreie Themes, unbedingt ansehen. Unser Geheimtipp: das Spacelab-Theme.

                  Ganz wichtig ist, das Grid System dieses CSS-Frameworks zu verstehen: Bootstrap basiert auf einem 12-Spalten-Layout, Details sind in diesem Tutorial anschaulich erklärt.

                  Eine gute praktische Einführung gibt dieses Tutorial, in dem der Bau einer Landing Page mit Bootstrap beschrieben wird.

                  Noch cooler ist es, ein eigenes WordPress-Theme mit Bootstrap zu erstellen, dazu sollte man allerdings schon fortgeschrittene Kenntnisse sowohl in CSS als auch in WordPress als auch in der Webseitenerstellung allgemein haben. Wer sich rantrauen will, kann hier lesen, wie man am besten vorgeht.

                  Wer sich die ganze Arbeit sparen will und beim Editieren von CSS- und HTML-Code nicht glücklich wird, der sollte gleich zu WordPress greifen. Die meisten Layouts unterstützen responsive Webseiten und kapseln den gesamten Code weg. Man kann sich auf das wesentliche konzentrieren, so wie es sein soll!


                  Wie hat Dir der Artikel gefallen?

                  Bootstrap 3, das CSS-Framework: 1 Stern2 Sterne3 Sterne4 Sterne5 Sterne 4,63 von 5 Punkten, basieren auf 19 abgegebenen Stimmen.

                  Weitere Beiträge

                  Mobilegeddon – Was ist das?

                  Geschätzte Lesezeit: 4 Minuten, 5 Sekunden

                  Google bewertet die Mobilfähigkeiten von Webseiten für das Ranking. Es gilt geeignete Maßnahmen zu ergreifen, um sich vor einem Absturz in den Suchergebnissen zu schützen.
                  mobilegeddon
                  Der Begriff wurde Ende April 2015 populär, weil Google zu diesem Zeitpunkt offiziell anfing, Webseiten auf ihre Tauglichkeit hin zu untersuchen, wie gut sie auf mobilen Endgeräten wie Smartphones dargestellt werden können.

                  Warum Mobilegeddon?

                  Es wäre nicht so schlimm, wenn Google lediglich feststellen würde, dass eine Webseite nicht geeignet ist für die Darstellung auf Mobiltelefonen. Leider geht mit dieser Feststellung aber auch eine Bestrafung durch Google einher (siehe auch einen Spiegel Online Artikel dazu). Das heisst: Jede Webseite, die nicht vernünftig auf mobile Devices dargestellt wird, läuft Gefahr, im Google Ranking weit nach unten zu rutschen.

                  Und wer will das schon? es ist also relevant, ob Deine Homepage mobil ist oder nicht. Anfang Juni wurde bestätigt, dass ungefähr die Hälfte aller Seiten, die nicht mobile friendly sind, im Ranking abgestürzt sind!

                  Mobilfähig heisst allerdings nur, dass eine Version für Smartphones vorhanden sein muss. Tablets, Notebooks und Desktop-PCs sind nicht Teil der Prüfung, d.h. insbesondere für ein Tablet, das ja eine relativ hohe Auflösung und mittelmäßig große Bildfläche besitzt, bedarf es keiner gesonderten Mobilversion der Seite! Das wurde auch von Google in Website Boosting #31 klargestellt.

                  Übrigens wurde Anfang Mai 2015 auch von Bing angekündigt, dass mobilfähige Seiten ein besseres Ranking erhalten als die Webpräsenzen, die nur auf Desktops gut aussehen.  Allerdings wird es wohl bei Bing keine massiven Sichtbarkeitsverluste geben, da das Feedback der Webmaster abgewartet und ausgewertet wird, bevor die Suchstrategie angepasst wird. Bing wird in den Suchergebnissen ein mobile friendly Label anzeigen, um den User über die Fähigkeit der jeweiligen Seite besser zu informieren.

                  Wie kommt es zum Mobilegeddon?

                  Viele Webseiten sind von Hand erstellt und nicht über moderne Content Management Systeme wie WordPress oder Joomla. Oder man hat das falsche Tool eingesetzt (ganz am Ende dieses Artikels nennen wir ein paar geeignete Tools und Möglichkeiten).

                  Das resultiert darin, dass Seiten für eine fixe Darstellungsbreite angelegt wurden. Die Annahme, dass eine Webseite auf einem PC-Monitor angeschaut wird, war eben bis vor nicht allzu langer Zeit noch zulässig. Und jeder, wirklich jeder heutige Computer-Bildschirm kann Auflösungen von 1024 Pixeln Breite oder mehr darstellen. Warum also nicht für die Homepage eine feste Breite von 1000 Pixeln festsetzen?

                  Heutige mobile Endgeräte haben zwar ebenfalls oft eine hohe Auflösung in Pixeln (oft sogar mehr als ein LCD-Bildschirm). Allerdings fällt jedem auch sofort auf, dass ein Smartphone oder selbst ein Tablet eine sehr kleine physische Größe hat verglichen mit einem Monitor. Das ganze drückt sich in der Einheit Zoll aus: PC-Monitor: 21 Zoll o.ä., Smartphone: 6 Zoll, Tablet: 14 Zoll (all das sind nur Richtwerte, um die Qualität des Problems zu verdeutlichen).

                  Man kann also einen Text mit einer Schriftgröße von 14 Pixeln auf einem PC-Bildschirm sehr gut lesen (außer man ist kurzsichtig…), auf einem Smartphone hingegen gar nicht – jedenfalls nicht ohne Zoomen.

                  Das genau stört Google nämlich: Dass ein Smartphone-User zoomen oder scrollen muss. Und erst wenn eine Webseite für mobile Geräte optimiert ist, dann ist auch die Suchmaschine zufrieden! Mal ehrlich: Wer hätte das vor ein paar Jahren gedacht, dass dieser Zusammenhang mal ins Spiel kommen würde?

                  Teste Deine Webseite mit dem Google Mobile Check. Im Idealfall erhältst Du folgende Meldung:

                  Mobile check
                  Website check bei Mobilegeddon

                  Was tun, um das Mobilegeddon zu vermeiden?

                  Die Antwort ist nicht ganz einfach und sie hängt auch von der Webseite ab, um die es geht.

                  Wir haben hierzu deshalb extra einen Artikel geschrieben, wo erklärt wird, wie man seine Webseite fit für die mobile Darstellung macht.

                  Vorab schon mal ein paar Links für diejenigen, die eine neue Webseite erstellen wollen. Denn in diesem Fall sollte man gleich richtig planen und eine responsive Webseite erstellen. Wer hier den Fehler macht, zu wenig Aufwand reinzustecken oder das falsche Tool zu verwenden, den bestraft nicht nur das Leben, sondern auch Google. Abgesehen davon: Jeder hat doch einen Vorteil, wenn die eigene Website von möglichst vielen Endgeräten aus optisch einwandfrei dargestellt werden kann!

                  Content Management Systeme (CMS)

                  Idealerweise verwendet man ein CMS, um das Problem des Mobilegeddon auf elegante und stressfreie Weise zu umgehen. Die populärsten CMSe haben wir hier für Euch aufgelistet – WordPress ist unser absoluter Tipp!

                  Voraussetzung für die Nutzung eines CMS ist ein geeigneter Webspace bei einem Provider wie Strato oder 1&1. Beispielsweise bietet Strato schon für ein paar Euro im Monat Webhosting-Pakete an, die WordPress enthalten (bzw. einen One-Click-Installer dafür, wirklich einfach). Übrigens wurde ERFOLGSREZEPTE ONLINE auch mit WordPress erstellt! Siehe auch unseren WordPress Hosting Testbericht.

                  • WordPress: Die Nummer eins der Content Management Systeme: Unser Top-Tip
                  • Magento: Ebenfalls populär, Hosting beispielsweise bei 1&1
                  • Joomla: Nicht so umfangreich wie WordPress
                  • Drupal: Nicht ganz so einfach zu bedienen wie WordPress, eher für technisch versiertere Personen
                  • Plugins für WordPress: Ein Plugin ist eine Erweiterung. Für WordPress sind die allermeisten kostenlos und viele sind wirklich mächtig
                  • WordPress für Dummies: Ein gutes Buch für Anfänger
                  • Als Plugins für WordPress empfehlen wir

                  Tools für Webseiten

                  Wer ohne Programmieren zum Ziel kommen will, braucht ein mächtiges Werkzeug. Wir stellen einige davon hier vor, macht euch selbst ein Bild:

                  Webflow Websites
                  Webflow Editor für Webseiten
                  • Webflow: supereinfaches Tool zum Erstellen von Webseiten – kostenlos und online. Bietet auch responsive Designs
                  • Dunked: Nach der obligatorischen Registrierung kann man rein visuell Webseiten erstellen

                  Weitere Tools sind in unserem Tools-Artikel zu finden.


                  Wie hat Dir der Artikel gefallen?

                  Mobilegeddon – Was ist das?: 1 Stern2 Sterne3 Sterne4 Sterne5 Sterne 4,75 von 5 Punkten, basieren auf 8 abgegebenen Stimmen.
                  SEO Agentur Testsieger

                   

                  Weitere Beiträge

                  Webseite für Nutzung mit Smartphones und mobilen Geräten optimieren

                  Geschätzte Lesezeit: 7 Minuten, 40 Sekunden

                  Mobile friendly websites

                  Mobilegeddon: Google straft Dich ab!

                  Ende April 2015 hat das sogenante Mobilegeddon (Google Abstrafung für Webseiten, die nicht fit für Smartphones & Tablets sind) für Aufsehen gesorgt. Wir erklären, wie man seine Website responsiv gestaltet und somit fit für mobile Endgeräte macht.

                  Das Problem herkömmlicher Webseiten auf mobilen Endgeräten

                  Grundsätzlich ist es möglich, eine bestehende Homepage auf einem Smartphone mit kleinerer Auflösung anzusehen. Jedoch zeigt das mobile Gerät eben nur einen Teil der gesamten Seite auf einmal an. Der Anwender muss also scrollen bzw. über den Screen wischen, um alle Inhalte sehen zu können.
                  Dies ist natürlich nicht optimal für die Bedienbarkeit (Usability) einer Webseite. Das hat auch Google gemerkt und sich gesagt: Jede Webseite, die nicht ordentlich auf mobile Geräten dargestellt wird, wird möglicherweise mit einer Strafe im Ranking belegt.
                  Da normale Computerbildschirme entweder eine wesentlich höhere Auflösung oder eine wesentlich höhere physische Größe haben als Tablets und erst recht als Smartphones, zeigen letztere eben nur einen Teil einer Webseite an, die für PC-Monitore erstellt wurde.
                  Selbst wenn die Auflösung eines mobilen Geräts in Pixeln genauso hoch ist wie die eines, sagen wir, 21 Zoll Monitors, kann es doch die Seite nicht vollständig darstellen: Aufgrund der kleineren Abmessungen des Displayes (eben nur beispielsweise 7 Zoll statt 21) werden Texte und Bilder herunterskaliert und kleiner dargestellt als am PC.

                  Die Hintergründe zum Mobilegeddon haben wir in einem eigenen Artikel zusammengestellt.

                  Wie macht man eine Webseite fit für die mobile Nutzung mit Smartphones und Tablets?

                  Vorab: Unsere Empfehlung findet ihr in einem eigenen Artikel: Professionelle Webseiten mit WordPress: Schritt für Schritt erklärt.

                  Es gibt grundsätzlich zwei sinnvolle Möglichkeiten:

                  1. Möglichkeit: Eigene mobile Webseite erstellen

                  Die bisherige Homepage bleibt in Ihrer Form bestehen. Zusätzlich dazu wird ein neues Layout für den bestehenden Inhalt (Content) bereitgestellt, das ist natürlich einiges an zusätzlicher Arbeit.
                  Dieses mobile Layout berücksichtigt von vornherein kleinere Displays und verwendet größere Schriften. Weiterhin wird weniger Inhalt auf derselben Pixelfläche platziert als auf einer herkömmlichen Webseite.
                  Dann muss noch gesteuert werden, wann die Desktop-Version und wann die mobile Webseite anzuzeigen ist.
                  Das geht folgendermaßen – vorab: Möglichkeit 2 ist die empfohlenene: Das responsive Design – wer ungeduldig ist, kann den nächsten Abschnitt überspringen!
                  1. Verweis auf Originalseite anbringen
                  Das ist technisch nicht unbedingt nötig, aber gut für das Suchmaschinenranking.
                  Im-Bereich des HTML-Dokuments gibt man etwa folgendes auf der mobilen Variante der Webseite an: Dieses Beispiel gilt für die mobile URL http://m.meineseite.de/startseite.

                  2. Verweis auf mobile Webseite von der Desktop-Version
                  Damit der Browser auf dem Handy nun weiß, dass es eine mobile Variante gibt, teilt man ihm dies mit Hilfe des rel-Tags mit:
                  Der rel-Tag steht dabei wieder im Kopfbereich des HTML-Dokuments (-Tag). Die Zahl 640px gibt die maximale Breite des Displays in Pixeln an, für die diese mobile Website vorgesehen ist. Lässt sich die Seite mobil auch auf 800 Pixeln Breite noch gut darstellen, gibt man statt dessen an:

                  2. Möglichkeit: Responsive Webseite erstellen

                  Das eben dargestellt Verfahren hat einige Nachteile. Unter anderem existieren mehrere Layouts für denselben Content parallel. Will man eine Webseite mobil machen, empfehlen wir die zukunftsträchtige Technik des responsiven Designs. Hierfür gibt es eine Reihe von Frameworks für Entwickler, die dabei unterstützen. Man muss das Rad also nicht neu erfinden.

                  Die Idee dahinter lässt sich am besten erklären, wenn man das populäre CSS-Framework Bootstrap betrachtet:
                  Bootstrap sieht vier verschiedene Bildschirmgrößen vor: XS (extra small), S (small), M (medium) und L (large).

                  Hinter diesen vier Größenkategorien stecken folgende Pixelgrößen (bezogen auf die Breite des Bildschirms in Pixeln):

                  • XS sind Schirme kleiner als 768 Pixel Breite.
                  • S sind Schirme größer gleich 768 und kleiner 992 Pixel.
                  • M sind Schirme größer gleich 992 und kleiner als 1200 Pixel.
                  • L sind alle Auflösungen ab 1200 Pixel aufwärts.

                  Die Größe L ist die normalerweise relevante für PC-Systeme und große Tablets oder auch für Notebooks oder Laptops.

                  Insgesamt gibt es natürlich deutlich mehr mobile Auflösungen als diese, aber vier Modi über die maximale Breite zu unterstützen ist ein sehr guter und beherrschbarer Kompromiss, der auch dem Fakt Rechnung trägt, dass ein Smartphone oder Tablet auch gedreht werden kann und Breite und Höhe sich dann vertauschen.

                  Bootstrap ist das populärste CSS-Framework und bietet alles, was man braucht, um eine Webseite mobil zu machen! Wie genau, das erklären wir gleich.

                  Die dritte Möglichkeit, die wir für wenig sinnvoll und wenig zielführend halten, ist das dynamische Erzeugen der Seite (Dynamic Serving). Daher gehen wir hier auch nicht näher darauf ein.

                  Wie macht man eine Webseite mobil mit responsivem Design und Bootstrap?

                  Das schöne: Bootstrap nimmt einem viel Arbeit ab, siehe den Abschnitt vorher! Weiterhin arbeiten wir nur mit einer Content-Quelle, denn das Layout für die verschiedenen Bildschirmgrößen wird im HTML per CSS-Anweisungen gesteuert. Konkret geht das über CSS-Klassen von Bootstrap.

                  Jetzt folgt ein kleiner Ausflug in Bootstrap-Interna: Wenn Du kein Programmierer werden willst, überspringe diesen Abschnitt und gehe zum nächsten!

                  Ein Beispiel: Du erstellt eine Webseite und fängst mit einem Layout an, das für PC-Bildschirm geeignet ist, also für Breiten von 1200 Pixeln oder mehr.
                  Die HTML-Seiten enthalten beispielsweise einen Bereich, in dem links ein Menü steht (was ca. 200 Pixel breit ist), in der Mitte ein Contentbereich (ca. 800 Pixel breit) und rechts eine Sidebar (wieder 200 Pixel breit). Nur der Content-Bereich sei dynamisch hinsichtlich der Breite, Menü und Sidebar sind auf 200 Pixel festgelegt.

                  Verkleinert man das Browserfenster, wird der Content-Bereich also immer schmaler. Spätestens bei einer Breite von, sagen wir, 400 Pixeln ist der Content nicht mehr schön anzusehen, weil er einfach zu gedrungen wirkt und eingequetscht ist zwischen Menü und Sidebar. Bei Bootstrap arbeitet man idealerweise nicht mit festen Pixelbreiten, sondern man definiert die Breite eines Bereichs in Spalten. Bootstrap definiert, dass es genau 12 Spalten gibt. Menü und Sidebar hätten also je 2 Spalten und der Hauptbereich für den Content dann 8 Spalten, macht 2 + 2 + 8 = 12 Spalten.

                  Namecheap
                  Nun kommt das Spannende: Man kann über Bootstrap nicht nur die Anzahl der Spalten definieren, sondern auch, bei welcher Bildschirmgröße ein Bereich (Menü, Contentbereich usw.) wie viele Spalten haben soll. Die Bildschirmgrößen hatten wir oben schon genannt: L (oder LG), M (oder MD), S (oder SM) und XS (ganz groß bis ganz klein).
                  Wie sieht das ganze im HTML-Code aus? Wir gehen mal einen Beispielcode zur Veranschaulichung (grundlegende HTML-Kenntnisse sind hierzu erforderlich):

                  <div id="menu" class="col-lg-2">
                  Hier steht das Menü
                  Menüpunkt 1
                  Menüpunkt 2
                  Menüpunkt 3</div>
                  <div id="content" class="col-lg-8">
                  Das ist der Content-Bereich. Er enthält typischerweise viel Text (Fließtext), der auch Bilder, Aufzählungen, Links usw. enthalten kann.
                  Hier steht zur Demonstration eine weitere Zeile.Und hier die letzte Zeile des Beispiels, es können aber beliebig viele Zeilen sein
                  </div>
                  <div id="sidebar" class="col-lg-2">
                  Hier steht die Sidebar
                  Text 1
                  Text 2
                  Bild 1</div>

                  Es wird schnell klar, dass die ganze Informationsmenge, die man auf einem großen Schirm (Bootstrap-Größe L) anzeigen kann, nicht auf einem kleinen Bild (Bootstrap Größe S) zur Anzeige bringen kann.
                  Daher müssen wir für Größe S (und für XS sowieso) eine neue Darstellungsart definieren. Größe M muss hier nicht speziell abgehandelt werden, weil für M der Contentbereich immer noch groß genug ist.

                  So würde das obige Beispiel auch auf kleinen Bildschirm ordentlich dargestellt – das wäre die einfachste und schnellste Maßnahme:

                  <div id="menu" class="col-lg-2 col-sm-12">
                  Hier steht das Menü
                  Menüpunkt 1
                  Menüpunkt 2
                  Menüpunkt 3</div>
                  <div id="content" class="col-lg-8 col-sm-12">
                  Das ist der Content-Bereich. Er enthält typischerweise viel Text (Fließtext), der auch Bilder, Aufzählungen, Links usw. enthalten kann.
                  Hier steht zur Demonstration eine weitere Zeile.Und hier die letzte Zeile des Beispiels, es können aber beliebig viele Zeilen sein
                  </div>
                  <div id="sidebar" class="col-lg-2 col-sm-12">
                  Hier steht die Sidebar
                  Text 1
                  Text 2
                  Bild 1</div>

                  Was haben wir gemacht: Das Menü bekommt jetzt 12 statt 2 Spalten, also die gesamte Breite. Der Content hat nun ebenfalls die volle Breite von 12 Spalten zur Verfügung. Und auch die Sidebar bekommt 12 Spalten. Das war’s, zumindest akzeptiert Google jetzt dieses Layout. Mna kann natürlich etwas feintuning betreiben, beispielsweise die Sidebar horizontal statt vertikal ausrichten, das ist aber wesentlich mehr Arbeit und soll in diesem Grundlagenartikel nicht weiter diskutiert werden (in einem anderen Artikel dann mehr dazu).

                  Wichtig noch: Bootstrap schaut für die aktuelle Bildgröße, etwa M, ob eine Deklaration wie col-md-6 vorhanden ist (MD steht für Größe M). Ist dies nicht der Fall, sucht Bootstrap nach der Größe S und dann nach XS. Es ist also wichtig, dass im obigen Beispiel die Deklarationen col-lg-* ersetzt werden durch col-md-*, denn dann gelten sie sowohl für L- als auch für M-Größen!

                  Spezialfall: Content Management Systeme wie WordPress oder Magento

                  Betreibst Du Deine Webseite oder Dein Blog über WordPress? Dann besteht die Möglichkeit, dass das Thema (engl.: Theme) von WordPress bereits eine responsive Variante anbietet. Das solltest Du unbedingt prüfen.Am einfachsten geht das, indem Du Deine WordPress-Webseite im Browser aufrufst und den Darstellungsbereich des Browsers einfach veränderst:

                  Einmal die Darstellung im Vollbildmodus auf einem PC-Bildschirm ausprobieren.

                  Als nächstes die Breite des Fenster reduzieren und zwar immer weiter, bis das Fenster nur noch sehr klein ist (vielleicht 600 Pixel breit). Das geht am einfachsten über die sogenannten „Handles“, die erscheinen, wenn man den Mauszeiger an den äußersten rechten Rand des Browserfensters bewegt. Aber Achtung: Das Browserfenster darf nicht im Vollbildmodus dargestellt werden, sonst funktioniert das nicht!

                  Ein gutes Einsteiger-Buch zum Thema WordPress ist übrigens WordPress für Dummies.

                  Passende Hosting Anbieter für Deine Webseite haben wir in einem extra Artikel vorgestellt – es gibt sogar Anbieter, die Hosting-Pakete für 3 Monate komplett kostenlos anbieten und Dir eine Kündigungsmöglichkeit innerhalb dieser 3 Monate geben = Kosten 0 Euro.

                  Ein Experte muss her

                  Du selbst bist kein Programmierer oder Techie und willst Deine Webseite mobil machen. Dann hast Du ein Problem, sofern Du weder auf ein responsives Blog-Theme o.ä, verfügst und auch niemanden kennst, der Dir hilft.
                  In dem Fall empfehlen wir Dir, einen Experten zu Rate zu ziehen bzw. diesen zu beauftragen. Sehr günstige und kompetente Programmierer findet man etwa auf oDesk. Für solche Aufgaben braucht man keinen teuren Deutschen Entwickler zu beauftragen, der um ein Vielfaches teurer ist als eine Offshore-Ressource aus dem Ausland. Und oDesk ist ohne Risiko: Erst wenn die Leistung erbracht wurde, bekommt der Programmierer sein Geld. Ist man zufrieden, schön, ansonsten bekommt man sein Geld zurück!

                  Möchtest Du Dich in das Thema Webseitenprogrammierung einarbeiten, such‘ Dir entsprechende Fachliteratur dazu, um schnell zu einem Ergebnis zu kommen. Hier sollte man nicht am falschen Ende sparen. Ein gutes Buch ist nicht teuer und zahlt sich immer aus.

                  Wenn Du ein etwas umfangreicheres Vorhaben hast und doch lieber einen deutschen IT-Dienstleister beauftragen möchtest, dann kannst Du Dich gerne an uns wenden: Wir sind Experten für Webseiten und Programmierung und bieten einen kostenlosen Vorabcheck Deiner Website an. Kontakt: Siehe Impressum.


                  Wie hat Dir der Artikel gefallen?

                  Webseite für Nutzung mit Smartphones und mobilen Geräten optimieren: 1 Stern2 Sterne3 Sterne4 Sterne5 Sterne 4,67 von 5 Punkten, basieren auf 9 abgegebenen Stimmen.

                  Weitere Beiträge

                  Tipps 1 Stern2 Sterne3 Sterne4 Sterne5 Sterne 4,80 von 5 Punkten, basieren auf 5 abgegebenen Stimmen.