Anna Ullrich

“Sadistic” Web Developers Taunt Internet Explorer 6 Users

2009-08-06T21:59:28Z

There’s a good article on CNN.com today titled “Web citizens trying to kill Internet Explorer 6”, about web developers going on the offense to get users of IE 6 to upgrade their browser. I was hoping to see Expression Web MVP Morten Rand-Hendricksen’s own website Stop Living In The Past mentioned in the article, but the article only mentions http://www.ie6nomore.com/ and http://www.bringdownie6.com/, although there are many more sites out there devoted to squashing IE6.

Web developers are naturally motivated to kill IE 6 primarily because it would make their jobs much easier. At the same time, the phrase “job security” always comes to mind when I hear web developers complain about this or that browser quirk they have to troubleshoot in order to perfect their client’s website. If getting a website to look consistently across multiple browsers was as easy as web developers wish, the job market for developers might shrivel up! ;)

Out of curiosity I opened that CNN article in SuperPreview, comparing the page as it appears in FireFox 3 with the page as it appears in IE 6, to see how well the CNN web developers did in accounting for IE 6 readers. Pretty darn good. The content is all readable, that’s most important, but there are big shifts in the layout; guess it’s time to get back to work CNN web developers!

In case you’re wondering, the title of this post is inspired by a quote in that CNN article from a post by Mark Trammel of Digg, which reads “Giving them a message saying, “Hey! Upgrade!” in this case is not only pointless; it’s sadistic.” True, true …

Song and video inspired by Microsoft Windows

2009-07-15T21:22:13Z

I’m so in love with this song and video right now. Jib Kidder’s “Windowdipper”:

I learned about the song while watching So You Think You Can Dance . Do not judge me! :)

Get your copy here: http://www.statesrightsrecords.com/

Make Web Not War

2009-05-19T23:55:12Z

Picked up a bunch of these awesome bumper stickers from a colleague today. Make Web Not War is the tagline for http://www.microsoft.com/web .

Lorem Ipsum Code Snippet

2009-05-08T00:51:00Z

I just made my first contribution to the newish Gallery section of the Expression Community website where anyone can add content and templates to share. Here’s a screenshot of the current categories:

One of many cool things about the gallery is that you can select a friendly URL name for your contribution and it’s instantly generated. I chose LoremIpsum because I contributed a code snippet that enables Expression Web users to easily insert up to five paragraphs of Latin lorem ipsum filler text into their page.

Here’s the URL of my contribution:

http://gallery.expression.microsoft.com/LoremIpsum

The following is a cropped screenshot of my code snippet page in the Gallery. As you can see, when you’re logged into the site, you can continue to edit, unpublish, or delete any contribution you make to the Gallery. They even provide download statistics:

The Description area at the bottom is where I provide instructions for Expression Web (versions 1 and 2) users to use the Code Snippet. I’ll repeat those instructions here with additional illustrations.

Adding the Lorem Ipsum code snippet to Expression Web (either versions 1 or 2)

This code snippet adds five new snippets to the list of Code Snippets in Expression Web 1 or 2. The snippets enable you to insert one to five paragraphs of lorem ipsum Latin filler text which you can use as a placeholder for content in your web pages.

Here’s how the new code snippets appear within the Code Snippets list in Expression Web after you’ve installed them:

To add this Code Snippet to Expression Web, do the following:

Download the ZIP file from this page and then extract the file. You should have a file named LoremIpsumLatinFillerText.xml .
Copy the LoremIpsumLatinFillerText.xml file to one of the following locations on your computer, depending on your operating system:
- Windows XP:
  C:\Documents and Settings\[your windows user name]\Application Data\Microsoft\Expression\[your version of Expression Web: Web Designer | Web 2]\Snippets
- Windows Vista:
  C:\Documents and Settings\[your windows user name]\AppData\Roaming\Microsoft\Expression\[your version of Expression Web: Web Designer | Web 2]\Snippets
