Blog platforms are the stuff of awesome because they allow any computer-competent person to publish professional-looking sites without programming chops. A critical, early step in all this is selecting a look and feel apt for your topic. So dig into Blogger's chocolate-box of designs and see what suits.
A template controls the look of your blog via cascading style sheets (css): its width, number of columns, header style, and so forth. Some aspects – like colors and fonts – can be adjusted further via Blogger's control panels. But the first step is deciding what, roughly, your site should look like.
Under Layout is the link "pick a new template". Experiment here, if you're not committed to the design you chose when it launched.
You'll notice that Blogger, lamely, offers only two-column styles. Three-column ones exist, but you need to source the code from a reliable third-party, then customize your template. We'll talk about how to do this – and manage it safely – later in the course.
Once you've chosen a template, you can start modifying it. Click on Layout>Page Elements. A boxy schematic of your site will appear (a "wireframe" in jargonese).
Here you can "Add a Gadget," such as a sidebar text box, blogroll and widgets (which we discuss below in depth). You can also drag and drop items to rearrange them. The "Edit" buttons are pretty self-explanatory. The header one allows you to change the title and tagline, drop an image behind the text or upload a custom header (more on that later).
Make sure you hit the orange "save" button on the top right!
The next element to play with is Fonts and Colors, also in blue on the beige bar under Layout.
Scroll down that left-hand control panel. Weirdly, it has different options for items' color and their font, which can be hard for DTP-savvy people to grasp. But Blogger is a basic, free platform, so things are clunky on occasion.
OK, there's loads of fun stuff to goof around with here. A few tips:
- Reversed-out text – light on a dark background – is considerably harder to read, especially on-screen. If you take that route, consider making the text larger and bolder.
- Don't go crazy with the paintbox. A palette of five to six should suit all your needs, from background hue to sidebar text. Use color to direct the eye, not distract it. Ditto fonts.
- Sans serif fonts – without the little "feet" – work best on-screen for body text. The class blog employs Arial, which is a little more narrow (and sophisticated) than the common Verdana. To maintain a consistent, not-distracting style, stick with 2-3 fonts and 2-3 font sizes.
- Settle onto a template before you tinker here exhaustively. Color and font details will be lost if you switch. But it's easy to note the palette and recreate it... Each color has a hex code a six-character mix of numbers and letters.
- Remember to save changes. Big ole orange button again.
The final Layout element is "Edit html". Here you can peek at the code and, if you're really brave, wade in and edit the css, after backing it up. That's pretty advanced stuff, so Mike will address it later in class – and coach ambitious folks on issues.
Posts
7 comments:
Reader tests say that serif typefaces are easier to read than sans serif. Do you have research to back up your claim that sans serif is better for screen-based readers?
The debate rages on in the typeface world between serif and sans serif. In print, serif is the default choice and is generally thought of as a more formal typeface while sans serif is more playful.
On the computer, in addition to playful vs. formal, you have to consider readability. Most monitors have a pixel density between 80 and 100 pixels (basically, dots) per inch. Newspapers are usually around 100 - 120 DPI (dots per inch) and glossy magazines around 135 - 150 DPI. At those higher resolutions, serif fonts are more readable. At lower resolutions sans-serif wins as there are fewer fiddly bits on the letters.
All that is discussing body text -- which is usually between a 9 and 14 point font. Headlines are larger and can have more detail in the font and still remain readable. Also, the contrast between sans-serif and serif fonts helps increase the contrast between body and header text.
In short, there is no hard-and-fast rule regarding font face. I prefer sans-serif for body text and serif for headlines thought the publishers of the Old Gray Lady would beg to differ. Though even they use sans-serif fonts for anything smaller than 12 point.
Charles, basically, there are two dogs in the font fights: legibility (how different each character is from another) and readability (how unambiguously it communicates). Among web designers, popular wisdom insists that sans serifs makes the best body text. As this SEO company claims: "While Times Roman may be considered one of the most legible on paper, when you put it on screen, it often appears too small or too irregular looking."
The comment field couldn't accept my whole reply, so I've posted it in the class forum...
As an old advertising man, I know of readability studies that showed serifed faces more familiar and more easily understood. The researchers said this was probably because most news sources of that time were set in Times or Century faces. We always used serifed faces for body copy. Times change, however, and a new generation or two may see typefaces differently from pre-Internet times. Boils down to personal choice, I reckon. Just wondered if any studies had been done.
Charles, you arrived at the same conclusion as Poole, who reviewed 50 pro and con studies (see below, also posted on the class site): it's largely a matter of aesthetics these days. In his conclusion, he even mentions the evolution of taste!
"As Mike and Allan Haley at Fonts.com point out, size is a key factor. Below 8 or 9pts, Haley says: "Sans serif faces are almost always the safest choice because their individual character shapes tend to be more legible."A study here shows that Arial beats out Times New Roman 2:1. Verdana – another sans serif font – works best in typeface under 10pts. But then both sides have reports galore: Interaction designer Alex Poole reviewed 50 in this 2005 paper. And he concluded that while serifs do effect legibility, they don't hamper reading measurably. Some relevant bits:
"Sans serif are better on the web: Although studies of screen reading show no difference between reading from screen and from paper ( Dillon, 1992 ; Bernard, 2001 ), there could be some validity to this argument. When typefaces are digitised for use on computers, the letter forms have to fit within a relatively small pixel grid, often leading to what are called the "jaggies" ( Rubinstein, 1988 ). Many web professionals such as graphic designers claim that this relatively low resolution cannot render effectively enough the fine finishing strokes of serif typefaces, and that sans serif typefaces lend themselves more naturally to being digitised, and come out cleaner and thus more legible.
"However, this has not been borne out by recent evidence ( Bernard, 2001 , Boyarski et al., 1998 , Tullis et al., 1995 , De Lange ), that shows no difference in legibility between serif and sans serif font on the web.
"Sans serif is better at small sizes. Sans serif fonts survive reproduction and smearing because of their simple forms: Some research has shown that serifs may actually become visual noise at very small sizes, detracting from the main body shape of the letter form ( Morris, et al., 2001 ). However, this has not been confirmed in tests of continuous reading ( Poulton, 1972 ). Other factors such as stroke thickness, counter size and x-height are likely to have a far greater effect in preserving the overall identity of a letter form whether it be through smearing or size reduction (Poulton, 1972 ; Reynolds, 1979)."
Poole decided that other factors matter far more, like x-height, counter size, letter spacing and stroke width. Serif vs Sans Serif may be purely a question of aesthetics. Which is happy news for me, as I always stubbornly published Road Remedies in Times New Roman, even while endorsing Arial and Verdana...For those still not quite convinced (the serif-hating habit is hard to kick, I admit), Microsoft unveiled six new fonts a few years back, some of which are serifs designed specifically for electronic body text. The designers explain the logic and merits of each in this illuminating Poynter article. (These ship free with PCs, Mac users need to license 'em. Charles, thanks for asking such a terrific question!
Post a Comment