Alex Pineda

Creative Director

The Future of Life, Lived Online

One of my favorite books of all time is “Ready Player One” by Ernest Cline. As a child of the 80’s, I loved all the 80’s nostalgia that the novel revels in, from John Hughes movies, Atari video games, new wave music, etc. As a long-time player of MMORPG’s like World of Warcraft and Elder Scrolls Online, I was intrigued by the book’s vision of the near future, both good and bad, in terms of the evolution of our online virtual lives. Ready Player One cover

In that future, with a planet so devastated by environmental degradation, income inequality, and corporate greed, the vast majority of Earth’s populace spend their time in OASIS. OASIS is a virtual world where kids go to school, everyone plays games, and all wanting to escape from real life.

This future, which the futurist Ray Kurzweil, predicted in 2003, seems that much closer to reality. A large number of companies are developing holographic or augmented technology with the aim of realizing this new way of “life lived online”.

With Microsoft’s announcement of HoloLens, Facebook’s $2 billion dollar acquisition of Oculus Rift, and even Google’s now defunct Glass, this future where the either our lives are lived almost entirely online, or at least the divide between the physical and the virtual are blurred, is getting very close indeed.

What does this new future mean for companies like Matrix and our clients?

man in front of screens

image courtesy Microsoft http://www.microsoft.com/microsoft-hololens/en-us

As designers and crafters of these virtual experiences, we will need to integrate new modes of interaction. Currently, we factor in keyboard+mouse, touch, and gesture into the experiences we craft. In this holographic future, we will need to design for new biometric interactions, fully 360 degree views, and more of the body’s natural motions into our interfaces. There will also be much more of a deep integration into our physical environments as well, as these new interfaces react profoundly with location, surface, and the whole digital net. Lastly, our whole semiotic relationship with digital experiences will evolve, and we will need to understand what this means for us and our clients.

For our clients, we will need to work more closely in terms of the kinds of experiences they want their customers to have, the context in which these interactions occur, and how their brand are expressed in this new virtual world.

As a designer, a gamer, and a human, I’m so excited at the potential this technology has, and in how it can enhance our lives, that I can’t wait for it arrive. I’m player one, and I’m ready to go!

Hassan Elhassan

Front End Web Developer

Tools to Test Your Website on Multiple Devices

A mobile marketing budget is imperative. While 2014 was considered the year of the mobile, imagine what we will see in 2015!  Matrix Group Creative Director Alex Pineda recently shared that one of the top design trends to watch out for in 2015 is the expansion of responsive design with the explosion of mobile devices with different screen sizes and resolutions.  What does that mean to you? Image of various devices showing website

Over the last few years, when it came to designing websites, we built and tested sites on phones, desktops and tablets with similar screen sizes. That’s no longer the case! With multiple devices ranging in different sizes and screen resolutions, you want to make sure you test your site in different devices. There are many tools available out there to do this, but our front end developers have a few that they prefer:

Google Chrome Device Mode & Mobile Emulation: Our primary way of testing and building websites, this tool not only allows us to test the site based on device, screen size and resolutions, but allows us to test the functionality and performance based on specific situations:

Responsinator.com: The site lets you view your site in multiple devices and sizes. Test your current site and see how it looks.

Responsive.is/: A critical thing to look at when testing the responsiveness of your site is the typeface and size. This site is a great resource to use to test your website.

What resources do you use to test your websites?  Share them with us.

Leah Monica

Marketing & New Business Coordinator

10 Ways to Stay Healthy and Fit at the Office in 2015

A group of Matrix Group staff get together to do yoga at lunch every now and then.

A group of Matrix Group staff get together to do yoga at lunch every now and then.

Aiming to be a healthier, happier you in 2015? If so, you’ve probably evaluated your exercise and eating habits, and have put a solid game plan in place for the New Year. But have you considered how your habits at work could make or break your ability to meet your goals?

Here are our top 10 tips for staying healthy and fit throughout the workday:

  1. Keep healthy snacks within reach. I’d venture to say that office temptations might be the #1 diet saboteur. If you’re office is anything like ours, it’s all: doughnuts and cakes and candy bowls (oh my!) I’ve found that when I have healthy snacks ready and waiting — fruit, nuts, light granola bars — I’m less tempted to seek out the junk food lying around the office.
  2. Ask for a standing desk. I converted my desk to a standing desk about 6 months ago, and I can’t stop singing its praises. I’ve found that I’m more alert and more energized during the workday, plus I move around a lot more now that I’m always on my feet. While I realize this option may not be possible or ideal in some work environments, it never hurts to ask. If your company can’t (or won’t) spring for a new standing desk for you at the moment, you can always make a poor-man’s standing desk.
  3. Take the stairs! Sometimes taking the stairs isn’t always feasible — you work on the 20th floor, the stairway access is locked when entering the staircase (pro-tip: means of egress can never be locked – take the stairs DOWN!) or you’re nursing an ailment – but if you can, try to take the stairs to add some extra cardio exercise into your day.
  4. Grab a larger glass. Larger glass = more liquid. Consuming more liquid = more trips to the restroom. More trips to the restroom = more movement. Win, win, win.
  5. Take the scenic route. Need to meet with someone down the hall? Take the long loop around the office to get some extra steps in. Need to use the restroom? Go to the one that is the furthest away, or even go to one on a different floor (taking the stairs, of course!).
  6. Head to the gym at lunch. Studies show that working out in the middle of the day boosts productivity (how can your boss argue with that?), and is a great option if you are not a morning person or tend to have packed evenings. If there isn’t a gym close to your office, aim to take a walk every day at lunch time.
  7. Stand up and stretch. Many sources say that to stay healthy, you shouldn’t sit for more than an hour at a time. Make sure you give yourself at least 5 minutes of movement for every hour you are sitting. If necessary, set an alarm/reminder to stand up and stretch every hour on the hour, or invest in a fitness tracker that will alert you if you are sedentary for too long.
  8. Take your meeting on a walk. If you have a one-on-one internal meeting scheduled, suggest taking it on a walk. Sometimes the fresh air will even help to spark inspiration! Just make sure one of you has some kind of note taking device on hand to record action items or new ideas.
  9. Find a workout buddy. Find someone in your office that has similar goals and fitness interests, and hold each other accountable. It’s much easier (and more fun) to make yourself go for a walk or head to the gym when you have someone to do it with. Plus, you’ll probably think twice about grabbing that second doughnut when your buddy is around.
  10. Invite others to participate in small wellness “brain breaks” throughout the day. At Matrix, a group of us will gather for 5-10 minutes almost every day to do a few jumping jacks, push-ups, sit-ups, and light stretching. If I were to do those things on my own at my work area, I’m sure my colleagues would think of me as a manic. But when we do those things as a group, it feels much more acceptable and is a LOT of fun. We also have a “stair club” that takes the elevator down to the bottom of the building, and then climbs the 12 flights of stairs back up to the office together. Start something fun at your office. Everyone will love you for it. Promise.

What are your secrets to staying healthy and fit in the workplace?

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!