Hi. I'm Andrew

Filed under: best practices

See all posts on posterous with this tag » 

What goes wrong with CSS

  1. CSS grows with site size. Depending on your site, this can be a serious issue — not just for performance, but because CSS is code. More code tends to lead to more problems — maintaining code size is a serious concern.
  2. CSS best practices encourage what would otherwise be bad programming: repetition, bad grouping, loose coupling. Again, if you treat CSS as code that needs to be maintained, reviewed, and refactored, these are negatives.
  3. CSS is often contextually unreadable. For example,.about .main ul li li amight be very clever CSS, using a nesting in the markup to trigger a style, but it’s very bad code — without a strong understanding of the HTML, this code can be ambiguous, and its HTML target hard to pinpoint.
  4. CSS encourages overrides, which are the death toll for maintainability. The more styles you override, the more styles you will eventually have tooverride again.
  5. CSS encourages bad coupling and distant dependencies — for example, let’s say all LIs inherit a margin-bottom we set early in the CSS, and the features we code design with this spacing in mind. Despite the fact that the art director says a particular feature MUST look the way the comp looks, said feature now depends on a very remote line of code, a line that anyone might change without realizing the consequences.

Found at Viget.com, CSS Strategy Square-off.

The approaches highlighted, OOCSS & SMACSS, in the article are also what I consider to adapt going forward with CSS development/authorship. 

 

Filed under  //   best practices   bookmark   css  

Comments (0)

Our Best Practices Are Killing Us

Untitled

Our Best Practices Are Killing Us via Slideshare

For years, we have been suffering with the myth that if we just tried harder, our CSS would stay clean. Each time we start a new project, we valiantly follow best practices and commit ourselves to writing beautiful code. Then, a few months into the project, we're once again faced with a mess. Maybe it was the contractor who committed crappy code? The project manager who would never give us time to refactor? The truth is that our best practices are killing us. In this talk, we will debunk the best-practice-myths that are making a mess out of our sites.
Nicole Sullivan @stubbornella

The flawed best practices.

What are those flawed best practices?

  • Classitis!
  • Never add an non-semantic element
  • Or, a non-semantic class
  • Use descendant selectors exclusively
  • Sites need to look exactly the same in every browser

 

There are a lot of points you can get from this slide. One point is that when I get around favoring ids over classes, I found it hard to override the CSS rules or selectors. Specifity becomes really hard to manage and on some point I'm relying so much on the !important derivative which is just the end of the game for overrides. I highly recommend front-end developers and web designers to read the slide and internalize the points it tries to convey.

Filed under  //   best practices   bookmark   css   presentation  

Comments (1)

Becoming a Web designer

Hi Amrinder,

First, let me say I feel quite honored that you ask me for advice. I can give you the following tips:

Todays web design and web developing goes beyond using FrontPage or Dreamweaver. If you would like to learn how to code web pages, do it by hand. With that, I mean use a text editor (UltraEdit, Komodo Edit etc.) and your browser (preferably Firefox). That is all you will need to get started. Do not use FrontPage, cause it produces too much unnecessary markup.

I tend to learn much from going through examples, mostly from books. Here are some titles that I can recommend (you would need to look them up on Amazon to get them):

These books (there are more, but it is a good starting point) will start from a basic level telling you what todays webdesign is about and how websites should be coded these days.

Follow websites/blogs from leaders in the industry, like:

A very important point is to do projects on your own, even if they might not be well paid. This gives you practice and the chance to further develop your skills. So if your degree course does not offer such things, try to do a web project on the side, maybe for a friend or a social organization – just to do some practice and get a feeling what it takes to make a proper site.

Hope this helps,

Klaus

This is so true. Amrinder posted the above email as reference for aspiring web designers for them to get started. I'm so happy that I'm going towards the same direction embracing hand coding & Web Standards to hone my skills. Not to mention that both of my favorite apps were mentioned, Komodo Edit and Firefox. :)

Amrinder also posted blogs that he follow. To wit, Andy Clarke, Jason Santa Maria, Shaun Inman, Khoi Vinh, Mark Boulton, Tim Van Damme, Jon Tan, Elliot Jay Stocks and Dave Shea which are web designers that I also follow.

Filed under  //   best practices   bookmark   modernweb   tips   web design  

Comments (1)

Great Homepages Really Suck

Where would we be today without vacuums?

