Cougaar Software

About the Site

Cougaar Software, Inc. (CSI) provides Artificial Intelligence (AI) enhanced solutions to help clients understand complex environments and quickly make time critical decisions with confidence.

My Involvement

As the lead front end developer, I coordinated with designers and CSI staff to:

  • Implement the bold new design into the WordPress content management system.
  • Incorporate an interactive section on the homepage to highlight use scenarios.
  • Train CSI staff on how to update and maintain the site.

Visit the site

http://www.cougaarsoftware.com/

American Society of Addiction Medicine

About the Site

The redesign of American Society of Addiction Medicine (ASAM) website was an opportunity to position ASAM as the authority on addiction medicine, foster education and awareness to physicians who encounter addiction on a daily basis and encourage more physicians to specialize in the field.

My Involvement

As lead front end developer, I coordinated with designers, information architects, developers and ASAM staff to implement a modern design that demonstrates ASAM’s mission as the leading voice on addiction medicine.

Visit the site

http://www.asam.org

Road Runners Club of America

About the Site

The Road Runners Club of America (RRCA) is the oldest and largest national association of running organizations dedicated to growing the sport of running since 1958.

My Involvement

As lead front end developer, I coordinated with designers, information architects, developers and RRCA staff to implement a clean, modern design that highlights all of the services that RRCA provides to its members, including listings of upcoming events and a directory of running clubs, coaches and race directors.

Visit the site

http://www.rrca.org/

Blue Beanie Day promotes web standards!

Matrix FEDs on Blue Beanie DayYou may have noticed an abnormally high number of people wearing blue hats today in your office, on Twitter, Facebook, or around town. Or maybe you just noticed your web designer/developer wearing one around the office and thought it was a bit odd.

If you were wondering why people are wearing blue hats, it’s because today is Blue Beanie Day! What is Blue Beanie Day?

The beanie itself comes from Jeffrey Zeldman’s iconic blue beanie, but the day is an opportunity for people around the world to show their support for web standards. For more info, check out the Blue Beanie Day page on Zeldman’s site »

Matrix’s Front End Developers all joined in the fun today and wore their blue beanies. As you can see in the photo, they are all different shades of blue and a couple are home-made (results may vary), but we are all equally passionate about web standards.

Did you participate in Blue Beanie Day? Do you have a story to share?

The MatriX Files

About the Site

The Matrix Files is a place for Joanna Pineda (Matrix Group’s CEO, Founder & Chief Troublemaker) to share her insight on effective marketing strategies, customer service, leadership, and the web. This redesign was an opportunity to update the layout and colors, incorporate more social elements and make the site responsive.

My Involvement

As the designer and lead front end developer, I coordinated with Matrix staff and Joanna to:

  • Design a refreshing new look for the blog.
  • Implement the design in WordPress, building a custom responsive theme.
  • Create custom user interfaces for each screen size, starting with a mobile-first approach.

Visit the site

http://www.thematrixfiles.net

Growing Wireless

About the Site

The Growing Wireless site is a joint venture between CTIA-The Wireless Association® and The Wireless Foundation to provide an online resource to help parents stay in tune and up-to-date on the latest mobile products and services their kids may use.

My Involvement

As the lead front end developer, I coordinated with designers from Fleishman-Hillard, developers and CTIA staff to:

  • Implement the website in the Sitefinity content management system.
  • Incorporate an interactive branding area for the homepage to provide a preview for each of the sections, helping to engage parents as they first visit the site.
  • Design and develop responsive layouts based on the original design.
  • Implement Sitefinity’s multilingual module, developing the site templates in both English and Spanish.

Visit the site

http://www.growingwireless.com/

An Event Apart DC

Joeleen Kennedy with Jeffrey Zeldman

Joeleen Kennedy with Jeffrey Zeldman

Matrix is attending An Event Apart DC, and we are learning a lot and having a blast! It is amazing to see presentations from some of our web heroes, and meet people who are doing awesome things in our field!

Yesterday, my co-worker, Sarah, and I found the courage to sit with Jeffrey Zeldman, @zeldman (web hero) at lunch, and we’re glad we did. It’s a rare thing to finally meet someone you look up to and find out that he’s even cooler than you’d thought.

