ZDNet Website Redesign

One of my favorite websites for browsing the latest tech news is ZDNet. This morning, I noticed a new website redesign. It’s cleaner, cooler, compact and ad-friendly I might add. I’m digging it. I love the homepage slider feature, although I think it’s too fast. The footer section is much, much bigger.

In terms of color, the blue colors seems to be much darker than the previous design, although I don’t have the old site up for a side-by-side comparison. The website reminds of the kit of the US Mens National Team for this summer’s World Cup in South Africa. The US National unis have also gone dark the last couple of years.

I think the biggest improvement of the website redesign is the comments section. I use to dread reading comments because I had to click on each one of them to read them. That’s no longer the case. It’s structured similar to how most blog comments are displayed these days, in chronological order.

As in any new website redesign, I found a couple of kinks. There are several broken links, but I’m sure they will fix that soon. It will take a while for me to learn the new site. Navigating is a bit awkward at first, but improving the comments structure is by far the best thing that’s happened to this site.

CSS Font Order

When designing web pages, using the appropriate font for your design does wonder to the overall look, feel and layout of your page. Unfortunately, web designers are quite limited to the fonts they can use. Most web designers stick to the tried and true “web safe” fonts.

If you take all considerations including operating systems: Windows, Mac OS X, Linux, Unix, and browsers: IE, Firefox, Safari, Opera, etc, then you are really stuck with just 3 of the safest fonts on the web. They are: Arial/Helvetica, Times New Roman/Times, and Courier New/Courier.

Other fonts that work across platforms are: Palatino, Garamond, Bookman, and Avant Garde.

Fonts that work in Windows and Mac OS, but not in Unix+X are: Verdana, Georgia, Comic Sans MS, Trebuchet MS, Arial Black, and Impact.

If you like to consider all OS platforms in your design, then the order of your fonts in CSS is important. I recommend this sequence.

Establish a Baseline

At the very least, you need to establish your baseline font. Choose whether you want “Serif or Sans-Serif” font. The CSS would look something similar to this:

html { font-family: Serif}
html { font-family: Sans-Serif }

Choose a Web Safe Font

Next, choose a “web safe” font. Your choice comes down to either taking Arial/Helvetica, Times New Roman/Times, and Courier New/Courier. Most people don’t use the monotype Courier font except when displaying code. So, you are essentially down to four fonts, Arial/Helvetica or Times New Roman/Times. Helvetica is very popular. Arial is not far behind. New Times Roman is better than Times. In our example, will now look like this:

html { font-family: Times New Roman, Serif }
html { font-family: Arial, Sans-Serif }

Choose a Cross-Platform Font

If you must, you can choose a “cross platform font.” Again, our choices are: Palatino Linotype, Garamond, Bookman, and Avant Garde. The first 3 are Serif fonts. Avant Garde is the only Sans-Serif font.

html { font-family: Palatino Linotype, Times New Roman, Serif }
html { font-family: Avant Garde, Arial, Sans-Serif }

Add Other Fonts

If you must, you can choose other fonts, although they do not work in Unix+ systems. They are: Verdana, Georgia, Comic Sans MS, Trebuchet MS, Arial Black and Impact.

html { font-family: Georgia, Palatino, Times New Roman, Serif }
html { font-family: Verdana, Avant Garde, Arial, Sans-Serif }

There you have it. A safe way to implement CSS Fonts across all OS platforms.

New Theme Called Theme

I haven’t changed themes in more than two years, which is very hard to believe. Several years ago, I change themes at least once a month. It’s just shows you how happy I was with the old theme to stick with it for more than two years.

I think it’s time for something new. This is just a simple theme that I quickly designed to spice things up a bit. I’m not sure what to call the theme at the moment, although it’s temporarily called “Theme” for lack of a better name.

It’s a one-column theme, with a dark blue background. I’m using a bunch of links to simulate a header. It’s kind of neat the way it turned out. I’m not sure yet how long I will stick with this one, but I love the simplicity and the speed.

