Menü

Blog

Die Idee zu diesem Blog

Ständig gibt es Neuerungen, raffinierte Tricks oder einfach nur Wissenswertes zum Thema responsive Webseiten.
Wir möchten im folgenden Blog Beiträge zum Gelingen einer guten Webseite zusammentragen.
Die Links sind nach bestem Wissen geprüft, dennoch übernehmen wir für die Inhalte und deren Aktualität keine Garantie.


Liste der wichtigsten deutschen responsiven Webseiten

Handybookmarks.de listet seit Dezember 2015 die wichtigsten responsiven Webseiten für deutsche Internetnutzer: Seit einigen Jahren entsteht mit diesen eine neue Generation des Internets im Browser, die auch per Smartphone den vollen Funktionsumfang bietet. Die gelisteten Seiten werden modernen Ansprüchen gerecht, indem sie ihr Layout an jede Bildschirmbreite anpassen und dadurch sowohl auf dem PC als auch im mobilen Browser im gleichen Umfang bedienbar sind.
Die Liste von derzeit 66 Seiten soll bis März 2016 auf 100 Seiten erweitert werden und dauerhaft eine Auswahl der besten und sinnvollsten responsiven Internetangebote bieten.
Ergänzend dazu betreibt Handybookmarks einen Twitter-Kanal und eine Facebook-Seite - und hält Smartphone-Fans hier auf dem Laufenden, was sich im mobilen Internet tut: Welche Seiten mit responsivem Layout sind besonders empfehlenswsert? Welches große Internetangebot macht einen Relaunch, um nun ebenfalls responsiv zu werden? Und wo finde ich Informationen zu bestimmten aktuellen Themen auf Seiten mit responsivem Design?

Sie erreichen Liste
handybookmarks.de/top-66.html

und wichtige Beiträge:
facebook.com/Handybookmarks-Responsive-Seiten-880432235397779/
twitter.com/handybookmarks


Wie kann man ohne Handy und Tablet auf dem PC die mobile Darstellung simulieren?

Mit dem PC lässt sich das Aussehen der eigenen Webseiten auf mobilen Geräten auf verschiedenen Wegen kostenlos und unkompliziert anzeigen:

1. Das Browserfenster einfach am rechten Rand mit der Maus greifen und nach links ziehen (Mac). Windows Nutzer müssen vorher in der rechten oberen Ecke das mittlere 'Verlkeinern'- Icon aktivieren.

2. Die Adresse der eigenen Webseite in unser Testtool eingeben und gewünschtes Gerät auswählen.

3. Im Netz gibt es viele Simulatoren - ein Beispiel: http://ipadpeek.com


Mit welchem Programm / Editor kann man aus einer responsiven Vorlage eine eigene Webseite für Smartphone und Tablet bauen?

Unsere Vorlagen / Templates sind selbst entwickelt und für alle Monitorauflösungen responsive (=beweglich) optimiert.

Aufgebaut werden die Seiten aus HTML5 und css3 Code. Diesen können Sie beliebig verändern. Als leichteste Methode erscheint es, mit sogenannten WYSIWYG-Editoren ("What you see is what you get" - dt. "Was du siehst erhälst du") zu arbeiten. In Bildfeldern werden Elemente verschoben und eingefügt. Der Code "arbeitet" im Untergrund. Das große ABER - woher weiß der Editor, wie die Anordnungen auf den vielen verschiedenen mobilen Geräten aussehen soll?

Da wir die Steuerung der Anordnung in den css-Dateien vornehmen und diese erhalten bleiben sollen, empfehlen wir dringend, auch im Code zu arbeiten:

Mit Microsoft-Computern: Zwei Fenster öffnen und nebeneinander anordnen
1. den normalen Editor zum Texte verändern, Bereiche kopieren und einfügen usw.
2. das Browserfenster (Chrom, Firefox..) und dieses nach Veränderungen stets aktualisieren mit der rechten Maustaste

Mit Apple-Computern: Zwei Fenster öffnen und nebeneinander anordnen
1. einen Editor (z.B. TextWrangler) zum Texte verändern, Bereiche kopieren und einfügen usw.
2. das Browserfenster (Chrom, Safari..) und dieses nach Veränderungen stets aktualisieren mit der rechten Maustaste

Anschließend die geänderten Dateien hochladen. FileZilla ist immer empfehlenswert (hier können auch schnelle Textänderungen sofort vorgenommen werden).

Selbstverständlich bauen wir Ihnen Ihre neue responsive Webseite auch gern nach Ihren Vorstellungen.
Unsere Vorlagen werden ständig erweitert.Im kostenlosen Test können Sie das Aussehen auf Handys und Tablets sofort anschauen.


Mobile Webseite oder responsives Webdesign?

Das Prinzip der Umleitung auf eine "mobile" Webseite

Die bisherige Webseite bleibt bestehen und nutzt die bestehende Technik für PC – Monitore.
In die Webseite wird eine Weiche eingebaut, die beim Seitenaufruf durch mobile Geräte auf eine responsive (bewegliche, anpassungsfähige) Webseite umleitet.

Die Technik

Die Entscheidung, welche Webseite aufgerufen wird, kann über die Information des User-Agents getroffen werden. Hier werden beim Seitenaufruf Informationen des Gerätes übermittelt.
Jetzt kann per Java Script die Entscheidung zur Umleitung erfolgen. (Die Umleitung kann ebenso bei vorliegenden Voraussetzungen per php umgeleitet werden. Dabei muss die umlenkende Seite eine php-Seite sein. Ist dies nicht der Fall, sind häufig große Menüumbauten erforderlich.)

Fehlerquellen

- Die Listen des User-Agents müssen aktualisiert werden. Nicht enthaltene User-Agents werden nicht erkannt.
ALTERNATIVE: Regelmäßig aktuelle Listen aus dem Internet einbeziehen.

- Es kann zu falschen Zuordnungen des User-Agents kommen - ein Desktop-User-Agent wird manchmal als mobiler User-Agent erkannt oder umgekehrt.
ALTERNATIVE: Einbau eines Umleitungslinks, bei dem der Nutzer manuell die Art der Webseite wählen kann.

- Irrtümlicherweise werden Tablets oft wie Smartphones behandelt.
ALTERNATIVE: Responsive zweite Webseiten

Egal ob Smartphone oder Tablet, Hoch- oder Querformat- die Seiten passen sich allen Bildschirmauflösungen an und bedienen somit jedes mobile Gerät mit optimierten Darstellungen.

Die entscheidenden Nachteile mit 2 Webseiten

- Diese müssen beide gepflegt und aktualisiert werden. Der Zeitaufwand wird größer.
- Die Webseiten sollten nicht den identischen Textinhalt besitzen (Double Content – Vorwürfe).
- Großbildmonitore werden weiterhin mit der bestehenden Version bedient.

Diesen Schritt sollte man gut abwägen und nur gehen, wenn die bisherige Webseite keinen responsiven Umbau ermöglicht.




TIPPS für Webseitenbetreiber



Homepage Die Betreiber der Webseite wenden sich an alle, die Ihre Homepage selbst gestalten. Mit vielen Links gibt es Informationen zu technischen Fragen, aktuellen Angeboten zu nützlichen Tools und immer wieder interessante Empfehlungen. www.homepage-erstellen.de


Kriterien für gute SEO - Bewertungen

Duplicate Content
Verh. Content zu Quelltext
Interner Links
Externe Links
Nofollow-Links
Meta-Description
Meta-Keywords (Keyworddichte)
Title


Die Kosten und Preise für responsive Webseiten

UMZIEHENDE MÖCHTEN KLARHEIT ÜBER DIE KOSTEN

Zuerst muss die Entscheidung zwischen Stundenlohn oder Pauschale gefällt werden. Für den Webdesigner ist die Abrechnung nach anfallender Arbeitszeit ein Traum! Bei plötzlich auftretenden Überraschungen im Quellcode kann der Webdesigner ganz entspannt bleiben.
Dies ist für Sie als Kunden ein enormes Risiko, welches Sie sicher nicht eingehen möchten.
Also wird der Webdesigner den Preis von Beginn an kalkulieren. Und da schwirren viele Fragen durch den Kopf:
Kosten responsive Homepage Wie aufgeräumt ist der vorhandene Quellcode?
Erfolgt die Steuerung überhaupt schon per css - Datei?
Sind Bereiche bereits benannt?
Wurden bisher Tabellen benutzt und müssen nun umgeschrieben werden?
Welchen Umfang haben die Seiten und Texte?
In welcher Qualität steht das Bildmaterial zur Verfügung?
Ist ein CMS-System vorhanden?
Wer übernimmt das abschließende Einbinden der Seiten? und, und, und….

Gibt es eine allgemeine Preisgrößenordnung? Nein, diese kann es nicht geben. Jeder Umbau ist ein individuelles Unikat und muss seriös auch hinsichtlich des Preises jedes Mal neu berechnet werden. In jedem Fall sollte es einen vertraglich geregelten Endpreis als Kostenpauschale geben.

Sind Sie interessiert? Wir prüfen auch Ihre Seite gern und erstellen Ihnen ein unverbindliches Kostenangebot für Ihre responsive Homepage.      weiter ...


CODING css3 - Schatten und deren Effekte

css3 ermöglicht auch für responsive Webseiten den einfachen Umgang mit Schatten. Einzelne Elemente wie Bilder oder Textboxen lassen sich schön hervorheben. Der Befehl box-shadow hat folgende Syntax: horizontale Ausdehnung, vertikale Ausdehnung, Größe, Farbe und muss für die verschiedenen Browser getrennt angegeben werden.

css - Quellcode für 2 farbige Schatten

.schatten_2 {
-moz-box-shadow: 3px 5px 7px #c93,-1px -1px 3px #999;
-webkit-box-shadow: 3px 5px 7px #c93, -1px -1px 3px #999;
-khtml-box-shadow: 3px 5px 7px #c93, -1px -1px 3px #999;
-o-box-shadow: 3px 5px 7px #c93, -1px -1px 3px #999;
box-shadow: 3px 5px 7px #c93, -1px -1px 3px #999;
}

Schattenbox 2 farbig


CODING - Text in der Seitenmitte einer responsive Website zentrieren

Text lässt sich ohne Java-Script per css sehr einfach zentrieren. Grundgedanke dabei ist: Ein Container wird in die Mitte der Seite gerückt und der darin befindliche Text wird in die Mitte des Containers gesetzt.

Der HTML - Code

<body>
<div id="inhalt">
Hier steht der zentrierte Inhalt.
</div>
</body>

Der zugehörige css - Code

#inhalt {
text-align: center;
margin: 0 auto;
border: 1px #ccc solid;
width: 60%;
}

Margin folgt jetzt der Syntax: oben - rechts - unten - links. Da die Werte oben und unten bzw. rechts und links jeweils gleich sein sollen, genügt die Angabe für oben und rechts, die dann automatisch wiederholt wird.

Als Alternative zu margin: 0 auto kann margin auch mit seinen Einzelbezeichnungen aufgerufen werden: margin-left: auto; margin-right: auto .

Der Container erhält einen Rand und ist auf 60% der Bildschirmbreite (responsive) eingestellt.

Der Inhalt im zentrierten DIV




Nutzung des mobilen Internets

Die Zahl der Nutzer des mobilen Internets steigt stetig. Grund genug, das Konzept der eignen Website zu überdenken und Millionen von Nutzern eine funktionstüchtige und ansprechende Homepage anzubieten, deren Inhalte gut lesbar und bedienbar sind.






Einbinden von FAVICONS in Webseiten

Favicon steht für "Favorites Icon" (dt. Favoriten-Zeichen). Sie sind dazu gedacht, Bookmarks einer Webseite mit individuellen Logos hervorzuheben.

Sie werden u.a. dargestellt:

- in der Adresszeile des Browsers

- als Desktopverknüpfung

- in der Linkliste

- in der Browsertitelleiste

Das Einbinden ist einfach:

Erstellen Sie eine 16*16 oder 32*32 große favicon.ico Datei mit Ihrem Grafikprogramm oder einem Generator. Speichern Sie die Datei im Stammverzeichnis Ihrer Webseite. Im Kopf Ihrer HTML-Dateien binden Sie den folgenden Link ein: 



