Author Archives: Chris

About Chris

Chris is the senior web/graphic designer with The Simons Group. He enjoys diving into code and developing solutions to uncommon problems. He is an avid bicycle commuter and enjoys playing and recording music.

CSS Parent Selector jQuery Workaround

This question comes up a bunch of times on coding forums: How can I style/select the parent of an element with a specific class? Now, most of the time this question is posed looking for a CSS solution. Unfortunately, CSS2/3 doesn’t offer a parent selector. CSS4 has it written as potential addition to the CSS core, but that could change as CSS4 is still in the development phase.

There is a simple workaround for those that are interested in a lightweight jQuery solution. I’m offering the jQuery solution, mainly because most of the sites that are developed already include a jQuery library. So without further ado, here’s the code (this would go into your main jQuery (document).load function):

$('.childclass').parent(this).addClass('parentclass');

What this basically does is from start to finish: finds elements with a class, then finds the parent of that class, then adds a class to the parent. You may already have a class for that parent element, but this will add another class so you can style it. You could also add the CSS directly in the script, using .css(), but I find it easier to have my CSS in my CSS file rather than spread out over multiple places.

Hopefully someone will come across this on the interwebs and find it useful.

Happy Halloween!

halloween

Happy Halloween from all of us to you! Check out our Halloween video below. It’s cute…err..I mean..scary! BOO!

New project: Altura Group website

Screen Shot 2014-09-23 at 11.42.44 AM

We recently completed a website for Altura Group, a startup consulting firm. Although they are a startup, founder Dave Marshall has years of experience helping businesses achieve their long- and short-term goals.

We’ve worked with Dave and his right-hand woman, Suzanne Jacob, in the past on videos and a website, so for them it was a no-brainer to reach out to us to develop a website for Dave’s new venture.

Working closely with Suzanne, we developed a modern and professional website to help Dave secure new business. The site uses large, inspirational imagery with Altura’s carefully crafted copy to promote trust, strength and relationship- building.

We’re excited about this site and want to show it off. Check it out here and let us know what you think in the comments.

Behind the scenes: Making our Fourth of July video

IMG_1270

First day setup

Normally, when we produce a video, our audience only gets to experience the finished product. For this blog post, however, I’m going to give you a sneak peek at what went into creating our Fourth of July video. If you haven’t seen the video yet, click here (it’s pretty fun, if I do say so myself.)

The video is roughly one minute long, but it took about 12 hours to finish it. That comes out to about 12 minutes for each second of video. This time includes equipment setup and teardown; grocery shopping; shot setup; multiple takes; making a cake; and audio and video editing.

I recorded the video in my kitchen over three days. It got a little cramped. And hot.

IMG_1272

Lighting from rear, top and a reflector to keep the scene brightly lit

The concept behind the video was to show the making of a birthday cake for America. Because I made a three-layer cake, I was going to have multiple takes of the cake-making process, giving me an excellent resource for footage. The final video combined footage from each cake layer shoot.

One of the challenging aspects of the project was getting the overhead shot above the mixing bowl. I drilled a hole through the center post on my tripod and slipped it over one of the light stands. This allowed me to get the camera high enough over the counter to get the right angle, and I could stand behind it while filming the mixing process. Because the tripod was acting like a boom arm, the weight of the camera was pulling the tripod down – think construction crane – so I used a bag of powdered sugar (the frosting on the cake) as a counterweight. Sometimes, you need to use a little engineering and tricks to get the shot you want.

Camera mounted on lighting stand

Camera mounted on lighting stand

That’s just a little glimpse into the production side of the video. If you have any similar experiences, leave us a comment below!

A huge, delicious mess

A huge, delicious mess

The Director of Photography (DP) on set

The Director of Photography (DP) on set

Introducing a seriously casual, and less-hated font: Comic Neue

Copyright Craig Rozynski

Comic Sans is notorious for being the world’s most hated (loved?) font. Designers often cringe when it is used anywhere – especially paragraphs of text meant to reflect a serious tone. Since it has come preinstalled on many operating systems since 1995 (Windows, OS9, OSX, etc.), it is readily available for anyone creating a document to abuse (see: use at all).