Should all designers learn to code?

A couple weeks ago I attended a Refresh DC event with Sarah Mills, a designer and co-worker at Matrix Group, where the presenter, Garrett Miller (@heyitsgarrett), gave several compelling reasons why all designers should learn to code:

  • Designers who can code can put their ideas in motion without waiting on a front-end developer (FED).
  • FEDs can design something the way they want it, instead of trying to interpret someone else’s vision.
  • The streamlined process allows for agile design, where user feedback can be implemented immediately.
  • Applying creativity to development produces more thoughtful, user focused products.
  • Teams are able to design user interactions in a real world environment instead of a PSD.

Sarah and I both fit this description of a designer/developer, starting in design and then learning to code our designs. She has stuck with design, and I have moved mostly into front-end development, but this crossover made us especially interested in the topic.

In debating, we came up with some additional reasons why designers and FEDs should understand the other side of things:

  • It improves our ability to share ideas, critique each others’ work, design for new capabilities, and watch for problem areas.
  • Smaller organizations can save time and budget by hiring someone who can do both.

On the other hand, we think that agencies or organizations who have the budget for a full team benefit from having both designers and front-end developers, preferably with some cross-over, but whose primary focus is one or the other. Here’s why:

  • Keeping up with bleeding edge technologies and web standards OR design trends and tools takes a lot of time. Trying to keep up with all of the information necessary to design and build modern websites and also do the work would be very challenging.
  • People are always better at one or the other. Developers can build a site that doesn’t look bad, especially using boilerplates like Twitter Bootstrap, but it will be somewhat plain. Designers can learn to code, but particularly complex CSS or JavaScript will always make their brain feel a little fuzzy.

Overall, our answer to the question is “Yes, but…”

National Association of Episcopal Schools

National Association of Episcopal Schools - home

About the Site

The National Association of Episcopal Schools (NAES) is an independent, voluntary membership organization that supports, serves, and advocates for the vital work and ministry of 1,200 Episcopal schools, early childhood education programs, and school establishment efforts throughout the Episcopal Church.

My Involvement

As the lead front end developer, I coordinated with designers, information architects, developers and NAES staff to:

  • Create a fresh, new design that reflects the association’s re-branding.
  • Expand their library to include publications and meetings.
  • Implement the website in the Sitefinity content management system, giving NAES the ability to update every portion of their site.
  • Expand integration with the site’s association management software to allow donations.

Visit the site

http://episcopalschools.org/

Three things you can do now to make your site mobile-friendly

How often do you find yourself looking up information on your phone? Your answer is most probably, “a lot.”

Whether you are in a coffee shop, restaurant or on public transportation, you will notice people constantly texting, accessing music or reading the news from their phones, iPad or Tablet.

Mobile web browsing is on the rise, and could potentially replace desktop browsing one day. According to the Pew Internet Project, 44% of Americans access the internet through their phones. The numbers will only get bigger as technology advances. So what can you do now to spruce up your existing site to make it more mobile?

Here are five things you or your organization can do now:

  • Focus on writing concise and compelling content. Eye tracking tests show that users generally read web pages in an “F” shape, focusing primarily on headlines and images, and only read the first few lines of content before moving on or skimming over the rest. A little extra attention to your content strategy can increase your readership and improve your SEO.
  • Keep it simple. Make your HTML structure and design as clean as possible to reduce the time a page takes to load.
    • Semantic code is important – remove unnecessary HTML elements and CSS styles that aren’t being used and condense what you are using
    • If your CMS allows, prevent areas that aren’t visible in the mobile view from being loaded instead of hiding them with CSS.
    • Optimize images for the web using Photoshop’s “Save for web and devices…” option – adjust the settings to reduce file size without losing visible image quality.
    • If possible, use a different, smaller image file on mobile, instead of loading the full size image and scaling it.
  • Use CSS media queries to prevent desktop styles from loading on mobile. For example, without media queries, if you use background images for the regular site and then override that style to use a replacement background image for mobile, the mobile device will still download the larger image, and then replace it with the mobile image.