Archiv

Schlagwort-Archive: rwd

Media_httpt3ndenewswp_wqdps
via t3n.de

Advertisements
Media_httpt3ndenewswp_jfvdz
via t3n.de

Ein kleines JavaScript, das die Entwicklung von Responsive Designs mit JavaScript und CSS ??bersichtlicher macht. Das war uns heute eine t3n-News wert!

MediaQueries CSS3 Startseite


Mediaqueri.es Startseite

Media Queries mit CSS3 in Aktion

Media Queries sind eine CSS3-Technik, die es Webentwicklern erm??glicht, bestimmte Bedingungen wie z.B. die Browser-Fenstergr????e und die Bildschirmaufl??sung des Nutzers zu pr??fen, um so ein jeweils optimiertes Layout f??r das aufrufende Endger??t als Responsive Webdesign auszuliefern. Media Queries sind eine Erweiterung der schon in CSS2 vorhandenen medienabh??ngigen Cascading Stylesheets f??r verschiedene Ausgabeformate wie z.B. eine Screen- oder eine Druckversion. Das meist verwendete Media-Query-Feature ist die Ausgabebreite ???width???. Indem spezifische CSS-Regeln f??r verschiedene Ausgabemedien definiert werden, k??nnen Websites f??r unterschiedliche Viewports wie z.B. Smartphones, Tablets oder Desktop-Browser mit variierenden Aufl??sungen und Merkmalen dargestellt werden.

MediaQueries CSS3 Beispiel Oliver Russel


Mediaqueri.es Beispielseite: Oliver Russell

Eivind Uggedal hat unter Mediaqueri.es eine umfangreiche Sammlung von aktuell 360 Websites als Inspirationsquelle zusammengestellt, die alle vorbildlich nach Responsive Webdesign Regeln mit CSS3 Media Queries umgesetzt sind. Wenn man sich mit seinem Twitter-Account bei Mediaqueri.es anmeldet, kann man auch eigene Websites zur Auflistung vorschlagen und die bereits aufgef??hrten Websites liken. Welche Media-Querie-Website gerade am beliebtesten ist, zeigt das Leaderboard.

MediaQueries CSS3 Beispiel Medical


Mediaqueri.es Beispielseite: Open Medical Device Research Library

Mit den CSS3 Media Queries ist eine fast fertige Standardisierung des W3C als Candidate Recommendation verf??gbar, die bereits effizient f??r Websites mit Responsive Webdesign eingesetzt wird. Alle g??ngigen Desktop-Browser und die mobilen Vertreter wie iOS Safari, Opera Mini oder Android Browser unterst??tzen Media Queries inzwischen. Ab Version 9 ist auch der Internet Explorer nicht mehr aussen vor.

MediaQueries CSS3 Unterstu??tzung


Caniuse.com: Browserunterst??tzung f??r CSS3 Media Queries

Kennt ihr noch weitere interessante Inspirationsquellen f??r Responsive Webdesign mit CSS3 Media Queries?

Weiterf??hrende Links:

via t3n.de

Und noch ne t3n News von mir zu Mediaqueri.es – einem schicken Showcase f??r Responsive Webdesigns mit CSS3 Media Queries. Die Seite ist nicht neu aber eine sehenswerte Inspirationsquelle f??r alle, die sie noch nicht kennen und ??ber RWD nachdenken.

jQuery Slideshow Responsive Webdesign ResponsiveSlides


jQuery-Plugin f??r responsive Bildergalerien: ResponsiveSlides.js

jQuery-Plugins f??r responsive Slideshows und Foto-Viewer

Bildergalerien sollten neben visuellen Effekten f??r z.B. Bild??berg??nge auch Responsive Webdesign Funktionalit??ten beinhalten, indem Slideshows oder Thumbnail-Viewer sich an die Displaygr????en unterschiedlicher Endger??te anpassen. F??r diesen Zweck gibt es einige gute jQuery-Plugins, die sich ohne gro??en Aufwand konfigurieren und in die eigene responsive Website einbinden lassen. 5 davon hier im ??berblick:

1 Elastislide