On April 7, 2014, graphic designer Craig Rozynski released his updated version to the Internet. Within 24 hours, the face-lifted version of Comic Sans – Comic Neue – was trending worldwide.

The new version keeps the playful spirit of the original font, but offers a cleaner line structure and newly defined ascenders and descenders; the parts of characters that go above the height of an “x” or below the baseline, respectively. The font comes in two variants: rounded terminals and angular terminals, which describe the ends of each line in the characters. Each variant includes a light, regular and bold face, with italics for each style.

Many designers came out in support of the new version – it’s an elegant and very usable font for casual and fun design pieces; however, not everyone was pleased. Vincent Connare, the original creator of Comic Sans, had some choice words about the new font on Twitter and in other media outlets.

Comic Sans, since its inception, has created pretty strong feelings on the pro and con sides. We’d love to hear what you think of the original, new or even that you don’t care – after all, it’s just a font. :)

You can download Comic Neue here.

(Images courtesy of Craig Rozynski)

Orchidia: Exhibiting fresh style through a new website

orchidia-ss

We’re pleased to announce the recent launch of Orchidia Fragrances’ new website!

The website is the vision of Ross Sprovieri, executive vice president of Orchidia. He wanted the site to be clean and elegant and to promote user interaction in a unique, yet intuitive way.

The result is an airy design with minimal distraction and easy navigation. Instead of a text-based, top-level navigation, we integrated the elemental icons used to promote the four pillars of the company’s mission: transparency, insight, adaptability and sustainability.

We designed and coded the site as a custom theme for integration with WordPress – our favorite content management system (CMS). The site’s embedded responsive design allows it to adapt to different browser window sizes and viewing devices, such as tablets and phones. The user base for the site is worldwide, so we built the site to accommodate three translations: English, Spanish and Mandarin.

During the development process, we trained key individuals at Orchidia to use WordPress and how to manage the nuances of this particular CMS site. The training allowed the Orchidia team to add content while we were still working on the site development. This combination of efforts allowed for a quicker site launch, and allowed us to troubleshoot and debug any issues with real content in place.

Check it out and use the comments below to let us know what you think!

The value of free knowledge

Sharing KnowledgeRecently (see: last weekend), while attempting to dry my clothes, my dryer decided that it no longer wanted to turn its drum, but rather sit idly and taunt me with a humming noise for a few seconds, then proceed to blink its control panel indicator lights.

To get the error codes from my dryer, one must use a similar process to access the highest secured areas – you know, pressing multiple buttons at the same time, then turning a dial counterclockwise, then promptly pressing another combination of buttons. After getting into the diagnostics area of the dryer’s software, I found it was an E52 error. Having had some issues with the dryer in the past, I knew that this was indeed a motor error – as if the non-rotating drum wasn’t evidence enough.

The last time my dryer had a motor error, I called the company for a list of authorized repair techs in my neighborhood. I chose the one that was closest to my house. The repair tech asked me for the symptoms over the phone. He thought the dryer had just gotten too hot and to avoid damage, shut off. He told me to give it about 30 minutes and try it again. I hung up, waited 30 minutes, and sure enough, it started working promptly.

This time, I waited the 30 minutes. Nothing. Still producing the same result. Next, I tried a couple things I found on the Internet – reset the internal computer and then cut power at the breaker for about an hour. No dice. So, I did what I did last time, calling the same company. The tech got back to me within 15 minutes (it was a Saturday). He gave me a suggestion to try on my own and asked me to call him back if it didn’t work, as his availability was very limited.

I went to my dryer and gave the fix a try. Success! He had me open the dryer door, trick the dryer into thinking the door had been closed, start the dryer, and manually turn the drum by hand until the motor caught and began turning the drum itself.

This is the second time the tech helped me without collecting a single penny from me. He could have easily come to my house, charged me for a service call, did the little fixes and went on his way. He essentially lost about $160.

What he gained was a customer for life.

Because he was willing to share his knowledge for an easy fix for a very simple problem, he earned my trust and respect. He didn’t guard this information. He helped make a consumer informed. From now on, if I have any problems with my appliances, I will always call him and when the day comes that he actually has to come out and fix something, I won’t hesitate to write that check.

