Tag: review

Grep to for analyze css.

CSS duplication is a web-wide problem.

Started helping facebook optimize thier site and they had 1.9MB of css loading. The same color showing up hundreds of times. Many many color statements and declarations.

• !important declarations get dangerous. Sites found to have over 500 !important declarations!
• float is a serious problem when there are a lot of them. It’s better to use some sort of abstraction rather than floating everything for layout.
• font-size: there should not be a need for more than half a dozen size declarations, use abstraction!

insanity: doing the same thing over and over and expecting different results.

We all have this problem of duplication. CSS (like JS) will let you do anything you want (even if it’s stupid). But we don’t have to do stupid things!

New Best practices

• Pixels for fonts: became frowned on with ie6, but all modern browsers use pixels, ems and percentages just fine. Why not avoid percentage and ems because they have significant drawbacks and compounding effects.
• Adding extra syntax/markup: separations of concerns – make functionality overlap as little as possible. Solve one problem at a time and use extra mark-up judiciously (don’t go nuts with dives, but also don’t strip out too much and introduce bugs).
• Semantics: class names and ids are not usually read by end users, so let’s make sure class names and ids work well for developers. More is not always better. Create abstractions that solve problems one time. Don’t couple CSS too tightly to the content or the display. DRY (Don’t Repeat Yourself – Every piece of knowledge must have a single, unambiguous, authoritative representation within a system).
  Media block (like a SLAT in dan’s talk). Separate structure from chrome (design). May have some extra css class names or divs, but it will cut html and css overall.
• Classitis: use specificity to accurately target elements. Class order in attribute doesn’t matter, but order in the actually cascade. Specificity grows over time and you end up coding via firebug. !important is like nuclear trump in CSS. Avoid the nulcear option: keep specificity low: avoid IDs, inline styles, !important, and very complex selectors. Apply classes to the element we are trying to affect (not to a parent node). Use class “h6” along with h3 elements for visual and code semantics to play nicely.

Great developers can build amazing things if we move worst-best practices out of our way.

Resources:
oocss – join the oocss google group
csslint.net

Cormorant trained to fish for the fishermen. The fishermen tie bands around the birds necks that are. Fishermen fish at night, using lamps they attract bugs, which attract fish, and the cormorant get to fish but cant swallow them and the fishermen take the fish.

Browser vendors are promising us new CSS tools, but don’t actually let us use them. It’s a big tease! Cormorinths are either fish in the hand, diving for fish or still sitting on the shore. A lot of really cool stuff we’ve just been teased with and told we can’t quite use yet.

(SASS and LESS will any and all prefixes.)

• Transforms: Go for them right now! Widely supported and mainly just for decorations.
• Transitions: Go for them now! Basically event driven, if the browser doesn’t support them they don’t work and no one needs to know. No reason not to use this stuff, it’s decoration.
• Animations: These have some issues still. Animations are constant, and the problem is only webkit supported them until recently but then the working group took it went back to the drawing board. Still in production.
• Multicolumn: Not fully supported yet. Some browsers support the main idea, but none of the details like gutters.
• Grid Layout: Hang elements off of specified grid lines for layout. Only supported by IE10, but not bug free…
• Exclusions: define an area that content will flow around. Not locked to rectangular objects (can use alpha channels or svg shapes to define areas).
• Regions: Define text-flow from one area to another. Requires document structures we are not used to, using empty structure for the browser to implement.
• Combinations: Using all or any of these elements together.
• Flexible Boxes: If you have a use case, then go for it. But they are going to be changing the spec for it. It will be a different spec though, so it shouldn’t break.
• Scoped CSS: using a style but limiting it’s scope to the parent element that imports it.
• Calc: Really nice, but for now rely on preprocessors. Drawback is that it’s only on first render, if element is updated via scripting
• Masks, text-stroke, box-reflection: webkit only! And not looking like they will spread.
• Paged Media:
• Hyphenation: use now with a good polyfill. (Polyfill – spackeling paste to fill in cracks and crevices – nothing to do with polygons and fills)
• Gradients: Borderline shore and dive… Really cool, webkit and gecko have totally different syntaxes (to the degree of english and chinese), fun to look at, but a torture to declare. Calling it now, gradients will be web 3.0, rounded-corders was 2.0
• Border Image: border is defined by slicing an image into sprites and applying it to the border (and even background image). It is supported in a number of browsers though, so use it but don’t depend absolutely on it.
• Border-radius: fish! Use now and go crazy with it.
• Web fonts: use it now, but use it wisely (refer to Jake’s talk).

But what can we do about it? Can we prod the working group to move things along.

