Jaime Quiroz

Front End Developer

SASS Maps != Source Maps

I’ve seen the phrase “Sass maps” thrown around  the web in recent months, and have made an assumption that people were talking about Source Maps. They both do sound alike, and in fact both these things were part of the same SASS update (3.3.0). It wouldn’t surprise me if there are others out there who’ve experienced this unfortunate confusion and are still in the dark about this.

I  attended SassConf and Sass Maps were quite a popular topic throughout the conference, with good reason–they’re in fact awesome.

So what is a Sass Map exactly?

A Sass map is like a Sass List, except instead of containing just values you have Keys AND Values.

If you are a javscript developer or have ever used js objects you could even think of Sass maps as ‘Sass objects’. Here is what a Sass Map looks like:

$map: (
	key1: value1,
	key2: value2,
	key3: value3
);

… and like a js object you can assign another ‘object’ (Sass Map) to a keys’ value like:

$map: (
	key1: (
		a: b,
		c: d
	),
	key2: value2,
	key3: value3
);

How is a Sass Map used?

Sass Maps are a great way to organize related CSS, they really lend themselves to looping and can help you write less repetitive code.

Retrieve a value from a Sass Map with ‘map-get()’ like this:

$links: (
	link: #900,
	hover: #333,
	visited: #000
);

a {
	color: map-get($links, link);
}

Simple enough, but what about when a keys’ value is a map?

$buttons: (
  search: (
    bg-color: #333,
    icon: "magnifier.svg"
  ),
  alert: (
    bg-color: red,
    icon: "triangle.png"
  ),
  success: (
    bg-color: green,
    icon: "checkmark.svg"
  )
);

@each $button, $buttonProps in $buttons {

	.button-#{ $button } {
		background-color: map-get( $buttonProps , bg-color );
		background-image: url( images/#{map-get($buttonProps, icon)} );
	}

}

… the output:

.button-search {
  background-color: #333;
  background-image: url(images/magnifier.svg);
}

.button-alert {
  background-color: red;
  background-image: url(images/triangle.png);
}

.button-success {
  background-color: green;
  background-image: url(images/checkmark.svg);
}

Let’s look at this bit:

	@each $button, $buttonProps in $buttons

Those 3 variables contain:

$button = the top level key names ( search, alert and success )

$buttonProps = the map of each key ( background-color: … , background-image: … )

$buttons = the main map we are getting our values from

You can use as many maps in a map as you want, although things can start getting kinda messy with map-get():

$map:(
  a: (
    b: (
      c: (
        key: red
      )
    )
  )
);

@each $x, $props in $map {

	.red {
	    color: map-get( map-get( map-get( $props, b ) , c ) , key );
	}

}

That seems like an unlikely scenario, but it is possible if you do have a use for it.

Sass Maps can be very useful things if used correctly – how you want to leverage them is up to whatever works best for you and your team.

Read more about Sass Maps.

If you actually have been using Sass Maps in your project please share in the comments below, we’d love to know your use cases!

Jaime Quiroz

Front End Developer

Building a Responsive Navigation: Big navigation on small screens

UI problem solving on mobile devices can be quite a challenge when it comes to navigation. A simple Google search for “Responsive navigation” will yield countless possible navigation formats that web developers have used so far.

We’ve recently taken on some responsive projects where we had to make some fairly large navigation work on mobile devices as well. One site in particular is The Catholic Health Association of the United States: http://www.chausa.org.

A long vertical navigation accessible through scrolling is what we aimed to accomplish in this case, allowing the user to navigate to just about any page on the site right from the home page.

Taking this a step forward, I’ve set up a demo of how this concept can work with an expanding navigation.

The main thing about approaching this setup is using a fixed navigation behind the content with an overflow-y: scroll rule. No third party JavaScript plugins required (other than jQuery) to add or remove some classes and handle the toggle of the sub menus.

The scrollbar itself is hidden by the overlapping content that’s pushed off to the right.

By toggling a class on the body, the content gets pushed aside to reveal the hidden navigation. The content doesn’t fully leave the page but remains somewhat visible for two reasons:

  1. It slightly overlaps the navigation behind the content and will hide the unwanted scrollbar from view
  2. it serves as a trigger to pull the content back into full view when clicked on

Since we are dealing with big navigation in this example, the content is fixed on the screen and does not scroll along with the navigation. Doing it this way makes it less distracting for the user. It also ensures that it stays in view in the event that the navigation becomes longer than the page itself.

No JavaScript is involved in the sliding of the content away from view, it’s just a simple CSS transition on the ‘Left’ property of the content container.

The +/- button is used to reveal additional sub menus in the navigation. This treatment gives the user two options on a given item with sub menu. They can:

  • click on the text to go to its landing page, or
  • click its expand button to see additional options within that section.

 

Have you worked on a big project optimized for mobile? Please share if you have!

Kelly Browning

Director of Strategy

User Experience: Megamenus

Megamenus are big menus.

I mean, as far as details go, they’re a bit more complicated than that.  But the essence of a megamenu is that it’s a Great. Big. Layered. Menu.