Maybe, I will release it as an open-source theme.

Start Your Own URL Shortener

Are you thinking about running your own URL shortener? If you own a blog or a website, you should consider. There are many valid reasons why you should own your own url shortener.

#1 Branding

Having your own url shortener promotes your website and your blog. Your visitors will see your unique link. When you tweet or share a link with someone, the link you share is yours. It’s unique. It carries your own brand. The short url from bit.ly, tinyurl.com, is.gd, tr.im, cli.gs or from any other 3rd party service works great, but it’s not yours. My personal url shortener is uly.me. Every article on my blog has a short url. Check out the short url at the end of this article. You will see a Tweet This button below.

#2 Independence

There are over 100 url shortener services on the internet. Most of these 3rd party url shortener services are free. There is, however, no guarantee that they will keep their services up and running for eternity. You, however, have control of your own website and your own links. You can control how url shortener behaves. You’ll have the option to determine which hashing methods to use, from base36 to base64, from sequential to random. You call your own shots.

#3 Statistics

Another reason for having your own url shortener is you want to keep track of your statistics. Not every url shortener service has statistics. Every time you’ve send an email with a link, you want to know if your recipient has clicked on your link. If you sent a tweet, you would like to know how many people have clicked on your links. Statistics informs you of the effectiveness of your tweets.

#4 Security

Some people don’t trust short urls since they are essentially cloaked links. There is no telling where a cloaked link will take you. Cloaked links can lead someone to an untrusted or a phishing site. You could easily acquire a virus, malware, adware or spam when you land on an untrusted site. If you run your own website or blog and you use your own short urls, you establish trust with your own readers. On top of that, you are promoting your own brand.

How do I make one?

Ok. convinced. How do I get started? How do I make one? The good news is you can get it here. My url shortener script is available for only $49.99. See features below:

Try the Demohttp://uly.me

Features

  • Requires PHP, MySQL, .htaccess
  • Works with any domain
  • 1 configuration file.
  • 1 second install
  • Base36 encoding
  • Can be modified to use Base64
  • Sequential links from 10000 to zzzzz
  • Hashing can be set to random.
  • Supports up to 2 billion links
  • Statistics: display number of clicks
  • Statistics: display last 10 links
  • Search for partial keywords
  • API: simple integration with 3rd party software
  • API format: create.php?url=http://longurl…..
  • URL format of http://short.url/1z35sf
  • Seamless integration with WordPress and Twitter
  • WordPress: works great with Tweet This plugin
  • Creates short url link when publishing a WordPress article
  • Price includes installation, support and updates

Try the Demohttp://uly.me

Purchase for only $49.99

WordPress Plugin: Drop Caps

Here’s another WordPress Plugin called Drop Caps. A Dropcap is when the first letter of a paragraph is enlarged to “drop” down two or more lines. It’s a very common typeset used in magazines and now a few blogs. I’m releasing this plugin similar in look to the Dropcaps article I wrote two years ago. Check out the first letter of this very paragraph. Download the plugin and place it the plugins folder of your WordPress install. Activate and that’s it. Enjoy.

Download - downloaded 912 times. Version 0.1. Filesize 982 bytes.

Display None In CSS

One of the coolest tricks in CSS is to suppress the display of certain elements in your web page using the “display:none” property. This trick is extremely helpful for two reasons. One, there are times you don’t want to remove code essential for Search Engine Optimization such as the H1 header for example, but you don’t want it showing up on your browser.

Deleting the HTML code will completely eliminate it from a seach engine perhaps losing valuable points. Suppressing the display may be your best option since search engines are still able to read your H1 header. It’s just not displayed on the screen. To suppress the display of H1 in this example, we need to add this CSS code to our stylesheet.

h1 {display:none;}

The second use for “display:none” in CSS is for printing purposes. Often times, many web designers will make a separate stylesheet just for printing. Items such as graphics, menus, certain divs that are not necessary can be suppressed making for a very simplified print output. You can do something similar to your web page using the code below.

