Andrew Jaswa » websites

Markup Conditionals

ajaswa — Wed, 13 May 2009 22:30:03 +0000

I loathe conditional comments and browser targeted code. But there comes a time when you have to support an old and out dated browser (I’m looking in the direction of IE6 at the moment). So what do you do? You have to make it look the same and function the same as other browsers. You also shouldn’t use browser hacks to target them. I’ve touched on this subject before and figured conditional comments were the best route to go. Even if I don’t like them.

I’ve recently started working with a new company and have picked up on some of the bright things they do. I’m not sure why I never thought of this before since it seems so simple (and I can’t take credit for it).

Let say you have your standard body element and a few other things on a page:


    
        Some text

Typically to target the paragraph element for, say IE6, you might use a simple hack like the underscore hack. So you might write some CSS like so:

p {
    width:150px;
    _width:200px;
}

I mean you might do that, some other hack or you might use conditional comments to provide a style sheet just for IE6. I’m sure you’ve seen code like this before:

That’s all fine and dandy, but do you see what you did there? I did and I don’t like it. You’ve just created another HTTP request. Shame on you. And to think about how many CSS rules are typically in a file like that? 10? 50? It also creates a maintenance headache. You’ve now split up rules for one element into two files. Yes yes I know that is what the cascade is for… But you could make it easier on yourself and people that come behind you.

What I’ve found is to use conditional comments to specify a class on the body element when the browser is IE6 or 7 or even 8.

So taking our markup example from above I’ve modified it to have conditional comments in it:



    
        Some text

You’ll need all those extra comments to make the page valid. It is also pretty easy to add as many combinations as you like as long as they can be read by the browsers…
And our CSS from above:

p {
    width:150px;
}
.IE6 p {
    width:200px;
}

Of course this only works with IE but really you shouldn’t need this at all since you build awesome websites that are already cross-browser compatible, right? And there is no chance ever that a client will want a site to be usable in IE5.5, right?

February’s Article on 13things

ajaswa — Sat, 14 Feb 2009 17:46:11 +0000

The second 13things article is now published. Zach Young gives a great explanation as to the uses and mis-uses of an often neglected html element. You should go check it out.

You can also follow @13things on twitter to get updates about new articles and new developments on the site.

Wordle

ajaswa — Sun, 08 Feb 2009 05:57:31 +0000

We’ve all seen tag clouds. I even considered putting one on my site, but I realized that tag clouds don’t really look nice. The other day I discovered Wordle.

Wordle is a toy for generating “word clouds” from text that you provide. The clouds give greater prominence to words that appear more frequently in the source text. You can tweak your clouds with different fonts, layouts, and color schemes.

I started playing about with it and was quite impressed. I put in the RSS feed for this site and my delicious bookmarks.

andrewjaswa.com

ajaswa’s delicious

They way Wordle displays the collected words is rather interesting. More so then just a straight tag cloud. Now to create something like this on the fly and embed it on a site…

13things

ajaswa — Tue, 13 Jan 2009 18:23:53 +0000

Well where do I start?

I guess it started back in March of 2008 when I attended An Event Apart New Orleans. Jason Santa Maria gave an excellent talk about web design or rather a talk about how current web design all looks the same in the form of blogs and content management systems. The example he used that stuck in my head was that of Wired Magazine. In their print publication they have very captivating designs but when the article is taken online it loses its design and just becomes another article. This actually inspired me in two ways. The first was to learn more about design (as my background is in development) and the other was to create a website that was essentially what Wired was to print. With my lack of design skills and time, I filed it away almost to the point of being forgotten. Seeing as how 2008 was a very busy year for me it should come as no surprise.

In late October of 2008, after I had gotten settled here in Denver, I wanted to build a website. I played around with a few ideas and then remembered that 24ways would be starting up soon. 24ways is an awesome website run by Drew McLellan and Brian Suda that only publishes articles during advent. This gave me the idea to create a website that had a restricted publishing schedule.

In the end I settled on building a site that published articles in a very set fashion, highlighting various parts of website development each with a unique design reflecting the content. 13 articles a year once a month with a yearly review.

Well… after much work, it happened. The first article of 13things is now published.

Dream, Dream, Dream…

ajaswa — Sat, 27 Dec 2008 16:20:25 +0000

It’s been a while since I switched over to Dreamhost for my hosting needs. I must say it’s been a very good experience so far. Though my experience with Media Temple was also good until I actually needed help from them. Alas, I don’t want to get on a tangent about my past problems with Media Temple but rather talk about how well Dreamhost has worked for me so far.

