Web design fonts are typically defined in a CSS stylesheet. Best practice is to create a separate file for CSS definitions, such as style.css, then reference this file in the header of a webpage using the link tag: <link rel=”stylesheet” type=”text/css” href=”style.css” />

Here is a list of CSS Font definitions currently supported by web browsers:

ARIAL:¹

font-family:Arial,’DejaVu Sans’,'Liberation Sans’,Freesans,sans-serif;

ARIAL NARROW:

font-family:’Arial Narrow’,'Nimbus Sans L’,sans-serif;

ARIAL BLACK:¹

font-family:’Arial Black’,Gadget,sans-serif;

BOOKMAN: Easy-reading, wider and heavier than most serif fonts.

font-family:’Bookman Old Style’,Bookman,’URW Bookman L’,'Palatino Linotype’,serif;

CENTURY GOTHIC: Widely installed and should be used more in headings.

font-family:’Century Gothic’,futura,’URW Gothic L’,Verdana,sans-serif;

COMIC SANS MS:¹ People love it or hate it—there’s even a movement devoted to banning it. No Linux equivalent.

font-family:’Comic Sans MS’,cursive;

CONSOLE: Monospace sans, brighter and easier-reading than Courier-types, sets at same width.

font-family:Consolas,’Lucida Console’,'DejaVu Sans Mono’,monospace;

COURIER:¹ Monospace typewriter; Consolas looks better than Courier at smaller sizes.

font-family:’Courier New’,Courier,’Nimbus Mono L’,monospace;

GEORGIA:¹ Pretty for titles and headings but has annoying descended numerals.

font-family:Constantina,Georgia,’Nimbus Roman No9 L’,serif;

HELVETICA: Primarily a Mac font; should fall back to Arial to cover Windows machines.

font-family:Helvetica,Arial,’DejaVu Sans’,'Liberation Sans’,Freesans,sans-serif

IMPACT:¹ MS proprietary. Risky on non-win systems.

font-family:Impact, Haettenschweiler, ‘Arial Narrow Bold’, sans-serif;

LUCIDA SANS:

font-family:’Lucida Sans Unicode’,'Lucida Grande’,'Lucida Sans’,'DejaVu Sans Condensed’,sans-serif;

PALATINO:

font-family:Cambria,’Palatino Linotype’,'Book Antiqua’,'URW Palladio L’,serif;

SYMBOL: Greek & Math. Use where needed. Widely supported.

font-family:symbol,’Standard Symbols L’;

TAHOMA: Note: Has no italic face.

font-family:’Tahoma’,sans-serif;

TIMES NEW ROMAN:¹ Sets tighter than other serif fonts.

font-family:Cambria,’Times New Roman’,'Nimbus Roman No9 L’,'Freeserif’,Times,serif;

TREBUCHET:¹

font-family:’Trebuchet MS’,sans-serif;

VERDANA:¹ The best body font on the web—best at 16px high. Do not fall-back to Arial nor Helvetica: Verdana sets much wider.

font-family:Verdana,Geneva,’DejaVu Sans’,sans-serif;

WEBDINGS:¹ MS proprietary.

font-family:Webdings,fantasy;

WINGDINGS: MS proprietary. No Linux equiv.

font-family:Wingdings,fantasy;

ZAPF CHANCERY:

font-family:’Monotype Corsiva’,'Apple Chancery’,'ITC Zapf Chancery’,'URW Chancery L’,cursive;

ZAPF DINGBATS: Rarely used now—should not be used on web.

font-family:’Monotype Sorts’,dingbats,’ITC Zapf Dingbats’,fantasy;

1: These are available for Linux in the msttcorefonts package.

Here’s a custom list for a handy reference.

