Blog

BEM, Sass, and Semantics

July 25th, 2014 by LookThink

Today’s post is brought you by our fantastic summer intern, Sarah Federman. Sarah is a New Media Design major at the Rochester Institute of Technology and has brought her A-game to our Development team. From spearheading website builds to supporting the design team, Sarah has played a major role in the projects flowing through our office this summer. Follow @sarah_federman on Twitter for the latest and greatest in bleeding edge techniques for front end development!

There’s a nice buzz around the topics of modular CSS and CSS Preprocessors these days, but do they go hand in hand?

If you haven’t heard of it, BEM stands for Block-Element-Modifier, and is a syntax system and philosophy for creating flexible css modules. You can read more about it here: http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/

I recently started working on a news site that displays articles in several distinct ways. Thus, the easiest and most reusable abstraction was to create a module for displaying article information.

My blocks included things like:

.article__title
.article__date
.article__description

One modifier is for displaying articles in a tile-like grid format

.article—tile

…but they’re also styled differently in the footer:

.article—tile—footer

Add in more modifiers for promoted “sticky” tiles, featured articles, articles that go within a media object, articles overlaying an image…and suddenly you’ve got a sizable module going.

I started out going as Sass as possible, with something like this:

.article {
  &__title {}
 
  &__date {}
 
  &__description {} 
 
  &—tile {
    &__title {}
 
    &__date {}
 
    &—footer {
      &__title {}
 
      &__description {}
   } // end footer
 } // end tile
 
 &—media {}
} // end article

…And so on. And suddenly we’ve nested 6 levels down 350 lines. It might compile something pretty, but right now I’m looking through my own file and all I see are ampersands, and I’ve scrolled down and I can’t orient myself. Am I still looking at a tile? Am I back in the article root? Could someone else read this? Would this confuse my team members? Extending blocks closer to the root is suddenly complicated as well.

It’s ugly and un-semantic. Is it theoretically well organized? Sure. Maybe I could have heavily commented, but I ended up taking out all of the ampersands and switching out of pure sass.

.article{}

  .article__title {}
  .article__date {}
  .article__description {}
  
  .article—tile {}
  
    .article—tile__title {}
    .article—tile__date {}
    
    .article—tile—footer {}
      
      .article—tile—footer__title {}
      .article—tile—footer__description {}

400 lines in, this is much more readable and easily maintainable. There are some places where I might consider making “article—“ a variable. This method certainly takes much more typing, but I think it’s worth it when it comes down to maintenance and semantics. Extending is also much easier.

Sass is still great for all sorts of functionality, like mixins and creating partials for your modules. I love Sass. But personally, I would caution against sacrificing semantics for quick typing.

If I were to redo this, I might break it down further and start making more classes with less that I could use together in the HTML instead of extending the other blocks and rewriting rules.


Creative Exercise: FIFA World Cup Logo Redesign

June 24th, 2014 by LookThink

I don’t know about your office but ours is pumped up all-day-every-day right now because of the World Cup. Since most of the games take place during the work day, it’s become a big topic of conversation, in between client work of course. Let’s just say our external monitors have been getting a lot of use since the games started.

With the soccer football excitement permeating the office, a World Cup themed creative exercise was the obvious outlet for our energy. Our team wasn’t particularly blown away by the Brazil 2014 logo, so we each decided to take a crack at a new logo.

Here’s the Brazil 2014 logo:

Brasil 2014

And here are ours!

Bethany

beth-FIFA-Logo


 Jihye

Jihye-FIFA-Logos


Erik

Erik-FIFA-Logos


Nate

Nate-FIFA-Logos


Molly

Molly-FIFA-Logos


Rachael

Rachael-FIFA-Logos


Greg

Greg-FIFA-Logos


Sarah

Sarah-FIFA-Logos


LookThinkAsk: Meet Jihye Shin

June 18th, 2014 by LookThink

jihye
On this edition of LookThinkAsk, Jihye Shin takes the spotlight. Jihye joined our team as an intern in the summer of 2012 and once we saw her superior design skills, we couldn’t let her go. Seriously, her attention to the fine details of design and ability to create a show-stopping logo are unparalleled. Originally from Seoul, Jihye keeps us apprised of all the pop trends coming out of Korea. Let’s just say we knew about Gangnam Style long before you did.

1. What part of your job do you find most challenging?

The majority of the time, we work on web and app based projects so when the occasional print job rolls in, I find that to be most challenging. With print, it’s difficult to get the colors and the specifications right since there is a difference between what I see on my screen and the actual printed version. On the web, you can make changes and see the results right away, which I much prefer!

