Kategorien
Best-of HTML/CSS/PSD-Ressourcen Design Essentials HTML/CSS Responsive Design

Onepager: Ein kostenloses, responsives HTML5/CSS3-Website-Template

Muhammad Shahbaz Saleem vom Entwickler- und Gründerblog Egrappler stellt eine komplette Website-Vorlage auf der Basis von HTML5/CSS3, sowie jQuery und einigen darauf aufsetzenden Plugins zur freien Verfügung. Das Template namens Onepager ist, wenn man sich mit Optik und Struktur anfreunden kann, ein guter Startpunkt für die eigene Website. Onepager eignet sich besonders für Dienstleister, die kurz und knapp, aber auf dem Stand der Technik, ihr Know-How an den Mann bringen wollen.

Onepager: Responsiv mit Einschränkungen

Das erst wenige Tage alte Template Onepager zeigt sich im Vergleich zu anderen Vorlagen sehr vollständig. Saleem hat auch an ein Kontaktformular gedacht, wobei dieses über ein ebenfalls im Paketumfang befindliches PHP-Script angetrieben wird. Eine Demo kann hier ausprobiert werden.

Eine Vielfalt gängiger jQuery-Plugins liefert weitere Funktionalitäten, sowie sorgt teilweise für das responsive Verhalten des Templates, etwa im Falle des Flex Sliders. Unter anderem findet sich das hier vor einigen Tagen vorgestellte jQuery Knob. Es gibt also doch Anwendungsfälle dafür ;)

Typografie-Freunde finden eine Reihe freier Webfonts vor, die sich durchaus für weitere Businessprojekte eignen. Sie liegen als Eot, SVG, TTF und Woff im Download-Paket vor und werden via @font-face eingebunden.

Das Design funktioniert relativ solide responsiv. Im Gegensatz zu anderen eGrappler-Templates wirkt bei Onepager auch der Anzeigenplatzhalter links unterhalb der Hauptnavigation zwar nicht schön, aber vernünftig platziert. Immerhin beeinträchtigt er beim Resizing, sowohl im Desktopbrowser, wie auch in mobilen Clients nicht das Layout. Da haben wir schon schlechtere Umsetzungen gesehen.

Nicht so gut implementiert ist der Bereich des zweispaltigen Layouts. Dieses reagiert nur insofern responsiv, als es sich zuverlässig reduziert, aber stets zweispaltig bleibt. Bei sehr kleinen Auflösungen ist das nicht sehr nützlich.

Saleem verspricht Cross-Browser-Kompatibilität und liefert einige Styles speziell für den Internet Exploder mit. Ich testete die Vorlage unter Mac OSX mit dem aktuellen Chrome, sowie Safari und Firefox. In allen Browsern skalierte das Layout einwandfrei. Auch im Chrome und im Maxthon unter Android auf dem HTC One X funktionierte das Template zuverlässig.

Im Ergebnis kann sich Onepager durchaus sehen lassen. Wer ein kleines Unternehmen oder Startup unterhält und schnell eine Website auf der Basis aktueller Standards, inklusive responsivem Design benötigt, kann anhand von Onepager schnelle Erfolge erzielen. An der Dokumentation sollte Saleem noch etwas feilen, eventuell hat er sie aber auch nur fehlerhaft verlinkt. Im Moment führt der Link zur Dokumentation jedenfalls zu einem völlig anderen Template. Andererseits, was soll man bei einem einseitigen Template groß an Dokumentation benötigen? Learning by doing ist angesagt.

Kategorien
Best-of HTML/CSS/PSD-Ressourcen Bilder & Vektorgrafiken bearbeiten Essentials Responsive Design

Responsive HTML5/CSS3-Vorlage für einseitige Websites kostenlos