For starters all my cron jobs are running nicely and have been running without any problems since I set them up. Pretty sweet.

Next is communication. Dreamhost has a twitter account that updates when something is broken or upgraded or just a status update. It’s not overly useful to me but it says something about Dreamhost: they want their clients to know what’s going on. We all know stuff breaks and rather then making me call/email them to figure out why my site is broken they make it known what’s going on. Each tweet I’ve seen links over to the Dreamhost Status website that gives a more detailed explanation as to the current issue.

Support. Ahh yes. I’ve only put in one support ticket. Granted it was more of a question about how something worked rather then something being broken. But the support rep got back to me within one hour, gave me the answer and pointed me to the documentation I missed. I’m not sure I can express how awesome that is. Speedy and helpful!

The admin console is pretty easy to understand. Some of the things don’t make sense to me. For example: the mysql screens are under a section called “goodies”. Not a major issue but a little confusing if you aren’t expecting mysql to be a goodie.

The one issue I have with Dreamhost is the One-Click installer for Wordpress. You have two options: the first being they manage the install, do upgrades and what have you, the other you manage it yourself, they’ll install it but after that you maintain it. I haven’t done the first option as of yet, but the second one is kinda annoying. Dreamhost seems to know what you will want when they install it for you. They’ve seem to think installing 50+ themes and 5+ plugins with your Wordpress install is a good idea. Well it’s not. So now when creating a new blog I have to go in and delete the themes just so I can make sense of things. It makes sense for the “they manage” option but if I’m going to be doing it, I’ll decide what I want, thanks.

Overall Dreamhost has done a good job of making me a happy customer. That on top of the discount I got from a friend is just awesome.

The Game Plan

ajaswa — Tue, 23 Dec 2008 23:17:08 +0000

The other day a friend of mine was asking me about XOXO and Microformats. He is relatively new to the industry and was trying to get some advice about how to implement XOXO. After talking to him a little bit we got on the to subject of (re)building a website and the steps to fixing/building sites.

A while ago I had started a project to go through the process of building a website. It’s still on the back burner right now but I thought I would present a list of things that, when developing a website’s interface, need to be focused on. I’ve collected my thoughts on a short list that hopefully will help you.

Structure

All websites need to have some sort structure when writing the (x)html. I would suggest taking the semantic approach and organize things, that is to say use meaningful IDs and class names.
Accessibility

I know people don’t get all excited when they see accessibility. But if you take a minute and think about it most of the SEO concerns are addressed with Section 508 and WCAG. Consider this: alt attributes on images help both accessibility and SEO concerns. I say make your site usable by all (humans) and you won’t have to worry about the robots. Google did say to build websites for humans for a reason.
Users

Make sure that users can use your site. This sounds like a no brain-er but you would be surprised how how many developers launch their sites without even putting it through a simple user test. Its not overly hard to do, grab your boyfriend, girlfriend, brother, sister, parent, random person in a coffee shop… well you get the idea, sit them down and watch them use your site. Take note of where they go and what they do. Ask questions like: what are you looking for? and what did you expect to see?
Extras

While Microformats are nice and handy, not everyone can use them. For example my parents don’t even know what they are. Some web developers I know don’t really know what they are. So use them but don’t expect people to use them right now. When it comes down to it and time is a factor don’t worry about Microformats. I’d rather see beautiful accessible websites then being able to scrape information off sites with a toolbar.

Google’s SEO Guide

ajaswa — Mon, 17 Nov 2008 17:12:14 +0000

On the 12th of November Google came out with a SEO starter guide. I thought since this will be my very first post about SEO that I would review what they had to say. They have 12 points that they make, most of which are common knowledge. This comes on the heels of Google’s Tricks and Treats webmaster event where they dispelled a few common myths about SEO and gave an idea about Google’s stance on SEO practices.

I’m going to take a look at this from the stance of building and designing websites for people (rather then robots), since that is what Google has always said.

So before I ramble on…

Create unique, accurate page titles

No problem here. It only makes sense to have unique, accurate page titles. Would you want a page title to say “Fish Market” when the page was really about coffee? I didn’t think so. As for the uniqueness of a title make sure you don’t have two pages with the same title. With the page title you are telling your users where they are with a quick glance.
Make use of the “description” meta tag

Well fancy that. Google telling us to use one of the meta tags. I know some people that are going to be a little upset about this one. Google makes it pretty clear how this helps users. They (sometimes) take the description meta tag and use it in the search results. Helpful? Maybe… Though it is another place to give a little bit more information about the page/site.
Improve the structure of your URLs