First thing to do is experiment with the properties! You spread the cool effects, second you find crazy unexpected bugs. Use html5please.us as a guide (even though he disarees with some of their points and they talk about css3, js and stuff as if it is html5). Browsersupport.net documents which browsers and versions of those browsers support css3 properties. CSS3.info (subscribe to the rss to be kept in the loop, as well as the css3 working group). Even subscribe to the [email protected] emails list (and f you’re like me, I know I am, set up a filter and archive it and then poke into it when you have some time. Take it even further and join the w3c with a reduced membership fee for startups (advantage is that you can send a representative to the working group). Also, blog about it! Document what you discover, write it up and publish it, tell others what you’ve written maybe even in the mailing list. CSS samurai documented top 10 failings in each browser and each one got fixed eventually.

We didn’t get here all at once, it’s been here a little there a little. But we are progressing and eventually will get somewhere good. Every day, week and month more support is coming.

2011 was a year to step back and learn something new. What else other than the banjo! Banjos are very misunderstood. Learning new things helps us to become better at things we already do. The process of learning can be applied to things we know to break it apart and we can better ourselves.

1. Imitation – LEARN – view source of greats
2. Repetition – DO – And do until it reaches second nature – build repetitive patterns
3. Innovation – apply your own creativity – reinterpret – stylize – own

Frameworks are great tools, but they are learning tools. A good craftsman builds their own tools!

Pears

http://pea.rs/ – common patters of mark-up & styles
-an open source wordpress theme to allow anyone to set up their own library of repetitive patterns.

Let’s be semanticaly correct.

Examples: HTML5 – placeholders, roles (ARIA landmark roles – Jeremy Keith of adactico.com)

stronger css selectors rather than more classes in css. (nth-child() in place of even, odd, alt, classes)

Slats – are blocks of content usually containing an image (thumbnail), title and description and even more optional info(date, tags, etc). They are often teasers of more content that should click through.

Breaking things into patterns you can solve small problems w big impact.

Overview of SASS (I agree with Dan and have been hesitant to implement CSS preprocessors)
Love the idea of preprocessors for CSS

Earl Scruggs revolutionized banjo playing with a new style (Flint Hill Special)
Bluegrass killed the banjo (arguable) by making it too hard for average people to play the new cooler styles.

One reason why CSS didn’t have many of these SASS and LESS features to begin with was the creators didn’t want to make it a complicated language. If you make something too powerful it can get too overly complex and people don’t use it.

There is a pride also in the handcraftedness of the source code. We like tools that plug holes, but don’t mess with our craft. But the benefits of using CSS preprocessors outweighs these nits. It’s easy to install:

$ gem install sass

(There are also tools that can help: Scout) It’s easy to watch a sass file and have it automatically recompile a CSS file on save.

watch $ sass ...

This is beautiful for those who follow the DRY mantra: Don’t Repeat Yourself!

CSS Preprocessors give us: variables, functions (mixins), inline media queries.

Respond or Adapt! Responsive Web Design

Dribbble set with a single breakpoint at 500 in which it makes the ayout of the site fluid. This is so we don’t have to consider the plethora of mobile devices using various sizes around the same.

We should let our content dictate our breakpoints rather than the popular devices dictating the breakpoints. Avoid display:none; give better options or if it’s really not needed get rd of it everywhere.

1. Embrace Patters
2. Solve Small Problems
3. DIY Frameworks
4. http://pea.rs

Usability should be called inclusive design so we don’t forget that we shouldn’t leave anyone out!

Indifference toward people = design cardinal sin!

VisionSim – usability ios app.

When designing and coding, think of those with disabilities! (use alt tags properly)
– It’s a big business

Think of color blindness which is a very common “disability” and use a healthy contrast in text on backgrounds.

LayerVault – version control for designers.

Tools – colororacle.org – screen viewing modified for color blindness.

Use technologies to make smart decisions

Keyboard shortcuts [shift + ?] – as seen in google mail and yahoo mail…

Contrast for text and good color choices.

Captcha, could there be a worse experience?

Look at projects in the context in which they may/will be used. Test In Context.

Resources:
simplyaccessible.com
yaccessibilityblog.com/library

Very exciting to hear THE Zeldman!

Do designers actually control what a site always looks like? What is a web designers job anyways? It’s to serve the customer/user, an advocate to give all users a better experience.

Bebo became synonymous for spam for only carrying about conversions no matter what they had to do to get them. Clearing your throat doesn’t always mean you want to go to Berlin!

Design that does not serve people, does not serve business.

Were here to study best practices. Good Web design starts with content. Content should precede design. Templates are not that!

Blogger template design story. Jeffrey and friends were excited to design blog templates with Web standards in mind! But very hard to design a site with no idea what the content would be.

Progressive enhancement: good experience for all! Http://easy-readers.net. Adaptive Web design and responsive Web design = progressive enhancement taken to the next level.

1. Content is a design problem. Goss Web design starts with content. Yet our designers are often hostile to content.
2. If our designers don’t serve content, users well find ways to get the content anyway.
3.progressive enhancement rethinks design to put great user experience (and content) first.
4. Responsive and mobile are creating a new interactive design landscape that puts users and content first.