In launching any new website, the sigh of relief comes when it goes live without a hiccup. Yet the icing on the cake is when your hard work pays off in the form of industry recognition like a nice Site of the Day award from our friends at CSSDesignAwards. MakersQuarter.com is a great example of responsive website design, complete with custom photography.
I’ve read some bold promises from marketing automation software throughout the years. They all seem to promise the same thing… sit back, relax and let our little bot make you look like the rock star of the marketing department. Sayings like, ‘it’s cheaper, it’s faster, it’s easier, it’s more profitable become commonplace in every sales pitch.
I’ve been through enough of these pitches throughout my tenure that I’ve grown a sixth sense at cutting through the crap and getting down to what’s really important. When our agency first deployed Kenshoo, we were excited about the possibility, but still guarded about setting expectations that were unachievable.
Well after 90 days of using the tool, I’m afraid I might sound like the very sales pitches I warned you about in the first paragraph. In my opinion, Kenshoo is simply the most effective way to manage your search campaigns, period. Kenshoo has allowed us to scale our international search efforts without scaling our team. Before we ventured down the road of bid management, our team was reaching a ceiling of what was possible for our current staff. There just weren’t enough hours in the day, and the thought of scaling to a larger buy without more people was daunting. We explored the efficiencies that Kenshoo brought to the table right away. We were relentless in our ramp up education, and we quickly found hours in productivity that previously escaped us. Updating landing page URLs, ad copy, adjusting bids, initiating new campaigns, and managing our placements became streamlined with Kenshoo Enterprise.
Fast forward to today and I can say our ROI is better because of Kenshoo’s performance optimization (KPO) utility. I can say our billable hours are more efficient for our clients because of the gains in efficiency we’ve realized.
While I am sure Marin and Adobe have strong products, it was ultimately this report by Forrester that influenced our decision. 4 months in, we don’t have any regrets and we’re pleased with where our search initiatives are headed.
If you’re on the fence about utilizing Kenshoo in your organization, I’d be happy to share our results and even a few tips on how you can ramp up quickly. Just drop a note in the comments, we’d be happy to help.
I’ve been thinking a lot about culture and what it means and how it can define a company. It’s a trendy buzzword as of late peppering blogs and whispered about at HR seminars with its promises of providing a cool factor to any company. But what is it exactly and how can you get it? According to Frances Frei and Anne Morriss at Harvard Business Review: “Culture guides discretionary behavior and it picks up where the employee handbook leaves off.”
To some culture is a guidepost that helps employees understand their company as a whole. If one were to mention Google, immediately people think of a progressive company; one that provides their employees with organic chefs, hearty vacation packages and of course is fido-friendly. But do perks make a culture? To me the answer is yes and no.
Culture is not about, Nerf wars, Foozball matches, free donuts, or bring your dog to work day. Those things are awesome, but they should simply be an extension of your company not what defines you. Company culture should be defined by: values, behaviors, attitudes and environment.
For me culture begins and ends with the mission and values of a company. If you don’t have a clearly defined mission or values statement it’s hard to communicate to your staff, “this is what we stand for.” Culture must be incorporated from the top down – practice what you preach. If upper management is not practicing the values of the company, then it’s hard for the rest of the team to get on board. In addition, hire people that you feel embody the spirit and passion of your company. The greatest negative impact on a company is hiring employees that do not share your company’s values. If you get the right team, your culture will follow.
Moreover, foster positive attitudes. Make it a point to check in with your team to measure satisfaction levels. If happiness levels are high it can mean increased productivity and great PR. A happy employee is your best advertisement. It can actually become a competitive advantage for your company.
It’s also about environment. Trying to emulate the culture of Google or Netflix is not going to work for every company. So focus instead on the things that make your company unique and go from there.
Finally, understand that culture is organic and ever evolving. Allow your employees to be a part of the formulation process and you will be able to sustain culture over the long haul. Take Zappos for example, which created an actual Culture Book that is added to by employees all the time: http://www.zapposinsights.com/culture-book
With that being said, at DO I’m making it my mission to help to cultivate a culture that our employees can be proud of. It may not include personal masseuses or nap pods but it will involve creating a positive environment that fosters communication, openness and yeah the occasional Nerf war.
Shannon is DOs resident HR/Office Manager although she prefers the title Fun Ambassador
Quick recap. In part 1 of this blog we create two events, a hover event for desktop and a click event for mobile. With these events, we wrapped it around an IF statement so the script can decide which event to render base on window width.
In part 2 we are going to make that code better! The main issue addresses testing responsive. Most people seem to believe that, by dragging the browser handles, that’s is the best way to test responsive layouts. Just because the window emulate different resolutions doesnt mean its the best way to test. The ONLY REAL WAY of testing responsive is by device testing. Thank GOD there are browsers that render specific resolutions perfectly for this. But for the random people, developers included, that believe by going ‘epileptic’ on the browser handles to some random, nonsense resolution is testing, YOU ARE WRONG! AND PEOPLE LIKE YOU ^&# #%@%&$@#@% ^&%&&**$#!!! Shame on you and your house. Sorry, my client experience with responsive testing has caused me many nights of crying, half-naked in a fetal position.
Currently, if you test the code from part 1 you’ll notice, while shrinking the browsers between 960px and below that the events does not change. The code works fine, because actual site load will use the correct event. So if I was on my phone, the click event will fire. On my desktop, the hover event will fire. But for the people who resize browser handles, a better solution is warranted instead of reloading page for every break-point. This requires three additional steps.
A quick summary, we will wrap both events into a function, run an unbind event in the function and fire the function on window resize.
The original code from part 1.
<img src=”http://lorempixel.com/400/200″ class=”test” />
var imgHeight = $('.test').height();
var imgWidth = $('.test').width();
if( $(window).width() >= 958){
$('.test').mouseenter(function(){
$(this).width(imgWidth * 2).height(imgHeight * 2);
});
$('.test').mouseleave(function(){
$(this).width(imgWidth).height(imgHeight);
});
}else{
$('.test').click(function(){
if( $(this).width == imgWidth || $(this).height() == imgHeight){
$(this).width(imgWidth * 2).height(imgHeight * 2);
}else{
$(this).width(imgWidth).height(imgHeight);
}
});
}
Wrap it in a function and call the function.
var imgHeight = $('.test').height();
var imgWidth = $('.test').width();
function myInteraction(){
if( $(window).width() >= 958){
$('.test').mouseenter(function(){
$(this).width(imgWidth * 2).height(imgHeight * 2);
});
$('.test').mouseleave(function(){
$(this).width(imgWidth).height(imgHeight);
});
}else{
$('.test').click(function(){
if( $(this).width == imgWidth || $(this).height() == imgHeight ){
$(this).width(imgWidth * 2).height(imgHeight * 2);
}else{
$(this).width(imgWidth).height(imgHeight);
}
});
}
}
myInteraction();
Now wrapping the IF statement in a function like this does essentially the same thing as part 1. But in this case, turning it into a function makes it easier to fire that function repeatedly. Now we want this to trigger every time the window is resized. Doing it this way will force the script to run the function every time the window is resized, the script determines which event to fire base on the width of the browser.
var imgHeight = $('.test').height();
var imgWidth = $('.test').width();
function myInteraction(){
if( $(window).width() >= 958){
$('.test').mouseenter(function(){
$(this).width(imgWidth * 2).height(imgHeight * 2);
});
$('.test').mouseleave(function(){
$(this).width(imgWidth).height(imgHeight);
});
}else{
$('.test').click(function(){
if( $(this).width == imgWidth || $(this).height() == imgHeight ){
$(this).width(imgWidth * 2).height(imgHeight * 2);
}else{
$(this).width(imgWidth).height(imgHeight);
}
});
}
}
myInteraction();
$(window).resize(function(){
myInteraction();
});
But another issue arises. Now we will have two events stacking, none negating the other. Which is really buggy. To fix this we will need to add some kind of unbind event. Since I’m using jQuery, and .off() event is best.
var imgHeight = $('.test').height();
var imgWidth = $('.test').width();
function myInteraction(){
$('.test').off();
if( $(window).width() >= 958){
$('.test').mouseenter(function(){
$(this).width( imgWidth * 2).height(imgHeight * 2);
});
$('.test').mouseleave(function(){
$(this).width( imgWidth).height(imgHeight);
});
}else{
$('.test').click(function(){
if( $(this).width == imgWidth || $(this).height() == imgHeight){
$(this).width(imgWidth * 2).height( imgHeight * 2);
}else{
$(this).width(imgWidth).height(imgHeight);
}
});
}
}
myInteraction();
$(window).resize(function(){
myInteraction();
});
The idea here is to remove any events associated every time the function fires then reset the event through the IF statement. BAH-BOOM!!!
Are you planning on taking your Google Analytics Individual Qualifications Exam? Check out these resources from around the web to help you train and prepare. While it’s possible to pass the exam without paying for help, a few of the resources I’ve listed below require a fee. Some people can cram studying into one day and pass the test, while others need time to digest and review – whatever works best for you as long as you’re able to keep the information and don’t dump it right after the test (we’re not in college anymore!).
To give you all a little bit of context, I am 7 months pregnant, so the idea of posterity has been on my mind quite a bit lately.
Let’s take a moment to break down UX for a second. For the layperson U=User and X=Experience. Many times the abbreviation UX gets caught up in a bunch of boxes, arrows and wireframes — seemingly very static stuff. The fact of the matter is that User Experience is extremely fluid and constantly changing, which is what makes it so exciting. With new generations come new baselines of technology and new status quos. If the digital landscape is changing at a rapid pace, the context to those experiences will change as well.
The User: Each generation is born with their own opinions based on the context of how they have grown up or been affected by their life. With each new generation, comes a new mindset that is open to new things and alternatively, may be closed off to others. This informs the experience that they are looking for.
The Experience: 10 years ago there was no iPhone. Now, toddlers can navigate their way through games on a touch screen. How will that landscape change in 5 years? in 10 years? How savvy will they be in interacting with and consuming information digitally? Will they still be consuming information or interacting with it in real-time. In everything that UX designers do, the experience is defined by the users wants and needs. By solving those problems in the right way, the experience comes closer to being seamless.
User + Experience: User Experience is the human and the digital element intertwined.
When you combine the two in the right way, you have the potential for magic. User Experience has always been the marriage of human interactions on a digital platform and how we can make these interactions as intuitive as possible, more specifically, how transparent can we be in solving your problem. The more that people become familiar with these experiences, the more we can begin to blur that line between a digital experience and and a physical experience. When the web was first introduced, it was a tool that was separate from the human experience, now we strive more and more to close that gap in presenting a digital experience from the perspective of a human one.
Visual Examples of these “ah-ha” moments in User Experience include: iPhone, Tablets, PS3 Kinnect, OLED Screens, Interactive displays, Influence of Touch Screen.
What’s next? Stay tuned for more of DOs future thoughts on UX.
Ever want to change desktop interactions to mobile friendly events? If so, then you’ve come to the right place! Well kind of. The background, your design team wants a section of the site to be interactive; on desktops a hover effect is desired. But this, being a responsive site for mobile, hover events do not work. So they want it to be a click event for that resolution. For developers, a simple if statement can change that. Below I’m going to create a simple example where you can take the concept and run with it.
This example will take intermediate knowledge of Javascript and jquery.
We are going to be making two simple events. Both events will trigger the same thing, doubling the size of the image. The first event will be a hover event, the second will be a click event. Then we will combine those two events to trigger off browser width.
<img src=”http://lorempixel.com/400/200″ class=”test” />
A simple image and class to demostrate events.
var imgHeight = $('.test').height();
var imgWidth = $('.test').width();
First we need to create variables to measure the original size and height of the image. Just to remember what the original measurements were so we can toggle.
var imgHeight = $('.test').height();
var imgWidth = $('.test').width();
$('.test').click(function(){
if( $(this).width == imgWidth || $(this).height() == imgHeight){
$(this).width(imgWidth * 2 ).height( imgHeight * 2);
}else{
$(this).width(imgWidth).height(imgHeight);
}
});
The click event above compares the original sizes to the variables created. If the variables are equal to the current image size, the click event will increase the width and height x2. If the sizes are different, then restore the image back to its original measurements.
var imgHeight = $('.test').height();
var imgWidth = $('.test').width();
$('.test').mouseenter(function(){
$(this).width(imgWidth * 2).height(imgHeight * 2);
});
$('.test').mouseleave(function(){
$(this).width(imgWidth).height(imgHeight);
});
This hover event will increase the image’s size when the mouse enters its box, then restores it on mouse exit.
Now we have two events, a click event, which it optimal for tablets and mobile resolutions, and a hover event, for desktops and mouse interaction. Of course, having two scripts targeting the exact same object will cause some issues. So we need another IF statement to determine which event is needed based on browser size. To do this we will wrap both hover and click events into an IF statement.
var imgHeight = $('.test').height();
var imgWidth = $('.test').width();
if( $(window).width() >= 958){
$('.test').mouseenter(function(){
$(this).width(imgWidth * 2).height(imgHeight * 2);
});
$('.test').mouseleave(function(){
$(this).width(imgWidth).height(imgHeight);
});
}else{
$('.test').click(function(){
if( $(this).width == imgWidth || $(this).height() == imgHeight){
$(this).width(imgWidth * 2).height(imgHeight * 2);
}else{
$(this).width(imgWidth).height(imgHeight);
}
});
}
In this IF statement the window’s width is measured. If the window’s width is greater than 958px, I chose this window size because most desktop monitors are 960px and higher in resolution, and 960px the standard I believe, use the mouse enter event. If the browser is smaller use the click event. BAH-BOOM! that’s it. But there’s a part 2!!! Part two is mainly for testing and people who believe testing responsive is by going ‘epileptic’ on the browser handles.
Monday is Earth Day, and in keeping in the spirit of our motto:
we wanted to provide a list of some of San Diego’s coolest events in case you were inclined to show Mother Earth some mad love.
San Diego’s preeminent Earth Day Event: Earth Fair at Balboa Park, Sunday 10-5If you want to avoid the crowd of the Earth Fair, this link has tons of miscellaneous things to doIf you are inclined to to get your hands dirty there is a beach Clean-up: Moonlight Beach Encinitas Saturday (1 hour) 9-10amOh and it’s also National Park Week, WHAT? so you can go out and explore the hundreds of parks in SDFinally, after all that fun above you can stop at Sprinkles and enjoy a nice vanilla cupcake. Why? Because they will donate all the proceeds from the sale of these yumtastic confections to SurfriderThat’s what I call a win win.
Have you ever wanted your own customized personal or portfolio website but were either not ready to pay someone to develop the site, or just too intimidated by the daunting task of learning code? This guide will give you the knowledge to be able to set up a Wordpress theme and successfully customize the theme to fit your own unique style. Once you are finished you will have an efficient, professional looking, and fully functioning website that is easy to update on the fly.
Advantages to starting with a pre-built Wordpress theme:
Wordpress themes are usually professionally built and are only about $40 at themeforest.net or even for free across the web. Most of these themes already look great and have advanced functionality built in. Most themes are already responsive right out of the box, meaning they will adapt to different size monitors and devices. You will basically be skinning one of these existing themes to fit your own style.
Once your theme is set up:
Every theme will present you with a different way to display or manage your content, as a result I will try and be fairly general so that this will apply to everyone.
CSS Editor:
To update the theme you will need to open the CSS editor. All of the major “styles” should be in the Style.css, sometimes called Stylesheet.css. To find this look at the side menu bar and hover over “Appearance” and click “Editor.” The main style sheet CSS file should be open by default.
What Is CSS?
CSS is a way to add color, space, size, borders and any type of styling to an html page.
HTML = STRUCTURE
CSS = LOOK/FEEL
Once you have opened the Style.css file, it is now time to start editing. It is a good idea to copy and paste the CSS markup into a document on your computer that you can refer to if you ever mess up or need to start over.
The CSS file will look intimidating at first but think of it like trying to read Spanish without knowing it. When scanning written Spanish, there are plenty of words that you can recognize in English to get an idea of what is being said. The same applies to CSS. Thankfully, CSS is written to be very indicative of what is being styled. For instance, the attribute “border-color” is the color of any border, and “font-size” is the font size. Imagine that.
Much of the CSS is actually very self-explanatory and can be edited with almost no CSS knowledge just by using a little common sense.
Example:
As shown above, you can change the font from 14px to 12px just by changing “14” to “12” and saving. Change the font and color while at it. Once saved, you can then refresh your “Live” website and the changes will take effect just like that.
Pinpointing Specific Areas (Chrome Browser or FireFly Plugin required)
The trouble comes in when you need to find the exact text or area that you want to edit. To find particular areas to edit you might want to open your website in a browser and right click on the element you want to change and then click “inspect Element.”
Clicking “Inspect Element” will the open a dialog that will tell you exactly where that portion of the page is located
As you can see, the portion selected will be highlighted. You will then be given the HTML to the left and the CSS code to the right.
Once you have found the desired element’s CSS properties, you should select what you want to edit. (ie. #h1 text size) Next, go back to your Wordpress editor and hit command + F to bring up the search dialog. Now you should paste the CSS property you want to edit. In the case above, you might want to select “h1” and paste it in the “Find” dialog if you wanted to edit the “font-size” of the web site.
Note: This process can be done by skimming the CSS file manually, as long as the page is relatively simple. The more complex the page the harder individual properties will be to find on your own and this searching method will be helpful.
Simple properties to edit:
There are also terms in CSS that are not as straight forward. Let’s go over a couple of the important ones:
line-height: 20px;
This is called “leading” in the design world and is the space vertically between lines.
margin: 0 auto;
The spacing around and element. “Auto” refers to the alignment which you shouldn’t need to mess with at first. Some developers may use padding to apply different amounts of padding to each side. See below:
{ padding: 12px 20px 38px 70px; }
If you see something like this, it means there is a certain amount of padding applied to each side of the object differently. Just remember, the padding pixel amounts are applied clockwise. In this case, 12px is for the top, 20px is for the right side, 38px for the bottom and 70px for the left side.
Changing something as simple as the font and a color or two can turn a theme into a beautiful, fully-customized theme that fits you. The best part is most people will have no idea it was a theme to begin with. Take a couple hours to learn this invaluable skill and you are on your way to impress.
Next week Digital Operative will be hosting our second Magento Seminar Series at the Hotel Palomar Summersalt Lounge! Join us on April 24, as we discuss ‘Reaching the Anywhere Customer’.
We’re coming off an inspirational Magento Imagine Conference and are very excited to host a highly educational event for eCommerce professionals in San Diego. We are all dealing with this new breed of customer and there’s no better way to share what we’ve learned as an agency than through providing a high quality event in partnership with Magento, Yottaa, PEER1 and Avalara.
Our invite-only attendees will learn about user experience planning to better understand and connect with their customers. The difference between responsive and adaptive design and when to use them. The power of marketing attribution, and what it says about the anywhere customer. Post-purchase experiences and how to fully optimize them to reach customers on multiple platforms to keep them coming back.
Attendees will also see how other professionals are using Magento and how they have utilized Magento Enterprise’s tools for success. In addition all in attendance will receive a free schwag bag!! If you’re not one of the lucky few in attendance or want to see if there are other events in your area, visit the Magento events page.
It’s going to be a great night and we couldn’t be more excited!
To learn more about how Digital Operative can help your ecommerce business succeed, or to connect with a Magento partner in San Diego contact us!
BJ on Twitter Adam on Twitter
