PeteL's Blog : web design

Testing Multiple IE Versions, VPC’s and Super Preview

PeteL — Mon, 20 Jul 2009 21:40:42 GMT

It’s been almost 2 years now since we first shipped the Internet Explorer testing VPC’s so that you could test IE6 and at the time IE7 on the same machine. We understand the need for people to test IE6, IE7 and IE8 on the same machine, and remain committed to shipping the VPC’s!

The VPC’s will remain an important component of testing your sites, because they give you a real, and accurate way of seeing how your site interacts with not just rendering, but JavaScript, and other components in the browser.

But there’s a new option that will work fantastically for testing layout and rendering of pages, Expression Web SuperPreview. SuperPreview allows you to compare multiple rendering engines side by side, or even super-impose one over the other. For example, you could see what a page looks like in IE6 under the same page in IE7. Does everything line up, are the images in the right place, are the right fonts used. SuperPreview for Internet Explorer is free and can be downloaded on the Expression Web website.

The limitation of SuperPreview For Internet Explorer is that it only supports the different rendering engines of IE. Now that’s great, but we all know that IE is not the only browser on the internet – wouldn’t it be great if you could do IE8 overlaid on Firefox 3.5? But you can! The full version of SuperPreview that comes with Expression Web, supports all of the IE rendering engines, and also supports Firefox! The full version of SuperPreview comes with Expression Web, which will be available later this summer – keep an eye on on the Expression website for when it’s released.

The big difference between SuperPreview and a lot of the other tools you can use online is that SuperPreview is either free (with the only IE limitation), or you need to purchase it as part of Expression Web; but once you’ve purchased it, it’s yours, it’s not a service you have to pay for every month, or per use. And most of those online services don’t give you the ability to interact with the DOM, do overlays, and a lot of the other cool features that SuperPreview has.

Soma has a really great blog post about Expression Web 3, and goes into some cool detail about SuperPreview.

Enjoy!
PEte

PS: I’m working on updating the next set of VPC’s. We’re trying something new this year, so hopefully you’ll see them sooner and with more regularity.

Setting X-UA-Compatible with ASP.NET Pages

PeteL — Wed, 15 Apr 2009 18:47:00 GMT

I got an email today asking about the best way to go about adding the X-UA-Compatible tags on ASP.NET pages where you’ve got a master page, and may want to over ride the X-UA-Compatible tag in some content pages, but not others.

After playing around with it in Visual Studio for a few minutes, I pulled together the following scenarios:

Access To The Server

The optimal way to do this, if you have server level access, is to add the IE=EmulateIE7 as an HTTP Response Header from the server. Then, any pages served from that server will be rendered in IE7 mode. If Internet Explorer finds the X-UA-Compatible tag in both the HTTP Response Header, and as a META tag, the META tag will win out. Thus, if you've added the IE=EmulateIE7 to the server, you can over ride it by using the following code snippet:

protected void Page_Load(object sender, EventArgs e)
{
     HtmlMeta xuac = new HtmlMeta();
     xuac.HttpEquiv = "X-UA-Compatible";
     xuac.Content = "IE=EmulateIE8";
     Header.Controls.AddAt(0, xuac);
}

One quick note about the Page_Load method, you'll note I use the Header.Controls.AddAt(0, xuac) method. The X-UA-Compatible tag needs to occur BEFORE any code on the page is run, if it doesn't IE will ignore the X-UA-Compatible tag; so it's best to makes sure this is the first tag on the page.

No Server Access

If you don't have access to the server, and you want to put the X-UA-Compatible tag in the ASP.NET MASTER page, you could do something like this:

In the master page, I'd create a Content Place Holder:

<asp:ContentPlaceHolder ID="cphMeta" runat="server">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
</asp:ContentPlaceHolder>

Then, in the individual pages, where you want to override, and go to IE8 standards, you'd insert