Elastislide von Tympanus.net ist ein Bilderkarussel als jQuery-Plugin, das seine Gr????e und sein Verhalten in einem Container mit flie??ender Breite an jede Displaygr????e anpasst. Elastislide bietet 10 Default-Optionen f??r die Konfiguration der Bildanzeige und nutzt zus??tzlich das jQuery Touchwipe Plugin f??r Wipe-Events auf iPhone, iPad und iPod Touch.

jQuery Slideshow Responsive Webdesign Elastislide


jQuery-Plugin f??r responsive Bildergalerien: Elastislide

2 jQuery Responsive Thumbnail Gallery

jQuery Responsive Thumbnail Gallery von John Polacek ist ein jQuery-Plugin f??r Bildergalerien mit Vorschau, die sich ebenfalls an ihren Container anpassen. ??ber 8 Default-Parameter k??nnen z.B. Pfade zu unterschiedlich gro??en Biddateien, Breakpoints oder die anzuzeigende Bildanzahl eingestellt werden.

jQuery Slideshow Responsive Webdesign ResponsiveThumbnailGallery


jQuery-Plugin f??r responsive Bildergalerien: Responsive Thumbnail Gallery

3 Glisse.js

Glisse.js von Victor Coulon ist ein einfacher aber funktionsreicher jQuery Foto-Viewer mit CSS3. Features von Glisse.js sind Navigation ??ber Tastatur, CSS3-Keyframe-Animation, 7 verschiedene Transition-Effekte, Viewportskalierung und Vollbild-Unterst??tzung. Fallback-L??sungen f??r ??ltere Browser, die CSS3 noch nicht unterst??tzen, sind in Arbeit.

jQuery Slideshow Responsive Webdesign Glisse


jQuery-Plugin f??r responsive Bildergalerien: Glisse.js

4 FlexSlider

FlexSlider von WooThemes ist ein responsives jQuery-Slideshow-Plugin mit einfachem FlexSlider-Markup und einigen Konfigurationsm??glichkeiten. An Funktionen bietet FlexSlider z.B. horizontale/vertikale Slide- und Fade-Animationen, hardwareunterst??tzte Swipe-Events f??r Touch-Ger??te und anpassbare Navigationsoptionen.

jQuery Slideshow Responsive Webdesign FlexSlider


jQuery-Plugin f??r responsive Bildergalerien: FlexSlider

5 Blueberry

Blueberry von Mark Tyrrell ist eine experimentelle Open-Source Slideshow als jQuery-Plugin, die speziell f??r die Arbeit mit Fluid- oder Responsive Weblayouts entwickelt wurde. Blueberry ist zurzeit in Version 0.4 noch im Beta-Stadium.

jQuery Slideshow Responsive Webdesign Blueberry


jQuery-Plugin f??r responsive Bildergalerien: Blueberry

Weitere kostenlose jQuery-Plugins f??r Bildergalerien f??r Websites mit Responsive Webdesign sind z.B. ResponsiveSlides.js oder wmuSlider.

Kennt ihr noch andere gute jQuery-Plugins f??r responsive Slideshows und Bild-Viewer?

 

Weiterf??hrende Links:

via t3n.de

Diese t3n News von mir stellt kurz 5 jQuery-Plugins f??r Bildergalerien auf responsive Websites vor. Erg??nzungen per Kommentar sind immer willkommen!

Media_httpt3ndenewswp_jorxi
via t3n.de

Meine heutige t3n-News widmet sich einem ??berblick zu ein paar Tools, die das Testen von Responsive Designs erleichtern. Diese Tools dienen nur einer Vorschauvereinfachung, sodass man nicht immer bei jeder kleinen Designanpassung manuell das Browserfenster an alle m??glichen Viewports anpassen mu??. Alle Endger??t-abh??ngigen Features seiner Website mu?? man am Ende noch ordentlich auf den entsprechenden Endger??ten testen 😉

Media_httpt3ndenewswp_cvnif
via t3n.de

Heute als t3n-News von mir: N??tzliche jQuery-Plugins f??r Responsive Webdesign – eine Mischung aus einer guten ??bersicht zum Thema bei Gonzo-Blog und ein paar erg??nzten Infos.

Media_httpnoteandpoin_doabf

Schnucklige Folien und n??tzliche Tipps zu jQuery und Responsive Design von Dave Rupert (Paravel).

%d Bloggern gefällt das: