Open-Source Webdesign

bootScore pimpen

pimp your bootScore Logo

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’:

[ de | en ]

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

bootScore + Landing Page bootScore + Landing Page bootScore + Landing Page

  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:
  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-Pageselbst 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 []
To top