Alex Pineda

Creative Director

Top 5 Design Trends for 2015

With 2014 coming to an end, what can you expect to see in 2015?  Mobile device usage will continue to grow and expand into wearable tech and appliances. We’re already seeing it with TVs. What’s next?  red letter a

Here are some trends to keep your eyes out for:

  • Responsive typography:  You’ve heard a lot about responsive design, but the next thing will be typography. Rather than having fixed type sizes, or relying on users to increase the font size manually, responsive typography will adjust itself to the resolution that’s detected.
  • Responsive design will expand to devices beyond tablets and smartphones. With the explosion of more platforms and devices, responsive design will evolve even further.  Whereas before, responsive design meant taking into account smartphones, tablets and desktops, now it’ll have to include smart watches, TVs and appliances, and more!
  • Parallax, animation and scrolling effects: More and more sites, including Google and Apple, are using parallax techniques, animations, and scrolling effects to feature new products and services. We expect to see more of this in the next year!
  • Bigger Images and videos: With larger resolutions for desktops and tablets, images and even video are scaling up as well.  Airbnb and Flipboard are two examples of sites that use full-width video to great effect. Check them out!
  • Flat Design evolves into Material Design.  Many of you may be familiar with flat design, a design philosophy that removes stylistic elements from websites, giving them cleaner, simpler looks.  Google recently unveiled “Material Design,” a new direction for mobile (and design in general) that uses very subtle gradients, layering, and animation, to keep a sense of the tangible world (physical space and objects) while still achieving all the advantages of flat design.

These are some of the trends we believe that we will see in the coming year. Do you agree? What do you believe we’ll see. Share your thoughts.

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!

Sherrie Bakshi

Director of Marketing and Social Media

5 Ways to Keep Your Website Content Fresh

Last month, we kicked off our webinar series with a topic many struggle with: writing good keyboardcontent.  We often get asked questions like “How do I keep my content fresh?” and “How often do I need to update my website?”  Here are a few things you can start doing now to make sure your website is up to date:

  • Plan your content in advance.  An editorial calendar for your website can help you lay out content based on your organization’s annual campaigns as well as help you manage your resources and deadlines.  Plus, it will ensure that you provide content to your audiences in a timely manner!
  • You don’t need to update everything all the time. Let’s be honest, you’re not going to be updating your About Us or Membership landing page on a monthly basis, but there some things that you’ll want to update more frequently, including news, events and your blog.
  • Don’t forget about your homepage branding area.  Your homepage branding area is key real estate.  Consider updating it on a quarterly basis to promote your key campaigns, resources you want to highlight, etc.
  • Think about your users’ expectations. For example, if your website provides updates on OSHA regulations and interpretations, you must update you site whenever there is new and updated information.
  • Measure effectiveness. It’s important to know that you’re providing value to your audiences.  Review your analytics to determine top topics and where your audiences are most engaged with you on your site.

What are your tips?

Rich Frangiamore

Systems Admin

Rolling With The G-Punches

Google searchI’m a big Google user. Much of my digital life is wrapped up in their services. I think I joined Gmail when the beta was still in the oven 10 years ago. I’m also user of Calendar, Voice, Wallet, Authenticator, Maps, Drive, Hangouts, Chrome sync, News, Music, Play, and tons of Android stuff. I even meddled around with Buzz and other betas that never quite made it. I was also an avid Reader user, until it was retired recently.

One of my very favorite services is the much-heralded Google Voice, the service that gives you a virtual phone number and lets you forward calls to that number to other numbers per rules that you set. It also enables custom answering schedules, call screening, unlimited texting from your browser, transcribed voicemails, and other really cool stuff.

I’ve loved it so much that my entire mobile communications are dependent on it. My only phone number is a Google Voice number. Nobody knows the number to my mobile, and I have no house phone.

Google Voice logoGoogle Voice, as a separate service, has gone the way of our beloved Reader.

The functionality of Voice is being rolled into Hangouts, the new multi-platform video chat/instant messaging platform which also absorbed the Google Talk service (you may remember this as the original IM function baked into Gmail web client). The future of the individual features of Voice are uncertain.

Let the outrage commence.

… That’s what I wanted to write about. The outrage, and why folks need to chill out and take a step back to see the big picture here.

Depending on a vast array of Google services (or Microsoft services or third-party stuff, what have you) means you have to roll with the punches. Ever notice how most Google services have that little “beta” tag on them? This stuff is always changing. My favorite description of the “Labs” features in GMail is “…they may change, break or disappear at any time.”

We’re living on the cutting edge every day with many of the Google services we depend on. And other products too; just last month, my favorite Twitter client for Windows, MetroTwit, was sunsetted because of API issues. So what did I do? Complain to the developers? No, I went and found something else (Tweetdeck).

Second, I have to mention money. Specifically, the money I pay for all these Google services. It’s zero. I pay squadoosh for this stuff. There’s no service-level agreement here. When an absolutely free service goes away or doesn’t quite do what I want it to, what am I going to do? Ask for my money back? Nobody made me any promises when I started using this product. And don’t forget about the other end of the transaction here: Google’s pocketbook. When a particular product isn’t making any revenue and the company finds themselves eating a significant amount of developer time for a project which really doesn’t have a future, it makes perfect sense to scrap it. There have been several cases in the past where Google has found duplication of functionality in several different products, which means rolling together some products into one.

