Posts tagged ForMSDNIEDC

New Internet Explorer Testing VHDs Are Available

13
October 14, 2010
by Pete in , ,

After a little delay, the Internet Explorer App Compat Testing VHDs are now available for download on the Microsoft Download Center.  Like the previous set of images, these ones are time-bombed for 90 days and will expire on January 11th, 2011. 

Live we’ve done in the past, there are five different images that we’ve made available…

  • Internet Explorer 6 on Windows XP SP3
  • Internet Explorer 7 on Windows XP SP3
  • Internet Explorer 8 on Windows XP SP3
  • Internet Explorer 7 on Windows Vista SP1
  • Internet Explorer 8 on Windows Vista SP1

These images are a bit different then the previous ones we last released in June, the default user account is an admin on the machine, and you have to use a password to log on to the VHD.  The password and other important information is in the readme.txt file – so be sure to check that out.

As you test your sites, remember that with Internet Explorer 8 and Internet Explorer 9, you can switch the rendering mode with the F12 Developer Tools and get an almost perfect replication of IE9, IE8 or even IE7.  That way, you can save using the VHDs for when there may be an issue with something like Protected Mode, or you need to test IE6.

introinghtml5_thumb.jpg

Book Review: Introducing HTML5

2
October 13, 2010
by Pete in

introinghtml5

Introducing HTML5 by Bruce Lawson and Remy Sharp
Published By: New Riders
Available From: Amazon or Your Local Book Store
ISBN: 978-0-321-68729-6

It’s taken me a little longer than it should have to write the review of this book, and I’ll blame the fact that, oh I don’t know, we had a beta to get out the door, but now that that’s done – I’ve got a few minutes in my day again.  And I did promise Bruce that I’d write a review of the book, so here it is.

The short review – lots of great content, and even more puns and bad jokes!

The long review…

Topics Covered

  • Their definition of HTML5 and it’s history
  • The new structural elements of HTML5
  • How the new structural can be used when creating pages
  • The new HTML5 form elements
  • Audio, Video, Codecs and Backwards Compatibility
  • Canvas, from basic stuff all the way to playing with video
  • Data Storage methods
  • Off-Line Applications
  • Drag and Drop
  • GeoLocation
  • Messages, Web Workers and Web Sockets

One of the most important things that HTML5 books can do these days is be up-front about how they’re defining HTML5 – what’s in and what’s not, because it can be somewhat confusing unless you’re really plugged in.  Bruce and Remy do this within the first few pages of their book, and while I don’t agree with their definition of HTML5, I see where they’re coming from.  In their book, the specs that they’re talking about are “HTML5 and the related specifications that came from the WHATWG.”  I tend to think about HTML5 as the specifications that come out of the W3C, and while the specs are very close, there are some things that the W3C hasn’t looked at or even talked about at this point.  The upside of having a book from the WHATWG perspective though is that you can see and hear things from a different perspective.

One of the things that impressed me the most about the book was the neutrality that the authors took – when something wasn’t implemented in one of the browsers, they didn’t call them out or make any of the oft easy jokes that can be made about certain legacy browsers.  Instead of saying “browser X doesn’t do Y”, they provided some really good work-arounds and even tips for helping bring legacy browsers up to snuff!  For example, in IE8 and below, if you specify a CSS style on an element that the browser doesn’t know about, it won’t style that element.  Bruce provides a great tip and some best practices for enabling the new elements in IE8 and below.

The book is filled with lots of good examples, some of which you’d probably show your Mom, and a few that you wouldn’t show your Mom.  In fact, I strongly encourage you to read the content of the samples, in addition to looking at them for what they’re trying to show. 

For example

The <i> element “represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose, such as a taxonomic designation, a technical term, an idiomatic phrase from another language, a thought, a ship name, or some other prose whose typical typographic presentation is italicized.”

And the examples they use:

<p>The design needs a bit more <i lang=fr>ooh la la</i>.</p>
<p>You, sir, deserve a jolly good kick up the <i>gluteus maximus</i>!</p>

