Get in Touch

How can we help?

Whether you are looking to redesign your site or simply refresh your brand, we are here to help!

Prefer to send us an email? hello@imarc.net

9 Expert CSS Ideas You Should Think Twice About Before Using

Posted by Will Bond on May 10, 2007.

Smashing Magazine does an excellent job of providing quality resources for web developers. Today while checking out Digg, I noticed that they have a new article entitled 70 Expert Ideas For Better CSS Coding. The article contains lots of good information on how to improve your CSS, however there are a number of ideas presented that should be taken with a grain of salt.

Section 1.1

Idea: Keep a library of helpful CSS classes

This concept really breaks the separation of presentation and content that we strive for when using CSS classes and writing semantic code. If we have some html:

We gain NO benefits over the following, except for a few characters:

Instead, it makes much more sense to create classes based on the content:

Then if you have multiple callouts, you can change all of them with a single CSS rule, as opposed to editing the HTML when you want to change the float or width.

Section 1.3

Idea: Keep selectors to a minimum

The rationale for this is to reduce the number of selectors needed to override the rule, and helping keep troubleshooting time down. From my own experience I have found that using specific selectors more often helps with troubleshooting. You’ll first want to start with styling all of your basic html tags, then create specific styles for the sections that override the defaults. If you have auxiliary panel that needs styling for links inside of an ordered list, don’t use:
.aux_panel a { }

Instead, you will probably find less issues down the road if you use:

.aux_column ul li a { }

This will especially be the case if you add more links to the right column that are not inside of a list.

Idea: Keep CSS hacks to a minimum

This advice really should read: Don’t use CSS hacks.

CSS hacks break over time, see IE7 for an example. Instead, use valid CSS, and try some different presentation techniques. Most often CSS hacks have to do with IE. Check out Dean Edwards’ IE7 script for info on how to make your life easier with IE.

Section 1.5

Idea: To work with EMs like with pxs, set font-size on the body-tag with 62.5%

This is a little dangerous since EMs cascade and pixels don’t. Say I have the following CSS:

html { font-size: 62.5%; } body { font-size: 1.3em; } h1 { font-size: 1.5em; }

As a result my h1s would have an equivalent font-size of 19.5px, not 15px.

Idea: Use universal character set for encoding.

UTF-8 is a wonderful character set, don’t get me wrong, but you have to know more than just including the following inside of your head tag:

<meta http-equiv="content-type" content="text/ html;charset=utf-8" />

If you present your files are UTF-8, but your editor is saving them as ISO-8859-1, Windows-1252 or Mac OS Roman you could have issues for characters above between 129 and 256. Better advice is to make sure you include a meta tag with your actual character set.

Section 2.2

Idea: Use the power of selectors

These selectors are awesome, but be very careful! None of them are supported by IE6 unless you use Dean Edwards’ IE7 script. Hopefully this will save someone from developing a whole project in Firefox, Opera or Safari just to see it get destroyed by IE6.

Section 2.3

Idea: You can mark external links automatically.

Marking external links is great, but really think twice before using content:. CSS is about presentation and really shouldn’t be adding content to your pages. Instead, add a background image with a little right padding.

Idea: You can remove dotted links with outline: none;

This seems like a great idea, especially if you use negative text-indent values. The real issue is with accessibility. As soon as you hide the outline, people with keyboards are gonna have no idea what link they have tabbed to. This might be a good time to look and see if a different technique than negative text-indent might solve your issue.

Section 2.5

Idea: You can force IE to apply transparence to PNGs.
Idea: You can define min-width and max-width in IE.

Don’t code these into your style sheet. CSS hacks will degrade over time and it makes your CSS all messy. Instead I would recommend using Dean Edwards’ IE7 script to fix issues with only IE, leaving your css nice, valid and clean. The IE7 script also adds support for all kinds of good, usable CSS. Check it out!

At BIO 2007 - Booth #2152

Posted by Robert Mohns on May 7, 2007.

The booth is up, the iMacs are webby, the staff is caffeinated, and the Cube of Truth is ready to do its duty. Drop by and get a sneak preview of the new Massachusetts Biotech Council web site — it's even better than Spiderman 3! More updates (and photo) as the show continues — check back tomorrow. If in doubt, subscribe to our RSS feed (learn more).

iMarc Hires Melissa Maguire

Posted by Nick Grant on April 27, 2007.

iMarc is pleased to announce the addition of Melissa Maguire to the staff. Melissa will be working with the creative team to help develop innovative web designs and unique branding. Melissa is a graduate of The Art Institute of Fort Lauderdale and worked as a Graphic Designer for a digital printing studio down in sunny Florida. We're excited to have her here and look forward to her contributions.

Meetings: Sit Down

Posted by Dave Tufts on April 24, 2007.

Right now "stand up" meetings seem to be all the rage. More popular than Steve Ballmer in a room full of developers, stand up meetings have infiltrated every aspect of daily productivity. Stand up meetings, as I understand them, are quick, non-scheduled meetings. These meetings usually have just one or two items on their informal agendas. Someone calls an impromptu meeting, the team quickly huddles up and the the stand up meeting begings. The thing I find particularly odd is the enthusiasm that is behind this concept. If you say that you don't like stand up meetings, you better watch out. [the record scratches to a stop while an agile evangelist runs up and brands you with the Scarlet Letter]. On Martin Fowler's site, contributer Jason Yip, advocates then breaks down the stand up meeting. He talks about the high energy, the quickness, the supportive team building, but ignores the interruptive nature of stand up meetings. In a recent blog by Seth Godin, the author states, "It's a huge mistake to just show up in a conference room and have a meeting". Why? Most meetings at iMarc follow a more traditional concept... Someone sets an agenda and schedules the meeting at least a hour in advance. This gives participants time to find a logical pausing point in their work. After the meeting, they pick up where they left off. With stand up meetings, the participants are pulled away from their work arbitrarily. After the meeting they spend a decent amount of time just figuring out what they were doing and where they left off. The meeting is held in a conference room with the doors shut Participants are forced to get up, walk away from their computers, telephones, coworkers, and distractions. This puts them in a different state of mind. They aren't tempted to answer their phone if the stand up meeting is huddled up around their desk. The reason why stand up meetings seem to have taken off is because they're short. People like short things (like Pedroia at second). It is, however, possible to have a short, scheduled traditional meeting. Meetings are intrusive and interruptive enough. Stand up meetings take the interruption to a higher level.

Seacoast Science Center in the news

Posted by Robert Mohns on April 24, 2007.

This week the Boston Sunday Globe ran an article about Seacoast Science Center.

We're pretty excited by this – Seacoast is a great organization and was a fun site to build, and we're glad to see them getting the exposure that such a great learning center deserves!

Of course, I'm biased – last autumn I went there with my sister, brother-in-law and their two young boys. The boys had a fantastic time and their parents were impressed by the way the Center provided learning activities for kids as young as two years old! Many centers do a great job with some age ranges but not others; Seacoast manages to cover the full range.

Be sure to check out Seacoast's Photo Galleries (which they maintain themselves, by the way, with iMarc's SiteManager tools), as well as their Events Calendar.