The BarbLog

Design, front-end dev and other random thoughts

Study notes

All of the posts under the "Study notes" category.

Website Planning project: Revisiting the Warm Bean Coffee website

Task: revisit the Small Business coursework website and improve on it based on everything we’ve learned so far.

For this task my to-do list was as follows:


  • Introduce modularity by using PHP includes for head, navigation, footer and optional jQuery & jQuery UI libraries
  • Tweak link and footer colours
  • Add XML sitemap, .htaccess and robots.txt
  • Add a favicon
  • Tweak meta descriptions where appropriate and review SEO (though that had already been considered in the first iteration of the site)
  • Implement microformat (h-card) for the address and phone number in the header

Read more →

Icon fonts: How to make your own

This is the writeup to accompany my presentation slides about icon fonts.

Before we get into the ‘icon’ part of it…

If you use custom icon fonts, you will be likely embedding them using the @font-face CSS option. The most fail-safe way of doing so is by using the following syntax, as explained at first by Paul Irish and tweaked by Jon Hicks to arrive at this version:

@font-face {
font-family: 'Pictos';
src: url('pictos-web.eot');
src: local('☺'),
url('pictos-web.woff') format('woff'),
url('pictos-web.ttf') format('truetype'),
url('pictos-web.svg#webfontIyfZbseF') format('svg');

This is to ensure all browsers, including that pesky Internet Explorer, display the correct font files. Yes, that’s a smiley face there. Read the above articles to find out why!

Why use icon fonts?

Because they are awesome! There are four main reasons, though. Icon fonts are…
Read more →

Barbara February 17, 2014 Leave A Comment Permalink

Barbara February 3, 2014 Leave A Comment Permalink

Website makeover – (Part 1: Planning)

[To avoid potential misunderstandings: this project is for educational purposes only, not a real commission]

The site

To start off with, I looked at the existing homepage and its content and thought about how I could group/lay it out more effectively, as at the moment it’s largely just plain text which is too much to read for a front page and is not at all visually stimulating for the user. Marked up a couple of things for reference.


Home page

Read more →

Barbara December 27, 2013 Leave A Comment Permalink

Barbara December 7, 2013 Leave A Comment Permalink

get_footer() ?>