In Expression Web, open a web page, go to the Code view and put your cursor where you want the lorem ipsum text to appear, and press CTRL + ENTER. A list of code snippets should appear, like this:

Type lorem to jump to the lorem ipsum code snippets in the list, and then double click the code snippet that you want.

To learn how to create your own Code Snippet for Expression Web, see this post of mine:

Creating a "content" snippet

Give up CSS layouts and use tables

2009-04-23T05:39:30Z

The clock is ticking ….

http://giveupandusetables.com/

( Thanks to Janko Jovanovic for making me aware of this site )

effectively communicating with your web development colleagues

2009-04-06T21:08:10Z

Here’s a gem from the Vimeo team on communicating effectively:

Auto Tuning from Casey Donahue on Vimeo

http://vimeo.com/3718294

Save Internet Explorer 6

2009-04-02T01:19:21Z

Just stumbled on this website which happened to launched on this special day, April 1, 2009:

http://www.saveie6.com/

Test your sites in different versions of Internet Explorer (Part 2) – Introducing SuperPreview (BETA)

2009-03-18T22:40:00Z

My earlier post Test your websites in different versions of Internet Explorer has received a lot of hits since posted it and so I'm really pleased to submit this follow-up post on a new feature developed by my Expression Web team called SuperPreview that helps with the same problem.

Rather than repeat what others have already written about so far, I'll just post links to their reviews and our articles on SuperPreview:

http://www.sitepoint.com/blogs/2009/03/19/microsoft-superpreview-website-tester/

http://www.webdesignerdepot.com/2009/03/microsoft-announces-superpreview-for-ie-browser-testing/

http://www.istartedsomething.com/20090318/expression-web-superpreview-cross-browser-testing/

http://blogs.msdn.com/xweb/archive/2009/03/18/superpreview-technology.aspx

http://blogs.msdn.com/xweb/archive/2009/03/18/Microsoft-Expression-Web-SuperPreview-for-Windows-Internet-Explorer.aspx

http://expression.microsoft.com/en-us/dd565874.aspx

http://www.designisphilosophy.com/microsoft-expression-web/introducing-expression-web-superpreview-cross-browser-testing-at-your-fingertips-20090318/

Video interview with Erik Saltwell from the Microsoft Expression Web team:

http://visitmix.com/News/Expression-Web-SuperPreview

Download the free public BETA version of SuperPreview here:

http://download.microsoft.com/download/5/6/8/568F0D28-0434-4794-B7FC-FB293BCC98FB/SuperPreview_Trial_en.exe

Oh to be young again, and free to form a global media company…

2009-03-18T00:38:51Z

I received an email from Twitter last week, informing me that 9miles was now following me on Twitter. Turns out 9milesmedia.com is a group of 9 teenagers (ages 13 – 16) from all over the world doing some impressive creative work in web and graphic design.

Gee, I was playing the flute in marching band when I was their age, not forming a global media company!

New forum at Smashing Magazine

2009-02-13T08:52:14Z

Smashing Magazine has launched a new forum:

http://forum.smashingmagazine.com/

And they’re giving away web-related books to randomly selected registered forum members this Friday, Feb 13, 2009:

http://www.smashingmagazine.com/2009/02/09/smashing-forum-launch-and-books-giveaway/

If you get in early, you can get the username you want as I did…I got the username Anna :)

The vexing hunt for HEX values

2009-02-12T10:49:00Z

I’ve watched a lot of web developers jumping between their HTML code editor and their page comp in Photoshop to look up the hexadecimal value of colors in the page comp. Should be a simple process but the steps they take are often painful to watch. So I decided to write up some Photoshop tips to show some better ways to look up HEX values in Photoshop.

The musty crusty out-of-the-way Color Picker way

The workflow I see web devs use to look up HEX values in Photoshop is often:

Click a color in your page comp with the Eyedropper tool:
Double-click the foreground color swatch in the Tools panel

to open the Color Picker dialog box.
Select the hex value at the bottom of the Color Picker dialog box, and copy it.
Then return to the code editor and paste.