Das Team von Web Code Builder stellt sein erstes freies responsives Website-Template vor. Es ist von der technischen Seite her dem jüngst hier vorgestellten Justapage nicht unähnlich, sieht aber weit besser aus und ist auch responsiver. Justapage beinhaltete ja lediglich eine mobile.css, die per Mediaquery quasi statisch hätte angesteuert werden müssen. Auch das Template der Web Code Builder ist auf einseitige Layouts fokussiert. Wir haben einen Blick darauf geworfen…

Webseiten-Vorlage für den schnellen Erfolg, aber nicht vollständig responsiv

„Responsive HTML5/CSS3 Website“ nennen die Entwickler ihr Template. Da der Name etwas sperrig ist, werde ich mich im folgenden Text immer nur auf „das Template“ beziehen und meine damit eben jenes langnamige. Das Template also validiert nach Angaben der Entwickler vollständig W3C-konform. Neben dem Einsatz von Web Standards basiert es auf jQuery, welches dynamisch via Googleapis eingebunden wird. Die verwendete Schriftart PT Sans kommt über das Google Webfont Directory ins Spiel. Der bekannte jQuery Flexslider ist für die responsive Slider-Funktionalität verantwortlich.

Die Navigation ist – wie üblich – als Liste realisiert. Zweispaltige Layouts erreicht man, indem man einem Div-Container die Klasse half zuweist und ihr damit zu verstehen gibt, dass sie die Hälfte des Platzes, den man zuvor unter Verwendung eines Hauptcontainers mit der Id content definiert hat, einnimmt. Dreispaltige Layouts entstehen durch die Vergabe der Klasse oneThird. Weitere Varianten sind nicht vorgesehen. Damit ist das Template auf das Layout festgelegt, das die Demoseite sehr schön repräsentiert. Es eignet sich für Personen und Unternehmen, die auf der Suche nach einer Vorlage sind, die sie lediglich mit Inhalten bestücken müssen. Es eignet sich nicht als Startpunkt für eigene, vor allem weitergehende Projekte.

Die ledigliche Verwendung dieser beiden Klassen für Mehrspaltenlayouts lässt schon vermuten, dass das responsive Verhalten des Template an Grenzen stößt. Egal, wie man skaliert, das Div mit der Klasse oneThird beansprucht stets ein Drittel des Content-Div. Hier kann man fiese Optik nur durch die vorausschauende Dimensionierung des Content-Div vermeiden. Wenn man mit den Einschränkungen leben kann, ist das Template eine brauchbare Alternative. Das CSS ist ordentlich strukturiert, alle erforderlichen Präfixe sind gesetzt, Kommentierungen, sowie sonstige Dokumentation sucht man allerdings vergeblich.

Immerhin ist das Template schick und vor allem kostenfrei. Da kann ein längerer Blick bei vermuteter Eignung nicht schaden. Der Download erfolgt über die Entwicklerseite. Von dort aus ist auch der Zugriff auf die Demoseite verlinkt.

Kategorien
Design JavaScript & jQuery Programmierung Responsive Design

Widow Tamer JS: Javascript verbessert Typografie in responsiven Layouts

Der Widow Tamer, zu deutsch Witwenzähmer, kümmert sich um eine spezielle typografische Fragestellung. Von einer Witwe spricht der Entwickler Nathan Ford im Zusammenhang mit seinem Tool dann, wenn am Ende eines Absatzes lediglich eine geringe Zahl von Zeichen übrig bleibt, diese aber dennoch in eine neue Zeile umgebrochen werden. Diese extrem kurze Zeile störe dann den Lesefluss, vor allem aber die Optik und gehöre „gezähmt“, so Ford. Bei statischen Layouts kann prinzipiell der Designer im Vorfeld darauf achten, solche Effekte zu vermeiden, bei responsiven Layouts liegt das außerhalb seines Einflussbereichs.


Sicherlich schwerer zu zähmen als typografische Witwen… (Bildquelle: bagal / pixelio.de)

Widow Tamer JS: Konfigurierbar und mit flexiblen Methoden ausgestattet