As I mentioned earlier, there are a few things they talk about that aren’t in the HTML5 spec and a few that aren’t really widely implemented, like Web SQL Databases, GeoLocation, Web Workers and Web Sockets.  I wish they had been a bit more clear here that these things are still pretty cutting edge and likely to change.  For example Web SQL gets about 1/2 a chapter, but it feels to me like it’s likely to die a slow painful death to be replaced by the Indexed Database API.  Sure it’ll work now, and if you’re building prototypes or using libraries to abstract that kind of stuff – no big deal, but if you’re trying plan a long term strategy around this, it’s not super clear what the status of it is.

Still reading?  Glad to hear! :) I think my favorite chapter of the book was the canvas section.  Canvas is one of those things that I think we’ve only really seen a scratch on the surface of what it’s capable of.  While in theory it seems pretty simple (it reminds me a lot of logo), when you start to see the cool stuff folks do with it, you realize it’s much more complex than it appears on the surface.  Remy does a really good job of laying out not only the basics, but also taking us a step further into some of the more fun, neat and complex things – like using video in canvas and the cool things that you can do with your videos when put inside canvas.

I’m really glad I got the book – it was worth my time to read it, and it’s not a complex or long read, though it’s certainly longer and goes into more depth than HTML5 For Web Designers does.  In fact, I’d suggest that book is great for PHB’s and folks who might write some HTML5 markup, but more than likely just want to be educated on the subject.  This is a book that does a good job for those of us who want to know what’s going on, and how we can start playing with it today.

wlEmoticonsadsmile.png

Internet Explorer App Compat VPC Update

6
October 12, 2010
by Pete in , ,

A bunch of folks have asked about the status of the Internet Explorer App Compat VHDs (VPCs) as the current set have expired and we haven’t published new ones yet.  First off, I want to let folks know that we are still committed to them and we haven’t abandoned them!  We’ve just run into a few hiccups that weren’t quite what I expected this time around. 

At the beginning of this fiscal year, we changed the process that we use to create the VHDs.  First, we brought the work in house and are building them internally instead of using a vendor to do it.  Second, we found out a little too late that the old system we used for time-bombing had been retired and spent some time working to figure out if there was a replacement program in place or how we could continue to support the Windows XP VHDs.  Thankfully we were able to figure out a new process, but with any new process, there are always some hiccups.  And this time, there were more hiccups than I had expected.  Sad smile 

The big change between these images is that this Windows XP SP3 installation is a “trial sku” instead of the “full package product” (FPP).  That means that we don’t have to use the complex time-bombing process any more – though because it’s a trial sku, they do still expire after 90 days.  I haven’t tried these VHDs on other VPC hosts, so I can’t speak to if they’ll run without activation.

I finished the last few steps for creating the VHDs late last night, and am working through the release process now.  One good thing about moving them in house, I managed to get the download size way down again, and they’re running between 494meg and 583meg!  Hopefully the smaller size will be good news for those of you who don’t have super fat interweb pipes.

Hopefully they’ll be up tonight (Pacific time) or sometime early tomorrow.  I’ll either update this post, or post a tweet via Twitter when they’re up!

PS: I’m also working with @reybango to get a VHD or other system in place so that those of you not running Windows Vista or Windows 7 can try Internet Explorer 9.  Sadly when IE9 runs in a VPC host, you don’t get hardware acceleration, but it’s still an opportunity to try or test your site if you’re not running a supported OS.

Quick Perf Tip: Always Add A Trailing Slash

4
July 16, 2010
by Pete in

Here’s a quick performance tip for your Friday (or Saturday for those of you across the date line) – when linking to a directory, be sure to add the trailing slash to the directory name, otherwise, it causes a redirect from the server, thus adds a bit of time to your page load!

Do

<a href=”http://petelepage.com/blog/”>Pete’s Blog</a>

Don’t

<a href=”http://petelepage.com/blog”>Pete’s Blog</a>

What’s going on?

When the browser makes a web request for a page without the slash, it responds with a 301 redirect response, which then causes the browser to make a second request for almost the exact same page, except it asks for it with the trailing slash!  On a client with a slow network connection, that’s going to be really painful!  Even if it’s not a slow connection, it is going to add some extra time to your page load!

woork_html5.jpg

Tips & Tricks: Cheat Sheets For Web People

