All Posts Tagged With: "design"

The New Yahoo.com

Yahoo, yes (that Yahoo) made some significant changes to their main web site. While this angered some, to those I say this: Yahoo is not Google, and I’m glad it’s not. If you’re expecting Y! to be another Google clone, it isn’t. And it shouldn’t be.

The first thing I do on Yahoo is switch over to the compact view and change the color to blue (just my preference). This is located at the far right:

image

From there, Y! is slim and trim, the way I like it:

image

For those using 1024×768 displays, yes, Y! is still very friendly to that resolution (even in Y’s "full" mode).

image

Above: Adding in (or removing) favorites is easy. And yes you can add in non-Yahoo sites.

You will notice that at least in compact mode, Yahoo.com does not scroll-scroll-scroll down like it did before. It’s been cleaned up considerably and yes it is easier to use.

My only immediate complaints are these:

No links are underlined

I’m a fervent believer in having as many links underlined as possible to there’s no guessing whatsoever, especially for the color blind who cannot distinguish black text from blue.

Should have more my.yahoo.com features

My.yahoo.com has things like tabs and moveable boxes. The main Y! site should have this also.

If you’re going to have a logo color change, it should be universal

Pick a color and stick with it, Yahoo. Yahoo.com has a purple logo now. My.yahoo.com has a red logo. Mail.yahoo.com and several other Y! services still have the red logo.

If you’re going to commit to the purple, then, well.. commit.

Are you a Yahoo?

Many of you out there use Yahoo.com as your home page. Are the changes welcome or should Y! have stayed with the old format?

Tags: , , , ,

Web Designer’s Corner: Why IE 6 Still Matters

Ah yes, Internet Explorer 6. It has more holes than Swiss cheese, is exploited easily and is slow as molasses. It doesn’t even do tabs.

You might be thinking, "What moron would still use IE 6 when you could use 7 or 8?"

Corporations would, that’s who.

Windows 2000 is still used widely in the enterprise environment. And as anyone who uses 2000 knows, it won’t support any IE version higher than 6.

Additionally, the majority of enterprise environments absolutely will not allow the installation of any other browser, such as Firefox or Opera.

According to an article published on Lifehacker, a whopping 60% of companies still have the default browser as IE 6.

Concerning your web site or blog, if you want to ensure the widest possible audience, it should work in IE 6.

"But I don’t have IE 6 to test with", you say. Not a problem. There are ways around that.

Workaround 1: Install a virtual environment of Windows XP or 2000.

Download VirtualBox, grab your copy of XP or 2000 and install it, and you’ll get IE 6.

Workaround 2: BrowserCam

This is a web designer’s best friend for testing compatibility of your web site. It is a paid service but there is a free trial so you can see if it’s your thing or not. This service tests web sites in Windows/Mac/Linux using a plethora of different native-environment browsers from you to choose from. I have used this service before and it works great.

Workaround 3: Internet Explorer Application Compatibility VPC Image

"VPC" is "Virtual PC". Microsoft does understand that designers need to test things in previous editions of IE and has VHD (Virtual Hard Disk) images ready to download for that purpose.

This is essentially the same as creating your own virtual machine, but with Microsoft’s available offerings they’ve done all the work for you. All you have to do is download, install and go.

Web Design 101 – Colors And Fonts

I have been a long-time reader of both UseIt.com and Web Pages That Suck. Both concentrate on what’s called web usability.

Web usability can be defined by answering a simple question: How easy is it to use your web site? A large portion of ease of use comes from your selection of colors and fonts.

Color: Foreground and Background

Black on white is always better than white on black.

To some this may seem confusing because one would assume white on black is better. However the problem with that is text to the human eye tends to "fuzz" when reading white on black, be it in print or on-screen.

The only time white on black ever works is when the fonts are oversized and thick. But if you do that with your web design, the text is just too big.

If using color: Dark on light is better than light on dark.

Color: Links should be a primary color

On a computer monitor, the best link colors for black on white are the primaries of red, green or blue. Or in hexadecimal values: #ff0000, #00cc00, #0000ff.

Links are meant to be seen and should contrast against non-linked text.

Font: Links should be underlined

Although there is no rule that says "all links must be underlined", people expect a text-based link to have a line under it signifying a link to somewhere else.

Another reason for underlined links is to accommodate the color blind. Without the underline, many literally can’t distinguish a link from regular text.

There are some instances where non-underlined links are okay, such as buttons. When it is very obvious that the text represents a button, the lack of a line under the word is fine. For example, the top navigation bar PCMech is button-style. If read as a sentence it makes no sense so it is easily assumed they are button links.

Font: People usually prefer serif

This is another one of those instances where people are so used to a specific typeface that it’s okay.

Serif fonts are better known as "Roman" style, like Times New Roman and Georgia.

Sans-serif fonts are serif fonts without the serifs (i.e. the little "accents" at the end of strokes), such as Arial, Helvetica, Trebuchet MS, Verdana and so on.

The default font in nearly all web browsers is always serif – even on Linux (in Ubuntu, Firefox follows the global font settings and it’s usually Bitstream Vera Serif).

Windows users are obviously very used to seeing Times New Roman as it’s been around for a very long time.