Google says to make your URLs make sense. That is to make your URLs have human readable words in them so that people can understand where they are. Not much to say here…
Make your site easier to navigate

Hrmm they suggest adding sitemaps and Sitemaps to your site to make it easy. That is one way of doing it, though having a good navigation on all your pages would seem like a better choice for your users. They do start to talk about that a little bit seem to rely on Sitemaps a little too much I think.
Offer quality content and services

Well Duh… “Users know good content when they see it…” I beg to differ. There are some places that users would not know good content if it walked up and slapped them in the face. But they did hit this one right on the head. Good content/services will bring users back.
Write better anchor text

Yup. No more “click here“. But alas people still do it.
Use heading tags appropriately

I think this section should really be about writing good markup. It would go far if Google started saying that good clean HTML meant something to them. Using markup how it was meant to be used should always be done.
Optimize your use of images

Ahh Google I love you. You used “alt” attribute and not “alt” tag. Good for you. Remember kids use your attributes wisely. Not only will they help people who can’t see images figure out what is they but they will also save lives!
Make effective use of robots.txt

Robots.txt is for robots and not users. There’s no other way to put it. Though in a round about way users use Google to to find your site and if you have a directory hidden then the users won’t see it in the search results. Err umm… yea I say we start a standard called humans.txt for use by humans… yea… that’s it.
Be aware of rel=”nofollow” for links

Again rel=”nofollow” is for robots. Unless you want to look at the source code of a site most people won’t even know its there. Also in this section they mention using CAPTCHAs for spam… NO! Damnit Google I thought you were better then that. W3C has been saying since 2005 (or longer) that CAPTCHAs are in-accessible. Bad Google bad bad bad…
Promote your website in the right ways

Not much to say here other then: Google can you give us examples of the wrong ways to promote our sites? I mean are there any?
Make use of free webmaster tools, Take advantage of web analytics services, Helpful resources for webmasters

“Oh hey there, I’m Google, I hope you enjoyed this guide of mine. I’m going to sell my products to you under the guise of an SEO guide. I make a lot of products that you should use. So I’m going to put ALL my links at the end of this SEO Guide so that you’ll click on them. YAY!” said Google over enthusiastically.

Well kids that’s pretty much it. I hoped you enjoyed my “review” of Google’s SEO Guide.

One pagers

ajaswa — Fri, 14 Nov 2008 04:14:24 +0000

I’ve gotten on a kick lately of finding one pagers. That is: sites that only have one page and sometimes provide useful information. Some say that I love them, though I find the concept of them more interesting. I’ve been looking for these for a bit now and haven’t been able to find all of them.

Some that relate to web and design:

Special Characters? Yup. They are so damn special they get their own websites.

Then we have our political ones:

And strange ones:

www.thingsididlastnight.com

Helpful ones?

yesnomaybe.info

Dear Media Temple…

ajaswa — Mon, 20 Oct 2008 01:15:55 +0000

Dear Media Temple,

You’re trendy. You’re sleak and sometimes even sexy. And on the rare occasion your support is actually helpful. However for the past 2 weeks your support has sucked ass. Now I don’t mean just a little here and there. I mean big time. I even posted on Get Satisfaction because I wasn’t getting satisfaction with the service I was PAYING for, service that you claim is “Unrivaled”. You want “Unrivaled” support? Go check out USAA or Zappos.com. USAA has gotten some great awards under it’s belt. While Zappos has a rabid fan base of loyal customers. And when I say rabid I really mean it.

Sadly keeping your customers informed or even replying to support requests doesn’t seem to be on the top of your list. You claim that “In many ways you could say our main product is customer support. It’s what we work on the hardest. 90% of our staff is in some way dedicated to this process.” (source) I find this rather hard to believe as I have had a support ticket open since the Oct 15. It is now the 19th. And mind you this isn’t the first incident. I had another ticket open on Oct. 8th and wasn’t closed until the 13th. Quick turn around time there guys.

I’ve hosted with you for over a year now. I always thought you guys were pretty cool. Hosting the An Event Apart after parties. Being pretty cool to hang out with. But really taking 5 days to button up a ticket? That’s just shit. Before I even got a decent reply I had to post on Get Satisfaction. Way to take a pro-active approach to fixing client issues before I had no where else but to the public. I know how PR works. It seems you guys do also, because you were quick to give me 3 months credit on my account. But you pushed me a bit too far and gave me no recourse.

After that was settled, TWO DAYS later I once again had an issue. I hoped that I would get a quick reply seeing as how I was told my experience “is not the norm”. But alas… It appears that shitty service is the norm at Media Temple.

It really makes me wonder what other problems Media Temple has, since their “main product is customer support”.