2
July 14, 2010
by Pete in

I have a set of blogs that I read every day, some are really technical, and I learn lots, and others are more inspirational, they show me the cool stuff that we as web designers and web developers can build. 

I’ll admit that one of the blogs I read has the educational value of something you’d pick up at a grocery store check out, the pictures are really pretty, and it’s good inspiration, but I’d never actually walk out of the store with it.  Well today, they posted an article that changed my mind.  Almost!  One of today’s posts was a collection of cheat sheets for web designers and developers, and I wanted to share my favorites.

HTML4 and HTML5 Cheat Sheets

woork_html5HTML5 Visual Cheat Sheet from http://woorkup.com/

I think came in as my favorite and prettiest cheat sheet.  It prints on an 11×17 piece of paper, and is a great reference for all of the HTML4 and HTML5 tags that you’ll ever need to reference.  It nicely includes the attributes that you can set, what version of the HTML spec they’re from and lots more useful information.

veignhtml5HTML5 Reference Guide from http://veign.com/ 

The Veign folks go into a lot more detail on their cheat sheet, or more accurately, cheat sheets because this guy is 4 pages long.  One of the things I like about this one was that it goes in to much further depth about the attributes, supported HTML versions (indicating elements that aren’t supported in HTML5 with a highlight), and a very brief description of the element.

charcheatHTML Character Entity Reference from http://addedbytes.com/ 

I’ve often found myself forgetting what the special character sequence is to get a particular character to show up, or I’ll be looking for a character to use in my breadcrumb navigation – this cheat sheet solves that and lists all of the characters and their sequence to get exactly what you want!

canvascheatCanvas Cheat Sheet from http://blog.nihilogic.dk

Canvas is one of those things that’s super new to a lot of folks, so having a handy cheat sheet is really useful!  It’s not going to be super-useful for beginners since it’s basically just the API reference, but once you have a pretty good handle on Canvas, this will be a great desk reference until it gets cemented in your brain.

CSS2 and CSS3 Cheat Sheets

css2veignCSS2 Reference from http://veign.com

Those folks over at Veign are pretty good at putting together a reference sheet, maybe not as pretty as some of the other ones, but just as functional and makes my life easier, so I’m not complaining!  Their CSS2 reference is great and provides all the detail you’ll need if you need to look something up quickly!

css3veignCSS3 Reference from http://veign.com

The CSS3 reference isn’t quite as awesome as the HTML5 reference, because they don’t tell you what properties are CSS3 vs CSS2, so if you’re having to code for multiple browsers like most folks, you may accidentally add something and then scratch your head as to why it’s not working in an older browser.

Other Useful Cheat Sheets

jscheatJavaScript Cheat Sheet from http://addedbytes.com

For whatever reason, JavaScript and I don’t get along, I think it’s because I like strongly typed languages that tell me if I’ve done something wrong before it gets there.  If you’re building websites and not using a tool that doesn’t have intellisense, then having a cheat sheet like this would be super valuable.  All the APIs you’ll need, right at your fingertips!

seocheatSEO Cheat Sheet from http://www.seomoz.org

A week or so ago, I posted my tips and tricks for ensuring your site was best optimized to make it into search engines efficiently.  Here’s another great easy to follow cheat sheet that will help you make the best of the time and resources that you have on getting your site optimized.  It’s a great resource to look over and share with co-workers or friends when they ask why you’re doing something!

Summary

There you go, those are the quick reference guides that are now printed and sitting on my bulletin board beside my desk at work!  Hopefully you’ll find a good nugget or two in there as well!  If you’ve got other good references or cheat sheets, be sure to share them with me!

Wheel.png

How To: HSL and HSLA Color Models

3
July 13, 2010
by Pete in

HSLA is defined in the CSS3 Color Module, and is another way that designers and developers can specify the color of something via CSS.  I grew up understanding color defined by light, varying the amounts of red, green and blue result in different colors – yellow and blue make green, or if you’re in the USA, yellow and blue mean your ziploc bag is sealed. Smile