Das Ziel des Widow Tamers ist simpel. Vermeide eine letzte Absatzzeile, wenn diese weniger als X Zeichen hätte. Die Anzahl der Zeichen ist konfigurierbar und abhängig vom Hauptlayout, konkret von der Anzeigebreite eines einzelnen Absatzes. Bei dem einen werden schon 14 Zeichen zu einer unschönen Optik führen, bei anderen erst fünf. Da ist es gut, dass man dem Widow Tamer eben diesen Wert flexibel innerhalb der Funktion unter Verwendung von etwa chars: 14, mitteilen kann.

Die zentrale Funktion wt.fix() wird beim Laden der Seite initialisiert und wartet dann auf den Eintritt des definierten Events. Bei jedem Auftreten des Events wird sie ausgeführt. Ein Beispiel sähe so aus:

wt.fix({
	elements: '#posts article p',
	chars: 14,
	method: 'padding-right',
	event: 'resize'
    });

In Zeile 1 finden Sie den bereits genannten Funktionsaufruf. In Zeile 2 wird definiert, auf welche Elemente der Widow Tamer angewendet werden soll. Grundsätzlich wird das zumeist der P-Tag sein, aber auch andere Elemente sind durch das Script bearbeitbar. In Zeile 3 erfolgt die Definition der Witwe an sich, also die Angabe, ab wieviel Zeichen eine Zeile als Witwe erkannt werden soll. Zeile 4 bestimmt die Methode, mit der zur Witwenzähmung geschritten wird. Hierbei kann es sich um die Erhöhung oder Verringerung des Wort-Abstandes oder des Zeichenabstandes, sowie ein padding links oder rechts oder der Einsatz von nonbreaking Spaces handeln. Die beiden erstgenannten Methoden würden in Zeile 6 auf Vergrößerung oder Verringerung gesetzt. Schlussendlich wird dem Script noch das zu überwachende Event übergeben. In responsiven Layouts wird es sich hier in der Regel um resize handeln.

Zwei Screenshots nach Resize zeigen das Ergebnis der Witwenzähmung:


Aufruf in klein dimensioniertem Browserfenster


Völlig neue Umbrüche nach Resize

Auf der Website Artequalswork.com kann das Script live in Aktion betrachtet werden. Spielen Sie einfach ein bisschen mit der Größe des Browserfensters durch Ziehen mit der Maus. Der Effekt wird schnell sichtbar.

Nathan Fords Widow Tamer ist erst ein paar Tage alt. Ford twitterte seine Geburt am 22. Juni:

Das Script steht auf GitHub zum kostenlosen Download und zur freien Verwendung bereit. Ford erwartet, dass man seine Copyrightnotiz gemeinsam mit dem Script einsetzt und nicht entfernt. Ansonsten gibt es keine weitere Beschränkungen.

Kategorien
Design Responsive Design

Hilfreiche Quellen rund um das mobile Web

Das mobile Web boomt. Die Entwicklung  geht mit riesigen Schritten voran und das mobile Internet ist jetzt schon zu einer selbstständigen Richtung im Webdesign geworden. Gute, zuverlässige Tools, Tipps, Quellen, Tutorials und viel mehr zum Thema Mobiles Webdesign braucht man heute mehr als je zuvor. Aus diesem Grunde stellen wir im folgenden Beitrag eine sehr nützliche Webseite vor, die zahlreiche Quellen zum Thema „Mobile Web“ enthält.

Mobile Web Resources: eine Webseite mit hilfreichen Quellen

Mobile Web Resources ist ein Angebot mit einer klaren Zielstellung. Die Website soll eine zentrale Anlaufstelle für Designer werden, die sich gezielt und konzentriert mit Fragestellungen rund um mobiles Webdesign beschäftigen wollen. Grund für die Erstellung der Seite war nach Angaben der Betreiber die schiere Häufigkeit der gestellten Fragen zum mobilen Internet. Um sich nicht stets und ständig wiederholen zu müssen, beschlossen sie, ein Portal zu erstellen, das zahlreiche Informationen zum Thema enthält und wo jeder mit Sicherheit etwas für sich finden kann. Wir stellen einige Rubriken von Mobile Web Resources vor.

