Web and Graphic Design HQ

Need to do something with your display just once? Don’t want to add it to your CSS file?

Use in-line CSS instead.

Here’s a code example:

<p style="font-size: 150%; color:#cc0000;">Paragraph text goes here</p>

This makes the text 150% of regular size and red, in this example code as shown above.

Lots of CSS rules can be used “inline” instead of within an external style sheet or even a style sheet in the header of a web page.

Generally, an external file is best, so that you apply the “rules” consistently across your whole site, not just either on one page or within the HTML code itself. But it does exist as an option!

When it comes to web layout, there’s still a fair bit of argument over minimum layout standards: designing your website to meet the needs of the least technically enabled visitor you’re likely to get.

I was listening to an expert today who has recently started designing for a minimum 1024 pixel screen width. To make that choice, and jump up above the 800×600 user level, he ASKED his customers BEFORE making the changes.

There’s actually a way to do this automatically and all of the time, without having to specifically ask.

How?

Using Google Analytics. While this free Google web tool is primarily useful to track and measure Google AdWords campaigns (and non-AdWords initiatives), it has a lot of other great features that make it great for web design. In Google’s own words:

Google Analytics tells you everything you want to know about how your visitors found you and how they interact with your site. Focus your marketing resources on campaigns and initiatives that deliver ROI, and improve your site to convert more visitors.

This tool isn’t a stand-alone software package, it’s code you add to your website. You then login to the Google Analytics website (as a free web service) and run everything through your web browser.

(This is different to something like Google Pack, which is a free collection of essential software. It’s an online service, like Google Mail or Google Maps — but you need a website so you can add the small chunk of html code to your pages. While we recommend Google Pack, it’s not needed for Google Analytics.)

It’s easy to install and use Google Analytics: we have it running on five of our websites.

Under the Content Optimization reports, there are “Web Design Parameters” that you can report on, for things such as:

• Browser version
• Screen resolution
• Screen colour depth (eg 256 colors, 24-bit, 32-bit)
• Test for things like Flash and Java

And plenty of other reports.

Using this information

Different sites of course attract different users. Pretty obvious, but that different user can often be provisioned with much different technology. For example, visitors to our main business site, www.dmk.com.au have a higher level of screen resolution, colors etc than visitors to one of our client sites which focuses on providing a community service: more home users rather than business users.

To compare (just using 2007 data), currently less than 4 percent of DMK visitors have an 800×600 screen resolution, but the client site providing a community service has just under 21 percent of users with that level of screen dimensions. So, it makes more sense to continue to cater for 800×600 screen sizes on that client website, as statistically, 21 percent is a fairly large portion of users.

The longer you run Google Analytics, the better idea you get of your visitors and how they interact with your site. This is just one way of using that data.

From another perspective, you wouldn’t, in this case, re-design for a minimum width at a size larger than 800×600 (next size up is 1024×768) — as you’d reduce readership for more than 20 percent of your visitors.

Using Google Analytics, this type of simple web design evaluation can help ensure you have the best solution in place for your specific visitors: you don’t have to rely on theory, you can test it with REAL people.

To install Google Analytics, go to www.google.com/analytics. You’ll even find things like “Conversion University” and, of course, a blog.

One very handy resource we use regularly to download free fonts is DaFont.com — last time I looked there were over 7,300 fonts on the website for download.

You can always see the latest fonts, but even better, there are 70 categories of fonts:

• Fancy: Cartoon, Comic, Groovy, Old School, Curly, Western, Eroded, Distorted, Destroy, Horror, Fire, Ice, Decorative, Typewriter, Stencil and Army, Retro, Initials, Grid
• Foreign look: Chinese and Japanese, Arabic, Mexican, Roman and Greek, Russian
• Techno: Square, LCD, Sci-fi
• Bitmap: Pixel and Bitmap
• Gothic: Medieval, Modern, Celtic, Initials
• Basic: Sans serif, Serif, Fixed width
• Script: Calligraphy, School, Handwritten, Brush, Trash, Graffiti
• Dingbats: Alien, Animal, Asian, Ancient, Runes and Elvish, Esoteric, Fantastic, Horror, Games, Shapes, Bar Code, Nature, Sport, Heads, Kids, TV and Movie, Logos, Sexy, Army, Special
• Holiday: Valentine, Easter, Halloween, Christmas

Each main font area (eg Script, Gothic) also has a “various” category to browse.

This site is very handy for a free font resource, including dingbats and pictures. For example, yesterday, I needed some “snowflakes” for a skiing invitation: it didn’t take me more than a couple of minutes to find a suitable font on DaFont.

Each category also has a various grouping as well as the specified groupings. Many/most of the fonts are free, mainly for Windows but also Mac fonts.

The site is also great because:

• You can enter your own text in a “Custom Preview” to see any particular letters of interest. But a word of caution: if you’re using this to match letters to a sample you already have, it can start to look a little confusing when all letters are the same for each graphical sample! Having the default name of the font can help with a visual search for a particular typeface, because each entry on the page will show different letters, so they’re easier to distinguish from each other
• There’s a Top 100 list of the most popular fonts for free download, sometimes a good way to find something suitable for a project.
• You can display up to 50 results per page, making category browing more convenient on a broadband connection
• The site is in both English and French
• If you design fonts, you can submit or upload a font to the site to help publicize your work
• You can use the search form to search on any keyword (eg “snow” was my search term yesterday to find a snowflake font

When you search this way, you do get a list of commercial fonts that you can purchase, but further down in the search results are the relevant matching categories and then the free fonts that match your search term.

Next time, I’ll tell you about a couple of other great resources I have to help identify fonts you have a printed sample of, but not the font name (I can think of at least 4 ways to do this!).

Here’s a mini web tip for those of us around the world who don’t always spell things the USA way!

If you’re hand-coding your web pages, and you’re used to British-English, the big two to watch out for are “color vs colour” and “center vs centre”

Sometimes you “gloss over” those words in your code when you’re doing things in text/code mode, frustratingly searching for the error that means your code doesn’t match what you want to achieve visually!

Are there others that trip you up? These are the two, as an Australian, that I notice the most.