It took me a little while to wrap my head around the HSL color model because it’s quite different from the RGB model.  Instead of adding different amounts of each of those, the color is defined by three properties:

  1. Hue [0 to 360] – defines the color according to a position or degree on the color wheel.  The color wheel is split into effectively three areas, with 0° being pure red, 120° being pure green and 240° being pure blue.  Therefore, if you wanted purple, it’d be halfway between red (0 or 360) and blue (240), or 300°
    Wheel
  2. Saturation [0-100%] – defines the intensity of the color, zero, there is no instensity to the color and it shows as gray, and as the number gets bigger, the more intense the color.
  3. Lightness [0-100%] – defines how bright, or dark the color is.  50% is the true color, the larger the number, the closer you get to white, and the smaller the number, the closer you get to black.
  4. Alpha [0-1] – is the alpha transparency, and tells the browser how transparent or opaque the color should be.  The closer to 1, the more opaque, and the closer to 0, the more transparent.

Let’s See It In Action!

In the samples below, if your browser supports HSLA, you’ll see two color swatches, the first which sets the table cell background color via the HSLA property, and the second, an image of the same. If your browser doesn’t support HSLA, you’ll only see the image. Each color box is represented by the code sample below, in order from left to right.

Hue 
background-color: hsla(0, 100%, 50%, 1.0);
background-color: hsla(120, 100%, 50%, 1.0);
background-color: hsla(240, 100%, 50%, 1.0);

The value for hue is specified as a number between 0 and 359, but you can go above 359, which just cycles around the circle again. For example 480 represents green, because 480 – 360 = 120.

Saturation 
background-color: hsla(300, 0%, 50%, 1.0);
background-color: hsla(300, 25%, 50%, 1.0);
background-color: hsla(300, 50%, 50%, 1.0);
background-color: hsla(300, 75%, 50%, 1.0);
background-color: hsla(300, 100%, 50%, 1.0);

The saturation needs to be a percentage between 0% and 100% and defines the intensity of the color. At 0%, with no intensity, we end up with gray.

Lightness 
background-color: hsla(300, 100%, 0%, 1.0);
background-color: hsla(300, 100%, 25%, 1.0);
background-color: hsla(300, 100%, 50%, 1.0);
background-color: hsla(300, 100%, 75%, 1.0);
background-color: hsla(300, 100%, 100%, 1.0);

Like the saturation attribute, the lightness attribute is a percentage between 0% and 100%. Changing the value, allows you to easily create black or white, but you can also get very subtle shades of a color, for example by setting the lightness to 98%, will result in an almost white, with a hint of color in it.

Alpha 
background-color: hsla(300, 100%, 50%, 0.0);
background-color: hsla(300, 100%, 50%, 0.25);
background-color: hsla(300, 100%, 50%, 0.50);
background-color: hsla(300, 100%, 50%, 0.75);
background-color: hsla(300, 100%, 50%, 1.0);

Alpha transparency makes the object more or less transparent. This is very useful if you want to overlay something on top of another object, but still want to be able to see the object underneath. Like other places where you can specify the alpha transparency, the value is between 0 and 1, where 0 is completely transparent (effectively invisible), and 1 is completely opaque and you cannot see through it at all.

Black, Grays and White 
background-color: hsla(0, 0%, 0%, 1.0);
background-color: hsla(0, 0%, 25%, 1.0);
background-color: hsla(0, 0%, 50%, 1.0);
background-color: hsla(0, 0%, 75%, 1.0);
background-color: hsla(0, 0%, 100%, 1.0);

When defining black, grays and white, the hue doesn’t matter at all. The needs to be set at 0, to indicate that there should be no indication of the color showing through. Then, by changing the lightness you can adjust the shade of black, with 0% being black, and 100% being pure white.

Using It Today

If you want to use the HSLA color model today, but still have to support browsers that don’t support the HSLA color model, the fact that CSS styles cascade (crazy I know), allow you to do support both models. 

div {
 background-color: #ff00ff;
 background-color: hsla(300, 100%, 50%, 1);
}
html5fwd-in-the-wild

Book Review: HTML5 For Web Designers

4
July 9, 2010
by Pete in

buy-html5-for-web-designers

HTML5 For Web Designers by Jeremy Keith
Published by: A Book Apart
Available From: A Book Apart
ISBN: 978-0-9844425-0-8

