Web Design Archives - identityXperts

Fonts as a Design Element, Part 1

Choosing your font

The Pragmatic Web Designer uses fonts as a design element. Fonts like images, beautiful colors, and user-friendly navigation are design choices. A font can either enhance or detract from the theme and feel of your web design. Successful web designers understand this and know or learn which typefaces are most effective. The rules in the web environment are anything but arbitrary, so they need to be followed if a website is to engage the reader rather than turn them away.

There are many fonts out there, so many that choosing a font for your website can be overwhelming. The choice is important, however. Certainly, you want people to read the useful content provided on your site. The intricate details of a font, such as weight, kerning, axes, strokes, and counters, affect how we read, although we are rarely conscious of it. The font that you choose could determine how much text is read and how effective your site is.

Yes, there are thousands of fonts from which to choose, but only a few are successful on the web. Readability and availability are the issues. First, consider the difference between two popular font types: serif and sans serif.

Serif or sans serif

Serif fonts are fonts that have fine cross lines at the ends of the letters. Because the lines make each character more distinctive, serif text is typically easier to read in print but generally harder on a monitor, particularly at smaller sizes. Serif fonts have been used for centuries in printed books, magazines, and newspapers. Consider a serif font for your website if you wish to convey warm, personal, artistic, distinguished, traditional, conservative, or intellectual qualities. Serif fonts are effective as headings or for text and documents intended to be downloaded and printed. The most common serif font is Times New Roman and happens to be the default for most windows-based browsers.

Sans means ‘without’ in French, so naturally, a sans-serif font doesn’t have embellishments at the end of each stroke. Sans serif fonts are generally thought to be better for the web. This was particularly true when computer screens didn’t have a high enough resolution to capture the fine details of the serifs. They could appear blurred and unclear. Even today, on a screen, sans serif fonts appear more readable. Sans serif fonts convey technical, cool, clean, crisp, youthful, modern, or uncluttered qualities. The most popular web font at the moment seems to be Verdana. It is a sans serif font and looks good on both PCs and Macs. Because of this, it is one of the most popular, widely-used fonts on the web.

Availability constrained by technology.

The range of fonts that web admins can reliably select for their pages is not as wide as you may think. Some fonts look better on PCs (such as Arial), while others are best viewed on Macs (like Helvetica and Geneva). Even more limiting than avoiding Serif fonts (perhaps less of a requirement with today’s hardware), web designers have long been limited by what fonts website users have installed on their computers.

The list of universally available fonts is slowly growing, with additional fonts such as Cambria and Candara coming into the picture. In an ideal world, all fonts would be loaded onto all systems to open up design possibilities. Until then, conventional wisdom suggests that you use Web safe fonts from the following list.

Serif

Times New Roman/ Times
Georgia

San Serif

Arial Black
Arial/Helvectica
Comic Sans
Tahoma
Trebuchet MS
Verdana

Monospace

Courier New/ Courier

By selecting one or more of these fonts for your website, you will be able to control somewhat how your text will appear in most browsers. Using Cascading Style Sheets, which is the underlying technology used by a web page to control its appearance, web designers can specify a list of fonts to be used. In CSS, your font-family code might look something like this:

p{font-family: Verdana, Arial, Helvetica, sans-serif}

The first three fonts are pretty common, and chances are most computers will have at least one installed, but in case one doesn’t, you provide the computer generic sans-serif font for the browser to use.

Technology advances