Why serif and not sans-serif? Why do people prefer this? It’s because newspaper and books use it most. That’s what we’re used to seeing, therefore serif is the better way to go.

Font: Minimum 14-pixel size is recommended for main text

Monitor resolutions are increasing but the fonts are appearing smaller as a tradeoff. Years ago you could get away with 11 and 12-pixel font sizes on web pages, but the bare minimum these days is 14. It has to be that else you run the risk of people not being able to read what’s on your web site or blog.

14 pixels of font size on a Windows system using CSS is any one of the following:

  • 14px
  • .88em
  • 10.5pt
  • 88%

If you want to play it safe, use the standard 16px; the CSS font-size rule for that would be:

  • 16px
  • 1em
  • 11pt
  • 100%

Quick tips for when you encounter a site with bad design

Bad design is when the fonts are too small, the pages are white on black and so on. You can skirt around these issues easily by doing the following:

1. Know your zoom controls.

All modern browsers (IE, Firefox, Opera, Chrome, etc.) have zoom controls. Know them and use them. CTRL and plus-key increases, CTRL and minus-key decreases, CTRL and zero resets to default.

2. "Turn off" the design.

Firefox-specific: Click View, Page Style, No Style. The web site will then look like it was made in 1999, but it will be a nice plain-jane black on white with a serif font and easily readable.

I especially recommend this method for viewing MySpace pages as they are in my opinion the worst-designed pages on the planet.  Watch how much easier (and faster) it is to get around with No Style selected. The difference is like night and day.

To re-enable: Instead of No Style choose Basic Page Style.

Tags: , , , ,

Back-To-Basics HoTMaiL = Smart Move

imageThere’s a reason I used the odd-cased HoTMaiL in the title because that’s the way it was originally written out. You’ll notice the capital letters are HTML. Hotmail was spelled that way many moons ago to really drive home the fact it was HTML (meaning web) based mail.

Microsoft this week decided to roll out the new-and-improved interface across the rest (if not all) of Windows Live Mail accounts, and this obviously includes Hotmail.

Some people like it while others don’t like or outright hate it. You can put me in the camp of people that genuinely do like it because it goes back to the way Hotmail used to be – simple and fast.

The single largest complaint I’ve seen about the new Windows Live Mail interface is that people say it’s "boring" and that the previous interface was "just fine".

Not true.

The previous interface was no less "boring" than the new one and was so chock full of bloat that it made it a chore to use. While it’s true there are some things I miss (the "check mail" button and several icons are gone), the speed more than makes up for it. I don’t remember Hotmail being this fast since the early 2000s.

E-Mail is not supposed to be "exciting" to use. You want exciting and a super-cool animated in-your-face interface? Go play a video game; stay out of my e-mail.

Microsoft is now the first of the big three (Hotmail, Yahoo! Mail, Gmail) to roll out a single interface and stick to it. Yahoo! Mail allows for a "Classic Mode" and Gmail an "Older version" option. The reason? Because the current-generation interfaces are too bloated. Microsoft was doing the same thing with their own "classic mode" as well – but with the new interface that is no longer the case.

Since using the new interface with Hotmail I can honestly that yes, this is truly new and improved. You can read things easier, it loads faster, the learning curve is minimal and most of all – it acts like a cloud-based app is supposed to act like.

Google and Yahoo! are officially going to have to start playing catch-up at this point.

Link Love: Must-Read Sites For Web Designers

To this day I see a lot of web sites, be they blogs or otherwise, that are just… wrong. As in designed poorly. More often than not the audience is the last consideration most people have when designing their sites when it should be the first.

These links have nothing to do with software and everything to do with knowledge.

Web Pages That Suck

I am a long-time reader of this site. Vincent Flanders is an authority on pointing out design mistakes and is darn good at it. He has coined terms such as Flasturbation (using needless Flash) and Mystery Meat Navigation. It’s more or less a guarantee that if you’re new to design, there are things mentioned in this site that are wrong with yours.

CSS Tutorial

There is not a single application made that will do all your CSS for you. In order to learn CSS properly it must be done "by hand". For those who use WordPress themes you will inevitably run into the problem where a template just "won’t work". This is most likely because the CSS doesn’t "agree" with something you’re trying to add/remove/modify. If you know how to hand-code CSS you’re be way better off discovering out design foibles and fixing them.

PHP

PHP is a scripting language, and this is what you’re most likely using if you’re hosting your own site. The vast majority of sites (including PCMech) require PHP just to run and without it would be nothing but static pages that wouldn’t "talk" to each other at all. In today’s blogging world all the major blog engine offerings (WordPress, MovableType, etc.) use PHP with a MySQL database.

Like CSS, this is something that is best learned "by hand" using a plain text editor to write/modify PHP scripts.

The Bare Bones Guide to HTML

Although dated, the information contained in this guide is still relevant because there are still many instances where you have to use plain HTML to get things done. While it’s true that you can use CSS to do most things HTML can, doing it via HTML is faster and easier.

Small example of the difference between the two:

In HTML, to make something bold you can use <strong>bold text here</strong> or just <b>bold text here</b>.

Doing the same in CSS would be <span style="font-weight: bold">bold text here</span>.

The HTML way is much faster and does the same job, hence the reason you should know it in the first place.