An Ode to Sass: Make Your CSS Better

This was originally written and posted on the Interactive Engagement tech blog for WNET.

I’ve learned a lot since I started working at IEG in August 2014, from building better WordPress themes via MVC to the ins-and-outs of git (how I got by before, I’ll never know). The greatest tool that I’ve embraced in my tenure is Sass. For those unfamiliar, Sass is a CSS preprocessor which takes giant complex stylesheets and neatly organizes them into tiers. There are so many features which will make your development process cleaner, faster, and happier. Read more

Responsive Design ≠ Mobile-Friendly

Responsive web design is a buzz word that we are very familiar with at IEG. All of our modern sites fit that bill (we do have some that are quite old), and you can see it in action with the resize of your browser. The excess design falls away, the menu becomes a hamburger (which, has its own problems), sidebars slink below the content. But just because it fits a certain width parameter, doesn’t mean it works for mobile.

metrofocus-screens

I just finished rebuilding the site for MetroFocus, a multi-platform news program focusing on the New York region. I got to a point where I was happy with the design, with the responsiveness, and we sent the site to our app developer to do some testing. He came back with incredibly insightful feedback when it came to thinking about actually using the site on a mobile device. The header and menu took up too much precious real estate and disappeared from view on scroll. The hamburger was small and surrounded by un-clickable (or, un-touchable) white space.

While the site looked good on a narrow browser, it wasn’t user-friendly for smartphones. I took his notes and spent a long time on my smartphone, clicking through and trying to think beyond “does this look good” and “is it broken” to thinking about the user’s experience on their phone. I can’t be spot on for every device and every situation, but we came to a place that is 100% better across the board. Read more

Build a Better WordPress Theme with the Settings API

This post was originally written and published on the IEG technical blog.

Often when we create our WordPress themes, they come with a small theme options page built using the Settings API. This page could have inputs for everything from social media handles to uploading a new logo or picking a homepage layout. Having these options makes it easier for non-developers to make important changes to their websites, or give it minor refreshment.

Here’s a pretty straightforward example of how we use it on Chasing the Dream. Administrators can update the links for social media icons, enter the unique Google Custom Search Key, pick a homepage grid, and even update the footer text.

themeoptions

Having a theme options page is a good way to set global options, such as a font or accent color. Instead of having to find all of the places within the CSS every time a client wants to try a different shade of blue, instead they can have the power to update it themselves. Read more