Bleh, that’s pretty awkward, plus who likes the whole dialog box experience? …suddenly taking you out of your workspace and freezing the entire application to focus on only the dialog. Especially annoying when you’re in the dialog but discover you need to back up and select something else, then reopen the dialog box.

Use the Info panel to look up HEX values

The default INFO panel settings show the RGB and CMYK values of the color under your pointer as well as the XY coordinates and dimensions. But why just accept the default settings? You deserve better, so check this out.

Click the options button in the upper right of the panel and click Panel Options:

to open the Info Panel Options dialog box:
Then click the Mode menu under either the First Color Readout or Second Color Readout, and select Web Color and then click OK.

Voila…now when you move your cursor over an image in Photoshop, the HEX values appear in the readout you just set in the panel options:

One inconvenience is that you can’t copy the values in the INFO panel, you’ll have to hand type the values into the code editor. And second, the values disappear as soon as you move your pointer away.

Use the COLOR panel to look up HEX values

Next method I’ll show you is to use the COLOR panel. By default the panel provides you with RGB sliders:

But again, stop settling for the default settings!

Click the options button in the upper right, and then select Web Color Sliders:

Now after you click on a color with the Eyedropper tool the COLOR panel shows the HEX values:

No musty dialog box required! Plus instead of four steps, all you have to do is one: click with the Eyedropper tool on a color. You could copy and paste each set of HEX values in the COLOR panel, but it’s probably easier to type them manually in the code editor. Or read on…

Use the Copy Color As HTML command…

…In the COLOR panel

The Copy Color as HTML command can be useful in many circumstances. One place to access this command is in the Options menu in the COLOR panel:

When you click Copy Color as HTML, the current hexadecimal color in the COLOR panel is copied, and when you paste into the code editor, you get this:

color="#d09d9c"

Sometimes that’s useful, but not if you need something like

background-color:#d09d9c

or many other things, so would be better if what was copied was just the HEX value instead of Photoshop assuming the property you want.

…In your document

You can also access the Copy Color as HTML command while sampling color with the Eyedropper tool in your document.

Just put the Eyedropper over the color you want to sample, then right-click and select Copy Color as HTML:

Easy smeezy!

Separating the wheat from the chaff: Script & Style helps you find the best web development articles

2009-01-28T10:18:00Z

The Community Server control panel for my blog purports to show me what site a person was on when they clicked a link and came to my blog. Looking at the panel tonight, I noticed many hits coming to my post “Test your websites in different versions of Internet Explorer” from scriptandstyle.com where my post was included in the queue. So I thought I’d return the love and blog about Script and Style where web developers, web designers, markup monkeys, etc. can submit links to articles they think are interesting and are about “the latest and greatest in XHTML, CSS, and javascript.”

The submissions are all moderated behind the scenes to ensure only good stuff is posted. The latest links to articles include the following:

From webdesignfromscratch.com: This article shows you how to use CSS floats to achieve any column layout, while keeping your most important content highest on the page.
From CSSGlobe.com: New version of the Easy Slider plugin for jQuery is here. It features auto slide, continuous sliding, multiple sliders on one page and more…
From new.uxmatters.com: Beyond Usability: Designing Web Sites for Persuasion, Emotion, and Trust - The next wave in Web site design is persuasive design, designing for persuasion, emotion, and trust. While usability is still a fundamental requirement for effective Web site design, it is no longer enough to design sites that are simply easy to navigate and understand so users can complete transactions. As business mandates for Web site design have grown more strategic, complex, and demanding of accountability, good usability has become the price of competitive entry. So, while usability is important, it is no longer the key differentiator it once was.

And of course my post on testing websites in different versions of Internet Explorer. Good stuff !

HTML, CSS, and JavaScript reference at your fingertips: FireScope add-on for Firefox

2009-01-27T22:27:00Z