img, #menu, #widget {display:none;}

Display:none. Give it a try.

Firefox Web Developer Extension

The Web Developer Extension is a plugin extension for the Firefox browser. It’s a great tool for web designers or for anyone who owns and manages their own website. Here are some of the Web Developer’s features:

Features

  • It has a Disable function to turn on and off cache, Java and Javascript, disable page colors, pop-up blockers, minimum font-size and referrals.
  • It has a Cookie function which allows you to clear, delete or view a cookie. It’s great for troubleshooting authentication. You can also clear session cookies, delete domain cookies and delete domain paths.
  • The CSS section allows you to edit CSS on the fly without uploading styles to the server. If there are multiple CSS regardless of type whether they be inline, print or embedded. You can enable or disable one type or several types or any other combination. You can also enable the CSS box model.
  • The Forms section has a feature which allows you to manipulate form elements, remove maximum lengths, view passwords, enable form fields, auto complete, clear radio buttons, populate form fields, etc.
  • The Images section allows you to disable images, display alt attributes, image dimensions, file sizes, image paths and find broken images. In addition you can also hide images, background images, make it full size, invisibile or replace images with Alt attributes.
  • The Information section allows you to display abbreviations, access keys, anchors, block sizes, div orders, element information, id and class details, link details and a whole bunch more. You can also display table depth and table information, title attributes, topographic information and a lot more.
  • The Outline section will display frames, headings, links, tables, block size elements, deprecated elements, positioned elements as well as outline current elements and custom elements. It can display element names when outlining.
  • The Resize section allows you to display different window sizes, e.g. 800×600, 1024×768, 1280×1024 or any custom size you want. You can display windows size or windows size in the title. In addition, it also has a zoom in and a zoom out feature.
  • The Tools section allows you to validate CSS, feed, HTML, links, section 108 and WAI. It has a DOM inspector, an error console and a Java console. It can display page validation, validate local HTML or CSS.
  • View Source allows you to display HTML source code, view a frame or from a generated source.
  • Finally, Options allows persist features.

Download

If you are running Firefox, you can download the Web Developer extension from Firefox’s website. Double click on the downloaded item and the Firefox browser will automatically add the extension for you. A restart of your Firefox browser is necessary for the extension to work. You can validate the extension is working by clicking Tools – Add-Ons form your Firefox menu. Check the Web Developer Toolbar on your Firefox browser.

Playing With CSS

The added benefit of having Web Developer Tool is the ability to edit CSS on the fly. If you want to try a different font, different size, different color, background, borders, margins, padding, practically anything to do with CSS, you can make the changes in the Web Developer tool and see the changes instantly. There is no need to upload your new CSS code to the server every time you want to try something new. The Web Developer tool saves you time when playing around with CSS.

Sage Theme: Seeing Red

Sage is a lightweight RSS and Atom feed reader extension for Mozilla Firefox.

List of Features:

  • Reads RSS (2.0, 1.0, 0.9x) and Atom feeds
  • Newspaper feed rendering customizable via style sheets
  • Feed Discovery
  • Integrates with Firefox’s bookmark system
  • Imports and exports OPML feed lists
  • Support for a number of locales: Argentine Spanish, Catalan, Chinese, Czech, Danish, Dutch, Finnish, French, German, Greek, Hungarian, Italian, Japanese, Korean, Polish, Portuguese, Russian, Serbian, Slovenian, Spanish, and Swedish
  • Simple, one step install / uninstall

If you use Sage, try a new theme I just released called Seeing Red.

Download

Black Green Theme

Introducing my latest WordPress theme called Black Green. It’s simple, ultra-minimal and uses an Ajax Accordion script. The theme is a spin of the Black-Letterhead theme, but it’s more elegant and simpler. See the Accordion script in action by clicking between the Articles and Archives links. For support, please visit the Support Forum.

Download - downloaded 1510 times. Version 0.1. Filesize 17.66 KB.