<asp:Content ID="Content1" ContentPlaceHolderID="cphMeta" runat="server">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
</asp:Content>

Top 10 Web Mistakes [From TechEd EMEA]

PeteL — Fri, 14 Nov 2008 19:20:00 GMT

I just finished presenting my last session of TechEd EMEA for 2008 and I'm sad to be leaving! But, hopefully I'll get another chance next year.

My last session was a repeat of "Top 10 Web Mistakes" and I said I'd post some of the sites that I showed during the session, so here they are.

Sites That Suck
http://www.teacherxpress.com/
How am I supposed to find content on this site?

http://www.continental.com
Some validation errors are okay, others, maybe not so much.

http://www.samanzerin.com/
I don't even know where to start, figuratively or literally.

http://www.wsdot.wa.gov/traffic/seattle/flowmaps/bridges.htm
http://wsdot.wa.gov/traffic/
Nice to see consistency on here. :)

http://www.toyjoy.com/
Only pop ups? Really?

http://twitter.com/home
Think about your work flow.

http://www.miniusa.com/#
Try turning JavaScript off and count the clicks to a 404.

http://www.ccps.k12.fl.us/schools/LBHS/
A little too much flash for me.

http://www.barcelona.com/
Hmm, ad too much?

http://seattletimes.nwsource.com/html/home/index.html
Let's find a creative way of putting ads on a page.

http://users.hunterlink.net.au/~mbbjsj/index.htm
http://www.havenworks.com/
http://www.5safepoints.com/
http://web.archive.org/web/20060613061524/http:/moire.ch/
If only there were a group like Doctors Without Boarders, Designers Without Boarders.

Sites That Rock
http://www.BrightCreative.com
GREAT use of isolating hacks!

Thanks for a great time in Barcelona!

I'm Back!

PeteL — Fri, 01 Aug 2008 20:04:00 GMT

hello! i'm back. :)

a couple of months ago, I did an interview with Craig shoemaker about one of the session I did at TechEd this year, and he posted the interview a few weeks ago. I figured this would be a good place to start my blogging again!

Top Web Design Mistakes

http://getpixel8ed.com/shows/mistakes

Pete LePage is Product Manager of Internet Explorer Developer Division and he doesn’t want your web site to stink. Sharing from his talk given at TechEd 2008, Pete highlights 10 common web design mistakes and tells you how you can bypass the same blunders. Pete also tells us how future features of Internet Explorer will help your visitors leave your site with a smile.

Web Tools Or Tools For Web People

PeteL — Wed, 21 Nov 2007 01:22:16 GMT

A couple of days ago, I got an email from the guys at DebugBar letting me know that they had just released their Beta1 for Debug Bar 5.0. They've got a pretty good tool bar for doing web design and web development in IE. Their DebugBar adds features like a DOM Inspector, an HTTP Inspector, a JavaScript Console and Inspector, an HTML Validator among other things. It's free for personal use, and the commercial license is easy to obtain.

There are a couple of other tools worth pointing out as well

Fiddler2 a web debugging proxy written by one of the PM's on the IE team
IE Developer Tool Bar the Microsoft IE Developer Toolbar. There's lots of info on it here
IE6 and IE7 Virtual PC images
Visual Web Developer Express 2008 has great JavaScript debugging features
AjaxView a great tool from MS Research for remotely monitoring web2.0 applications for doing perf work
Nikhil's Web Development Helper is an add-on that helps AJAX and ASP.NET developers see what is going on with their code

Hope this helps!

PEte

Beginning Expression Web

PeteL — Wed, 14 Nov 2007 04:53:00 GMT

~~I have three copies of~~ ~~Beginning Expression Web by Zak Ruvalcaba~~ ~~to give away. Heck, I'll even throw in a copy of Expression Web!~~

~~First three people to email me with your full name, mailing address and phone number* get them :)~~

*Microsoft Legal wants me to tell you: One copy per person/mailing address. I'll delete your contact info once I've shipped the package to you. If you're outside the USA, you're responsible for any taxes, etc...