font-family:Arial,’DejaVu Sans’,'Liberation Sans’,Freesans,sans-serif;
font-family:’Arial Narrow’,'Nimbus Sans L’,sans-serif;
font-family:’Arial Black’,Gadget,sans-serif;
font-family:’Bookman Old Style’,Bookman,’URW Bookman L’,'Palatino Linotype’,serif;
font-family:’Century Gothic’,futura,’URW Gothic L’,Verdana,sans-serif;
font-family:’Comic Sans MS’,cursive;
font-family:Consolas,’Lucida Console’,'DejaVu Sans Mono’,monospace;
font-family:’Courier New’,Courier,’Nimbus Mono L’,monospace;
font-family:Constantina,Georgia,’Nimbus Roman No9 L’,serif;
font-family:Helvetica,Arial,’DejaVu Sans’,'Liberation Sans’,Freesans,sans-serif
font-family:Impact, Haettenschweiler, ‘Arial Narrow Bold’, sans-serif;
font-family:’Lucida Sans Unicode’,'Lucida Grande’,'Lucida Sans’,'DejaVu Sans Condensed’,sans-serif;
font-family:Cambria,’Palatino Linotype’,'Book Antiqua’,'URW Palladio L’,serif;
font-family:symbol,’Standard Symbols L’;
font-family:’Tahoma’,sans-serif;
font-family:Cambria,’Times New Roman’,'Nimbus Roman No9 L’,'Freeserif’,Times,serif;
font-family:’Trebuchet MS’,sans-serif;
font-family:Verdana,Geneva,’DejaVu Sans’,sans-serif;
font-family:Webdings,fantasy;
font-family:Wingdings,fantasy;
font-family:’Monotype Corsiva’,'Apple Chancery’,'ITC Zapf Chancery’,'URW Chancery L’,cursive;
font-family:’Monotype Sorts’,dingbats,’ITC Zapf Dingbats’,fantasy;

For comparison, here’s the old “web safe” list, which now isn’t:

Web-safe fonts (from fonttester.com):
font-family: Arial, Helvetica, sans-serif;
font-family: ‘Arial Black’, Gadget, sans-serif;
font-family: ‘Bookman Old Style’, serif;
font-family: ‘Comic Sans MS’, cursive;
font-family: ‘Courier New’, Courier, monospace;
font-family: Garamond, serif;
font-family: Georgia, serif;
font-family: Impact, Charcoal, sans-serif;
font-family: ‘Lucida Console’, Monaco, monospace;
font-family: ‘Lucida Sans Unicode’, ‘Lucida Grande’, sans-serif;
font-family: ‘MS Sans Serif’, Geneva, sans-serif; /* bitmap */
font-family: ‘MS Serif’, ‘New York’, serif; /* bitmap */
font-family: ‘Palatino Linotype’, ‘Book Antiqua’, Palatino, serif;
font-family: Symbol, sans-serif;
font-family: Tahoma, Geneva, sans-serif;
font-family: ‘Times New Roman’, Times, serif;
font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
font-family: Verdana, Geneva, sans-serif;
font-family: Webdings, sans-serif;
font-family: Wingdings, ‘Zapf Dingbats’, sans-serif;

Razworks usually used iStockphoto.com for stock images that are used in web design. However, Razworks recently discovered http://www.freestockimages.org, a small website with some quality stock images for free. The smaller selection certainly won’t replace commercial stock image websites like iStockphoto, but it is a great, free alternative.

<?php
$child_pages = $wpdb->get_results(“SELECT *  FROM $wpdb->posts WHERE post_parent = “.$post->ID.”   AND post_type = ‘page’ ORDER BY menu_order”, ‘OBJECT’); ?>
<?php if ( $child_pages ) : foreach ( $child_pages as $pageChild ) : setup_postdata( $pageChild ); ?>
<div style=”border:1px solid #e7e7e7;margin: 10px;padding: 10px;”>
<h2><a href=”<?php echo  get_permalink($pageChild->ID); ?>” title=”<?php echo $pageChild->post_title; ?>”><?php echo $pageChild->post_title; ?></a></h2>
<?php
$your_custom_field = get_post_meta($pageChild->ID, ‘your_custom_field’, $single = true);
?>
<?php the_excerpt();?>
<p style=”text-align:right;”><a href=”<?php echo  get_permalink($pageChild->ID); ?>” rel=”bookmark” title=”<?php echo $pageChild->post_title; ?>”>Read More…</a></p>
</div>
<?php endforeach;
endif;
?>