I don’t hate Google for retiring Reader or eliminating Voice. On the contrary, I applaud them for actually putting the work forth to develop this stuff and inspire others to do the same. Reader taught a lot of folks that RSS is your friend, and it can ease your daily life on the web. Now there’s Feedly and other cool web-based aggregators out there that do the job just as well, and some of those may never have come to light if Reader didn’t exist.

The integration with Hangouts has begun. I’ll have to make some changes. I might need to modify some of my workflows for how my call forwarding works and install a new app on my smartphone. So what? A small price to pay for rich functionality that seems to get better and better every year.

It’s all about rolling with the punches.

What’s your strategy for navigating changes to your web-based services?

Sarah Jedrey

Junior FED

The Inaugural Code(Her) Conference

DCWW Code(Her) Conference
September 13 was just amazing. The whole weekend was dense with events and what seems to be the Real Arrival of Fall, complete with a drizzly, cool, gray weather pattern outside the Microsoft office in Chevy Chase. Inside, it was alive with a sea of excited tech folks and DC Web Women’s chosen neon-green color scheme. It was like they knew how the weather would be and were combating it with design.

Here we were. A hugely, gloriously diverse crowd of people who make things and services for a connected world, all prepared to learn more – and to celebrate the people blazing trails and the people following the trails that they’d never before been able to access. Needless to say, Twitter was humming all day.

After DCWW President Sybil Edwards executed her duties regarding introduction and gratitude, we got to enjoy the first of our keynote speakers.

Great keynotes are more than speeches

Bonnie Bogle, COO of Mapbox, told us about Mapbox, her role in it, and the kind of culture they have there. And, yes, she did that – the stuff Mapbox does is simply amazing, including painting in a city’s streets with the not-entirely-wise habits of people who tweet and drive – but what she really did was give a masterclass in storytelling. It was not merely a talk about business philosophy or statistics. It was a demonstration of why letting collective and individual passion thrive can reach and influence millions and result in a business that is a success by all measures.

Immediately after lunch, we got to listen to Clarissa Peterson speak (slides). She’s co-founder of Peterson/Kandy, a UX expert, and the author of Learning Responsive Web Design. What she gave was the crashiest of courses on responsive web design – a compelling, bite-size reason to buy her book and find her wherever else she chooses to speak – but what she was was an example to those who are too aware of their status as students. The story of Clarissa’s growth from “just” a basic developer to an expert speaking on RWD was a roadmap for those of us new to anything. It yielded bumper sticker-worthy maxims like “You learn more by teaching others” and, when it comes to content (I’m mangling it, but the gist was), “Is it easier to move from a house to an apartment or from an apartment to a house?”

What a talk covers and what it’s about – what it is – can be drastically different in all the important ways. Hire these women to talk for you. They get it.

More information than you can fit in your head

So, if you’ve never been to a conference, let me tell you what’s difficult. Parking. Finding a seat in a crowded room. Finding an unoccupied power outlet.

The hardest part: Figuring out which of the amazing talks you’re going to attend.

After days of agonizing, I figured out which three to attend. My only regret is that there aren’t 12 of me.

Infographics Everywhere

We’re swimming in an ocean of data, and we’re increasingly capturing, analyzing, and taking advantage of that data. The problem is so few of us know how to effectively translate it all into the popular and super-useful infographic. As Laura Larrimore said, ‘The less you know about design, the less you should be designing.” This is especially true for business on a very tight budget. So few of us are designers; so few of us should try to be.

Some low-cost or free tools included Piktochart and Microsoft Office. She walked us through the one and gave us the pros and cons of the others, and I think we all left a little less scared of Big Data and Making It All Look Pretty.

Accessibility Testing

David Kennedy, Theme Wrangler for Automattic, talked to us about testing for web accessibility with free tools. Full disclosure: He’s a friend of mine. He’s knowledgeable and passionate as heck about keeping the web accessible to every person who can get onto the internet.

Accessibility is, unfortunately, foreign to too many of us. It’s not that scary, after all. Dave gave us a crash course on the main difference between Section 508 compliance and Web Content Accessibility Guidelines (WCAG) 2.0 (short form: WCAG is a bit more thorough) and shared resources we can use immediately to make our work more accessible – a11y.me is a fantastic place to start.

Some key tools that are both cool and easy to use are this infographic on Accessibility for Designers, Wave, the Color Palette Accessibility Checker, and The Readability Test Tool.  Do yourself a favor and go try each of them.

The New Word-of-Mouth

The Social Media Trainer and Consultant at Admin Tech Consulting, Romona Foster is a woman of many talents. Due to the laptop and projector refusing to talk to each other for a half hour, we learned that one of her talents was to memorize the name of 30 people in a few minutes. What could’ve been a dull disaster became a high-energy exchange of ideas about the role of social media and how to convince clients reluctant to change.

The room, with those 30 attendees, represented a range of experience from novice to master. The conversation we had brought home the fact that “social media” is as big and complex a subject as you could imagine. We touched on strategy, platforms, engagement, content sourcing, ethics and laws, time-savers, and stereotypes, and we still hadn’t exhausted ourselves when it was time to depart. But before we did, Romona left us with a good, actionable list of tips and tools especially useful for the less-experienced.

So, same again next year?

DCWW Partner AwardThere was an afterparty where DCWW honored several people and businesses for being, I believe, excellent examples of what women in tech can do for women and for tech. The party was so hearty that it was a bit difficult to hear.

All I know is I went up to the stage to accept the DCWW Community Partner of the Year on behalf of Matrix Group!

The conference was fantastic. I left dazed by the density of information I’d absorbed during the day. I can’t wait for next time!