The more precise definition of megamenus is this: Megamenus are panels of links revealed by a user interaction. These panels are bigger, wider, and hold much more information than the menus you’re used to seeing.

Why Use Them?

If you have a content-heavy website, chances are that you have many different categories of information that users will need to be aware of and choose from.  One layer of information may not cut it because there are just too many options of equal importance that a user needs to get to easily.

Megamenus, if designed and programmed properly, can make it easier for your users to make those decisions, and give them a fast-forward path to their destination. Users don’t have the time to sift through your site, discover all of the options, and then carefully choose among them. Giving users an accurate and thorough set of links to evaluate means they don’t have to explore your whole site to find what they want; it also prevents them from having to pull up a model of their options from within their own working memory. I promise that they won’t forget that there is a section called “Scientific Research” because it’s directly in front of them.

Note the words easier and easily. Choosing among many options requires mental effort of users.  They’ll leave your site if you make things hard for them, so make it easy for them. Basic UX. Learn it; love it.

What It Means for You, the Designer

Again, ease of use is going to be what drives you, here. Megamenus provide a design space where multiple choices can be visually grouped. This grouping helps users make sense of the options available to them.

A big, unlabeled, unordered pile of links will just confuse and frustrate your users. 

Vertical menus don’t offer the layout flexibility. When vertical menus contain a lot of items, they can begin to feel overwhelming for many users.

While designing and implementing megamenus, you can include icons, imagery, and even user controls like checkboxes and search fields.   A warning, though: Triggering the menu from a user’s click in your megamenu is preferable to a hover. Activating menus by hover can cause a sense of instability that adds to user stress while attempting to interact with inputs / controls. Have you ever hovered over a menu item and tried to hover over to the sub-menu that pops out of it, only to have everything disappear? Horrible!

Use this opportunity to find the balance between information and infodump.  Make it interesting rather than overwhelming.

An example of a mega menu that uses click, not hover, to reveal is NPR.org (see the ‘Programs’ and ‘Listen’ items.)

Articles for Further Reading

Mega Menus Work Well (Jakob Nielsen)
http://www.nngroup.com/articles/mega-menus-work-well/

Designing Dropdown Menus: Examples and Best Practices (Smashing Magazine)
http://www.smashingmagazine.com/2009/03/24/designing-drop-down-menus-examples-and-best-practices/

Counterpoint

6 Epic Forces Battling Your Mega Menus (Jared Spool)
http://www.uie.com/articles/mega_menus/

Jaime Quiroz

Front End Developer

Easier HTML with Haml and Sinatra

I have been doing professional web development for about 3 years now and HTML tables are still not getting any easier to look at (especially poorly formatted ones).

With modern text editors our markup is mostly written for us and in the case of certain content management systems (CMS) we hardly  need to write any HTML at all anymore.

Nevertheless as a web developer it is almost entirely impossible to forget about writing some markup.

I came across Haml and Sinatra about 2 years ago, through my interest in the Ruby language. Though I cannot say that I’ve gone on to create amazing web apps with these tools yet, I have found myself coming back to Haml again and again to rapidly flesh out some HTML when needed.

Maybe this post should have been called “writing HTML tables sucks” ‘cause that’s really why I find myself switching over to Haml on occasion.

My Sinatra Setup

Required items:

First of all this is a super basic example and more than anything it is just a quick development tool. It’s a tool that gets used often and for that reason it should be completely painless and easy to get to.

Step one: This app needs a home, I use a local directory called ‘Sinatra’.

In there lives one ruby file and two directories each with just one file (the public directory is where you place files such as CSS, Images and Javascript – for this setup it is optional as I only use the app to generate some HTML):

/Sinatra

– app.rb

– /public (optional)

– – style.css (optional)

– /views

– – index.haml

The app is instructed what to display on what page in the app.rb file. The root page is set to display the index.haml view (a view is a template file in Ruby). Once the Sinatra and Haml gems are installed the app.rb is set up something like this:

require 'rubygems'
require 'sinatra'

get '/' do
	haml :index
end

Initialization of the app is done through the command line, first by navigating to the project and then running:

ruby app.rb

If all is good, the command line will say this:

Sinatra/1.4.2 has taken the stage on 4567 for development with backup from Mongrel

Now the app is viewable on http://localhost:4567/

All that’s left to do is write some Haml inside the views/index.haml file. No need to restart the app for changes in views/ or public/ just refresh the browser.

Protip: Because I use this so frequently and I always have a Terminal window (mac command line) open it made sense to create a command alias which will change my current location to the app’s directory. From there I am able to open the app in my text editor and initialize the app as well.

This has helped me a lot in the past and continues to be an useful little tool. Haml is just easier on the eyes and easier to write than HTML in my opinion.

Roger Vandawalker

Front End Developer

The Stately Font

StatelySo this is pretty cool.  Intridea’s Ben Markowitz (@bpmarkowitz) came up with this glyph font, Stately, that displays US states instead of letters when you type.  You may have seen it, but it’s worth seeing again.

UX designers and fans are pretty excited about it, especially if they have to make infographics based around or using maps.  This pretty basic idea – a glyph font – can become a powerful tool when you’re visually trying to get an idea across to a viewer.

How would you put Stately to use on your site?