I was super excited yesterday when I walked by my mailbox at work to see a small package in it – having completely forgot that I had ordered my copy of HTML5 For Web Designers by Jeremy Keith a while ago.  I had heard it was a nice, easy fun read and I wasn’t disappointed.  In fact, about 6pm last night I sat down to read it and had read it in full by about 7pm!

Wait! Stop! Let’s define HTML5 for a minute because it’s turned into a word that means different things to different people.  In Keith’s book, he’s referring to the W3C Specification that defines the next generation of the HTML mark-up language.  He isn’t referring to the buzz word HTML5 that includes CSS3, ECMAScript 5, Web Workers, and all that other stuff that sometimes gets lumped into HTML5.

Topics Covered

  • The road from XHTML to HTML5
  • Design principles of HTML5
  • Syntax: marking it up your way
  • Web Forms 2.0—sliders and spinners and color pickers, oh, my!
  • Canvas: drawing with code
  • Audio and video
  • Semantics and extensibility: microformats and boiling the ocean
  • New and changed HTML elements
  • New structure elements
  • New content models
  • ARIA, styling, and validation
  • Using HTML5 today—tactics and strategy
  • Shiny new toys: JavaScript APIs
  • Feature detection
  • The future of HTML5

I’ve always thought a little history is important to set the stage, and he does that by explaining where HTML5 came from, why XHTML 2.0 didn’t work, the difference between HTML5 and HTML 5 from the WHATWG.  Heck, I’ve been around the web world for over 10 years, and I’ll say I learned quite a bit and feel like I understand some of the challenges of HTML5 more now.  What’s also great is that he explains the design principals of HTML5.  There’s a couple of places where you may ask yourself why the heck they did something, and the principals help to clear it up.

The book did have a few minor let downs for me – the first was one I should have been able to glean from the title, but there is only one mention of the new JavaScript functionality in HTML5, and the mention is basically, that as a designer Keith doesn’t use many APIs, and that the new ones are “over my head.”

Instead of going deep into code, the book does a great job of explaining what the new features of HTML5 are.  There’s a section on Rich Media where he covers Canvas, <audio> and <video>, SVG and so forth.  And there’s some really good nuggets of info in there, for example the concept of boolean attributes.  Boolean attributes mean that no matter their value, the fact that they’re in there triggers the property, for example boolAttr=”true” is exactly the same as boolAttr=”false”!  That may take some getting used to.  He also introduces Web Forms and the new HTML tags that are added along with the semantics that they impose.

My other let down, and again I think this was somewhat intentional is that when referring to browsers, Keith didn’t mention version numbers at all.  In some cases that doesn’t matter, but when he says something like “Internet Explorer doesn’t support HTML5 feature X”, it’s like saying car’s don’t have airbags.  Sure the older ones may not, but the new ones do.  There’s a ton of HTML5 support in Internet Explorer 9, but that doesn’t come across in the book at all.  I know the book was started before we shipped the first of the Platform Previews, but the editing certainly wasn’t.

Keith closes the book trying to answer one of the most commonly asked questions that I think people have today, when can I use it?!  And if I can use it today, how?  Keith answers that question and gives a few best practices for being successful with HTML5 today.  I’ll give you a hint, one of them includes feature detection instead of browser detection!

If you want to understand what HTML5 is, whether you’re a designer or developer, this is a great book for you!  It makes the 1100+ page spec look like something a first grader could read and understand – when in fact it’s the complete opposite!  It’ll be GREAT to share with your coworkers and friends.  Whether you’re an old hat at this, or just getting started, you’ll be able to understand the new concepts and features of HTML5 with ease.  For hard core JavaScript developers, yah, it’s missing that, but I expect to see that in more books soon enough.  But for everyone else, web designers, and web devigners (hybrid developer designers), you’ll find a great resource on HTML5!

With books like this, I can’t wait to see what the guys at A Book Apart have up their sleeves next!

neck_and_backPain.png

Top 10 Design Mistakes: #7

0
July 6, 2010
by Pete in