EDIT: These three books are gone. Thanks for the interest! :)

I'm not going to Click To Activate anymore (soon)

PeteL — Fri, 09 Nov 2007 00:04:26 GMT

Phew. I've been pretty heads down the last month on a couple of different projects, and one of the biggers ones just went live today! This morning, I posted an item to the IE blog announcing that we're removing click to activate from Internet Explorer! The first "preview" patch will be available in early December, and then it will be included in the April 2008 Cumulitive Update for IE.

I saw one person on the IE blog comment and ask why we're taking so long to just up and remove this. The simple answer is many customers don't like it when we make big changes to IE. It's that whole breaking the web thing that Chris keeps talking about. We do not expect any changes to the way web pages operate, but we want to give time for you to play with it and see for yourself.

For web developers and designers, this doesn't change anything. Your pages will still work in the same way that they did before. If you've been using the JS insertion method, great. If not, no worries there either.

And don't forget, MIX registration opened this morning!

ReMIX: Presentations in PDF & Source for VS2008 Demo

PeteL — Thu, 28 Jun 2007 02:02:00 GMT

Yep, the internet is on! I think most of the comments I got yesterday all revolved around the fact that I posted all my presentations in PPTX format. I work for Microsoft, and well, I use PowerPoint to create my presentations. I figured most people, even if they didn't have PowerPoint on their machines would at least have the viewer so they could see the slides, but it sounds like quite a few people would rather have a PDF or some other format. So, here you go!

TechEd: Top 5 Web Blunders
ReMIX: Building Your Own Video Site
ReMIX: Implementing Rich UI
ReMIX: A Tour Around VS2008
ReMIX: Search Engine Optimization for Rich Media

Note that these are stored on my personal website, so I can't guarantee how long they'll last as they're not on an official Microsoft server.

I've also included with this post the source to the VS2008 demo that I did. I had to swap the pictures out and replace them with corporate clip art, but the rest of the content is the same. I included the source for what I started with, and the source that I finished with so that you can see where I started, and where I finished. If you want to follow along, you can watch the original demo at the MIX site

ReMIX: Search Engine Optimization For Rich Internet Applications

PeteL — Tue, 26 Jun 2007 00:06:00 GMT

I think that this was my favorite session I did while doing all my ReMIX presentations. It was the one I found most interesting, and most relevant to the work that I do, and see many web developers and designers doing every day.

I'm not sure if there is video for this session, but if it shows up, I'll be sure to link to it. In the mean time, I've included the slides for you to check out, and I'll try to get a blog post out about in the next week or two summarizing the info in the deck.

Web Blunders: The Top 5 Biggest Mistakes On The Web

PeteL — Mon, 25 Jun 2007 23:45:00 GMT

At TechEd this year, I presented a session where I presented my top five pet peeves on the web, the biggest and easiest problems to avoid on the web. With how easy it is to share content on the web, I felt that these top five things were the best and easiest to get rid of.

In order, I felt they were:

5. Unprofessional Site Design
4. Lousy Content
3. Poorly coded HTML/CSS/JavaScript
2. Inappropriate use of Rich Content
1. Not Being POSH

I've attached my slides below, so check them out, and let me know what your pet peeves are!

TechEd & ReMIX

PeteL — Fri, 15 Jun 2007 19:25:50 GMT

What a great couple of weeks, and it's not over yet! In the last two weeks, I've been to Orlando, Budapest, and Amsterdam, and I'm headed off to Zurich on Sunday. I've got some down time today and tomorrow before two more full days in Zurich. I've learned a lot, seen some fantastic things, and met some really great people.

TechEd 2007 - Orlando

I started TechEd off in Orlando a little early as some of my friends were going to be down there for a few parties and other events that were going on so I figured I'd join them. It was a great way to start the trip and great to see my friends, and meet some new folks. Kind of crazy, and a lot of fun.

