{

Tobias Scheible
Referent, Autor & Softwareingenieur
Desktop, Tablet und Smartphone Darstellung

Datum: Sonntag, 16. Februar 2014

Autor: Tobias Scheible

Kommentar(e): 0 Kommentare

Kategorie: Vermischtes

Tags: CSS3, HTML5, Responsive Webdesign, Template, Webdesign, Website

Projekt: Website hs-textil.eu

„Made im Ländle“ ist das Motto des Industrie- und Forschungsprojektes „Textile Marketingprodukte für die Hochschule Albstadt-Sigmaringen“ des Textil-Master-Studiengangs. Dabei wurden textile Produkte entwickelt, die in der näheren Umgebung gefertigt werden konnten. Ich habe das Studenten-Projekt mit einer kleinen Website unterstützt.

Über das Projekt

Auf allen Endgeräten
Desktop Darstellung hs-textil.eu (Screenshot: placeit.net)
Responsive Webdesign - PC Desktop / PC / Notebook Darstellung

13 Studierende des Masterstudiengangs Textil- und Bekleidungsmanagement haben sich im Wintersemester 2013/14 dem Projekt „Textile Marketingprodukte für die Hochschule Albstadt-Sigmaringen“ gewidmet und neue, spannende Produkte für den Hochschulalltag entwickelt. Das Projekt wurde durch das Rektorat der Hochschule unter Leitung von Rektorin Dr. Ingeborg Mühldorfer initiiert. Insgesamt wurden in drei Gruppen verschiedene Produkte entwickelt, die das textile Know-how der Hochschule und der Schwäbischen Alb nutzten und den Gedanken der Nachhaltigkeit und kurzen Wege in die Realität umsetzten. Die qualitativ hochwertigen Produkte aus der Region werden ab dem Sommersemester 2014 an der Hochschule zum Verkauf angeboten und sollen dazu beitragen, die Identifikation mit der Hochschule zu stärken.

Zunächst führte die Projektgruppe eine Befragung an der Hochschule durch und ermittelte die Wünsche der Studierenden bezüglich der Produkte und der Anwendungsgebiete. Nach Auswertung von mehr als 600 Fragebögen ergaben sich die drei Favoriten: Bekleidung (T-Shirt und Kapuzenpullover), eine Laptoptasche und eine Sporttasche. Bei der Entwicklung und Herstellung der Produkte kooperierten die Studierenden mit regionalen Unternehmen.

Ziel der Website

Da zum Teil ein QR-Code als Style-Element direkt auf die Kleidung gedruckt wurde und an allen Produkten ein Hangtag mit einem QR-Code befestigt ist, lag von Anfang der Fokus auf einer mobilen Website. Das Ziel war, den Hintergrund zu diesem Studenten-Projekt vorzustellen und über die lokale Produktion zu informieren. Da die Seite möglichst schlank sein sollte, hatte ich von Anfang an ein One-Page Layout im Blick. Da es möglichst unkompliziert sein musste, sollte es auf einem Template basieren.

Umsetzung der Website

Mobile Strategie
Smartphone Darstellung hs-textil.eu (Screenshot: placeit.net)
Responsive Webdesign - Smartphone Smartphone / Mobile Darstellung

Da ich großer Fan der schicken und eleganten Templates von HTML5 UP bin, fiel die Entscheidung auf das schlichte Template Telephasic. Alle Templates sind „Responsive Designfähig“, komplett in HTML5 und CSS3 entwickelt und sehr strukturiert aufgebaut. Die Templates werden unter der Creative Commons Attribution 3.0 License angeboten.

Telephasic basiert eigentlich auf mehreren Seiten. Unter anderem stehen mehrere Vorlagen zur Verfügung, mit Sidebar rechts oder links oder ohne. Ich habe die Vorlage für die Startseite verwendet und mehrere Elemente aus den anderen Templates integriert. Das Menü habe ich so angepasst, dass mit einem Klick zur entsprechenden Position gescrollt wird und nicht mehr eine Unterseite aufgerufen wird. Farblich wurde das Layout noch auf die Fakultätsfarbe Blau getrimmt und die passenden Fotos und Texte eingefügt.

Mobile Strategie
Tablet Darstellung hs-textil.eu (Screenshot: placeit.net)
Responsive Webdesign - iPad Tablet Darstellung

Durch diese Lösung konnte ich in sehr kurzer Zeit eine sehr schöne Website erstellen. Sehr positiv kam an, dass ich die Website mit dem Platzhalter schon online gestellt hatte. Dadurch konnte jede am Projekt beteiligte Person schon frühzeitig einen Blick auf die Website werfen. Ich bin ein Verfechter der Methode, den Kunden möglichst früh einzubinden, so wie es auch beim Scrum.org praktiziert wird. Außerdem bin ich ein Verfechter der „Content First“-Strategie: Konzentration auf die Inhalte anstatt einer künstlich aufgeblähten und von Funktionen überladen Website. Hat hier wieder super geklappt.

Hier geht es zur Website: http://hs-textil.eu

  • Artikel teilen:

Über Tobias Scheible

Tobias Scheible

Tobias Scheible arbeitet als wissenschaftlicher Mitarbeiter an der Hochschule Albstadt-Sigmaringen am Institut für wissenschaftliche Weiterbildung. Dort arbeitet er am Projekt „Open C3S - Open Competence Center for Cyber Security“ und entwickelt unter anderem das Studienmodul „Cloud Computing“ für den berufsbegleitenden Master-Studiengang IT-Governance, Risk and Compliance Management. Außerdem ist er begeisterter Web-Entwickler und realisiert bereits seit über 15 Jahre Web-Projekte.

Alle Blog-Artikel Website Facebook Twitter Xing

Kommentare

Es wurde noch kein Kommentar abgegeben.

Schreibe einen Kommentar!

Hilfe zum Kommentieren

Um kommentieren zu können, geben sie bitte mindestens ihren Namen und ihre E-Mail-Adresse an. Bitte nutzen Sie die Kommentarfunktion nicht dazu, andere zu beleidigen oder Spam zu verbreiten. Trolle und Spammer sind hier unerwünscht! Unangemessene Kommentare, die zum Beispiel gegen geltendes Recht verstoßen oder eine Gefährdung anderer Besucher darstellen, werden gelöscht oder angepasst.

Name: Ihr Name, der oberhalb des Kommentars steht, gerne auch Ihren echten Namen, das erleichtert die Kommunikation für alle. Sollte ein Spam-Keyword als Name verwendet werden, kann dieses entfernt oder korrigiert werden.

E-Mail: Ihre E-Mail Adresse dient zur Identifizierung weiterer Kommentare und sie haben die Möglichkeit, ein Avatar-Bild zu verwenden. Dazu müssen Sie mit Ihrer E-Mail Adresse bei Gravatar angemeldet sein. Die E-Mail Adresse wird natürlich nicht veröffentlicht und nicht weitergegeben.

Website: Hier können Sie ihren eigenen Blog bzw. ihre eigene Website eintragen, dadurch wird Ihr Name und Ihr Avatar-Bild verlinkt. Werden rein kommerzielle Angebote offensichtlich beworben, setze ich den Link auf nofollow und unangemessene werden einfach entfernt.

Erlaubte HTML-Tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <hr> <big> <small> <sub> <sup> <u>

nach oben