Any Font for the Web

In a previous post (Websafe Fonts) I mentioned that font choice for websites was rather limited if you wanted to have consistency across computer platforms but if you are into some pretty tricky and possibly time consuming workarounds then check out this blogpost by Louis Gubitosi entitled 'How to Use Any Font on the Web' at his site InteractiveBlend.com.

Marketing Website Mockup

I spent the morning laying out the home page for my Website Marketing assignment. I decided to create a clean design in darker tones.

N.B. The colour of the orange boxes is a little off due to the export settings in illustrator

click to see the image full size

'ems' Explained - text size for the web

Points or Pixels? Which text measurement is best to use for the web? Before answering that question you'd better throw 'ems' into the mix.

"What are ems?" I'm glad you asked.

Traditionally ems were defined as the width of the capital letter M of a particular typeface. But now ems are determined by the default point size used in a variety of text display programs such as web browsers.

Web browsers, across platforms, use a point size of 16 as their 'Medium' default font size therefore 1em is equivalent to 16 points in browsers which have their text size set to Medium.

The benefit of using ems when coding text size for websites is that it is scalable when the browser's default font size is changed by the user. Practically speaking, when a user chooses 'Large' in the text size menu of their web browser, the default font size increases which in turn increases the size of the text on screen, when defined as em in the websites code.

This may not automatically happen if the text size is measured in pixels or points.

For example: If the size of some text in a website is coded as 1em then it will be displayed at 16 points in a standard web browser BUT if the user wants to see larger text and sets the text size in the browser menu to Large (eg. 20 points) then the 1em sized text will be displayed as 20 point type.

Using pixels and points, which are fixed measurements, may not increase in size when the default text size is changed in the web browser.

For those who are interested in learning more about using ems when coding web pages this article at 'clagnut.com' will be of great help. Here is a simple pixel to em calculator for those who want to fit text to a particular pixel size on their web page.

Scribla Graphics Logo Progress

Thanks so much to everyone who has given feedback on the Scribla Graphics logo design ideas so far. I was surprised to hear that almost everyone chose the 'scribble ball' design as their favourite or one of their favourites. After spending time tonight reworking the concept I have this new incarnation for your analysis.Any thoughts and ideas would be REALLY appreciated.

Websafe Fonts

You've designed a website mockup - banner, logo, colour scheme, layout, navigation....but Which Fonts do you use?

When designing for print the choices are limitless as long as you remember to embed the fonts or convert them to outlines. But when it comes to the web it is an entirely different story.

If every Mac, Windows and Linux machine came bundled with every font ever created then there wouldn't be a problem. You could let your imagination run wild but the simple fact is that there are a limited number of fonts that are installed, by default, and even a smaller number that are common to all three platforms.

If you really do care how consistently your webpage displays on all computers then you need to check out:
"Common Fonts to All Versions of Windows and Mac Equivalents"
and
"Font Families & Web-safe Fonts: The Point of Penultimate Resort"

Logo Ideas

Settling on the name 'Scribla Graphics' it's now time to come up with a logo. Here are some ideas so far.

click on the image to view full size

Flash Logo

Even though this logo for 'Scribla Graphics' is just a first idea, I decided to use it in a Flash animation class exercise. Animating the line was tricky but through the use of 'animation along a path' and a 'mask' I was able to pull it off.

To watch the animation again, right click on the logo and click PLAY.

NB. If you still use Internet Explorer rather than Firefox you will have to reload the page each time you want to see the animation. Thanks for that Microsoft.

Bad Website Design

This may not be the worst website ever created but it may come close. Let's see how it stacks up to our criteria.

Site: http://belladesoto.us/

Content: There is enough content on this website to "fill a spacecruiser" but it is laid out so badly there is no motivation to read it. From the title it is clear the author wants you to "THINK" but.......think about WHAT???

Structure and Navigation: Imagine laying 50 magazine pages on the floor and trying to navigate to some interesting information by looking through a cardboard toilet roll. The site consists of a single page about 40 000 pixels wide. There are a gazillion links to other sites but many of them are broken.

Visual Design: If using every font known to man, every colour in the spectrum and overlapping one image with another is good design, then this site should be winning all the awards. There is no issue with page consistency because everything is stuck on the one page.

Functionality: This site functions as a brain dump for someone named Bella. That's all there is to say.

Interactivity: Here is where this site really shines. If you can find some blank space where the background image is visible you will be able to entertain yourself for hours with the floating blue balls which follow your mouse pointer. No need to visit Miniclip.com when you have belladesoto.com.

Overall Experience: If it wasn't for the fact that I had to review this site for College, it would have been visible in my web browser for less than 5 seconds.

0.5/10 (0.5 for the pointer animation)

Webdesign Criteria

When analyzing the quality of any website there are six important areas to consider.

1. Content: Content is the information provided on the site. It is not just text, but music, sound, animation, or video -- anything that communicates a sites body of knowledge. Good content should be engaging, relevant, and appropriate for the audience. You can tell it's been developed for the Web because it's clear and concise and it works in the medium. Good content takes a stand. It has a voice, a point of view. It may be informative, useful, or funny but it always leaves you wanting more.

2. Structure & Navigation: Structure and navigation refers to the framework of a site, the organization of content, the prioritization of information, and the method in which you move through the site. Sites with good structure and navigation are consistent, intuitive and transparent. They allow you to form a mental model of the information provided, where to find things, and what to expect when you click. Good navigation gets you where you want to go quickly and offers easy access to the breadth and depth of the site's content.

3. Visual Design: Visual design is the appearance of the site. It's more than just a pretty homepage and it doesn't have to be cutting edge or trendy. Good visual design is high quality, appropriate, and relevant for the audience and the message it is supporting. It communicates a visual experience and may even take your breath away.

4. Functionality: Functionality is the use of technology on the site. Good functionality means the site works well. It loads quickly, has live links, and any new technology used is functional and relevant for the intended audience. The site should work cross-platform and be browser independent. Highly functional sites anticipate the diversity of user requirements from file size, to file format and download speed. The most functional sites also take into consideration those with special access needs. Good functionality makes the experience center stage and the technology invisible.

5. Interactivity:Interactivity is the way that a site allows you to do something. Good interactivity is more than a rollover or choosing what to click on next; it allows you, as a user, to give and receive. It insists that you participate, not spectate.
It's input/output, as in searches, chat rooms, e-commerce and gaming or notification agents, peer-to-peer applications and real-time feedback. It's make your own, distribute your own, or speak your mind so others can see, hear or respond. Interactive elements are what separates the Web from other media. Their inclusion should make it clear that you aren't reading a magazine or watching TV anymore.

6. Overall Experience: Demonstrating that sites are frequently more -- or less than the sum of their parts, the overall experience encompasses content, structure and navigation, visual design, functionality, and interactivity, but it also includes the intangibles that make one stay or leave. One has probably had a good overall experience if (s)he comes back regularly, places a bookmark, signs up for a newsletter, participates, emails the site to a friend, or stays for a while, intrigued.

Info from www.webbyawards.com

My first portfolio website mockup.