Often with a WordPress website, a client will want to display a list of the child pages of a parent page, with each list item displaying the title, excerpt and link to the page. This can be achieved by adding the following code to a page template (e.g.; loop-page.php):

Please sign a petition to the United States Congress to amend Sec 230 of the Communication Decency Act.

http://www.change.org/petitions/the-us-senate-amend-communications-decency-act-section-230

This will protect Americans from cyber bullies and Internet defamation mongers who profit from criminal libel.

Communications Decency Act Section 230 legalizes Internet Crime

A loophole in Communications Decency Act Section 230 allows criminal defamation to thrive on the Internet. Many website operators encourage, and sometimes manipulate the publishing of such malicious defamation, as it may result in significant revenue for the website operator. Website operators such as Yelp.com indirectly manipulate the content on their review website by disabling positive reviews while leaving defamatory reviews intact. The RipOffReport is alleged to perform more direct manipulation by editing defamatory content headlines to solicit better search engine placement. This freedom to commit criminal activity is a threat to the basic rights of all Americans. Defamatory websites are claimed to have been responsible for destroying the careers of reputable school teachers, forcing companies in good standing out of business, and inducing healthy children to suicide.

To protect the people of the United States from Cyber bullies and criminal defamation, Section 230 of the Communications Decency Act must be amended to define the rights of victims of malicious defamation on the Internet. The legislation should declare that, upon a victim’s request, if an Internet posting is clearly malicious, the website operator must remove the post, or be liable under the criminal libel laws of the state with jurisdiction.

The same civil protections that apply to newspaper, radio and TV should also apply to the Internet. In some states, criminal libel is a felony carrying up to 18 months in prison and a fine up to $100,000 for the first offense.  These laws also state that the owner or editor of the publishing company (newspaper, radio, tv) is also liable.

However, the United States Communications Decency Act Section 230 dismisses the owner or editor from liability for  third party authored defamation that is published on a website. Section 230 was not intended to legalize such criminal activities when it was adopted in 1996. It’s purpose was to nuture the growth of the Internet by providing legal exemptions. However, fifteen years after the fact, the Internet has become the dominant communication resource. The protections provided by Section 230 of the Communications Decency Act are not only antiquated and obsolete, but in contrary, they provide immunity to criminal enterprises who profit from committing illegal activities on the Internet in regards to libel and defamation.

To compare the United States Internet defamation laws to the rest of the civilized world, the United Kingdom, Germany, France, New Zealand, and Australia all have Internet publishing laws making the ‘website operater’ liable for defamatory content regardless of their ‘awareness’ of the content. The European Union, in the least, makes the ‘website operator’ liable for removing defamatory content when notified.

Any reputable American can become a victim of Internet defamation, the results of which often destroy that American’s reputation, career, and life. Please sign a petition to the United States Congress to amend Sec 230 of the Communication Decency Act.

http://www.change.org/petitions/the-us-senate-amend-communications-decency-act-section-230

Amending the Communication Decency Act Section 230 will protect Americans from cyber bullies and Internet defamation mongers who illicitly profit from criminal libel on the Internet.

It is often desirable to display categories on the home page opposed to products, then display the products on the respective category page. To add categories along with thumbnaile images on the homepage paste the following code into your homepage from the Magento Admin: CMS > Pages > Home.
{{block type=”catalog/navigation” name=”catalog.category” template=”catalog/category/list.phtml”}}

Create a list.phtml file in your Magento template files at: /app/design/frontend/default/default/template/catalog/category/list.phtml .
Paste the following code into this new list.phtml page:

I needed to create a left sidebar category navigation which display only the top level categories. The category display order in this navigation needed to be reverse that of the default category display order. For example, here is a screen capture of the Manage Categories interface in the Magento administration.

