Markus Mächler von snowflake productions gmbh (Zürich) präsentierte an der VuFind Anwendertagung 2014 wie das Projekt swissbib.ch anhand VuFind 2 und Twitter Bootstrap mit Responsive Webdesign (RWD) umgesetzt wurde, sodass swissbib.ch als Desktopanwendung genau so wie als Tablet- und Smartphone-Lösung genutzt werden kann.

1. Bootstrap 3
Theme
Responsive VuFind
15.10.14
snowflake | VuFind Anwendertreffen: Bootstrap 3 Theme, 15.10.14 1/18

2. Agenda
Über mich und
snowflake Responsive Design
Herausforderun-gen
Bootstrap 3 Theme
und Lösungen Demo
Fragen und
Antworten
snowflake | VuFind Anwendertreffen: Bootstrap 3 Theme, 15.10.14 2/18

3. Über mich
Bei snowflake seit
August 2013
TYPO3, Magento,
Symfony2 und ZF2
60% Entwickler
70% Student
10% Tennisspieler
Web-Agentur aus
Zürich
50 Mitarbeiter
Zusammenarbeit
mit swissbib seit
Über snowflake 2012
snowflake | VuFind Anwendertreffen: Bootstrap 3 Theme, 15.10.14 3/18

4. Bootstrap
HTML, CSS und JS
Framework für
Responsive
Designs
Bootstrap 3
Theme
Geschichte
Chris Hallberg
VuFind 2.2
Erstes Bootstrap
Theme
Januar 2014
VuFind 2.3
Bootstrap 3
Theme
August 2014
VuFind 2.4
Bootstrap 3 Theme löst
Bootstrap Theme ab
In Entwicklung
Swissbib RD
Juli 2014
snowflake | VuFind Anwendertreffen: Bootstrap 3 Theme, 15.10.14 4/18

5. Responsive
Design Device unabhängig
Inhalt einmal
erfassen und auf
verschiedenen
Geräten
publizieren
Abhängig von
Bildschirmgrösse
und nicht vom
Gerät
snowflake | VuFind Anwendertreffen: Bootstrap 3 Theme, 15.10.14 5/18

6. Fokus im Projekt
swissbib Redesign
Nahe an der
Implementierung
vom VuFind Core
Modernes Design
Mobile Experience
Identität von
swissbib bewahren
snowflake | VuFind Anwendertreffen: Bootstrap 3 Theme, 15.10.14 6/18

7. Bootstrap Design
loswerden
snowflake | VuFind Anwendertreffen: Bootstrap 3 Theme, 15.10.14 7/18

8. VuFind Startseite
snowflake | VuFind Anwendertreffen: Bootstrap 3 Theme, 15.10.14 8/18

9. Swissbib
Startseite
snowflake | VuFind Anwendertreffen: Bootstrap 3 Theme, 15.10.14 9/18

10. Nahe am Core
vs.
Freie Gestaltung
Enge
Zusammenarbeit
Kunde, Entwickler,
Design
Bootstrap Design
loswerden
VuFind sehr
einfach gehalten
Ständig neu
abwägen und
priorisieren
snowflake | VuFind Anwendertreffen: Bootstrap 3 Theme, 15.10.14 10/18

11. Inhalte nicht
genügend auf
verschiedene
Spaltenlayout nicht
konsistent
Template Struktur Dateien aufgeteilt „Copy Paste“
Änderungen an
den Core
zurückspielen
Ständig Aufwand
und Ertrag neu
abwägen
snowflake | VuFind Anwendertreffen: Bootstrap 3 Theme, 15.10.14 11/18

12. Theme
Mechanismus
VuFind definiert
Inhaltselemente
Punktuell VuFind
Implementierung
überschreiben
Konzeption und
Umsetzung VuFind definiert
von
WebApplikationen
Seitenaufbau
Themes können
erweitert werden
snowflake | VuFind Anwendertreffen: Bootstrap 3 Theme, 15.10.14 12/18

13. VuFind Trefferliste
snowflake | VuFind Anwendertreffen: Bootstrap 3 Theme, 15.10.14 13/18

14. VuFind Trefferliste
snowflake | VuFind Anwendertreffen: Bootstrap 3 Theme, 15.10.14 14/18

15. Facetten
unbrauchbar bei
Mobile Experience vielen Treffern
Off-Canvas für
gesamte „kleine“
Spalte
Überladen mit
Elementen
Ausblenden via
CSS
Konto Navigation
sehr umständlich
snowflake | VuFind Anwendertreffen: Bootstrap 3 Theme, 15.10.14 15/18

16. Pain Template Struktur
Schnell ein
Responsive Design
Abstriche bei
Design und Mobile
Experience
Profitieren von
Erweiterungen
in VuFind
Mitgestalten des
Cores
Gain
snowflake | VuFind Anwendertreffen: Bootstrap 3 Theme, 15.10.14 16/18

17. DDeemmoo
http://sb-vf20.swissbib.unibas.ch/vf2core/
https://test.swissbib.ch/
snowflake | VuFind Anwendertreffen: Bootstrap 3 Theme, 15.10.14 17/18

18. Fragen und
Antworten
snowflake | VuFind Anwendertreffen: Bootstrap 3 Theme, 15.10.14 18/18