Ampersand 2012

 Everything Else...  Comments Off on Ampersand 2012
Jun 172012
 

My notes from some of the speakers at last Friday’s Ampersand conference in Brighton.

Yves Peters Detail in Web Typography

Choosing a Font

  • Narrow your search by requirements
  • Consider aesthetic preferences last
  • Consider:
    1. Formal aspects
    2. Historical context
    3. Cultural references

Functional Criteria

The OpenType format provides:

  • Unicode character encoding for support of multiple scripts
  • Cross platform support
  • Advanced placement features (e.g. kerning)
  • Advanced replacement features (e.g. ligatures)

Font dimensions:

  • X height
  • Cap height
  • Ascender
  • Descender
  • Small-cap height

Numeral types:

Typesetting Numbers

© J. Bear

Fake small caps:

  1. Decrease cap size
  2. Increase weight
  3. Increase tracking

Make correct use of spacing entities:

  • non-breaking space  
  • thin space  
  • en space  
  • em space  
  • punctuation space  
  • figure space  

Veronika Burian & Jose Scaglione Typographic Matchmaking

Font Selection

  1. Morphology/funciton
    • Title or text?
    • Continuous or fragmented reading?
  2. Technical Aspects
    • Reproduction method
    • Media
    • Screen optimisation
  3. Aesthetics
    • Appearance vs. content
    • Volume and visibility
    • Relationships between fonts
  4. Economics
    • Price
    • Amount of licenses
    • Efficiency

Typographic Matchmaking

  • Start by choosing one typephase or family
  • You don’t have to use branding fonts in other contexts, find other ways to incorporate branding
  • Compare fonts by setting to the same x-height (optical size)
  • Contrasting sans-serif with serif with similar properties to maintain balance
  • Organic (handwritten, calligraphic) vs. mechanic (restrained, formal)

“Focusing on contrast makes combining fonts easier”

  • Make use of hierarchy and dominant/submissive pairings
  • ‘Super families’ are font sets containing matched versions (sans-serif, serif, mono-space etc.)
  • It’s harder to combine two sans-serif fonts, which need strong contrast to be differentiated

Laurence Penney Hacking the Stack

  • CSS font fallback works at character level, allowing hierarchical sub-setting
  • For example, old style numbers taken from one font and all other characters from a different font
  • Subset files must only contain the characters to be replaced
  • font-family: 'subset 1', 'subset 2', 'default', 'fall-backs';
  • Make custom fonts for special characters/icons e.g. arrows
  • Doesn’t require extra mark-up, maintaining separation of content and presentation

Jake Archibald In Your @font-face

Browser Support

  • IE – .eot
  • Other browsers – .woff
  • Older browsers – .ttf
  • Older IOS – .svg

Optimising Font Files

  • Remove unwanted glyphs (font squirrel)
  • Gzip TrueType fonts
  • Speed up subset loading with ‘unicode-range’ rule

Loading

  • IE loads the content first and then updates the fonts
  • Webkit waits for the font files before displaying the dependent content
  • Firefox allows 3 seconds before loading a fallback font
  • IE8 shows nothing until all files have loaded (move @font-face styles to the top of the head to fix this)
  • WebFont Loader provides control over the loading behavior for all platforms
  • Serve at least .eot and .ttf
  • Avoid downloading unnecessary files
  • Show content first
  • Make files as small as possible

Elliot Jay Stocks Enhancing the Future

Typography plugins by Trent Walton:

  • Lettering.js – automates character level style control
  • FitText.js – scalable text for responsive headlines

Developing CSS Features

Enable/disable ligatures and kerning:

text-rendering: optimizeLegibility | optimizeSpeed | geometricPrecision 
| auto | inherit;

Select subsets/style sets:

/* use small-cap alternate glyphs */
.smallcaps { font-feature-settings: "smcp" on; }

/* convert both upper and lowercase to small caps */
.allsmallcaps { font-feature-settings: "c2sc", "smcp"; }

/* enable historical forms */
.hist { font-feature-settings: "hist"; }

/* disable common ligatures, usually on by default */
.noligs { font-feature-settings: "liga" 0; }

/* enable tabular (monospaced) figures */
td.tabular { font-feature-settings: "tnum"; }

/* enable automatic fractions */
.fractions { font-feature-settings: "frac"; }

/* use the second available swash character */
.swash { font-feature-settings: "swsh" 2; }

/* enable stylistic set 7 */
.fancystyle {
  font-family: Gabriola; /* available on Windows 7, and on Mac OS */
  font-feature-settings: "ss07";
}

Summary

  • Consider the typephase – does it contain the features?
  • Consider the file – is it OpenType?
  • Consider the browser – which features are supported?
  • Consider the user – will it break?
  • Test OpenType in the browser with Type Cast

Spritepad

 Uncategorized  Comments Off on Spritepad
Jun 152012
 

If like me you find “sprites” a bit of mystery then you need to check out the free online sprite creation tool at www.spritepad.wearekiss.com, simply drag and drop the images onto the SpritePad and you can see the CSS being dynamically generated as you move the images around.

When you’re happy with the result it includes a download option to download a zip version of the sprite and resultant CSS, then it’s up to you modify the sprite and CSS to suit whatever you want.

This is an example I played with earlier, it really did take the 5 mins they suggest to generate the sprites etc – easy peasy (and I’m really crap with sprites and images in general).

Now if you want hover style sprites, say for navigation etc, then the only real constraint is that they should all be similar dimensions because you’re controlling the image by repositioning it. Now again using spritepad this is easy to achieve because you can use the inbuilt grid lines to map your images to the same dimensions – there is also an auto align option but you need the premium account for that (and thats not free!).