2. What do you find most enjoyable about your job?

I enjoy everything and anything related to branding. It’s a really exciting process to create a logos or a design language for a client because these are such a big part of  how companies and organizations define themselves. Also, it allows me to use my Illustrator skills and color sense, which are two of my strengths.

3. DC is very different from your childhood home of Seoul, South Korea. What are the three biggest differences?

  1. Public transportation is MUCH simpler in DC. Check out the Seoul subway map. Scary, right? Seoul Subway Map
  2. Dogs are much more common in DC. In Seoul, it’s unusual to see people with dogs and if you do, they are generally very small.
  3. Nightlife is much quieter in DC. Bars and restaurants all close pretty early here but Seoul is a 24 hour city.

4. If you could travel anywhere in the world, where would you go and why?

I’d like to go to Cancun, Mexico. It’s a place I have always wanted to visit and much easier to get to from the US than Korea. It’s beautiful and I like the idea of relaxing on the beach with unlimited drinks and food. Cancun-mexico

5. What superpower do you dream of having?

I’d like the ability to teleport so I can visit Korea without a twelve hour flight and horrible jet-lag. This way, I could have dinner with friends or family and be back in time for work the next day.

6. What are some of your favorite logos?

Nike and Apple are some of favorites because they are really simple/minimalist and so recognizable on a global level. NikeApple

7. What is your favorite way to spend a Saturday?

Brunch with my roommate and shopping. My Saturday also has to include good coffee.

8. When you were a little girl, what did you want to be when you grew up?

I wanted to be a painter or an artist, which is why I majored in fine art in Korea and studied it for three years. I decided to transfer to RIT because it was an opportunity to still use my art skills but I knew I would have a much better chance of getting a job. I also wanted to work as part of a team instead of solo!

 

 


8 Tips for Delivering a Dynamite Proposal

May 28th, 2014 by LookThink

Writing proposals can be a daunting and time consuming task but for most of us, it’s a necessary part of the job. Naturally, if you are dedicating so much time to the proposal at hand, you’ll want it to lead to revenue generating work. To give yourself the best chance for success, keep the following tips in your back pocket.

1. Be Yourself (aka write like a human, not like a computer)

Pages upon pages of dry, robotic language will not move your proposal to the top of the stack. Using a conversational approach for your proposal language will be more engaging, and memorable, for the reader. The owner of the RFP will want to gain a sense of your team’s personality so allow your proposal to reflect your style.

2. Don’t Recite Boilerplate Language

Every situation is unique to the client – and undoubtedly unique to your team. Your proposal should recognize the client’s particular pain points and offer solutions tailored to their challenges. Of course, you can leverage content from other proposals to use as a base but be sure the final product speaks directly to the client, their request, and the goals they want to accomplish.

3. A Graphic is Worth a Thousand Words

Your proposal will be more interesting, to the eyes and the brain, if you include visual elements. Where possible, use a graphic or screenshot of your work to illustrate the accompanying text. Leveraging icons can also be a valuable technique for adding visual interest and helping guide your reader through the proposal.

GraphicExample

4. Don’t Forget the Cover (and the Cover Letter)

We all know the saying, “you have to take her to dinner first…” Same goes for proposals. Jumping into the meat of the proposal can be a bit startling for the reader. Welcome your potential client with a well-designed cover and a friendly cover letter. With those fundamentals as appetizers, the clients will feel much more at ease when diving into the details.

5. Readability is King

There is no denying – we are a culture of skimmers. To ensure that your proposal has a nice flow and that the most important content in your proposal is actually read, create hierarchy in your text. Specifically, pump up the volume on the most important words and statements to make sure they won’t be missed.

TextHierarchy

6. Display Examples of your Work

You can ramble till the cows come home about the work you have completed but without visual examples, it’s difficult for the client to trust your words or get a sense of your style and capabilities.

CalAmpWorkExample

7. Be Realistic (in your budget in your timeline)

First things first, don’t promise things you can’t deliver. Be honest and realistic in your proposal – and provide enough detail so that the client is intrigued to ask more. Be sure to include language that lays out your numbers as estimates only as it’s critical to have a deep dive around requirements with the client before cementing the budget and timeline.

8. Don’t Forget to Proofread

Typos are unprofessional and careless – and could be the reason your team is overlooked for a project. Save yourself the embarrassment and rejection by proofing your proposal before you send it out the door. Make sure to enlist a coworker (or two) to also review your proposal. Fresh eyes often catch typos you overlooked.

proofread

Did we miss any important proposal tips? Leave your suggestions in the comments!