I hope everyone had a fantastic weekend, other than the weather I had a really great one – Seattle has had one of the crappiest starts to summer that I can remember in my 9 years of living here!  It’s like summer just wouldn’t come; but it looks like it arrived this morning and is supposed to stay through the week – finally!  But enough with idle chit-chat, time for number seven in the 10 Things I Hate About Your Website series!

#7 – SEO: Isn’t Just For Highly Paid Consultants!

As web developers, we sometimes forget that tags are often more than just a way of styling text, they’re meant to provide some semantic meaning to the content that you’re putting on a page.  For example, some people think that an <h1> tag means that the text inside it is really large, instead of its true meaning of the primary heading for a page.

Search Engine Optimization or SEO is important to many, but not all sites, if all of your traffic is intranet and you only have one site, you probably don’t need to worry about it.  But, with more and more content appearing online, in the corporate intranet, the corporate extranet or the internet, it’s getting harder and harder to organically find content and search is becoming super important.  I remember a couple of years ago when the Microsoft Origami project name was leaked, and I wanted to know what it was – search made it possible, but because of poor SEO, it was more difficult than it should have been.  As you’re building out your site, you need to consider how folks will get to it, and what you want them to do once they get there.

One of the easiest ways to find some tips and tricks for search engine optimization is to just search for SEO Tips, either on Google or Bing, though some of them are complete bunk – my favorite so far has been “become a foreigner”.  One of the most important tips that I can recommend and that I’ve seen on other sites, is that content is king!  If the quality of your content is good, then you’ll likely have a better chance of ranking higher in search results.

After spending a significant amount of time reading and researching, here are my top 8 suggestions that will carry the most impact when coding your site:

8 Tips & Tricks for SEO

  1. Title & Meta Tags – ensure every page has a unique and relevant title set, and that you’re using meta tags to provide descriptions and keywords about the content on the page.  Make sure that the keywords are relevant to the copy on the page – if they’re not, search engines will likely discount them, and rank your page lower.
  2. Write copy for SEO – Search engines look at many parts of your page, looking for keywords, copy, how <h?> tags are used and so on.  It’s important to keep the use of the <h?> tags to relevant headings and other appropriate parts.  Think about how a search engine sees your page, it doesn’t execute JavaScript so make sure you content is accessible if JavaScript is turned off.
  3. Provide a sitemap.xml file – there are several tools that will help create these, or you can hand code it (though it’s a bit of a pain).  I host most of my sites on GoDaddy, and they have a built in tool for creating sitemaps.xml file for me.  Site maps make it super easy for search engines to look at your site and determine the content and what you have without them having to do any work.  Oh, and don’t forget if you block access to your site by turning off spiders in the robots.txt file, search engines will not be able to access your site!
  4. alt Tags attributes – search engines are really good at being able to “see” and understand text, but they cannot see images, or photos or graphics – so be sure to include alt attributes on all of your images.  And don’t include your content in images!  Check out one of the sites below for my favorite site that’s guilty of this one!
  5. If you’re using Flash, Silverlight, or other rich media on your site, be sure that you supplement it with HTML content.  Search engines aren’t able to truly understand rich media and so finding the content in there will be almost impossible for them!
  6. Verify internal links – when you’re providing links within your site to the default page, are you linking to http://site.com/index.htm or are you linking to http://site.com/ or http://site.com?  Each one of those may be seen as a link to a different page, and cause complexities for search engines.
  7. Make Links Easy – when coding your site, if the content is going to be dynamic or accessible via URLs, make the URLs easy to read and understand.  The MSDN website is an AWESOME example of how NOT do to this.  For example, check out the URL http://msdn.microsoft.com/en-us/ie/cc405106.aspx – do you have any idea where it goes or what might be contained within that URL?  Instead use something more friendly – that URL can also be accessed via http://msdn.com/iecompat, much easier to read and understand – you know what you’re going to get from just looking at the URL and so does a search engine!
  8. Use search engines web master tools – Bing, Google, Yahoo, and most other search engines have an area where they have best practices and help for ensuring your website ranks well in search.  I’ve listed a few of them below.

Useful Tools, Sites And Resources for SEO

Google

Bing

Let’s see some examples!