Google Web fonts are an amazing free resource for web designers, as seen at the LearnWebDevelopment and Fox News sites. A web with web fonts is more beautiful, readable, accessible, and open. This newer approach makes it quick and easy for everyone to use a broader selection of web fonts, over 500 font families, and counting. Google’s API service makes it easy to add Web fonts to a website in seconds. The service runs on Google’s servers which are fast, reliable, and tested. Google provides this service free of charge. [Author’s note: To learn how to add Google Web fonts in WordPress themes the right way, optimized for the performance, go to http://www.wpbeginner.com/wp-themes/how-add-google-web-fonts-wordpress-themes/.]

Breaking the rules

Occasionally, there will be times when the “artist” in us desires to break the design rules. Thus, if you absolutely want to ensure your text displays in a specific font, you will need to make that text an image. Just be aware that if you want to make any changes to the content, you will have to edit the image itself, which is much more tedious than going in and editing text. This should be done sparingly as search engines won’t recognize the text in the image. Using images for your text will also increase the download time of your pages. However, there are places where it’s appropriate to use an image to display text. A good example would be your company logo.

Remember, you are the designer.

While fonts may not seem as important a design element as color and graphics, thoughtful consideration should go into your selections. The fonts will convey important information about your company, products, and services. They will help visitors successfully navigate your site and interact with you. Most importantly, the right fonts will contribute to your site’s overall visitor experience. If it’s positive, your content is read, and you have made the right choices.

Dr. John Elcik is a Pragmatic Web Designer. He is passionate about the application of web technologies to marketing communication issues. His specialties include web design, social media, and customer relationship management technologies. His search for the “right” font has been a pragmatic one. It has never been about looking for something unique and distinctive that expresses his particular aesthetic taste. Rather, “appropriateness” is the acid test that guides his choice of font. His favorite fonts are: Takoma, among the san serif, faces for body text, and Georgia, among the serif faces for headings. Typefaces that have several weights (light, regular, bold, etc.) and/or cuts (italic, condensed, etc.) work are good choices to become your personal “workhorse.”

Dr. John P. Elcik, IV
The Pragmatic Web Designer

Posted on by Dr. John Elcik

Recommendations for a Great Web Designer

If you’re in search of a great web designer, you may want to skip Elance and go directly to Twitter, do not pass go. Finding recommended vendors and freelancers for your business may be as easy as asking the hundreds of folks in your social media network who they recommend. Here’s a breakdown of ways to find trusted contractors, by social media outlet:

One of the most powerful elements of LinkedIn is the “recommendations” feature. You can write, read, and request recommendations from others in your network. It may take a little legwork, but you can use this feature to find a great copywriter, and read what others have to say about him or her. Think of it as a Yelp for people.

Twitter

While you’re missing out on the depth of information available on LinkedIn, you can get instantaneous responses. For instance, tweet “Looking for a great online bookkeeper” and you should get a bunch of responses within minutes. Give more weight to those that come from inside your network, though, as often a request for referrals will generate automated responses from a spammer. It looks like it comes from one of your friends, but is actually just an ad.

Facebook

You can post requests for referrals, just like on Twitter, and you can also search for people with those keywords in their profiles. Beware, though; just because someone is listed as “Penelope Bookkeeper” doesn’t mean they’re an expert. You could also post your request in groups that are associated with the topic (post a request for a logo designer on a graphic artists’ Facebook group wall, for example).

YouTube

It might seem a little strange to put out a call for resources via video, but why not? Especially if you have a significant following, you could get a tremendous response. Added benefit: If the project you have in mind has a visual aspect, you can demonstrate it right on the video (think office organization, website overhaul, kitchenette remodel).

Even if fourteen people recommend the same web designer, make sure to do your due diligence. Get a written quote and scope of work, ask for a list of projects completed, and confirm that that person will be doing your project personally, not outsourcing to another. With these tips in mind, you should be able to find great outsourcing resources at the click of a mouse.

When it comes to building your brand, your website is one of your most powerful tools. Contact Dr. John Elcik at identityXperts to handle all of your web design needs. We can be reached by phone, at (239) 400-0622, or email: jelcik@identityXperts.com.

Posted on by Dr. John Elcik

Fonts as a Design Element, Part 2

Enhancing site readability

You want people to read the useful content provided on your site. Aside from your choice in font family, there are additional things you can do to improve the readability of your text.

As a designer, one needs to decide how or whether to mix and match fonts. Most of the time, one typeface will do, especially if it’s one of the workhorses with many different weights that work together. If we reach a point where we want to add a second face to the mix, it’s always good to observe this simple rule: keep it the same, or change it a lot — avoid incremental, meaningless variations.

Better though is to use relative measurements like % or em. Relative measurements allow anyone to increase or decrease the size to one they find more readable. It’s a good idea for accessibility to assist those with poorer eyesight. Books have come in oversized print for years for a reason. Not everyone can read smaller print. Be kind and allow visitors to resize your text.

1.0em should be equivalent to 16px. Most people find a font size of about 14px or 0.90em to be comfortable to read, but everyone has different preferences. To be on the safe side, set your default font size to something between 0.8em and 1.0em (12px – 16px) and then let your visitors adjust the size to their wishes.

Contrast

One essential thing is the contrast between the color of your text and the color of the background behind it. The more the two contrast, the easier the text will be to read. Black text on a white background will always be best, but it’s ok to use different colors. Just make sure your text color stands out against your background color.

Line length

Line length is another issue in readability. Too many words on one line make it hard to follow a block of text. With the increase in fluid designs and the lack of support for the max-width property in Internet Explorer, more and more sites are displaying long lines of text that are difficult to read. You can usually get away with a long line of text online than in print, but try to keep those lines from getting too long. 60-70 characters ought to be the maximum.

Your font choices, font size, contrast, and line length will make a huge difference in the readability of your site. And a sure way to lose visitors is to provide content they have trouble reading. How to manage your use of fonts You can add style and interest to your text by using “attributes.” These stylistic elements introduce variety and help you better convey your message. The most common font attributes are plain, bold, italic, underline, capitals, and color. When used, these elements become part of your site’s overall design. If used sparingly, they can be effective. When overused, your page can look cluttered and unprofessional. Be consistent when applying attributes, and always remember that “less is more.”

Plain: Use for main body text on white or light backgrounds and large headings.
Bold: Use for emphases, such as headings and sub-headings, keywords, and small blocks of words. Use sparingly.
Italic: Use for emphases, such as keywords, quotes, photo credits, captions, and titles. Too much italic is difficult to read, so use sparingly.
Capital letters: Use basic rules of grammar in applying capital letters in your text. Avoid using all capital letters except for concise words.
Underline: I totally avoid using underlines on web pages because underlined words can be confused with links.
Color: Use color sparingly to attract attention, emphasize a word, or select a group of words. Make sure your color choices complement your overall web design.

Research and apply the results

Consider the message you want your site to convey. Look at other websites in your industry that appeal to you and see if you can recognize the fonts. [Author’s note: Right-click on a page and choose “View source” to find out if you are right. Use the Edit/Find commands and look for “font.”] Chances are they will use one of the fonts from the recommended shortlist. When you view your site as an image, fonts are simply part of the overall “look” of the site. Remembering this will help you better decide which font will fit best with your site. In simple terms, do you like it? Does it convey the right feeling for the subject matter? One of the more interesting ways to explore fonts is to look at what fonts are used on some of your favorite sites and ask yourself why you like them.

Facebook: font-family:”lucida grande”,tahoma,verdana,arial,sans-serif
LearnWebDevelopment: Droid Sans, a Google sans serif typeface
Fox News: Lora, a Google serif typeface
Gmail: font-family:Arial,sans-serif
nytimes.com: font-family:Georgia,”times new roman”,Times,serif
Wikipedia: font-family:sans-serif
PragmaticWebDesigner: font-family:Tahoma,Arial,Helvetica,Sans-serif

You’ve done your research and have chosen your font(s). How did you arrive at your decision? Is it a factor of the rest of the page design? Why are there so many variations on these websites? What defines readability?

Posted on by Dr. John Elcik

Effective Web Design

Building your online business takes more than just having a nice-looking website. You need to use proven methods of bringing customers to your company. Fortunately, there are many simple yet powerful secrets that you can employ in your web design, marketing strategy, and all aspects of your business to bring in the most customers without spending a lot of money to do so. Finding your way to online success begins with understanding your business and how to reach the most amounts of potential customers.

The stopping point for many online businesses is generally the lack of knowledge in how best to handle all aspects of their marketing, from solid web design to reaching customers through publishing solid content. Understanding the secrets of making your business more successful starts with a few good tips to get you on the right path.

Effective Web Design

Why do many successful online businesses have similar websites? There is a reason for that beyond what you might believe. One of the simplest yet most effective secrets to creating an effective web design for your business understands that many customers are creatures of habit themselves. Having similar navigating systems means that they don’t have to hunt around to find your products, information, and checkout to pay for the items.

Making your website similar to other successful sites means less effort for customers to find what they want and purchase. It’s amazing just how many sales are lost in the last few seconds because a customer quickly grew tired of having to find the checkout. Keeping things simple and familiar helps you with your sales.

Who Looks at Ads?

A decade or so ago, many people who were getting on the internet would look at every ad, pop-up, and promotional banner that appeared in front of them. Today some programs literally keep many types of ads from appearing at all. And though it seems every web page is still flooded with adverts, they don’t register as much as they had before.

Understanding that the power of ads is not what they once were means using them more creatively in your web design, marketing them with more subtlety when you promote your business on other web pages, and being more skillful in your approach. Ads still work, there’s no question about that, but those that get the most for their ads are generally not the ones who spend the most. They understand how to use them more creatively and effectively.

Content is King

Content is one of the best and simplest secrets to bringing the most customers to your web page. Providing good, solid, informative content turns your online business into a resource, not just a place where customers occasionally drop in to purchase something. Providing good information regularly is vital to bringing in new customers and keeping those who purchased from you before contacting your website.

The few secrets to good web design, advertising, and content scratch the surface of your online business potential.

Dr. John P. Elcik, IV
The Pragmatic Web Designer

Posted on by Dr. John Elcik

Tips for Pragmatic Web Site Design

A website functions as the main headquarters for your online business, so it only makes sense that you want it to be both functional and enticing. That means sticking with the best possible principles of design to make it appealing to a wide range of persons. Here are a few tips for making sure your site rates high from the user’s perspective.

First impressions do count! The homepage must be the most appealing page on your site. Make the site navigation system as clear as possible. Visitors should be able to find their way around your site with ease. Avoid complicated flash menus; you want your navigation to be simple enough for a child to understand. If visitors aren’t able to find what they’re looking for in less than 5 seconds, they’re likely to go elsewhere.

While we’re talking about navigation, simplicity is key. Make sure that site users can easily see where they are on your site. If they’ve browsed themselves down a few levels deep, you want them to be able to see where they are to avoid confusion. Site search is a very important element on a website to add a search text field placed on the top of the web page.

Create a unique, trusting relationship with your visitors. Add testimonials from satisfied clients. Add contact information to your site footer so that visitors can easily find it. Provide a physical address, phone and e-mail options. Anticipate information like pricing that they need and make it easy to find. Transparency is good for your business.

Go easy on colors and images. Do not use more than 2-4 colors when designing to look professional. Consider using the logo’s color palate. Also keep in mind that your site will load more quickly with fewer pictures, which means potential customers are more likely to stay on the page. Any images that must be on the page should be optimized for size using an image editor. Make the image file size as small as possible to speed up your site load time.

Be careful with the length of pages. Big blocks of text are uninviting to readers. Seeing a solid wall of text on a page is one of the quickest ways to get a visitor to head off to another website. Instead, use clear headings and break your text up into smaller, easier-to-read paragraphs and you’ll find that visitors are more likely to actually read your content.

Always check compatibility across all the major browser platforms. Obviously, appearance is important. Your website might look perfect in Firefox, but if it looks bad on Chrome and Opera, visitors will be hitting the back button – meaning you’re losing out on potential earnings.

Do you know what a splash page is? These are those pages you see on many websites that have some pretty picture and the words “Click Here to Enter Site”. Avoid the flashy splash page! They are a waste of your bandwidth and a time waster for the visitors to your page. When someone comes to your page, they want to see the value right from the start, not fancy graphics.

Avoid using an overabundance of banner ads on the header and sidebars of your site. Most people don’t pay them any attention, anyway – in fact, it’s been shown that as the internet matures, web surfers are developing “banner blindness”, where they simply don’t notice banners anymore. You’ll be better off supplying your followers with epic content that has relevant text links to your affiliate offers.

Finally, think long and hard about using audio on your site – and then just say no! There are two big reasons for this. First, many people do their web-surfing at work; unexpected audio can get them in trouble. Secondly, even when surfing at home, people multi-task. They may be watching TV or listening to music while they visiting your site; your choice of music might not be as enjoyable for them as what they were already listening to. What’s more, if they spend more than a couple of minutes on your site – which you hope they do – having the same tune loop over and over can get really annoying. If you absolutely must have audio, make sure that the controls for muting it are easy to find.

Use a sitemap to improve web page navigation and also search engine optimization. Listing the pages on a website is a user-friendly feature.

Tips for Pragmatic Web Site Design When it comes to building your brand, your website is one of your most powerful tools. Contact Dr. John Elcik at identityXperts to handle all of your web design needs. We can be reached by phone, at (239) 400-0622, or email: jelcik@identityXperts.com.

Posted on by Dr. John Elcik

Getting Started in Web Design

Learning enough web design to build a website can seem very intimidating if you’ve never done it before. But if you’re able to find your way around the internet and use word processing programs, then you should be able to create your own website.

The mistake that most novice web designers make is in trying to make things too complicated. Even if you know a lot about computing, you should take your time and learn the basics first. If you try to do too much, you’ll end up with a site that looks unattractive to the end users, and may be difficult to navigate. There is a lot of software out there that will help you get started; some of them say things like “have your own site ready to go in minutes!” Frankly, that’s a bit misleading; it takes longer than that to learn how to design a site properly.

One of the best ways to learn is to start with premade website themes that allow you to customize. This is a great way to start with something that is already set up to look good, while still giving yourself the chance to learn HTML and the basics of design.

Getting Started in Web Design When it comes to building your brand, your website is one of your most powerful tools. Contact Dr. John Elcik at identityXperts to handle all of your web design needs. We can be reached by phone, at (239) 400-0622, or email: jelcik@identityXperts.com.

Posted on by Dr. John Elcik — Leave a comment

The Basics of Web Design

If you’re looking for a simple definition of web design, you could say that it is the art of creating visually pleasing and functional web pages using various tools. But because there is such a grand variety of tools, one person’s web design may be completely different from another. We can agree, I think, on the fact that there is an art to designing a website. One of the key ingredients to designing a site is understanding the main purpose of the site. Is it going to be a commercial site? Is it going to be an exposition site? Will it be a simple weblog? The purpose of the site will play a large role in determining the best design for it.

Any website design needs to be pleasant to look at and easy to get around on. The site navigation is essential, especially for a commercial site. If your prospective clients or customers can’t find their way around the site easily, they may very well head off to another to spend their money. All websites are, in some way, an effort to gain an audience for a business, a product, or a person. The design of the site should be representative of that.

Dr. John P. Elcik, IV
The Pragmatic Web Designer

Posted on by Dr. John Elcik — Leave a comment

What is Web Design

Giving an exact definition of web design isn’t really easy because web design encompasses so much. When we’re designing a site for the World Wide Web, we are really looking at five distinct components: the visual component, the content of the site, the technology (often called “the back end”), delivery (via a web browser) and the site’s purpose. Finding a balance between these five components and deciding how they should mix changes with each designer’s opinion and, in fact, with each site. It’s always important to find a balance between the appearance of a site and how well it functions.

While we all want our sites to be modern and attractive to the person looking at it, it also needs to be user friendly and easy to navigate. Depending on the site’s purpose, ease of use may be of slightly less importance than appearance or vice versa. For example, if your site is created to display artwork, then the appearance of your art will be of vital importance. On the other hand, if your site sells kitchen supplies, you need absolute ease of use for potential customers as your foremost priority.

Dr. John P. Elcik, IV
The Pragmatic Web Designer

Tag: Web Design

Fonts as a Design Element, Part 1

Choosing your font

Serif or sans serif

Availability constrained by technology.

Technology advances

Breaking the rules

Remember, you are the designer.

Fonts as a Design Element, Part 2

Enhancing site readability

Font size

Contrast

Line length

Research and apply the results

Effective Web Design

Effective Web Design

Who Looks at Ads?

Content is King

Tips for Pragmatic Web Site Design

Getting Started in Web Design

The Basics of Web Design

What is Web Design