NINC! - webdesign // video // 3D - Wien


  • Deutsch
  • English (UK)

Mittwoch, 08 August 2012 20:27
Philipp Hummer

71% klares Wasser, 18% Kohlenstoff, 4% Stickstoff, 2% Kalzium, 2% Phosphor, 1% Kalium, 0,5% Schwefel, 0,5% Natrium, 0,4% Chlor und eine Hand voll Spurenelemente

ADD ME ON FACEBOOK!

responsive Webdesign mit Smart Blocks

ninc responsive webdesign 01

Webdesign und mobile Endgeräte sind nun seit ungefähr einem Jahr ein heisses Thema, das unter dem Stichwort "responsive Webdesign" zusammengefasst wird. Hierbei geht es um eine Form der dynamsichen Anpassung der verschiedenen Inhaltsbereiche an die sehr unterschiedlichen Displaygrößen, sodasz auf den Smartphones oder Tablets ein horizontales Scrollen, oder besser Swipen, vermieden werden kann. Beim Design und der Programmierung von responsive Homepages kommen moderne Technologien wie CSS3 und HTML5 zum Einsatz.

 

Das mobile Template wird hier meist extra erstellt, also als ein Teilbereich des Webdesign Projekts gehandhabt. Je nach Design bzw. Komplexität des Layouts kann hier ein ganz schöner Brocken an Mehraufwand dazukommen.

 

Auch diese Seite hier, NINC!, ist "responsive", sprich sie passt sich an die Auflösungen und Displaybreiten von Smartphones an. Allerdings wählten wir hier in der Konzeptphase einen alternativen Ansatz, den wir SMART WEBDESIGN nennen. Auf unserer Seite, wie auch schon bei den ersten Kundenprojekten, sind die Hauptelemente alle blockmässig aufgebaut, und verwenden eine definierte Breite und Höhe. Elemente wie Textbereiche oder Bilder, die über die gesamte Breiten gehen werden zusätzlich mit einer Breite von 100% verwendet. Dadurch können die einzelnen Blöcke wie auf einem Raster untereinander oder nebeneinander angeordnet werden. Bei Bildern ist es hier natürlich unumgänglich, diese nicht per <img> Tag einzubinden, sondern via CSS und Background Eiegenschaft. So können sich auch Breite Bilder auf die jeweilige Screenbreite anpassen. Der Auschnitt lässt sich per background-position finetunen.

 

Der meist unsichtbare Rahmen, der Wrapper, kann mittels JQuery Javascript einfach je nach Auflösung des Endgeräts, sei es ein Desktop, Laptop oder eben ein Smartphone wie IPhone oder Android, dynamisch angepasst werden.

 

Das funktioniert natürlich nicht in jedem Themenbereich mit jedem Design, aber für konkrete Projekte kann so ein mobiles Erscheinungsbild präsentiert werden, das in einem vernünftigen Kostenrahmen effektiv umsetzbar bleibt. Immerhin ist ja die Grunddefinition von Design: Form follows Function.

Reach Us!

Reach NINC webdesign : video : 3D Wien

NINC! - webdesign : video : 3D

Lindengasse 36 1070 Wien, Austria

festnetz: +43 (0)1 961 14 21
mobile 1: +43 (0)676 688 1099
mobile 2: +43 (0)676 598 2272

eMail: Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein!
Skype: nathaninc
NINC Map

Contact us!

Senden Sie uns Ihre Anfrage!

 

Some of Our Client Family

clients ninc 2012

software we love oneline 02

software we love oneline 01

Copyright 2012 by NINC! - webdesign : video : 3D OG, all rights reserved
Allgemeine Geschäftsbedingungen (AGB)