Was bietet also Mobile Web Resources?

Artikel

Beim Durchstöbern stößt man zuerst auf die Rubrik „Articles“. Hier findet man zahlreiche Beiträge aus verschiedensten Quellen zum Thema mobiles Web. Inhaltlich sind die Beiträge thematisch breit aufgestellt. Man findet sowohl Blog-Artikel mit anschaulichen Demos, als auch Ansammlungen von nützlichen Tutorials und sogar Testergebnisse der Vergleiche von mobilen Geräten. Klickt man auf den Titel eines Beitrags, wird man zur ursprünglichen Webseite weitergeleitet, wo man ihn dann lesen kann.


Mailchimp: nützliche Quellen


Mobile Geräte in der Grabbelkiste der Historie


Entwicklung von Bildschirmgrössen mobiler Geräte im Laufe der Jahre

Bookmarks

Hier sind zwei gute Quellen genannt und zwar Mobile Perf bookmarklet und Yslow. Diese enthalten eine Sammlung verschiedener Bookmarklets.


Mobile Perf bookmarklet: ein Ausschnitt


Yslow: ein Auschnitt

Bücher

Hier findet man eine Liste von nützlichen Büchern, welche sich mit dem Thema Mobiles Design bzw. mit verwandten Themen beschäftigen.


Bücherliste: hier ein Buch von Luke Wroblewski


Bücherliste: Mobile Design And Development von Brian Fling


Bücherliste: Programming the Mobile Web von Maximiliano Firtman

Präsentationen

In dieser Rubrik finden Sie zahlreiche Vorträge zum Thema Mobiles Web. Hier teilen Webdesigner- und developer mit der ganzen Welt ihr Wissen. Auch an dieser Stelle kann man einiges erfahren, beispielsweise etwas neue konzeptionelle Ansätze oder Dienstleistungen im Mobilen Web.


Präsentationen: Mobile WPO von Tim Kadlec


Präsentationen: Selling The Mobile Web von Brad Frost und Jack Bishop


Präsentationen: Rethinking the mobile web von Bryan Rieger

Webseiten

In dieser Rubrik tragen die Betreiber informative Webseiten zu diversen Mobile Web-Themen zusammen.


Nützliche Webseiten: HTTP Archive


Nützliche Webseiten: WTF Mobile Web


Nützliche Webseiten: Build Mobile

Zu guter Letzt: Ich habe hier nur einige Rubriken und Beispiele von Mobile Web Resources vorgestellt. Es gibt natürlich viel mehr davon, als da wären Inspirationsgalerien, JS Bibliotheken, Tools usw. Stöbern Sie also auf der Webseite. Sie werden mit Sicherheit etwas für sich finden. Viel Spass damit!

(dpe)

Kategorien
Design JavaScript & jQuery Programmierung Responsive Design

jQuery Picture steuert Bilder in responsiven Designs zuverlässig

Responsives Design stand nicht von Beginn an auf der Agenda zur Erweiterung des HTML-Standards hin zur Version 5. Und so schlägt man sich auch heute noch mit manchen Fragestellungen eher schlecht als recht herum. Das Thema “Bilder in responsiven Layouts” gehört dazu. An sich sind Bilder über das neue Figure-Tag einzubinden, doch gibt es auch den Vorschlag, stattdessen ein neues, eigenes Picture-Tag mit untergeordneten Source-Tags einzuführen. Das Plugin jQuery Picture kann mit beiden Varianten umgehen und Bilder in responsiven Layouts zuverlässig steuern.

Picture-Tag: Eine Lösung speziell für Bilder