Wie sieht die eigene Seite auf Handy, Tablet... auf mobilen Geräten... aus?

Unser Testtool simuliert das Aussehen der eigenen Webseite auf Handy, Tablet und Desktop - ohne Anmeldung und kostenlos:
www.web-designwerkstatt.de/url_test.html



.htaccess und .htpasswd zum Schutz von Dateien und Verzeichnissen

Aufbau der .htaccess:

AuthName "[beliebiger Name]"

AuthType Basic

AuthUserFile[absoluterPfad zur Datei].htpasswd

require valid-user

Aufbau der .htpasswd:

[Nutzername1]:[Passwort1] 

[Nutzername2]:[Passwort2]

 

Beide Dateien in den Ordner kopieren/hochladen, der geschützt werden soll.



Webfonts

Es ist zu einer bequemen Methode geworden, Webschriften mit der @font-face - Regel einzubauen:

@font-face
{
font-family: 'NAME';
src: url('PFAD/NAME.ttf') format('truetype');
}

Diese wird von allen modernen Browsern unterstützt, dennoch sehen Seiten in unterschiedlichen Browsern im Detail verschieden aus.
Für ältere Varianten gibt es die websichere Lösung: font-family: NAME, Arial, Verdana, ect.;

Eine Quelle für besondere Schriften ist die Seite      http://www.fontsquirrel.com.
Neben der übersichtlichen Navigation durch die zahlreichen Schriftarten überzeugt die Seite vor allem durch ihre Auswahl an kostenlosen Webfonts. Im jeweiligen Downloadordner befinden sich die Lizenzbestimmungen zu jeder Schriftart in einer separaten *.txt - Datei. Hier kann man nachlesen, ob die Verwendung der gewählten Schriftart erlaubt ist. Mit dem WEBFONT GENERATOR lassen sich die Schriften für die unterschiedlichen Browser konvertieren und werden als Download komfortabel zur Verfügung gestellt:

*.ttf und *.otf für Firefox, Safari, Chrome und Opera
*.eot für den Internet Explorer
*.svg für iPhones
*.woff für Firefox ab Version 3.6.

Mit wachsendem Umfang nimmt die Bedeutung der Google Fonts zu. Das Einbinden ist einfach:
- Schrift auswählen
- erzeugten Code für den Link in die HTML-Seite einbauen
- Bezeichnung in die css-Datei für beliebige Elemente einbinden




Informationen und Hilfen zur eigenen Homepage

www.meine-erste-homepage.com
Die Seite bietet Informationen rund um das Thema "Erstellung der Homepage". Dabei findet man in einem sehr gründlich handgeführten Katalog jede Menge nützliche Hilfen: Updates, Anleitungen, Zubehör, Software, Homepage-Forum und einen Chat.


Die eigene Homepage bekannt machen

www.web-designwerkstatt.de
Gleich hier in der web-designwerkstatt in der Rubrik 'Webkatalog responsiver Webseiten' können Sie Ihre Homepage mit einer kurzen Beschreibung in die Linkliste eintragen.

www.alma-webkatalog.com
Ein Eintrag im Alma-Webkatalog lohnt sich aus mehreren Gründen: Der Webkatalog ist handgepflegt, kostenlos, umfangreich und stellt Ihnen einen Backlink mit hohem PageRank zur Verfügung. Der Kontakt erfolgt umgehend. Die Wahlmöglichkeit für einen Eintrag mit oder ohne Backlink besteht.

PresseEcho.de

www.arnayo.de
Im Arnayo Webkatalog erfolgt der Eintrag gegen einen Backlink kostenlos. Der Katalog ist handgeführt, sehr übersichtlich und geprüft.

www.markt.de
Eine kostenlose Kleinanzeige kann man in zwei Schritten regional aufgeben. Das Portal informiert nutzerfreundlich vor Ablauf der Anzeigenschaltung über die kostenlose Verlängerungsoption, eine Verwaltung der Anzeige ist jederzeit möglich.

smart.sistrix.com
SISTRIX Smart bietet kostenlose, wöchentliche, professionelle SEO-Analysen für die eigene Website. Übersichtlich erhält man Detailinformationen in der Rubrik Website-Check, kann das Ranking ausgewählter Suchwörter prüfen lassen und Vergleiche mit Mitbewerbern analysieren.