At The Simons Group, we do the same thing. We don’t hide information. We find that being knowledge providers builds a solid reputation that our clients talk about with their clients.

Personally, when I figure out a solution to a coding conundrum, I will post it on this blog in the “Chris’ Coding Corner” section. People who find this information may not necessarily become clients, but what we’re gaining as a company is a good reputation.

There is high value in reputation.

We’d love to hear your thoughts on knowledge-sharing. If you have any examples where you were seeking information or shared information that led to a new or strengthened relationship, let us know.

Keep your website secure

MasterpadlockIn today’s technological climate, we all have online accounts – from banking to email to our favorite social media site. And with these accounts, we have user names and passwords. Most people set up their accounts and passwords and never think of them again. Internet security experts tell us to change our passwords frequently to make it harder for hackers to access these accounts. Sometimes, we heed this advice; other times, we don’t (we actually should). Some websites force you to change your password after a predetermined amount of time – whether it’s 30, 60 or 90 days. Although we may view this as a nuisance, it’s actually very good practice.

When it comes to our own website – whether it’s the login credentials to our content management system (CMS) or our FTP server — or updating software, we should take this same advice. If someone can log in to your website and alter the content or the HTML files, your website, at best, will be full of content you don’t want and, at worst, can download malicious software to your unassuming visitors’ computers. Plain and simple: A hacked website can cost your business money.

In one case, we saw a website that was hacked and Google listed the site as a potential malware danger. Browser security messages warned visitors about going to the site. Google also displayed warnings in the search results. Visitors could still get to the site by following a few warning prompts, but who would take such a risk? Google also shut down Adwords campaigns that were running for the website until the issue was fixed. This came with a cost of lost business and revenue.

If someone is determined to hack your site, they may find a way, but let’s make it harder to accomplish with these simple steps:

  1. Change your password often. I would suggest changing it every 90 days or so. Even if you change it once a year, it’s better than not doing it.
  2. Keep your password strong. Don’t use passwords, like “password” or your name or something similar to the user name. Use a combination of letters and numbers, and even symbols. Try password generator websites, such as strongpasswordgenerator.com. Several password-keeper apps are available for your mobile device and computer, so you can create crazy passwords for all of your online accounts, but secure them for easy retrieval offline via a single password.
  3. Update your software. Many websites are built over some CMS system like WordPress or Drupal. These platforms often release new versions that include security updates, along with functionality updates. Take the time to update your software. In the case of WordPress, you simply click a link in the dashboard and it does it for you. The same goes for plug-ins on your site. Keep everything up-to-date.

These three simple recommendations can go a long way in securing your website and minimizing financial losses from hacking.

What are you doing to secure your website? Let us know in the comments below.

Planning your website for on-the-go — responsively

computersWhen it comes to websites these days, the focus is not only on a desktop experience, but also on a mobile experience. As mobile devices are fast becoming the norm to view websites and take in content, now is the time to start thinking about how people are getting your content.

One of the ways designers and developers handle mobile is through responsive design. Responsive design is a method of designing and coding where the content adjusts to different screen sizes and resolutions. This method allows the content to scale appropriately on each device (phone or tablet) and have elements appear and disappear based on want you want your visitors to see.

For example, if you have a really large navigation menu, that might work great on a desktop screen; however, it may take up too much space on a mobile phone. You don’t want people to only see your menu when they first navigate to your site on their mobile device — you want them to see your content. With responsive design, we can create an icon that appears only if someone is on a mobile device, which, in turn, allows the person to click it and reveal a streamlined navigation menu. This allows your content to remain in the forefront.

Another thing responsive design is fantastic for is when people resize their browsers in the horizontal plane (wider or narrower) on their desktop computers. Designers and coders can have content move to different areas of the screen to allow for a greater user experience for more people and give visitors the most important information right away. Websites don’t live in a vacuum and user interaction is a key component that drives our work.

There are many mobile strategies out there, with responsive design being one of them. When planning your mobile site (or main website) using responsive design, think about your audience and the content they’ll want. This preplanning (or postplanning if your existing site is moving to mobile) will help you create the best experience for your visitors.

