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?

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…”

Time for a change

I’ve been wanting to re-engineer my site for a long time, but I keep running into snags. The designer in me always says “Okay, a new site, got it! We’ll start by picking some colors, and then think about fonts and typography and the logo and image sizes and layout and ooooh, lets pick some pretty social media icons!” While all of this is important, it doesn’t address the functionality that I want to change. So instead of letting myself loose in Photoshop like an unsupervised kid in a candy store, I need to treat this as a real project and define some goals and specifications. Here we go:

  • Instead of being solely devoted to my portfolio items, the site should feature different types of content on the homepage, with more specific landing pages and detail pages
  • I want to start blogging, so that needs to be an important part of the new site
  • I want to become more active on social media and include feeds
  • The background around portfolio items and blog posts must allow for a variety of colors in the imagery
  • The site should be light, bright, clean, and open
  • The site will be HTML5/CSS3 and responsive
  • The site must allow for future expansion/reworking/trying out of new ideas

That’s a start. I’ll still need to refine this list and make some decisions, but at least now I have some goals to refer back to!

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.