SitePoint has released the “first phase” of their JavaScript reference, and they’ve also completely redesigned their Reference Site for improved usability. To coincide with the redesign, they’ve released a handy Firefox add-on called FireScope to integrate their HTML and CSS reference (sadly not their new JavaScript reference) into Firebug and your Firefox browser:

http://tools.sitepoint.com/firescope

Here’s a screenshot of the new Reference panel in Firebug:

Read the list of features on the SitePoint website to learn more about the tool:

http://tools.sitepoint.com/firescope/

Test your websites in different versions of Internet Explorer

2009-01-26T02:33:00Z

[Update March 18, 2009 - see my new post about a new feature called SuperPreview for testing your website in multiple versions of IE: http://blogs.msdn.com/anna/archive/2009/03/18/test-your-sites-in-different-versions-of-internet-explorer-part-2-introducing-superpreview-beta.aspx . Now back to the original post ....]

Many web developers that I know rely on multiple physical machines or virtual environments to test their websites in different versions of Internet Explorer. Seems to be one of the most time consuming tasks that a web developer does…not just tweaking their markup to ensure cross-browser compatibility, but also the manual process of pulling up each page of their website in different browsers, browser versions, and on different platforms to boot.

Some alternatives exist for testing your website in different versions of Internet Explorer, including:

IE Netrenderer - http://ipinfo.info/netrenderer/
I just discovered this one today while reading some threads on the tcwebpros.org discussion alias, and am surprised I haven’t heard of it before. It has one of the easiest to use interfaces and fastest results for this type of online screenshot service. Just go to their website, insert the URL you want to test, select the version of Internet Explorer that you want to test in, and click Render. Here’s a screenshot of their website showing the Microsoft Expression homepage as it appears on Internet Explorer 6 – wow, the site looks perfect!
r
IETester - http://www.my-debugbar.com/wiki/IETester/HomePage
I found out about this application from Chris Coyier who apparently develops on a Mac and uses IE Tester to check the appearance of his sites on different versions of Internet Explorer. Seems reliable but I can’t help but wonder about the fidelity of it compared to viewing a page in the browser itself.
And last, and yes least, on my list is Browsershots http://browsershots.org/
I say “least” because the process is just too slow and that gets frustrating, especially when you wait and wait and the screenshot has failed or something.

Twitter on PHP versus ASP.NET

2009-01-24T00:27:00Z

NETTUTS is a good website for web development and design tutorials: http://nettuts.com/.

Jeffrey Way, the person behind the NETTUTS website also maintains a NETTUTS profile on both Facebook and Twitter where his latest statuses caught my eye.

Turns out he innocently posted an update to TWITTER in support of ASP.NET with a slight knock against PHP, and apparently that brought a lot of responses from other Twitterers, both ASP.NET and PHP developers on PHP vs. ASP.NET.

Here are NETTUT’s tweets in order of their appearance:

I just received a fantastic series of about 25 ASP.NET (C#) videos that we'll be posting on the site. Really excited to offer these.
People are quick to attack ASP.NET - mostly because of ignorance. Take a look at what corporations are looking for. You won't see much PHP.
Not to say that I don't love PHP; I do...very much so.
Obviously you can still find a job in PHP. But in general, big corporations don't use it. Does your bank use PHP?
@zacharyjohnson - Are you sure you know the definition of "agnostic"? I'm stating facts, not opinions. I love both.
Last tweet. There's more than plenty to go around. Many successful companies use PHP. But, from my experiences, the majority of them don't
I'm sorry I brought it up. I never said that big companies don't use PHP. These are just statistics that I'm reciting. I love PHP too!

LOL!

To read the responses from other Twitterers which NETTUTS was reacting to, check out this search for replies posted the same day:

http://search.twitter.com/search?q=&ands=&phrase=&ors=&nots=&tag=&lang=en&from=&to=&ref=nettuts&near=&within=15&units=mi&since=2009-01-23&until=2009-01-23&rpp=50

Being on the Expression Web team, although I work at Microsoft, I could care less whether you choose PHP or ASP.NET since Expression Web supports both PHP and ASP.NET anyway!