The vacuum is a wonderful invention. It sucks up your household dirt and puts it exactly where you want it to go -- off your floor and into that little bag.

A successful homepage acts exactly like a "digital vacuum" -- it sucks users in, away from the homepage, and straight to important content within the rest of the site.

Your site visitors are faced with only two choices once they're on your homepage. Either:

  1. they click past the homepage to your site's secondary pages, or
  2. they click the back button and leave your site.

You'd obviously prefer they click past the homepage. But how do you get them to do that?

Pull, Don't Push

What's the best way to get users to click deeper into your site? By pulling, rather than pushing.

You've probably heard the terms "pull technology" and "push technology". Our friends at LearnTheNet.com tell us "pull technology" refers to technology that allows users to pro-actively seek out information, whereas "push technology" describes technology that delivers information to users, usually at regular intervals and without the user actively seeking the information.

I use these terms loosely to refer to the way in which a homepage can deliver content to a user. I've seen too many homepages that try to push users to other pages on the site by "feeding" them only a few simple links, or very brief content.

I've also seen a lot of great homepages that successfully pull instead of push. Some of the better ones include:

The developers of these homepages understand how to pull users to important areas within their sites, by enabling the user to choose from a variety of both links and content. They understand that not all users even know what they're looking for, and that people need a variety of ways to gather information. And they understand that not all users are alike.

Two Kinds of Users

You may argue that the sites I just mentioned have visually "busy" homepages. You're probably wondering, "Doesn't that confuse the user?"

Good question. The answer? "Not necessarily."

And here's why: in his book "The Web Content Style Guide", Gerry McGovern reports a study by the prestigious Palo Alto Research Center, previously named Xerox PARC. The study found that 75% of Web readers are in "content-gathering" mode, while only 25% are searching for a specific document.

Granted, we can't directly apply those findings to all Web users, as the study referred only to Web "readers". But a loose application of the study's findings shows why the Websites mentioned earlier have so much content on their homepages. Yes, some users may be searching for specific products or information. But a larger majority may just be browsing for content.

These findings are harmonious with Jakob Nielsen's argument that there are two kinds of users: those who search and those who browse.

A homepage that has only four links is definitely easy to navigate, so it suits those who search. However, it does nothing for those who browse in content-gathering mode. Not only that, but users are forced to choose from pre-categorized links such as Products, Company Info, etc., when they may not even know what they're looking for.

For example, take a look at the homepage for RentStinks.com, the Website for a local homebuilder here in Utah:

1036_original

Really easy to navigate, right? Just pick a link and go.

However, put yourself in the place of someone visiting the site: Suppose you're a first-time home buyer (in which case, you'd be part of the site's key target audience). You're probably in content-gathering mode. Perhaps you're looking for a three-bedroom, two-story home.

But is that all you're looking for? What about the location of the home? The amenities? Do you even know what a "rambler" is (I didn't when we began searching for our first home!)? Or perhaps you're simply not sure what to look for in a home, or even why you should choose one home builder over another.

Put yourself in the shoes of the user, and the homepage for RentStinks.com becomes less and less helpful. It attempts to push you to Floor Plans, Communities, and so on, rather than pull you to the page that contains 20 convincing testimonials from satisfied customers, or to the page that talks about Category 5 network wiring being a standard feature in all homes. What's worse is that it does all of this without showing hardly any pictures of its homes.

Creating a Homepage that "Sucks"

It's easier to create a homepage that draws users in than you might think. Take these three ideas for a test drive on your own site:

Bottom-Up Development

Perhaps the hardest obstacle to overcome is a change in the way you mentally and physically approach the development of a homepage. Most developers start at the top and work their way down, creating the content and design for the homepage first, and then trying to push users to other pages on the site.

To create a homepage that pulls, you need to develop from the bottom up, creating content for the secondary pages first. Then determine which of these pages should be emphasized and where to place appropriate links, images, and content on your site's homepage.

Stephen Covey's maxim "begin with the end in mind" is well suited to bottom-up Website development. Determine the final pages on which your visitors should land, and emphasize those pages on your homepage.

  • Pull, Don't Push (Begin with the end in mind)
  • Two Kinds of Users (those who search and those who browse)
  • Creating a Homepage that "Sucks" (Bottom-Up Development; Link Wording; Don't just say it, Show it)

Filed under  //   best practices   bookmark   homepage  

Comments (0)