Archive for Design category
Five steps to blog (re)design
For some time I’ve wanted to refresh the design here at damieng.com which evolved out of the Redoable theme with my own tweaks to colours, typography, images and background until it was almost my own.
Almost, but not quite.
As an engineer I prefer incremental improvement over a complete redesign but I was at the point where the code-base (HTML, CSS and PHP) was unworkable. Partly my fault, partly the sheer complexity of a general-purpose theme with wide-ranging plugin support I didn’t need.
These are the steps that helped me get to a clean minimal code-base that did exactly what I wanted and would like to share the experience for friends about to go through a similar process.
1. Decide on a layout
Getting layouts right across browsers can be tricky.
Thankfully a number of individuals have put together a number of reusable CSS frameworks that provide grid-based approaches to layout, compensating for differences in browser defaults and including some minimalistic styling.
These let you hit the ground running but they are not complete themes unless you’re into minimalistic design.
I’m not a fan of fixed-width sites that contribute to the years of wear on my scrolling mouse finger so settled on the Fluid 960 Grid System which scales a 12 or 16 column grid system out to the full browser width while being incredibly easy to use and tweak.
At this point you’ll want to copy the CSS they provide into your own development folder and take the existing HTML sample page and cut it down to the bare minimum of <head> and its necessary <link…> elements to setup the CSS plus the <body> and any intermediate child elements required to get the basic structure in place.
Now think about how many columns each section needs to cover and whether it should continue taking columns to the right or whether it should start on a new row after the existing section has finished.
Given I wanted the layout shown above I needed just three containers – the primary left area (red) would span 12 columns and would contain the branding, navigation and actual content. The right area (blue) would span 4 columns and contain the sidebar. As I didn’t want my footer too high on pages with small amounts of content I created another section (not pictured) that also spanned 12 columns but would appear after the content in both sections. Simply:
<body>
<div class="container_16">
<div class="grid_12">
<a href="http://damieng.com/" />
<ul class="nav" />
<div id="maincontent" />
</div>
<div class="grid_4" id="sidebar" />
<div class="clear" />
<div class="grid_12" id="footer" />
</div>
</body>2. Add your content
Unless you’re planning on throwing away any of your content (not recommended if you have it), now is the time to drop in actual content, navigation and any chrome. At this stage real static HTML content is best – the combination of PHP, remotely uploading files and hooking in to dynamic content can really slow you down while you are trying to get the basics sorted.
The easiest thing to do here is to just view source a page on your blog and copy out the required blocks. For me this was:
- Two blog posts from the main page, they sit in the maincontent div above, each contained within a new <div class=”article”> so I can provide article-specific styling
- A brand new set of nested navigation elements created by hand based on the page structure – initially two levels deep to support the drop-down CSS menus
- My five sidebar elements – Search, Stay in touch, Topics, My most popular and Interesting finds
Bear in mind that you are going to need to keep the structure and content of your existing pages and articles unless you have the time to either go-back and edit each one or apply some bulk-changes via SQL UPDATE statements. For me, this meant keeping my post sub-headings as <h3> and sticking with my class=”alert”, class=”code” and class=”download” blocks I use for notifications, code snippets and downloads which required bringing some CSS elements in from the old theme.
3. Style the page
Design inspiration can come from many places – here are some best-of designs, portfolios and showcases to draw from:
- CSS Showcase
- 50 New Beautiful Blog Designs
- 70 Fresh and Inspirational Blog Designs
- 70+ Ultimate Round-Up of Free PSD Website Templates
Now you have some basic HTML and CSS displaying real content it’s easy to see what works and what doesn’t with minimal resistance to experimenting.
I was happy with the existing look and I plan on further tweaks now my code-base is easy to understand so for now took the basic colours, background and icons then adjusted the layout, spacing, positioning, wording and elements like the content metadata. This was also an opportunity to experiment with some CSS techniques available but considering CSS3 browser support is limited right now I kept this to:
- @font-face for headings – Font Squirrel have a great set of @font-face kits including fonts with the CSS snippets
- text-shadow for headings and hyperlink hover-overs to achieve a glow effect
- border-radius for curved blocks and navigation bar (also used prior to the redesign)
- JavaScript to upgrade the search-box from type=”text” to type=”search” in Safari
The result is something that looks quite unique on Safari and Chrome yet still looks good on Internet Explorer 7.
4. Convert to a theme
Now our CSS and HTML looks great as a single page we need to create a theme for the blog engine. This consists of several specially-named files to dynamically construct the page as required.
You can build this from scratch but a basic theme like Starkers ‘naked’ WordPress theme is recommended. Merge the layout and style of your theme with the dynamic tags that drop in content, navigation and titles in from the basic theme. A quick start would be to modify:
- header.php with your HTML up to opening your main content div but:
- remove <link type=”text/css”> elements to the CSS and replace with the one line <link> from the theme
- replace the static navigation elements with a call to a function to dynamically build it such as <?php wp_list_pages(‘depth=3&title_li=’); ?>
- links for shortcut icons and ensure they point to files that exist, you don’t want to be serving up 404 error pages every time
- meta tags – take the dynamic ones with <?php?> elements (content-type, description etc). from the theme and merge them with your sites existing ones if you have any
- sidebar.php with your HTML from closing the main content div through to closing the sidebar div
- footer.php with your HTML footer div (and in my case the preceding clear div) through to the end of the file
- single.php with your HTML that appears around each article with the necessary tags (like <?php the_content(); ?> taken from the naked theme)
- style.css with relative references to your CSS files and your new metadata, e.g.
/*
Theme Name: DamienGNew
Theme URI: http://damieng.com
Description: Minimalistic theme based on Fluid 960 Grid.
Version: 1
Author: Damien Guard
Author URI: http://damieng.com
*/
@import "css/reset.css";
@import "css/grid.css";
@import "css/damieng.css";
@import "css/navigation.css";Rename the theme folder and upload it to your blog in the right location – for WordPress this is wp-content/themes.
5. Test drive, tweak, rinse and repeat
Now you want to test the theme without interrupting the existing one so don’t go and set it to be the default just yet.
If you are using WordPress a few tips:
- WP Super Cache enabled sites – check Don’t cache pages for logged in users so you don’t see cached pages in the original theme pages or serve up pre-cached new themed pages for other visitors
- Theme Test Drive – lets you specify a new theme and what access level it applies to (e.g. 10 for admin) so you will see it while you are logged in for testing
- Page templates – leave them to last as WordPress will try to use them in the default theme too
- Keep an eye out for error_log files – they contain details of when pages failed
It’s worth testing your site in popular browser and operating system combinations from your own analytics or you don’t have any of your own stats check out usage share of web browsers at Wikipedia. The major engines are:
- Internet Explorer (Windows)
- WebKit (Safari on OS X, Chrome on Windows & Konqueror on Linux)
- Gecko (Firefox cross-platform & Camino on Mac)
- Opera (cross-platform)
Bear in mind that each browser can behave quite differently between versions – Internet Explorer 6 will likely render quite differently to 7 or 8.
Sites like BrowserShots can help by rendering your page on a multitude of browsers for you and present screen-shots (once the theme is live) to compare. Validating your HTML and CSS is a good idea because the errors and warnings it spots are the likely cause for odd rendering problems.
Now you see a single blog post rendered it’s time to go through the rest of the files and apply the same merging process before you sit back, smile and make your new theme the default.
[)amien
Font hinting and instructing – a primer
Taking my bitmap font Envy Code B into the vector TrueType Envy Code R was a long process, the most difficult being hinting.
Bitmap v scalable fonts
Bitmap fonts are incredibly easy to make. Using a program like Softy or BitFonter you decide the size of your letters and start plotting pixels. You can see exactly how it will look because you draw every glyph (letter/symbol/number) in every size you want to support. This can obviously be very time consuming and doesn’t let you take full advantage of the resolution of the device and the capabilities it offers. A printer can handle in excess of 300 dpi while a display is typically 72 dpi (Mac) or 96 dpi (Windows) with LCD’s supporting sub-pixels due to the individual layout of the red-green and blue elements you can’t feasibly pre-plot every single combination and even if you could the file size would be rather large.
Rather than having specific set of pixels to turn on or off TrueType, OpenType and PostScript fonts contain a series of instructions that tell the computer the shape using a series of points, lines and curves. This means the computer can scale the glyph to the size that is required and then take full advantage of the device being rendered honoring the users preferences for anti-aliasing (smoothing using shades of grey), sub-pixel precision (smoothing using hints of red, green and blue to take advantage of the layout of colour elements in an LCD display), desired contrast and gamma settings etc.
Grid fitting
Such a scaled glyph won’t fit perfectly within a pixel grid and a small sizes and low resolution it can look awful. It is also necessary to ensure that the vertical part of the letter I (known as a stem) looks very similar to the stem of other letters at the same size – we don’t want some letters looking bold – and that the top of the letter o aligns nicely with the top of the i etc. (in most fonts). The glyphs themselves don’t know what is a stem, what should align with other glyphs etc.
Many renders include logic to try and improve un-hinted fonts such as the drop-out control in Windows through to the full auto-hinter in FreeType. If you’ve ever used free fonts from any of the numerous web sites around you’ve probably seen that it doesn’t get it right and it looks like this: 
The first few versions of Envy Code R looked like that because to address this problem you need to learn a process called hinting, which let’s the designer give the renderer “hints” on how to choose the pixels.
Hinting
Font hinting started off as stem and edge identification so that glyphs would maintain the right proportions when sized and rendered on these low-DPI devices. It became apparent that a much more fine-grained level of control was required and so a stack-based byte-code language was developed as part of the TrueType specification to allow designers finer control in how points are adjusted to better take advantage of the display characteristics.
A TrueType font can contain extra blocks which describes, using a sequence of bytes that represent instructions and their arguments, the process by which to align the points and therefore make decisions about how best to fit the letter into the grid by retaining and adjusting various elements.
The important blocks are:
| Block | Name | Description |
|---|---|---|
| fpgm | Font program | Run once when font first used to setup the tables. |
| gasp | Grid-fitting and scan conversion | Table specifying when to apply smoothing and grid-fitting based on size ranges. |
| prep | Control value program | Run every time the font needs to be drawn differently (e.g. change of size, changing anti-aliasing etc) |
| cvt | Control value table | Set of tables that can be used to specify various heights, widths, spacing, positions etc. that glyphs can relate to. |
Each instruction (opcode) has a mnemonic that is representative of what it does and these are documented in Chapters 5 through 6 of the TrueType specification (along with much other useful relevant information). Actual per-glyph instructions are stored with each glyph outline in the glyp block.
Rasterizing & rendering
There are many different ways a TrueType font can end up on your screen with a lot of variants between how vendors chose to render the font and what options they expose to developers and users to fine-tune the experience.
- Windows – User choice of 1-bit, 4-bit grey-scale anti-aliasing, ClearType, ClearType tuning and display DPI plus WPF and DirectWrite per-app options
- Mac OS X – User choice of sub-pixel anti-aliasing strength and 1-bit cut-off plus per-app 1-bit option (e.g. Terminal)
- Java – Per-application choice of 1-bit, grey-scale or sub-pixel rendering
- Flash – Per-application choice of 1-bit or grey-scale
- FreeType – Rendering library that exposes a number of runtime and compile-time settings
This is of course ignoring the other rendering engines out there such as the Adobe’s Photoshop, RiscOS, D-Type rendering engine, Font Fusion (used on BeOS) etc. and prior versions of those renderers listed above (Flash and Mac OS changed significantly). Getting it pixel-perfect on every combination is impossible but we can try :)
Tools
Instructing fonts is a painstaking process at the best of times and few people deal directly with the low-level instructions instead relying on tools, stem identification and higher-level languages to achieve the same result. Some tools that have support for hinting instructions are:
- FontLab Studio 5
Comprehensive font-production package for Windows and Mac that includes auto-hinting and it’s own higher-level link language that it can generate TrueType instructions from but it does not support viewing or modifying existing TrueType instructions and does not handle diagonals well. Rendering preview includes mono, grey-scale and ClearType. (Commercial $649) - Fontographer 4.1
Rather dated font-production package for Windows and Mac. (Commercial $349) - FontForge
Comprehensive font-production package that runs on X11 that includes auto-hinting and the ability to disassemble and edit existing TrueType instructions as well as debug them with stepping. Includes basic mono/grey-scale rendering options. (Open source) - Microsoft Visual TrueType
Hinting instruction tool from Microsoft that uses it’s own higher-level VTT Talk language that compiles down to TrueType instructions that you can further edit. Includes a comprehensive set of preview rendering options but is not capable of disassembling existing instructions. (Commercial, free with signed licence agreement) - TTX
Python scripts that can convert a font into an editable XML representation and back including disassembly and assembly of TrueType hinting instructions. (BSD) - TTIComp
Command-line tool that provides an alternative C-like hinting language. (GPL) - Xgridfit
FontForge scripts to provide an alternative XML-based hinting language. (GPL) - TrueTypeViewer
Windows tool for displaying TrueType fonts and glyphs including debugging and descriptive disassembly of instructions. (GPL) - TTHMachine
Real-time editing of hinting instruction mnemonics and observing their effects which is useful for learning. (Free, no longer supported)
[)amien
The Xerox Alto mono-spaced font rises again
Computing history tells us of a mythical place where many of the innovations we take for granted today were either invented or refined to a working level at a single location known as the Xerox’s Palo-Alto Research Center (PARC).
These discoveries form the basis of much of the technology we use today and include the desktop metaphor, the graphical user interface, laser printers, object orientation and Ethernet.
Xerox manufactured a number of high-end machines including the 1973 Xerox Alto which, being GUI based, shipped with a number of proportional bitmapped fonts.
What is interesting to me however is the mono-spaced font used by the SWAT debugger (but not by the command prompts, they were proportional – ahead of their time!) and so, based on a screen-shot of SWAT, I thought it needed to live again!
I’ve had to make up a few of the symbols and letters that weren’t shown and filled out the symbols for the Windows 1252 Latin-1/ISO-8990-1 code-page and with the absence of any solid information online give it a name so here is Alto Mono!
Download Alto Mono (TrueType, Windows FON, BDF) (30 KB)
When using the TrueType version choose 6 point on Windows and 8 point on Mac OS X.
The Xerox manuals are also fun to browse though with such section headings as “Things the user doesn’t really need to know…” and “How to get out of trouble” and the comments about SWAT’s odd syntax and interface.
Don’t forget to check out my reproduction of the PalmOS system font. Not monospaced but very clear at small sizes – great for the Visual Studio output window ;-)
[)amien
Envy Code R preview #7 (scalable coding font)
It’s been a struggle but finally after countless hours here it is, the next release of my Envy Code R monospaced (fixed-width) font designed for programmers.
Many glyphs have been redrawn since preview #6 including braces, lower-case y, 6 & 9, ampersand, dollar-sign, hash etc. One pixel was removed vertically height to make the box drawing balanced and allow more lines per screen.
These new box-drawing, shading and symbols make Envy Code R a great font for the command-prompt (Consolas and Lucida Console lack box-drawing completely). To use them you will need to run the included registry file and reboot to operate correctly from a command prompt’s properties dialog.
This typeface contains over 550 glyphs providing full complements for DOS, Windows and Mac versions of the US, Western, Central Europe, Turkish, Baltic, Icelandic and Nordic code-pages. This hits several Unicode ranges including Basic Latin, Latin-1 Supplement, Latin Extended A & B, Box Drawing, Block Elements, Letterlike Symbols, Number Forms, Arrows… although not all of these ranges are complete yet.
As well as regular and bold variants this version includes a full italic version too and the obligatory italic-as-bold hack to get italic syntax highlighting in Visual Studio as shown here in my favourite 10 point with my Humane theme.
And for those of you that like the font a little larger it now looks good and the odd sizing issues are all gone!
Okay, enough with the teasing, you’ve waited far too long…
Download Envy Code R Preview #7.2 (TrueType) (169 KB)
These files are free to download and use from damieng.com but CAN NOT be redistributed either by other web sites or be included in your package, download, product or source repository at this time.
[)amien