Below is a screen capture of the Magento shopping cart website frontend. Sorting the category order in the Manage Categories administration (shown above) will determine how the categories are sorted on the frontend.

The code to create this Magento vertical category navigation is:

<ul id=”category-nav”>
<?php foreach ($this->getStoreCategories() as $_category): ?>
<?php if($_category->name!=””):  ?>
<ul id=”category-nav”><?php foreach ($this->getStoreCategories() as $_category): ?><?php if($_category->name!=””):  ?><li><?php echo $this->drawItem($_category) ?></li><?php endif?><?php endforeach ?></ul>
<?php endif?>
<?php endforeach ?>
</ul>

But in the case of this particular ecommerce shopping cart web design, I need the top horizontal navigation to retain the sort order defined in Manage Categories, and the left sidebar vertical navigation to display a reverse order of that defined in Manage categories.

The code to create this Magento vertical category navigation with a reverse sort order is:

<ul id=”category-nav”>
<?php $helper = Mage::helper(‘catalog/category’);
$categoryCollection = $helper->getStoreCategories(false,true,false);
$categoryCollection->addAttributeToSort(‘level’, ‘asc’)
->addAttributeToSort(‘position’, ‘desc’)
->addAttributeToFIlter(‘level’, array(‘eq’ => ’2′));  //Added to limit to only level 1 categories.; ?>