neck_and_backPainThere is not a single word of text on this page, it’s all images! If you want to copy and paste the address into a mapping program, fail.  Want the search engine to know more about these guys, nothing!  Every single piece of content on this site is an image, and no signs of any alt tags.  If you’re coming to this site with a screen reader, again, nothing.  Sad panda!

x-ua-compat-search This is another favorite of mine, go to Bing and search for X-UA-Compatible – you’d think that a Microsoft site would be the first link, in fact that we’d be the first couple of links.  Nope, in fact we’re not there until the third link.  A List Apart (which is fantastic, don’t get me wrong), is the first link!

Best Practice Suggestions

  • Review and use the tips and techniques provided by the search engines themselves, they’re more likely to work than some of the fun stuff you’ll find on the internet.
  • Don’t use link farms – they’ll often result in lower results.

Don’t Forget: If I pick on your website, I apologize! It’s meant as a learning opportunity for both of us, and I’m happy to help you move from my offending list, to my best practices list! I’ve only shared a few of my favorites in this blog post, and there are plenty more out there! What are some of your favorites? Leave your favorite offending sites in the your comments! For designers who may be reading, I’d love to hear your thoughts and comments! What bugs you, what makes your life hard when working with web developers?

Update: @pornelski tweeted me and said he thought my first tip on using keywords was wrong, and linked to a Google webmaster blog post where they explicitly say they don’t use keywords. I generally think it’s still worthwhile because it’s possible that other search engines do use it.

He also added the clarification, that the alt attribute (which I incorrectly mentioned as a tag), shouldn’t literally describe the image, but instead provide an alternative description of the image.

DevToolsSelectByClick2.png

Internet Explorer Develop Tools: CSS

2
July 1, 2010
by Pete in ,

In continuing my series about the IE Dev Tools that come build in to Internet Explorer – today I’ll take a look at the CSS Tab and how you can use it to add, edit, change, or remove CSS rules and dive deeper in to the CSS on your page, where styles are coming from and such.

The CSS Tab

The CSS tab shows the all of the CSS files that your page includes via embedded, linked style sheets, or imported style sheets.  Like all of the other tabs, it includes the standard menu bar, the ability to change rendering and browser mode, and the standard buttons Select Element By Click DevTools-SelectByClick2, Clear Browser Cache DevTools-ClearCache and Save buttons DevTools-Save.  Beside the standard buttons is a drop down list that allows you to choose which set of styles you want to look at.  It includes all of the styles that Internet Explorer loads for that page, including iFrames.

csstab-2

If you have multiple embedded style blocks, each block will be listed separately within the drop down list.  iFrame styles are denoted by the square brackets around the name of the [] stylesheet, for example [iframeSource.htm] stylesheet.css.  As you change the drop down, the contents of the CSS display box will show all the rules, along with their individual attributes.

Using the CSS Tools

Like the HTML tab, you can turn on and off rules, or the individual attributes as well as add, remove or edit all of their values and see the changes in real time. 

Getting Started

  1. If you’re in Internet Explorer now, hit F12, if you aren’t switch over to IE8 and load a site that has a bunch of CSS and HTML on it then hit F12 (pretty much page).  See if you can find a site that has at least one iFrame on it so you can see how iFrames look as well.
  2. Switch over to the CSS tab to see all of the CSS files that are loaded on the page you’re viewing.
    csstab-3
    You’ll now see a list of all the rules that are defined within the selected style.

Turning Rules or Attributes On and Off

The easiest way to turn off style rules or individual attributes within those is to use the checkbox beside each node.  Unchecking the rule turns off all of the attributes for that rule, or you can simply choose to turn off the specific attributes.

Changing Existing Rules or Attributes

To change an existing rule, you can do the same thing as in the HTML tab, simply click on the item you want to edit and Internet Explorer will change that item into edit mode.  You can change the rule names, attribute names and the attribute values.  After you’ve made your change, hit enter and IE will apply the changes to your page.

DevTools-CSS-SingleClick

Adding or Removing Rules or Attributes

This is one of the cooler features of the CSS tab that I often forget about because surfacing it isn’t super obvious.  If you right click on a rule or attribute, a content menu appears that allows you to add or delete attributes and rules.  You can choose where you want them to fit within the cascade via the Add Rule Before or All Rule After.