TechEd itself was pretty great. We got to meet lots of cool folks, and the presentations that the IE team and I did were all well received. I haven't seen the sessions go online yet, but as soon as they do, I'll make another posting to them. I did do one session, and I'll post it in another blog entry.

As usual, I shot a whole wack of photos that you can find on my flickr account.

ReMIX - Budapest

On the last day of TechEd, I got on a plane headed for Budapest to do my first ReMIX event. It started Monday at the Museum of Fine Art, one of the coolest venues I've ever seen. We basically had two big halls filled with chairs, a podium, speakers, projection screens and peices of art that were out of this world. I was presenting with two Greek urns (I think that's what they were) on either side of me. Kudo's to Microsoft for getting such a great venue.

The presentations went well in Budapest, though it was much different than any other audience I've ever spoken to before. Because of the language difference (English for me, and Hungarian+English) for everyone else, we had to speak very slowly, and be sure to ennunciate everything. I kind of felt like I was much more mellow than I usually am when I'm on stage. People seemed interested though, and had some great questions after my session, so I'm guessing everything went well.

Again, they said they would be posting our presentations, and I'll link to them as soon as they're up. If I don't see them in the next few days, I'll just upload them to my own server so everyone can get them.

Photos from Budapest are also uploaded to Flickr

ReMIX - Amsterdam

They mixed (pardon the pun) ReMIX Amsterdam with DevDays, and we had a great showing. I did a couple of fun sessions, and there were lots of people there. I was a little worried about my first session, but it seemed to go pretty well, and there were lots of good questions, so I was happy.

I haven't shot as many photos here, but I've shot quite a few, I'm planning on taking my film camera out tomorrow to see what I can get. It should be pretty interesting, there is lots of stuff around here to photograph.

I think I got my most interesting question that I've received since this tour started in Amsterdam though. The question was, "with Silverlight now out, does that mean HTML is dead at Microsoft?" The resounding answer is no. It's just another way of sharing stuff with your users, but I want to write a better post on it than that, so keep an eye out for it.

I'm off to Zurich on Sunday, then back to Seattle on Thursday, so I'll try to get back blogging as the week goes on! And if you're at any of the sessions, come on up and say Hi!

