Die Möglichkeiten zur Optimierung von Webseiten für mobile Geräte wachsen ständig und das Thema ist unter Webdesignern und Entwicklern derzeit auf jeden Fall ein »Hot Topic«. Da die Umsetzung eines mobile-optimierten Webdesigns (z.B. mit Hilfe eines responsive Layouts) aber auch einiges an Mehraufwand bedeutet und viele Techniken zur Umsetzung mitten in der Entwicklung stecken (es gibt also oftmals noch keine standardisierte Vorgehensweise), möchte ich zu einer kleinen Diskussionsrunde anregen und fragen, ob und warum man bereits heute auf die Webseiten-Optimierung für mobile Geräte setzen sollte. Weiterlesen
Tipps für die Gestaltung von Touchscreen-Buttons
Im Artikel »Touch Target Sizes« von Luke W findest du hilfreiche Richtlinien für die Gestaltung optimierter Touchscreen-Buttons. Die dort aufgeführten Button-Maße wurden aus verschiedenen Quellen zusammen getragen (die Quellen wie z.B. die iPhone Human Interface Guidelines werden im Artikel mit verlinkt). Weiterlesen
Webseiten-Optimierung für mobile Geräte: Verschiedene Lösungen im Vergleich
Die rasant wachsende Verbreitung von mobilen Geräten (Smartphones und Tablet PCs) hat auch deutliche Auswirkungen auf die Gestaltung von Webseiten. Webdesign muss flexibler werden und auf die unterschiedlichen Geräte mit ihren verschiedenen Bildschirmgrößen und besonderen Eigenheiten angepasst sein. Denn schließlich möchte man Besucher, die eine Webseite von ihrem mobilen Gerät aus aufrufen nicht verlieren. Und ein ständiges Zoomen, um Inhalte lesen oder Buttons bedienen zu können, ist sicherlich kein optimaler Zustand. Zum Glück gibt es bereits einige Lösungen, um diese neue Herausforderung anzugehen. Im folgenden Artikel habe ich mir diese einmal genauer angeschaut und die unterschiedlichen Ansätze miteinander vergleichen. Weiterlesen
Webdesign goes »Mobile First«: Eine kleine Einführung in den neuen Webdesign-Trend
Die Optimierung von Webdesigns für unterschiedliche Bildschirmformate und Geräte (= responsive Webdesign) wird immer beliebter und wenn man sich einmal in der U-Bahn oder in einem Café umschaut wird einem auch schnell klar, warum das so ist. Immer mehr Menschen nutzen das Internet nicht mehr nur zu Hause an einem Desktop-Computer mit großem Bildschirm, sondern surfen auf ihrem Smartphone, Tablet-PC oder Laptop im Internet. Bei der Gestaltung von Webseiten wird es daher immer wichtiger, auf diese Entwicklung zu reagieren und ein Webdesign für unterschiedliche Formate und Geräte zu optimieren. Im ersten Moment liegt natürlich der Ansatz am nächsten, ein Webdesign in einem gewohnten Format zu konzipieren (z.B. mit einer Gesamtbreite von ca. 1000px) und dieses Design dann anschließend mit Hilfe von CSS Media Queries für kleinere Formate anzupassen. Der Ansatz »Mobile First« geht da allerdings noch etwas weiter. Hier dreht man die gewohnte Arbeitsweise einfach um und arbeitet von der kleinsten Layout-Version hin zur größten. Weiterlesen
Den responsive Bilder-Slider »FlexSlider« nutzen – so funktioniert’s
Bilder-Slider sind sehr beliebt, doch leider sind die bisher üblichen Lösungen meist nicht für responsive Webdesigns geeignet, da sich der Slider nicht automatisch an die unterschiedliche Bildschirmgrößen anpassen kann. In der letzten Zeit sind daher etliche neue responsive Image-Slider entwickelt worden. Eine Slider-Lösung ist zum Beispiel der FlexSlider, der jede Menge Anpassungen bietet und Links und Bildcaptions erlaubt. Im folgenden Artikel zeige ich, wie du den FlexSlider auf deiner Webseite einbinden kannst. Weiterlesen
Das Buch »HTML5 for Web Designers« jetzt kostenlos online verfügbar →
Für alle Webdesigner und HTML-Interessierte, die sich etwas mehr in das Thema HTML5 einarbeiten möchten, gibt es das A Book Apart-Buch »HTML5 for Web Designers« von Jeremy Keith jetzt kostenlos online verfügbar.