Let us know what your mobile strategy is or what you’d like to do in the future in the comments below.

Modify default WordPress text widget to add css classes to title tag

The scenario:I wanted the end user to have the ability to add custom css classes to the title tag of the default text widget. So basically, instead of just having <h3 class="widget-title">; (which is added in the default sidebar’s before_title parameter), I wanted the user to be able to have <h3 class="widget-title class-name class-name-2 etc">.

The solution:
I copied the default widget code (found in wp-includes > default-widgets.php), added it to my own themes function.php file and modified it. Sounds simple and it actually was once I got through a few bumps (of self doing).

The code:


class WP_Widget_Text_Advanced extends WP_Widget {

function __construct() {
$widget_ops = array('classname' => 'widget_advanced_text', 'description' => __('Advanced Arbitrary text or HTML'));
$control_ops = array('width' => 400, 'height' => 350);
parent::__construct('advanced_text', __('Advanced Text'), $widget_ops, $control_ops);
}

function widget( $args, $instance ) {
extract($args);
$title = apply_filters( 'widget_title', empty( $instance['title'] ) ? '' : $instance['title'], $instance, $this->id_base );
$classes = apply_filters('widget_classes', empty($instance['classes']) ? '' : $instance['classes'], $instance );
$text = apply_filters( 'widget_text', empty( $instance['text'] ) ? '' : $instance['text'], $instance );

$b_title = explode('">', $before_title);
$b_title_e = $b_title['0'];

echo $before_widget;
if ( !empty( $title ) ) { echo $b_title_e . ' '. $classes . '">' . $title . $after_title; } ?>
<div><?php echo !empty( $instance['filter'] ) ? wpautop( $text ) : $text; ?></div>
<?php
echo $after_widget;
}

function update( $new_instance, $old_instance ) {
$instance = $old_instance;
$instance['title'] = strip_tags($new_instance['title']);
$instance['classes'] = $new_instance['classes'];
if ( current_user_can('unfiltered_html') )
$instance['text'] =  $new_instance['text'];
else
$instance['text'] = stripslashes( wp_filter_post_kses( addslashes($new_instance['text']) ) ); // wp_filter_post_kses() expects slashed
$instance['filter'] = isset($new_instance['filter']);
return $instance;
}

function form( $instance ) {
$instance = wp_parse_args( (array) $instance, array( 'title' => '', 'text' => '', 'classes'=>'' ) );
$title = strip_tags($instance['title']);
$text = esc_textarea($instance['text']);
$classes = strip_tags($instance['classes']);
?>
<p><label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('Title:'); ?></label>
<input id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo esc_attr($title); ?>" /></p>

<p><label for="<?php echo $this->get_field_id('classes');?>"><?php _e('Add Classes. Separate multiple classes by a space (no commas!)'); ?></label>
<input id="<?php echo $this->get_field_id('classes');?>" name="<?php echo $this->get_field_name('classes');?>" type="text" value="<?php echo $classes;?>" /></p>

<textarea rows="16" cols="20" id="<?php echo $this->get_field_id('text'); ?>" name="<?php echo $this->get_field_name('text'); ?>"><?php echo $text; ?></textarea>

<p><input id="<?php echo $this->get_field_id('filter'); ?>" name="<?php echo $this->get_field_name('filter'); ?>" type="checkbox" <?php checked(isset($instance['filter']) ? $instance['filter'] : 0); ?> />&nbsp;<label for="<?php echo $this->get_field_id('filter'); ?>"><?php _e('Automatically add paragraphs'); ?></label></p>
<?php
}
}

function register_advanced_text_widget() {
register_widget( 'WP_Widget_Text_Advanced' );
}
add_action( 'widgets_init', 'register_advanced_text_widget' );

The only tricky part in this whole bit (and it’s not even that tricky) was getting the output of the before_widget parameter, running it through PHP’s explode function to look for "> and echo everything that appears before that (it’s the $b_title and $b_title_e variables).

Questions? Ask away!

UPDATE
To make it easier for people, I wrapped this up into a plugin that you can just install. Download it here. To install, just go to Plugins > Install New > Upload.