Das Picture-Tag ergibt in responsiven Layouts den meisten Sinn. Innerhalb eines Picture-Containers platziert man mehrere Source-Tags mit den URLs der verschiedenen, zum gleichen Picture-Container gehörenden Bilder. Dem jeweiligen Source-Tag gibt man die zugehörige Media-Query direkt mit. So könnte das aussehen:


    
    
    
    

Sie erkennen die Funktionalität auf einen Blick. Der Picture-Container enthält drei Bilder, von denen das größte, large.png, ab einer Viewport-Breite von 600 Pixeln angezeigt werden soll. Darunter, ab einer Breite von 440 Pixeln, käme medium.png zur Anzeige und bei noch kleineren Auflösungen diente small.png als Foto der Wahl. In einem Noscript-Bereich erfolgt die Angabe eines Bildes für die Indexierung durch Suchmaschinen, sowie im Falle von jQuery Picture, zur Anzeige durch Besucherbrowser ohne Javascript.

Eine schöne Sache also. Der Haken ist nur: Dieser Vorschlag ist bislang nur ein Vorschlag. Kein großer Browser führt die Implementation zum jetzigen Zeitpunkt. Ohne das Plugin jQuery Picture ist die Lösung derzeit so nicht zu verwenden.

In der W3C Community Group zum Responsive Imaging liegt derweil bereits der nächste Vorschlag vor. Danach könnte man sich in Zukunft möglicherweise auf ein Pic-Element einigen, das im Prinzip genauso arbeitet wie das Picture-Element, aber schon als Tag und auch in der weiteren Syntax mit weniger Schreibarbeit auskommen würde. Jetzt allerdings erst einnmal zurück zu jQuery Picture.

Das Plugin jQuery Picture bringt schon jetzt die Unterstützung für das Picture-Element in Form einer einfach auf das entsprechende Element zeigenden Funktion mit.

jQuery Picture: Figure-Element mit Data-Attributen

Nicht nur das experimentelle Picture-Element wird durch jQuery Picture verstanden und korrekt umgesetzt, auch die Verwender der standardkonformen Figure-Tags können ihre Bilder mit Hilfe des Plugins zuverlässig responsiv auslegen. Dazu müssen erneut HTML5s neue Data-Attribute herhalten. Mit ihrer Hilfe wird das Figure-Tag um weitere Bild-URLs erweitert. Das geht ganz einfach:

Sie sehen, dass die Bild-URLs in Attributen, die mit data-media beginnen, verpackt werden. Die erste Anweisung ohne zusätzlichen Zahlenwert repräsentiert das Bild, das später in der kleinsten Auflösung angezeigt werden wird. Die in data-media440 verpackte URL kommt zum Tragen, wenn der Viewport mindestens 440 Pixel breit ist und so weiter. Naheliegenderweise sollten die Pixelwerte mit den ansonsten definierten Breakpoints korrelieren. Anschließend wird das Plugin wie folgt initialisiert:

$(function(){
    $('figure.responsive').picture();
});

Nach Tests des Entwicklers Abban Dunne funktioniert die Lösung ab IE 7 und in allen modernen Browsern ohnehin. jQuery Picture steht zur kostenlosen Verwendung auf GitHub zum Download bereit. Dunne würde sich übrigens freuen, wenn sein Plugin eher früher als später überflüssig würde. Zu diesem Zeitpunkt wird es zumindest im IE immer noch sinnvoll einsetzbar sein…

(do)

Kategorien
Design HTML/CSS Responsive Design

Gridpak generiert Spalten-Layouts für responsives Webdesign

Vor einigen Tagen stellte ich Ihnen Responsify.it vor. Es handelt sich um ein Online-Tool, mit dessen Hilfe man Grids für responsive Layouts generieren kann. Responify.it ist ein hervorragendes Werkzeug, mit dem sich in einer intuitiv bedienbaren UI gut arbeiten lässt. Allerdings kann Responsify.it ausschließlich Designs auf Basis von Prozentwerten erzeugen. Pixelwerte werden nicht unterstützt. Hier kommt Gridpak ins Spiel…


