hot adsense trick: April 2012

Monday, 30 April 2012

BEM: The Block, Element, Modifier Approach To Decoupling HTML And CSS | Van SEO Design

BEM: The Block, Element, Modifier Approach To Decoupling HTML And CSS

Posted: 30 Apr 2012 05:30 AM PDT

For the last couple of months I’ve been talking a lot about giving our css best practices a refresh and along the way have looked at approaches such as OOCSS, SMACSS, and DRY CSS. They all have some common underlying principles, one of which is the separation of structure and presentation.

We’ve all had this goal for years, but our practices haven’t really achieved it. Instead of decoupling our html and css we’ve been locking them ever tighter and making them more and more dependent on each other. I apologize if you’re getting tired of hearing me talk about coupling, but I think it’s a very important concept to understand if you want to develop scalable and maintainable websites.

Just last week Jonathan Snook, creator of SMACSS, brought up the very same topic on Smashing Magazine. I want to touch on a few of the points he made and then give a quick walk through of yet another method (BEM) with similar goals to the ones we’ve been talking about.

Decoupling HTML and CSS

Ideally we’d like to be able to completely rewrite our html or css without touching the other. That’s unlikely to happen all the time. There will often be a need to changes one after changing the other. However the less dependent our html and css are on each other, the better.

Using OOCSS we reduce coupling by dropping descendent selectors in favor of classes. With a DRY CSS approach we’re also using classes, but here the magic is based more on how we organize our css around stylistic groups. SMACSS falls somewhere in between these approaches.

All agree we should move away from location based selectors as tying css selectors to a specific html structure leads to greater difficulty in changing either html or css. Inevitably we’re left managing specificity.

Jonathan Snook refers to this as the depth of applicability or in his words, “the depth at which a particular rule set impacts the elements around it.”

For example consider the following code for a relatively simple navigation bar with a single drop down.

  <ul id="nav">    <li><a href="">Item 1</a></li>    <li><a href="">Item 2</a>      <ul>        <li><a href="">Sub Item 1</a></li>        <li><a href="">Sub Item 2</a></li>      </ul>    </li>    <li><a href="">Item 3</a></li>  </ul>