MIX07 Recap (It's Over)

PeteL — Sat, 05 May 2007 00:24:51 GMT

Wow, just wow, that's all I really need to say. MIX07 was insane, an absolute great time, and some fantastic new stuff coming out from Microsoft for the web. So what were the highlights, for me it came down to three things, first the announcements around Silverlight, second was all the great sharing we got to do about IE, and third, was meeting some fantastic people.

I didn't really get a chance to blog while I was at MIX this year, which I wish I had, but we were all so busy, attending sessions, hanging out, hearing what you had to say, eating drinking and being merry.

IE

As Chris mentioned on the IE Blog, we didn't have anything to announce this year at MIX, we were there to listen, and provide some information. Chris's IE session was standing room only, and it went over well. He talked about some of the great features of IE7, but then moved into the things that we've learned about shipping IE, and what we need to deal with with future versions of IE.

The point Chris brought up as one of the hardest things to balance is application compatibility. Almost every time we change IE, the rendering engine or the DOM we cause an application to break. So how do we balance existing applications vs handling standards better? Chris brought up the idea that there may need to be some kind of new switch that makes IE behave in a specific way. If it's not there, you get one thing, if it is, you get something else.

Silverlight

Silverlight is awesome, to put it mildly. Imagine building super sweet, rich web applications using technology you already knew, like maybe C#. That's the whole idea behind Silverlight. It's a cross-browser(!), cross-platform(!) plug in for delivering the next generation of media experience and rich interactive applications. The beta that is out today doesn't have support for the C# yet, but there is an alpha out that does. The demo's that they showed just awed me.

The best place to check out is http://www.Silverlight.net. There are plenty of demos, samples and other stuff there that just kicks butt. The fact that you can get high def video streaming easily, is amazing. One of the keynote partners was Netflix, who showed their streaming video service in Silverlight. The player they use today is great, it works, but why install that when the only application that is going to use it is their player? I'd love the idea of multi-use applications, not something that is only used for one purpose. And because it's a dot net application, they were able to add a whole bunch of super cool features, like video sharing, so you can synchronize watching movies with your friends anywhere in the world.

Meeting Great Folks

One of the things I love most about conferences is getting the opportunity to meet developers and designers. The guys from Microsoft Canada planned a small party at Tao on Monday night, and a whole bunch of us (21 or so) ended up at Postrio for dinner. It was a fun dinner, and a good way to hear about the stuff they were working on. My friend Adam passed his camera around the table and there are a bunch of his photos are on Flickr

Interesting Links from MIX07

If you didn't make it to MIX, there are other ways you can participate! You can watch the sessions online, or if you're outside North America, there are going to be several ReMix events around the world coming up. I'll be at a few of them in June, so keep an eye here for more info!

Favorite Web Development And Design References

PeteL — Tue, 24 Apr 2007 00:51:28 GMT

While at lunch today, we got on to the conversation of web design and web development resources. I have sitting on my desk at all times, well, unless I'm using them at home:

I've got a few other books that I keep handy, though I'm noticeably missing an HTML book, and a copy of the W3C CSS 2.1 spec.

I've got a few websites that I like to keep an eye on for resources, for example, color charts, HTML escape sequences, and such.

What about you, what are your favorite sites/books? What's sitting on your desk?

One Way to Level the Layout Playing Field

PeteL — Thu, 12 Apr 2007 22:02:13 GMT

One of my pet peeves about CSS and HTML standards is sometimes, they aren't overly explicit, and browser vendors pick arbitrary values for things like line height, or margin or padding and the like. Eric Meyer has talked about a reset.css stylesheet that would effectively eliminate those differences and override the browsers value with the ones that you know and you specify.

I'm excited to see that he posted a version of it (though reading the comments, it sounds like there will be a few revisions coming) on his blog today. I'd highly recommend checking it out. He based it on the one from the guys at Yahoo! UI, added a few things and tweaked a few others. It's certainly one way to help eliminate those frustrating hair pulling "why isn't this working" kinds of questions!

IE6 VPC Refresh

PeteL — Tue, 20 Mar 2007 23:20:21 GMT

Cross-posted from the IE Blog

In my original blog post about releasing the IE6 Virtual PC Image, we mentioned that it would expire on April 1st, 2007 (no, it wasn’t an April Fool’s joke), and that we’d be releasing a new VPC image to replace it sometime in March. Well, I’m happy to report that I propped the new VHD up on Monday morning. You can download the image here. Take note that a free download of Virtual PC 2007 is now available, replacing VPC2004.

I didn’t make any major changes to the image other than adding the latest security updates. I also managed to reduce the download size to just under 400 megs, shaving off almost 100 megs from the previous image size. This image is time-bombed to July 23^rd , but we will continue to release these images as long as they are needed. They are time-bombed because you get them for free. If you want images without time-bombs, an MSDN subscription is the way to go.

We have learned some interesting things about the distribution process in a virtual machine environment. One is that we currently don't have a way for WGA to work inside this evaluation virtual machine because the process used to create a virtual machine involves de-activation of the key used in the VM. We are thinking about ways to fix this in the future but it's not as easy to do with Windows XP as it wasn't designed to support distribution like this. If there are specific applications or things you cannot install, follow up in the comments, and we'll see how we can address that for future versions.

We did do some investigation of shipping VHD’s with IE5.5, or earlier, but decided that due to the low browser usage share (less than 1% total usage for all IE versions before 6), it wasn’t going to be beneficial for enough developers and designers.

Keep an eye open in July for the next image drop!