www.robotinho.de
robotinho ist ein redaktionell geprüftes Firmenverzeichnis mit PageRankvererbung ohne Backlinkpflicht.

www.anzeigenberlin.com    oder     www.kleinanzeigen-landesweit.de
Mit Backlinkpflicht besteht die Möglichkeit, kostenlose Kleinanzeigen aufzugeben.

www.beammachine.net
BeamMachine ist ein sortiertes deutschsprachiges Internetverzeichnis, dessen Artikel handgeprüft sind und Nutzern bei der Suche sehr viel Übersichtlichkeit garantiert. kostenlos anmelden (BeamMachine)

onlinestreet.de

Redaktionell ausgewählte Webseiten zu vielen gut sortierten Themen, kostenlos und ohne Backlinkpflicht

www.Schlaue-Seiten.de
www.online-web-verzeichnis
www.d-linkliste.d
2wid.net


Den eigenen Blog bekannt machen

www.bloggeramt.de
In den Internetverzeichnissen können Sie Ihre Webseite kostenlos anmelden und erhalten im Gegenzug eine kostenlose Werbung im Internet. Die Verzeichnisse sind übersichtlich nach Kategorien gegliedert. Ebenso ist eine Such - Option vorhanden.

www.blog-finden.de
Auf der redaktionell geprüften Seite blog-finden melden Sie Ihre Seite kostenlos an, freie Optionen führen zu aussagekräftigen Darstellungen in der Suche. Eine Backlinkpflicht besteht.

blog.liste24.at
blog-searcher.de
www.blogtraffic.de
blog-searcher.de
Mit Backlinkpflicht für dauerhaftes Erscheinen des Eintrags kann Ihr Blog hier kostenlos angemeldet werden.




Bei Google+ gepostete Kommentare in den eigenen Blog einfügen



Ein leicht einzubauender Code, bei dem lediglich die URL durch die persönliche Angabe ersetzt wird. Breite und Höhe können geändert werden.

<script type="text/javascript">gapi.plusone.go();</script>
<iframe width="600" height="400" src="https://plusone.google.com/_/widget/render/comments?bsv&href=[URL]&first_party_property=BLOGGER&view_type=FILTERED_POSTMOD&width=700&hl=de">
</iframe>


Umlaut-Domainadressen verwenden

Umlaut- Domainnamen oder Mailadressen kann man seit Jahren kaufen. Leider machen diese Umlaute auch seit Jahren Probleme. Da diese Umlaute im "Unicode" dargestellt werden, viele weiter verarbeitende Systeme aber nur ASCII- Zeichenketten lesen, gibt es spätestens an der Stelle Ärger. Dies lässt sich durch den sogenannten "Puny-Code" lösen. Punny-Code setzt Uni-Code- Zeichenketten in ASCII um. Sie finden viele kostenlose Generatoren im Netz, geben Ihre Umlaut- Domain oder Mailadresse ein und erhalten das Resultat in ASCII. Beispielgenerator: www.php2all.de/punycode-generator.html













RESPONSIVES WEBDESIGN

Grundlagen

Test Ihrer Seiten

Unsere Leistungen - Anfrage

Webkatalog responsiver Seiten

Blog

CMS on.web - Demo


Social Media






Login responsive webdesign Vorlagen professionelles Webdesign Webseiten optimieren für Handy web-designwerkstatt smartphone Webseiten mobilisieren Umschreiben Homepage responsive Handy Tablet Desktop Multiscreen mobile Homepage Homepage anpassen für Handy web-designwerkstatt erste Internetseite free download plugins Suchmaschinenoptimierung flexible Homepage bewegliche Internetseite Agentur web Design Homepageerstellung eigene Homepage mobile darstellen Webdesign werkstatt Studio professioneller Webdesigner responsive Homepage SEO web-designwerkstatt eigene Webseiten optimieren für Smartphone Tablet Webseite umschreiben responsive eigene mobile Webseiten für Smartphone Blog Wer schreibt Webseiten umschreiben gesucht suche Webdesigner suche webdesigner professionell erste Homepage Suchmaschine responsive Vorlagen