Übrigens: Dieses Spalten ist nicht gemeint… (Bildquelle: uschi dreiucker / pixelio.de)

Gridpak: Intuitiv bedienbar und leistungsstark

Gridpak ist ein direkter Wettbewerber zu Responsify.it und erledigt den identischen Task. Dennoch ist erkennbar das eine Tool kein Klon vom anderen. Erskine Design, die Entwickler des Onlinegenerators Gridpak, gehen schon in Sachen UI einen ganz anderen Weg als den, den Kennedy für sein Responsify.it eingeschlagen hatte. Während Kennedys Produkt stark an Tablet-Apps erinnert, kommt Gridpak einem in der Handhabung eher wie eine Grafiksoftware vor. Funktional sind die Wettbewerber fast identisch.

Gridpak ist in der Lage, Grids mit maximal 99 Spalten zu erzeugen. Es gibt keine Konventionen darüber hinaus, von einer bis 99 Spalten ist alles frei wählbar. Neben der Zahl der Spalten stellt der Nutzer noch deren Padding, sowie den Spaltenabstand zueinander ein. Diese Werte können in Prozent oder, anders als bei Responsify.it, auch in Pixeln angegeben werden. Die Einstellung der Grid-Gesamtbreite erfolgt mittels eines Schiebers, der mit der Maus bewegt werden kann. Die Breite in Pixeln wird jeweils angezeigt.

Verschiedene Zieldevices lassen sich mit einem Klick auf „Add break point“ hinzufügen. So zöge man den Schieber auf eine Breite von 780 Pixeln und klickte „Add break point“, um eine optimale Breite für etwa das iPad zu erzeugen. Auf der unter dem Grid platzierten Leiste werden erzeugte Breakpoints angezeigt. Sie können dort per Klick auch aktiviert werden. Ist ein Layoutbereich aktiviert, können darin individuelle Einstellungen vorgenommen werden. So würde man sicherlich ein Grid mit weniger Spalten für Smartphones vorsehen und sich dann auf der Auflösungsskala nach oben bewegend für entsprechend spaltenreichere Einstellungen entscheiden.

Gridpak: Alles dabei, von CSS über LESS bis hin zu Tipps und Tricks

Hat man sein Layout erstellt, reicht ein Klick auf „Download your Gridpak“, um es als Zip-Datei auf die eigene Festplatte zu ziehen. Die Zip-Datei enthält eine komplette HTML-Demo des Layouts, sowie das entsprechende CSS. Neben dem reinen CSS werden auch LESS- und SCSS-Varianten mitgeliefert, die so vorbereitet sind, dass sie die Stärken der jeweiligen Syntax auch ausspielen können. Zusätzlich enthält das Paket eine Javascript-Datei, die aber lediglich die Funktion hat, das Grid zu Entwicklungszwecken im Browser anzuzeigen. Entsprechende PNGs mit den Grids der einzelnen Breakpoints sind im Gridpak-Download ebenfalls enthalten.


Die mitgelieferte Demo arbeitet mit groben Platzhalterblöcken.

In einer Readme-Datei geben die Entwickler hilfreiche Tipps zu konkreten Designfragen. Ähnlich wie Responsify.it erfolgt die Layoutdefinition über unsemantische Klassen, die bei Gridpak .span_1 bis .span_99 heißen. Gridpak steht unter einer Creative Commons Attribution 3.0 Lizenz. Die Dokumentation auf der Produkt-Website ist außerordentlich hilfreich und mit vielen Beispielen und Erläuterungen ausgestattet. Einen ersten Eindruck können Sie gewinnen, wenn Sie sich die zweieinhalb Minuten Zeit nehmen und das folgende Video anschauen:

[vimeo]http://vimeo.com/35256595[/vimeo]