Finally, if you’re asking yourself why this is useful think about:

– load delays on mouseover image replacement (initial unwanted flash/delay as new image is loaded)
– image sizes (a single combined sprite is generally smaller than the sum of its parts*)

* in the example the insect image (individual) weight was 92kb, or 70kb as a single sprite not a massive saving but every little helps

 Posted by at 11:20 am

Kirby

 Uncategorized  Comments Off on Kirby
Jun 102012
 

Kirby “a text based CMS”

I’ve been playing with Kirby over the last couple of weeks, and am really quite impressed so far. The whole idea is based around a flat directory structure within the Kirby folder structure with no database (just text files).

This offers advantages in terms of weight of CMS (much lighter than wordpress) and ease of backups etc – backing up the site means you have everything, so no need for a db backup as well and it has the added advantage that you don’t need to know how to administer a database.

DOCUMENTATION
At Kirby home page getkirby.com along with some sample themes and various extensions etc

INSTALL
Installation is dead easy, simply copy the whole of kirby into your target folder and then run the “index.php” file which tells you what else to do (this is basically just edit the site/config.php file to tell kirby where your site is and whether rewriting is on or not, again all this is described by the install page – I just copied and pasted the stuff from the web page into my config file).

Running from a sub folder is slightly different as you will need to change the .htaccess file to point to the subfolder via the RewriteBase entry; because mine was in a root subfolder I edited the line to be:

RewriteBase /customers/kirby-cms-diakonia

And made sure that the config.php file had rewrite set to true (I believe this is a kirby default, but I had to change it on my local version to get it to work in IIS). This all then gets the URL rewriting to work so you get nice friendly URLs.

CONTENT
The content all lives under A folder called content and is split into sub directories all named NN-text, so for instance an About Us folder might have in it:

  • 01-about-us
    • 01-who-we-are
    • 02-what-we-do
    • 03-staff
    • about.txt
    • etc

The sub folders prefixed with digits then become sub-pages to the About Us page; the “about.txt” file is the content of the about us page (written in “kirby text” which is a mixture of flat text and HTML etc – still learning that).

Folders that aren’t prefixed with digits become hidden folders, and can be used for other assets etc. These would need to then be defined in your templates.

ASSETS
An assets folder contains your own site written assets, like css, javascript and any generic images like logos etc (or whatever you want). In the example I’ve been developing my assets folder looks like this:

  • assets
    • css # css used throughout site, linked via “header.php” snippet
    • js # javascript (includes colorbox lightbox plugin; and some other stuff I use including some simple “show/hide” stuff)
    • images # images like site logo, stuff that goes on the header/footer etc

SNIPPETS
Snippets are pieces of PHP that you use for whatever, the default kirby theme ships with a couple of snippets for the header & footer of each page (header.php, footer.php) these are then used in whatever page theme (template) you wish to develop. Snippets live in a folder called snippets under the site folder site/snippets

For the stuff I’ve been playing with I rewrote the header & footer snippets and then added some additional ones of my own namely:

footer.php # amended version of page footer snippet
header.php # amended version of page header snippet

I scrapped their menu & submenu snippets, because I wanted to have a drop down style menu and their versions didn’t do that so I wrote my own and called it:

dropdown-menu.php

I then also wrote some library routines to do things like read all the image files in a folder etc (using the kirby classes etc) and put that in a snippet called:

mylib.php

I also included the standard kirby breadcrumb snippet although I haven’t used it yet.

TEMPLATES
This is where you put all the snippets together to create a web page. This is probably where the flexibility of kirby comes in, for any site you can easily define multiple templates (in fact each page could easily have a different template).

The default template is called “default.php” and is used whenever there is no specific template for that page, the other templates can be named whatever you want and any page that you want to use that template needs to have a text file called:

[template name].txt

So for instance I wanted a profile style template (basically it had text on the left and 250px images on the right picked up automatically from the folder) so I created a profile template for that, and then in the folder the web page content was in a file called profile.txt

I wanted my own gallery, so wrote a gallery template (called gallery.php) and in any folder where I want a gallery I just have a text file called gallery.txt – it all makes sense once you start using it. The templates that I’ve currently got are:

default.php # default page layout
home.php # my home page template (pick up first visible page)
profile.php
clients.php
background.php
gallery.php

Like snippets, the templates folder lives under the site folder site/templates

EXAMPLE SITES
On the Kirby website you can view (and download) a few demos including a couple of blog themes, the “Slacky” theme is a good one to download as you can look at the code used in their templates to get a good idea of how the thing works.

The site documentation is pretty good and there is a really helpful cheat sheet for kirby functionality (again available from the kirby site) etc. There is also an extensions library which includes stuff like RSS feeds, twitter etc – but haven’t used any of these yet.

MY OWN VERSION/DEMO SITE
I have written a demo live website using kirby, the URL is www.cybernet-computing.com/customers/kirby-cms-diakonia www.diakonialtd.co.uk so if you want to see it in action have a look there.

If anyone wants a copy of the site, including the code that I’ve tailored, simply comment on this post with an email address and I will send you a link to a ZIP version and then you can pull it apart for yourself.

* I have added quite a lot of comments to my code and templates so hopefully it will make sense *

CMS PANEL
Finally kirby also offers a CMS admin/maintenance panel which allows users to edit content, upload images etc and the download to that plus install instructions are also available from the kirby site. I’ve only just started to use this but it seems to work ok.

Have a play its a simple, very flexible, CMS and as more people use it, it will only get better; download the demos and just try it (free to try, £30 €30 to buy).
🙂

 Posted by at 11:11 pm