<?php foreach ($categoryCollection as $_category): ?>
<?php if($_category->name!=”"):  ?>
<li><a href=”<?php echo $this->getCategoryUrl($_category); ?>”title=”<?php echo $this->htmlEscape($_category->getName(‘position’, ‘desc’)); ?>”>
<?php echo $this->htmlEscape($_category->getName()); ?></a></li>
<?php endif?><?php endforeach ?>
</ul>

Viral Video and SEO Value

By now most people in the web design industry are familiar with the subject of SEO, or search engine optimization. Everybody knows the basic concept: get links to your site and you will do better in the search engines. There is of course more to it than that, but at the end of the day that is the goal of any successful SEO campaign.

What could viral video possibly have to do with SEO? If optimization is all that’s on your mind, it can become tempting to ignore what is trending on the web. Can’t you accomplish what you want by doing article marketing and guest posts? Do you really need more info to get the job done?

No, but if you want to make your life easier and stay in touch with where things are headed, you can’t afford to ignore the world of viral video. Today, videos are shared on social networks and can quickly place your brand in front of a large audience. If you’re resistant to the idea of social networks, and you’re only concerned about links, you’re making a mistake by thinking that the two aren’t intimately connected.

The more people who know about your site, the more people will link to it. The more impact a video makes on somebody, the more likely somebody will link to it. Keep these basic principles in mind, and there is a good chance that you will draw a lot of traffic to your site. The most important aspect of the video is that it should be something people want to share. The most shared videos are cute, funny, sexy, or shocking. Keep in mind who your audience is, and create videos that will interest them. Keep an eye on your competition. Pay attention to what makes them successful, and take away a general sense of what worked. Don’t produce immitations. Videos only go viral if they catch people by surprise. If something seems at all rehashed, it doesn’t have the edge and people won’t want to share it.

Be sure to put your videos out there. Share them yourself using several different social bookmarking and networking sites. Most of these sites will share your material with more people if you are regularly sharing things that people find interesting, so be sure to share more than just videos.

The current and future status of Flash doesn’t look good for Adobe.

The Adobe Flash Internet media display technology has been, until the last year or so, a staple in website media. Flash had a 98% adoption rate among Internet connected computers. Flash often came pre-installed on consumer computer systems and was used religously by Internet developers. Often times an entire website was compiled within a single Flash file, with the 2% of non-flash users considered an acceptable loss. Flash was the king of the Internet and everyone believed that it would be here forever. Noone imagined that Flash would ever become obsolete. However, the iOS and HTML5 appear to have dictated the demise of Adobe Flash. Flash is becoming as relevant as dialup Internet, AOL, and the cassette tape.

As a website developer who exclusively develops modern, standards compatible web designs, Flash is on my ‘no list’. Numerous Internet sources are increasingly claiming that Internet access is graduating to mobile devices. Morgan Stanley research estimates disclosed in June 2011 that mobile device Internet access is nearly equal to that of notebook Internet access, and by 2012, mobile device Internet access will exceed that of notebook Internet access. Currently mobile Internet access is more than twice that of desktop Internet access. These facts are underscored by the ComScore report published in June 2011 that iPads and iPhones are now the dominant mobile web devices. This is to the dismay of Adobe Flash, as neither iPad nor iPhone support Flash. Therefore, anyone trying to view Adobe Flash on an iOS device will see only blank space.

Because of these trends, I often find myself recommending to potential clients that they replace the Flash animation on their website homepages with static images or HTML5 animated images. I I explain to my clients that, “with the popularity of the iOS and the release of HTML5 in 2010, the use of Flash on modern websites has become depreciated. Anyone who views your website on an iPhone, iPod or iPad cannot see the Flash animation, unless a special third party app is installed on their device”.

Just last week I had a potential client call and ask for advice regarding their website. “You called me just in time”, I told the oblivious website owner. “Your entire website is compiled inside of a Flash container, and therefore, a large percentage of your Internet audience can’t see your website at all!”. The client was shocked, as his website was only a year old. It looked real nice, as long as you had Flash installed on your computer. But on an iPhone or iPad, it was a big blank space.

I must admit that I am not an Apple user. I have an Android phone. I have 8 PCs. My son is the only one in my household with an Apple product, which is an iPhone. However as a professional web developer, it is part of my job to be very conscientious about Internet market trends. And the facts are clear. HTML5 is only going to become more predominant over the next few years, which will abate the presence of Flash. Apple continues to refuse to support Flash, and everytime Adobe launches technology to circumvent the lack of Flash support in iOS, Apple swiftly overrides Adobe’s attempts. Mobile devices will soon be the most dominant method for Internet access. And since the iPhone and the iPad dominate mobile Internet access, Adobe Flash has little future.

The last hope for Flash… Amazon Kindle. Only time will tell.

Sometimes ecommerce websites can have a lot of sub-categories. The Magento shopping cart provides an extremely flexible and powerful toolset to organize ecommerce shopping cart products and their respective category and sub-category parent child assignments.

But sometimes numerous sub-category levels can be overwhelming for the average shopping cart website consumer. There is a method in the Magento shopping cart administration to limit category levels globally for the whole ecommerce website. But what if you want to limit category levels for just one custom navigation menu. Here is how to do it.

Edit the template file, usually located in: app > design > frontend > default > your_theme > template > catalog > navigation >

The Magento category navigation code looks like this:

<ul id=”category-nav”><?php foreach ($this->getStoreCategories() as $_category): ?><?php if($_category->name!=”"):  ?><li><?php echo $this->drawItem($_category) ?></li><?php endif?><?php endforeach ?></ul>

Your Magento category navigation will now display only the top level category.

Magento offers a built in coupon code feature to provide shopping cart customers with discounts when shopping on their ecommerce website. You can post discount codes in emails, blogs and social networks to generate more traffic and entice paying customers to your ecommerce website. But often, website owners don’t want to offer discount codes on their shopping cart.  Fortunately for ecommerce web designers, it is quite easy to disable the discount coupon code function on a Magento shopping cart website.

Edit your checkout.xml layout file. The default file in Magento 1.6 would be located in app/design/frontend/base/default/layout/checkout.xml

Remove the following block:

<block type=”checkout/cart_coupon” name=”checkout.cart.coupon” as=”coupon” template=”checkout/cart/coupon.phtml”/>

This block can be found within <reference name=”content”>

Refresh the Magento cache and the discount coupon code menu will be removed.