bootScore pimpen

bootS­core ver­bin­det Boot­strap und Word­Press — als The­me mit ‘respon­si­vem Design’. Dies bringt mit, was die Web-Desi­gne­rin oft nicht selbst pro­gram­mie­ren will. Jetzt kann sie statt­des­sen auf eine MIT lizen­zier­te Vor­ar­beit zurück­grei­fen, gehos­tet auf Git­Hub. Deren ‘Stan­dard-Out­fit’ per­so­na­li­siert sie dann, — als Web-Desi­gne­rin. Adap­tiert wer­de das The­me — so bootS­core -, indem frau des­sen “[…] .scss, .php and .js Datei­en ange­pas­se”. Hier mei­ne 13 Schrit­te vom puren bootS­core hin zur neu­en ‘Home­page’:

Als Aus­gangs­punkt hat­te ich (bereits) Word­Press instal­liert¹, (Test-) Daten ein­ge­ge­ben², bootS­core instal­liert und es als The­me akti­viert³. So ent­stand — als Rei­he von pimp your bootS­core posts — fol­gen­der Weg:

1. Font Awe­so­me — ein Sym­bol sagt mehr als 100 Wor­te: Short­Codes und CSS-Klas­sen
2. SEO von Anfang an: HTML-Seman­tik, Schlag­wör­ter und Site­maps und kei­ne toten Links, bit­te!
3. Das ‘(Un)Wichtige’ nach unten: Der dezen­te und umfas­sen­de Foo­ter-Bereich für den ’nach­ran­gi­gen’ Legal­kram, das nach­ran­gi­ge Zweit­me­nü und die eige­ne Copy­right­li­ne
4. Mehr­spra­chig­keit mit­den­ken: Bilin­gua­li­tät ohne WP-Glo­bus
5. Die Über­sicht­lich­keit: Das tie­fer ver­zweig­te Menü mit inte­grier­ten Short­codes, sau­be­ren Ebe­nen und les­ba­rer Sta­pe­lung, das den­noch kein H‑O­VER-Menü sein muss.
6. Nicht fri­ckeln, son­dern auto­ma­ti­sie­ren: Die ein­ge­bau­te Sil­ben­tren­nung
7. Ein Bild sagt mehr als 1000 Wor­te:
   • Das kann ein ‘manu­ell’ mit einer fan­cy Box in den Text ein­ge­füg­tes Bild sein — ger­ne auch beschleu­nigt aus­ge­lie­fert per Word­Press vor­be­rech­ne­ter Bild­grö­ße oder als SVG.
   • Oder ein auto­ma­ti­siert ver­wal­te­tes ‘Pri­mä­res Bei­trags­bild’. Nur soll­te es mög­lichst wenig ver­wischt sein, wenn es des Respon­siv-Designs wegen ange­passt wird. Das orga­ni­siert das moder­ne IMG-Tag mit den Source-Anga­ben wohl am Bes­ten. Schnel­ler umzu­set­zen, aber weni­ger effek­tiv wäre es, Word­Press eine wei­te­re Bild­grö­ße im Vor­aus berech­nen zu las­sen.
   • Wirk­lich freie Bil­der gibt es im Netz, wenn wir ein Bild­ver­zeich­nis vor­se­hen, um die Lizenz­vor­gabn zu erfül­len.
   • Und die klei­nen Brow­ser­bild­chen neben der Url? Oder das Logo? Dafür nut­zen wir bootS­coo­res Logo- und Favicon-Sys­tem.
8. Das Fin­den erleich­tern: TAG-Wol­ken und Bei­trags­lis­ten in der Side­bar
9. Der ‘gemau­er­te’ Über­blick: Die Mason­ry-Bei­trags­lis­te
10. Das Wich­tigs­te zuerst: eine eige­ne Landing-Page — selbst gestal­tet - und dann weg mit dem, was ablenkt, auch mit­tels kon­text­sen­si­ti­ven Side­bars und dezen­te­rem Hin­wei­se auf jün­ge­re Posts
11. Design­te Les­bar­keit: bootS­core und der eige­ne gene­rel­le Font und ein Font für beson­de­re Anläs­se
12. Recht muss Recht blei­ben: Daten­schutz, DSGVO und Coo­kies, der Coo­kie-Dia­log und sei­ne Seman­tik mit bootS­core
13. Der ers­te Ein­druck: das Nut­ze­rin­nen ori­en­tier­te Farb­kon­zept

So ent­steht eine bootS­core-basier­te Web­site mit Respon­si­ve Design, die den Weg dort­hin in sich selbst doku­men­tiert, auf dass ich auch in Zukunft nach­schla­gen kann, wie ich es in der Ver­gan­gen­heit gemacht habe. Wenn dies auch ande­ren nützt, wäre das ein will­kom­me­ner Neben­ef­fekt.

---

Im Übri­gen: Män­ner sind mit­ge­meint.

1. Anlei­tung dazu gibt es zu Hauf, auch eine von Word­Press selbst. [↩]
2. z.B. mit denen der zu migrie­ren­den Site oder des The­me Unit Tests [↩]
3. z.B. gemäß bootS­core-Anlei­tung [↩]