I’m done with you. I’ve already moved my websites over to a server at Dreamhost.com. It was a pain in my ass to do that. I feel like billing you guys the 20 hours it took to complete. But I’d be happy just to get my money back.

I will never suggest, to anyone who asks about web hosting, that you guys are the way to go. I would though suggest if you want to feel like crap and get crappy customer support, that you guys are the best!

I feel dirty dealing with you,

Andrew Jaswa

Font Survey

ajaswa — Wed, 16 Jul 2008 19:21:32 +0000

The reason

A while ago I got the idea to do some research on font and their usage across the internet. I was trying to figure out what font or typefaces people use and why. To me this is rather interesting because if you have any background in design or typography you’ll know that type conveys meaning and emotion. Would this not be true about the web? Could the typeface of a site convey something about the author or the message they are trying to get across? Maybe something they were feeling when they had it designed? Or maybe there is a corporate style guide that the designer had to follow when building the site? Or maybe that style guide was made with the idea of conveying emotion?

Whew… that’s a lot of questions I have. I’m not got to even try to answer them because, frankly, I can’t. I don’t know what was going through the designers heads. What I can do is survey websites and present the results.

The start

My initial survey was completed in early 2008 with about 100 sites. The sites I first selected were gleaned from the Alexa top 100 sites for the month of January 2008. Since I am from the US, speak English and am interested in western typefaces, I was only interested in English sites. It would be rather hard for me try to figure out different character sets other then Western/Latin. The rest of the sites I pulled were from sites I visit often.

This gave me a wide range of websites from categories of news and social network to retail and design. I figure that 100 sites or so of the whole internet would a fair sample to kick things off. Also I need some very highly and low trafficked sites to get a better idea of how people use type on the web.

The process

I began by going into the CSS and pulling out the *, html and body selectors and seeing what those were set to. In a lot of cases one of those three selectors set the font for the entire site. Great! Job done! Well… sort of. Some sites didn’t have one of those selectors setting the font. So I had to dig some more. Some sites had it set on the p selector, some just had IDs and classes. I ended up going through lots of CSS, some of it nicely organized and some of it downright disgusting.

As anyone who has been working with CSS and browsers for a bit, you would know that for the best results you want to set more then one font in your CSS declarations. So seeing something like this was far from uncommon:
font-family:Arial, Helvetica, Verdana, sans-serif;
I collected all the font information I could because who knows it could be useful at some point. Most of the font stats in this post and in the survey are based on the first font.

The odd bits

While going through the sites I noticed was that some sites would use one type for headings and another type for body text and yet another for their footer. In the case of Coudal Partners out of Chicago, they use Gill Sans for their H1, Times for the rest of their headings and Verdana for most of everything else. Now this puts me in a tight spot. All three faces are in the site, but I can’t then lump a site into a category or group. It got me thinking about what people “would/should/could” be reading the most.

I settled on going with what a majority of the text was set to. In the case of Coudal I settled on Verdana. Why? Because my thought was thus: If I (the user) is going to read, I’m going to read the majority of the text, so I’m going to see that face the most. In turn Verdana was used for a majority of the text in this case. I followed this same thinking for all the other sites I collected data on.

So why did Coudal use three typefaces on their site? I’m not sure but I bet it has something to do with a question I asked before: Could the typeface of a site convey something about the author or the message the are trying to get across?

The interesting bits

Some of the more interesting bits I found were the unbalanced serif to sans-serif ratio. In a sample of 112 sites 8.93% or 10 sites used serif fonts. Of the sites that used sans-serif fonts Arial came out on top with 46 sites. 35 sites had 1 primary font and 2 secondary fonts. 27 had 4 total fonts set. This one amazed me: 1 site (reference.com) had 8 total fonts set. "Lucida Sans Unicode", "Arial Unicode MS", "Lucida Sans", "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
This blew me away. Why would anyone want to set 8 fonts?

Andrew Jaswa » websites

Markup Conditionals

February’s Article on 13things

Wordle

andrewjaswa.com

ajaswa’s delicious

13things

Dream, Dream, Dream…

The Game Plan

Structure

Accessibility

Users

Extras

Google’s SEO Guide

Create unique, accurate page titles

Make use of the “description” meta tag

Improve the structure of your URLs

Make your site easier to navigate

Offer quality content and services

Write better anchor text

Use heading tags appropriately

Optimize your use of images

Make effective use of robots.txt

Be aware of rel=”nofollow” for links

Promote your website in the right ways

Make use of free webmaster tools, Take advantage of web analytics services, Helpful resources for webmasters