Pimp Your bootScore

Link­ing Boot­strap and Word­Press to get a respon­sive design is the task of bootScore, a WP-theme bring­ing along what the web design­er actu­al­ly does not want to pro­gram her­self. Instead, she can now rely on an MIT-licensed pre­lim­i­nary work host­ed on GitHub. But its ‘stan­dard out­fit’ still must be per­son­al­ized, ‘pimped’ — by the work of a Web Design­er? The theme is adapt­ed — so bootScore — by mod­i­fy­ing its “[…] .scss, .php, and .js files”. So you can pimp your bootScore eas­i­ly. Here are my 13 steps from a pure bootScore to my per­son­al ‘home­page’:

As a start­ing point, I had (already)

• installed Word­Press¹,
• entered (test) data²,
• installed bootScore, and acti­vat­ed it as my theme³.

Even­tu­al­ly, this results in a way

:

1. Font Awe­some — one sym­bol says more than 100 words: Short­Codes and CSS class­es
2. SEO from the begin­ning: HTML seman­tics, key­words, and sitemaps, and no dead links, please.
3. The ‘(un)important’ at the bot­tom: The dis­creet and com­pre­hen­sive foot­er area for the ‘sub­or­di­nat­ed’ legal stuff, the sub­or­di­nat­ed sec­ondary menu, and the cus­tom copy­right line.
4. Think­ing mul­ti­lin­gual­ism: bilin­gual­ism with­out WP globe
5. For clar­i­ty: the deep­er branched menu with inte­grat­ed short­codes, clean lay­ers, and read­able stack­ing, which nev­er­the­less has to be no H‑OVER menu.
6. Don’t fid­dle, auto­mate: The built-in hyphen­ation
7. A pic­ture says more than 1000 words, for exam­ple,
   • an image with a fan­cy box man­u­al­ly insert­ed into the text — glad­ly accel­er­at­ed deliv­ered via Word­Press pre-cal­cu­lat­ed image sizes or as SVG.
   • an auto­mat­i­cal­ly man­aged ‘pri­ma­ry post image’, not (less) blurred when adjust­ed for Respon­sive Design’s sake: That orga­nizes the mod­ern IMG tag with the source infor­ma­tion prob­a­bly best. Faster to imple­ment, but less effec­tive, would be to have Word­Press cal­cu­late anoth­er image size in advance.
   • images, that are offered on the web as real­ly free images if we pro­vide an image direc­to­ry to meet licens­ing require­ments.
   • And the lit­tle brows­er images next to the URL? Or the logo? For that, we use bootScoore’s logo and fav­i­con sys­tem.
8. Eas­ing the find­ing: TAG clouds and post lists in the side­bar
9. The walled overview: The Mason­ry Con­tri­bu­tion List.
10. First things first: a ded­i­cat­ed land­ing page — self-designed — and then get rid of what’s dis­tract­ing, use con­text-sen­si­tive side­bars and more dis­creet ref­er­ences to recent posts.
11. Read­abil­i­ty: bootScore and the cus­tom gen­er­al font and the font for spe­cial occa­sions
12. Respect­ing the law is a need: data pro­tec­tion, a prop­er cook­ie dia­log, and cook­ie man­age­ment.
13. The first impres­sion counts: cus­tomiz­ing the col­or con­cept.

By fol­low­ing these steps, a bootScore-based web­site in respon­sive design is cre­at­ed, that doc­u­ments the way to it in itself. So that I can also lookup in the future, how I have done it in the past. If this also ben­e­fits oth­ers, that would be a wel­come side effect.

1. instruc­tions on how to do this are aplen­ty, includ­ing one from Word­Press itself. [↩]
2. e.g. with those of the site to be migrat­ed or the Theme Unit Test [↩]
3. e.g. accord­ing to bootScore instruc­tions [↩]