DevTools-CSS-RightClick

When adding an attribute, you do it pretty much exactly like you would type it in a style sheet or style block.  When I click Add Attribute, the dev tools, creates a new node for me in the tree view, and I type the style I want to add, followed by a colon, then IE pops me over to a new text box where I can type the value for that style followed by a semi-colon. Once I hit enter, IE will update the page with my changes.

Adding a new rule is similar, in that you click Add Rule After (or Before), and it creates a new node in the tree in the appropriate place.  Then using the same Add Attribute right click, you add the appropriate attributes to that node.

CSS Editing with Internet Explorer Developer Tools

There you go – hopefully this will make your editing and debugging of CSS a little easier!  Stay tuned for posts on debugging and profiling your JavaScript code!

dieselstop1.png

Top 10 Design Mistakes: #8

0
June 30, 2010
by Pete in

Time to continue my top ten list of web site pet peeves – and we’re in at number 8 with something that requires a little bit of balance, because for many sites, it’s a requirement, it’s the only way they really are able to provide the content that they do, for the price we pay…

#8 – Advertising Is A Reality, Sometimes

Somebody once said, “there’s no such thing as a free lunch.”  And the web is no different, someone has to pay for the content that we’re consuming online, whether it’s through me doing this in my own time, and paying for my own hosting, or by showing ads on a page, it takes time and money to create good content.  At this point, I think everyone has accepted that for many of the sites we look at each day, we’re going to see ads in addition to the content.  And when done at a reasonable level, I don’t have a problem with that – especially if the ads are targeted at me, so that I’m not seeing ads for products that aren’t really of much interest to me.

One of my favorite examples of a site with too many ads is The Diesel Stop forumsdieselstop1.  It’s a site for fans of Ford trucks – lots of great community conversations, sharing of information, all the stuff that you’d expect from a forum site.  A little while ago, they did a re-design, and added a few ads to their site.  And by few, I mean, that I have to scroll over 740 pixels down my page before I can see any real content!  740 pixels!  Imagine how that looks on a netbook!

As you build out your website, it’s really important to remember what is driving people to your site, is it the content or the ads that people want to look at?  I’d be willing to bet that they’re probably not coming to your site to look at the ads!  One of the important things that you need to do is find a balance – content vs. ads. 

overlay-ad1Another one of my pet peeves is blocking ads, ads that sit in front of the site and force you to close them before you can view the content – again, users are coming to your site for content, and ads are a way to help you subsidize your content.  Making it hard for users to get to content is going to discourage them from coming back. 

Then there are other options besides the regular ads – ask yourself when visiting a website, have you trained yourself to look past the typical ad locations and shapes that look like ads?  I know I’ve gotten myself pretty well trained to ignore certain places on a page or certain shapes!  The person who figures out an innovative, and unobtrusive way to get ads on a page is going to make a lot of money!

nytimesOne site that has found a way to do that is the New York Times – it’s a site that I really appreciate for it’s design and layout.  They’ve done a number of things to put ads on the page, make them flow nicely into the page so that they catch my eye but don’t feel obtrusive or obnoxious.

Best Practice Suggestions

  • Make your content the primary subject of your site, it’s what drives people to your site!
  • Don’t hide content with ads and make users work to get to your content, they’ll remember that and go to other places where it’s easier to find the content they’re looking for!

Summary

Remember what drives people to your site, make the content the strong point, and integrate the ads into your site in a way that fits, putting too many ads on a page will drive people away!If you’re using an ad network like AdSense or pubCenter, be sure to read through their tips and tricks, they’re interested in helping you make money, because it helps them make money! Be creative! Figure out how to be a little different – be the person who finds the next advertising opportunity.    

Don’t Forget: If I pick on your website, I apologize! It’s meant as a learning opportunity for both of us, and I’m happy to help you move from my offending list, to my best practices list! I’ve only shared a few of my favorites in this blog post, and there are plenty more out there! What are some of your favorites? Leave your favorite offending sites in the your comments! For designers who may be reading, I’d love to hear your thoughts and comments! What bugs you, what makes your life hard when working with web developers?

Go to Top