If we were to write some css targeting the link in the drop down ( #nav li a ), the depth of applicability is 5. Even though we didn’t specifically mention every element along the way we’ve moved through ul#nav to li to ul to li to a, or 5 levels of html structure.

That’s too much and it also affects both the top level links and secondary links in the drop down. Jonathan offers two ways to reduce the depth of applicability

Child selectors — using #nav > li > a limits the scope to the top level links
Class selectors — is ultimately the better approach as it’s not dependent on html structure at all

Jonathan offers some additional explanation and examples in the Smashing Magazine article, which is worth a read if you’ve yet to see it.

The key is in seeing that many of the selectors we’ve been using over the years are coupling our html and css ever tighter. The debate is still ongoing as to the best way to decouple things, though hopefully you agree there’s a need for decoupling.

BEM — Block, Element, Modifier

The BEM approach to developing websites comes from the developers at Yandex. It has similar goals to the approaches we’ve seen before.

Quick development
Team efficiency
Scalability
Code reuse

Blocks and Elements

Under BEM a block is it’s own independent entity. Blocks can be simple or complex and they can contain other blocks. There’s something familiar in this as every html element is displayed as a box or block of some kind.

At the highest level of a design, your blocks might be your header block, footer block, main content block, and sidebar block. Your header would likely include several blocks inside such as one for your logo and tagline, another for a navigation bar, and maybe another making up a search field and button.

Elements are parts of blocks. They perform certain functions within the block and they’re context dependent. Take an element outside its block and it no longer makes sense. For example a search block might be made up of 2 elements.

Input field
Button

Removing one doesn’t make sense as the block would no longer function correctly.

Together blocks and elements are arranged in your design to form your page layout. Elements are arranged inside blocks and blocks are arranged inside other blocks working up to the outermost container blocks that shape the page as a whole.

Blocks and elements should have keywords (names) associated with them. The only way the same name or keyword is reused is when the same block or element is being reused. Blocks must be independent of each other to allow for arbitrary placement within the design. We want to be able to take our search block and easily move it from the top right in the header to the middle of the sidebar for example.

This leads to 3 guidelines for writing css:

Blocks should have unique names, which become classes
HTML elements should not be used in css selectors since they aren’t context-free
Cascading selectors for several blocks should be avoided

Here again it’s the use of classes that aims to solve the problem of coupling. We’re also encouraged to avoid location based selectors (context dependent) to help decouple our code.

Modifiers

What happens when you have a block like a search input and button and you want to add another to the page that looks similar, though not exactly like the first? This is where modifiers come in. Modifiers help us create similar though different blocks from already existing blocks.

A modifier is a property of a block or an element that alters its look or behavior. A modifier has a name and a value. Several modifiers can be used at once.

Typically a modifier will be an additional css class you would add to an element. An example I’m sure you’ve come across is highlighting the currently selected menu item so it stands out from the rest of the menu items. To achieve this you probably created css similar to the following.

  .current {    background: #f00;  }

You’d then added class=”current” to the currently selected menu item. The class modifies one element inside your navigation block.

BEM goes a lot further than what I’ve described above. In fact it’s for more than just html and css. It covers behaviors with Javascript, though the same basic principles and approach apply. I’ll let you read the original source if you’d like more details. I mainly wanted to show you the basic approach.

The idea of seeing a web page as elements within blocks within blocks is an easy one to grasp and probably how many of us already view the pages we develop. I certainly have, as you can see in a couple of posts I wrote for Onextrapixel a couple years back.

Summary

Again I hope I’m not repeating myself too much in all these posts, but these concepts are important ones to understand. Ultimately I think we should be rethinking some of our css practices as they haven’t been as great as we’d like to believe. Many have been thinking the same thing and over the last few years we’ve seen quite a few new methods and approaches for writing html, css, and javascript.

Most of these methods are similar in their underlying goals and principles, which is the main thing to be paying attention to. You’ll likely pick and choose techniques across some of these approaches depending upon the specific problem in front of you as opposed to following any one entirely.

It’s the underlying principles like decoupling html and css that are more important. It’s the idea of reducing location based selectors, mostly likely through a greater use of classes that you should be thinking about. See how each approach attempts to solve this and decide which makes the most sense for you.

If you’re getting tired of these posts please let me know. I realize I’ve been offering a lot about this same basic concept for awhile and perhaps the message has long since gotten across. If you are enjoying these posts and some of the methods I’ve been pointing to, let me know as well. There are more approaches out there with similar goals in mind that I could cover.

iCan't Internet

Apple iPhone 4S – Not Just A Phone, It’s The Whole World In Your Hands
5 Best Laptops for wordpress bloggers
Disadvantages of Removing Jailbreak From iPhone
Facebook Traffic Tips and Tricks

Apple iPhone 4S – Not Just A Phone, It’s The Whole World In Your Hands

Posted: 29 Apr 2012 11:39 PM PDT

Know About Mobile Phones All the things and accessories that you use are the part of your personality and if you are high quality and best products in your use will help you to enhance your...

[[ This is a content summary only. Visit my website for full links, other content, and more! ]]

5 Best Laptops for wordpress bloggers

Posted: 29 Apr 2012 11:33 PM PDT

Blogging can be a good hobby for most people but for some blogging is a professional work that requires them to spend most of their time on the internet. They have to create great blog entries for...

[[ This is a content summary only. Visit my website for full links, other content, and more! ]]

Disadvantages of Removing Jailbreak From iPhone

Posted: 29 Apr 2012 11:21 PM PDT

There is quite a bit of discussion these days about the practice of jailbreaking your iPhone. First of all, let's define what exactly we are talking about. Basically, the process means breaking...

[[ This is a content summary only. Visit my website for full links, other content, and more! ]]

Facebook Traffic Tips and Tricks

Posted: 29 Apr 2012 11:13 PM PDT

How to drive traffic via Facebook By now almost everybody has heard that Facebook is the next big thing in marketing, and that you shouldn’t have a blog without having a Facebook fan page....

[[ This is a content summary only. Visit my website for full links, other content, and more! ]]

Thursday, 26 April 2012

Design Critique: Cantigas | Van SEO Design

Design Critique: Cantigas

Posted: 26 Apr 2012 05:30 AM PDT

How would you design a site for a Latino Chorus? What colors would you use? How would you set the type? How would you capture the essence of the chorus and encourage people to see them live?

These are questions likely in Jorge’s mind in regards to the Cantigas website, which he donates time and skill to maintain. Cantigas is the latest site I’ll be offering feedback on. Previously I critiqued.

As I did in those critiques, let me remind you the point of these critiques isn’t so much to help out another designer by offering feedback, though that’s certainly a nice side benefit. The main point is to get you to take the time to look deeply at someone else’s work, see what they’ve done well, and think about how you could make things better.

If you put in the effort, a review of someone else’s site can improve your design skills.

Quick Thoughts

As I’ve mentioned previously this exercise was adapted from a writing exercise I learned a few years back and begins with a few quick thoughts that aren’t meant to be explained in depth.

A lot of small css files are included in the html with an @import. Are all these necessary? Why aren’t they combined into a fewer stylesheets?
There are a lot of divs wrapping other divs in the layout. Are they all necessary?
There are a lot of clearfix classes in the html. Again are all these necessary?
Headings across the site appear set as h1. There’s no hierarchy to the structure

Given the above I’m thinking both the html and css for the site could be simplified. I haven’t taken an exhaustive look, but on the surface I’m guessing there’s a good deal of excess code.

3 Things I Like

Texture — I like the use of texture on the site. It’s subtle and not overdone. The most obvious texture in the design is the main background behind the site. There’s a little bit of noise in it giving a greater sense of depth that calls out to touch the screen.

The navigation bar has a slight gradient as do the social buttons at the top. These add to the sense of depth in the design. On some pages there’s also a box serving as something of a sidebar that includes slight shadow around it, once again adding some depth to the design.

Imagery — There are images of the chorus throughout the site. Most of these are “in action” shots and they help engage the senses so you see and hear and feel the chorus singing and performing.

Also included are an audio clip and a video clip of the chorus just in case the imagery isn’t enough to hear them. I would like to see more of these clips on the site as it’s the best way to show off the chorus. Maybe a video from a live concert could be used.

While here and there an image repeats, for the most part there are enough unique images used that they don’t feel repetitive to me. Each click to a new page generally presents a new series of images. Ideally these would all be unique and even better specifically chosen to best match the page content.

Color scheme — I like the use of red and black on a warm tan background. I like how they all work together. I might have gone a little lighter with the background for better a contrast with the text, though that’s certainly subjective.

The colors feel Latin to me, though I don’t really know why. I’m guessing it’s simply the choice of a warm color scheme, particularly the use of red which stand out to me and I associate with a passion I think is often associated with Latino culture.

I’m guessing the colors came from the images which also feature a lot of red and black as well as a brown or tan in the instruments.

3 Suggestions for Improvement

Color scheme — While I like the color scheme I wonder if it’s the most appropriate choice. Typically the colors of Latin America are brighter and more colorful and pull from a wider variety of hues. More greens and pinks and yellows.

The existing color scheme makes use of a warm palette that does suggest the Latin roots of the site, but perhaps it would convey a greater sense of the culture by opening up the palette to include the wider variety of colors that instantly suggest Latin America.

Typography — Fonts are set small, measures are allowed to run wide, and I don’t get the sense the leading has been greatly considered. On many pages I think the text is hard to read and the overall typographic choices could be improved.

On pages like the one for auditions, the measure is reduced due to the aside (in this case an audio track) and the smaller measure helps make the text more readable. However a shorter measure isn’t the only or even best solution.

What’s most important is that the font-size, measure, and line-height all work together in proportion. I think a combination of increased font-size along with a shorter measure would work best. I’d think the audience for the site skews older and would likely appreciate larger text. Larger text would allow the measure to remain longer, though it would still likely need to be reduced so it’s in the 50–75 character range.

Where line-height and vertical rhythm are concerned a look at Tim Brown’s modular scale site and presentation from the Build Conference (included at the bottom of this post) could come in handy. I’ll let you watch Tim’s 31 minute presentation for details, but using the modular scale calculator a series of measurements based on musical rhythms could be created.

I’m not familiar enough with Latin choral music to know what musical scales are dominant, but why not take advantage of an underlying typographic scale based on the music of the chorus.

Space — The use of space could be more purposeful. The navigation, breadcrumbs, main heading, border, and second heading feel too tightly packed. For example the Upcoming Concerts and Events page doesn’t contain a lot of text, but it’s all packed very tightly vertically.

More space between the different elements would help make everything more readable and allow some elements to stand out more and call attention to themselves.

On the Members page (seen above) all the text runs down the page in a narrow column on the left while the majority of the page is empty space. The visual balance doesn’t feel right and this page would benefit from using multiple columns for the list of members.

A 3rd example is the main Tickets and CDs page, which probably isn’t necessary as a standalone page. The main content (the 2 links) is lost in a sea of negative space and is easily missed even with so little else on the page. These links could probably be incorporated as larger elements on other pages as they’re the main calls-to-action across the entire site.

Summary

Overall I think the Cantigas design does a good job generating an emotional response through texture, color, imagery and media. I think building a typographic scale based on musical values could increase this emotional response, even if the reader isn’t consciously aware it’s in place.

While I like the color scheme I wonder if a greater use of bright hues, incorporating the cooler colors of Latin America into the warmer colors would be a better choice. It would more instantly suggest Latin America.

The typography across the site could use some work. Larger font-size, smaller measures, and more purposeful leading all built on a modular scale based on music would be an ideal way to subtly convey the chorus.

I’d also like to see more conscious thought given to the space used in the design. Elements are generally packed too tightly both vertically and horizontally and would benefit by more room to breathe. The negative space could be reduced and give up some room for the positive elements.