Startseite » QR-Code für diese Seite

360friends.de wird responsive…

27 November 2014, 6.576x angezeigt, 3 Kommentare
Tags: , , , , , , ,
Tablet

Tablet Ansicht

Tata! 360friends.de ist seit Anfang der Woche “responsive”. Doch was ist das eigentlich ein “Resposive Webdesign“? Nach langem habe ich mich mal wieder ein wenig an das Aussehen der 360friends.de Webseite gemacht. Dabei habe ich das “Mobile-first” Framework Twitter Boostrap in die Webseite integriert. Ziel solch eines Frameworks ist es, eine Webseite für verschiede Endgeräte bereit zu stellen (Desktop, Tablet, Mobile), ohne das man mehrere verschiede Domains oder komplett verschiedene Webseiten hat. Wie der Name schon sagt, stehen gerade mobile Endgeräte im Fokus, sodass man auf diesen ebenfalls alles gut erkennen kann und die Informationen reibungslos lesen kann.

Achtung: Jetzt wird es technisch :) Nach der Integration habe ich den Kopf und den Inhalt der Seite angepasst. Die Navigation im Kopf bleibt nun beim scrollen stehen, sodass man immer Zugriff auf die Suche und das Menü hat. Zusätzlich habe ich die Grafiken der Social Icons entfernt und gegen einen Icon-Font getauscht (fortawesome.github.io/Font-Awesome/). Dadurch sind diese auch auf Retina-Bildschirmen oder beim zoomen gestochen scharf. Den Inhaltsbereich habe ich restrukturiert und auf das Grid-System von Twitter Bootstrap umgestellt. D.h. das die gesamte Seite ein wenig breiter geworden ist, jedoch die Inhalte bei geringeren Auflösungen so “verschoben” werden, dass die Information für das Gerät passend dargestellt werden können. Neben diesen “Neuerungen” habe ich auch ein wenig aufgeräumt…

Einen ersten Eindruck könnt ihr euch mit den Screenshots verschaffen. Dies ist das Resultat der ganzen Änderungen (Screenshots mit BrowserStack erstellt): Desktop, Tablet, Mobile

Wie findet ihr es? Freue mich über Feedback, sodass ich weitere Verbesserungen vornehmen kann!

Tim Lochmüller Autor
Name: Tim Lochmüller
Webseite: http://360friends.de
Posts: 272 Posts

3 Kommentare »

  • Benni
    Benni sagt:

    Jau, das sieht doch schonmal ganz gut aus, wenn ich vom Handy aus schaue und scrolle während das Menü ausgeklappt ist springt das ja um von dem “normalen” Menü zu dem oben “angepinnten”. Bei denen sind unterschiedliche Höhenangaben, das bzw. der Sprung sieht noch nicht so gut aus, ich würde die anpassen, sodass man den Unterschied nicht sieht und den Übergang im Idealfall gar nicht so sehr wahrnimmt

  • Tim Lochmüller
    Tim Lochmüller (Autor) sagt:

    Das mit dem Header finde ich allgemein noch nicht ganz sauber… Aufgrund deines Kommentares, habe ich aber schonmal die Kommentar-Ausgabe für Mobiles korrigiert :) Werde dein Feedback mal auf die Liste aufnehmen, sodass ich die Tage nochmal ein paar Punkte nachbessern kann…. Grüße, Tim

  • Jahresrückblick 2014 – inkl. Statistiken | 360°Friends
    Jahresrückblick 2014 – inkl. Statistiken | 360°Friends sagt:

    […] Tablets (10%) weiter zu Gunsten der mobilen Geräten entwickelt, zeigt, dass der Umstieg auf ein responsives Design der richtige Schritt war. Bei den Betriebssystemen ist Windows mit 50% ganz vorn, bevor Android mit […]

Hinterlasse einen Kommentar/Leserbrief!

Füge deinen Kommentar hinzu oder sende einen Trackback von deiner Webseite aus.
Du kannst zudem die Kommentare via RSS abonnieren .

Sei freundlich! Halt dich ans Thema! Kein Spam!

Mit dem Absenden bestätigst du, dass es sich um keinen Spam handelt.