Blog Category: web


How to Track Downloads in with Universal Google Analytics

The code below is a modification on the code mentioned in this article by Blast Analytics about how to track downloads in the Events tab in Google Analytics. The code they have in their article works only with Analytics Classic - this has been modified to use the send function available in the new analytics tracking code.


var filetypes = /\.(zip|exe|dmg|pdf|doc.*|xls.*|ppt.*|mp3|txt|rar|wma|mov|avi|wmv|flv|wav|m4r)$/i;
var baseHref = '';
if ($('base').attr('href') != undefined) baseHref = $('base').attr('href');

$('a').on('click', function(event) {
  var el = $(this);
  var track = true;
  var href = (typeof(el.attr('href')) != 'undefined' ) ? el.attr('href') :"";
  
  //console.log(href);
  
  var isThisDomain = href.match(document.domain.split('.').reverse()[1] + '.' + document.domain.split('.').reverse()[0]);
  if (!href.match(/^javascript:/i)) {
    var elEv = []; elEv.value=0, elEv.non_i=false;
    if (href.match(/^mailto\:/i)) {
      elEv.category = "email";
      elEv.action = "click";
      elEv.label = href.replace(/^mailto\:/i, '');
      elEv.loc = href;
    }
    else if (href.match(filetypes)) {
      var extension = (/[.]/.exec(href)) ? /[^.]+$/.exec(href) : undefined;
      elEv.category = "download";
      elEv.action = "click-" + extension[0];
      elEv.label = href.replace(/ /g,"-");
      elEv.loc = baseHref + href;
    }
    else if (href.match(/^https?\:/i) && !isThisDomain) {
      elEv.category = "external";
      elEv.action = "click";
      elEv.label = href.replace(/^https?\:\/\//i, '');
      elEv.non_i = true;
      elEv.loc = href;
    }
    else if (href.match(/^tel\:/i)) {
      elEv.category = "telephone";
      elEv.action = "click";
      elEv.label = href.replace(/^tel\:/i, '');
      elEv.loc = href;
    }
    else track = false;

    if (track) {
      
      ga('send', {
        hitType: 'event',
        eventCategory: elEv.category.toLowerCase(),
        eventAction: elEv.action.toLowerCase(),
        eventLabel: elEv.label.toLowerCase(),
        eventValue: elEv.value
      });

      if ( el.attr('target') == undefined || el.attr('target').toLowerCase() != '_blank') {
        setTimeout(function() { location.href = elEv.loc; }, 400);
        return false;
      }
  }
  }
});

Kicking Off a Kickstarter Campaign

So October 1st was the first day of Fohm’s Kickstarter campaign. Fohm is my new company - we’re an innovative memory foam company with a focus on delivering the highest quality possible. Our first product is a new memory foam pillow - one that has a technology unlike any other pillow on the market today.

We’re launching our company via Kickstarter in order to raise some funds for a few last pieces of the puzzle. Molds and fabric can be very expensive - especially when you use such high quality materials like we do. So the goal is to raise $23,000 within 30 days via the most popular crowdfunding website out there.

The process leading up to our launch on Kickstarter took quite a bit of work. We had to shoot a high quality video, get photography, write some copy, launch a one-page website… OH, and get some press. Let me tell you about getting press - it takes LOTS of preparation. Do not underestimate how much preparation goes into a solid PR campaign. Contacting all the right journalists with the right pitch is crucial to actually getting some decent coverage in the media.

Day one was fun - we hit it hard with Facebook posts, Tweets, emails to all of our family, friends and business contacts. We called and emailed everyone we knew. It was fantastic to start to see the pledges roll in from people we didn’t know.

Then days two and three came along and things continued to grow - we were still contacting a few people we knew and hoping that Kickstarter would do it’s job and get some traffic for us. This is one key area that no one should rely on - Kickstarter provides no guarantee whatsoever that it will make you a “staff favorite” or put you in their popular list. You are solely required to drive your own traffic to your project. Kickstarter provides some nice analytics to see where your pledges came from and the amount of video plays - but that’s about it. If you are truly lucky - then Kickstarter will help to promote your product - but the key word here is LUCK. You must go into a campaign thinking that you won’t get picked as a staff favorite and that Kickstarter won’t help you at all. Now, Kickstarter does provide a powerful platform - but they certainly don’t do all of your marketing for you.

So along came days four, five and six and here we are. We sent out a massive press release today in hopes that we will get picked up by a major publication or blog. This would help to drive some serious traffic for us - which again, we’re the ones responsible for making sure it happens.

I’m left right now feeling a little anxious about the future of our campaign, but I’m confident we will cross the finish line. We’re going to keep pushing our message out there and contacting the media with our pitch. After all - we KNOW the product is awesome, we just need the world to know it too. In case you’re wondering, here is the link to our Kickstarter campaign.

A New Version of Responsivenavigation.net is Live

The wonderful thing about any kind of web conference is the inspiration it gives you to do more and better things. On the cusp of this inspiration, I have launched a new version of responsivenavigation.net. I actually have been working on this re-design for about a week in prep for my talk today - but due to the crazy amount of “regular work” that I have had the past few weeks - I kept pushing back the launch date.

But now the new site is live. I added a few more links to the homepage as well as a new design for the entire site’s navigation. I am slowly becoming a big fan of navigation that runs down the left side of a page. It’s nothing new at all - but for the most part only seems to be a navigation pattern that documentation websites use.

This got me thinking - why do documentation websites use navigation that runs down the left hand side? Oh, because it’s easy to navigate. So why wouldn’t this type of navigation be used on all kinds of websites? Isn’t “easy to use” navigation the goal here?

I’ll still be adding more and more examples as time goes on and new techniques develop. But at least I’m in a really good place with the site right now. Enjoy and let me know if you want to see anything new.

Put Quality Into Your Work

I was recently reading this blog article from ZURB about why they decided to drop Zepto from Foundation 5. Foundation, by the way, is a completely free front-end framework for developers and designers. It’s also FREE. ZURB puts out Foundation simply for the good of the community. They see no direct compensation for building and maintaining that framework. Sure, they may see some indirect benefits from offering a free framework, but otherwise - it’s completely up to them to decide what they want to do with it, how long they want to support it, and what kind of features it has.

So what is their motivation to put this terrific front-end framework out there for anyone to use and download as they please? Well, I’m not going to answer that for you. But what I am going to focus on is the quality with which they put into Foundation. You can see from their blog article that they care about the quality of their product. They noticed that jQuery provided faster performance than the Zepto javascript library they were originally using. So after some deliberation they decided it would be a better product if they dropped Zepto and included jQuery 2.X. Now, this might not seem like that big of a deal - but think about it. They took the time to measure the speed at which their code performed and make adjustments to make it even faster. In my book I call that caring about quality. Did they have to do that? No, not at all. No one is paying them to make their product better. They simply want to put out a quality product - and in doing so, they realize that all the little details that going their products are what make them better.

“From the moment they wake they devote themselves to the perfection of whatever they pursue. I have never seen such discipline.”

That quote is from the movie, The Last Samurai. It sums up what the people of Samurai were about. They put quality and perfection into everything they did - no matter how mundane the task was. It’s rare to find that kind of commitment to quality in today’s world. Think about all the products we use on a daily basis that last for a few weeks before we have to throw them in the trash. Cheap toys from China. Crappy clothes from Wal-Mart. Operating systems from Microsoft. ;) The list goes on.. But the bigger lack of quality is from actual work and communication from people. As smartphones and texting becomes more integrated into our lives, children’s grammar and spelling are becoming worse. Most schools have stopped teaching children cursive writing. It seems like there is so much competing for our attention that anything we actually devote half-a-minute to is done with clear disregard for perfection. It’s done with the sole purpose of “getting it done”.

This mentality lends itself to society thinking it’s ok to “just get it done” without regard for how good the product or service truly is. Ever wonder why such good, quality (and expensive) products come from Germany and Switzerland? They put the extra effort in building products out of quality materials, with processes that might take longer - but result in a better, longer lasting products.

I know that sometimes I am a victim to just “getting it done” while disregarding the quality for which a project was built. So while I strive to put perfection and dedication into everything I build, I hope the rest of the world does the same.

CSS: Select the Last Odd Child

How did I never see this before? In my need for random pieces of code throughout the day, I had this problem arise. I needed a responsive navigation pattern to format correctly when I had an odd number of links. I was using this “clean grid” pattern and I originally wrote that you need an even amount of links in order for this pattern to look good. Not anymore!

Thanks to the magic of CSS3, we can target two things at once: :nth-last-child(1) - then we combine it with :nth-child(odd) to target both a last child and an odd selector. Pretty slick, huh? So put it together and we get this: ul.nav li:nth-last-child(1):nth-child(odd) a

This let me target the last element ONLY if it were an odd number. If it wasn’t an odd number, then no harm no foul.

Here’s the reference I found with a bit more info: http://stackoverflow.com/questions/8641003/css-last-odd-child

Longevity in Web Development

Today I had the pleasure of looking at some code that I had written about three years ago. A client needed a site updated and I decided that the code also needed to be updated. It’s not that the site didn’t work just fine - but there was just so much cool stuff I was able to add to it that I didn’t have (or know about) 3 years ago. I added some font icons, some fancy new CSS3 properties, and some new javascript for added functionality. I also had to refactor some of the PHP to make it a little cleaner and more efficient.

But all that updating had me wondering if there was a better way. Is there a better way to keep your code more maintainable and “future-proof”? My best guess would be that no - it’s impossible to write code that is completely future-proof because new things will always be evolving. It’s not to say that you can’t write the absolute best program right now and it won’t be useful at all in a few years. Because it totally should be. However there will definitely be something you can add or change within a few years. That’s just the nature of the beast.

So from now on I suppose I’ll try to write all my code as clean and as “future-proof” as I can make it - all while knowing that someday, I’ll be back to clean it up a bit more. Or add something shiny and new.

An Alternative to Google Maps

In 2013, Google made a major update to it’s maps feature. It’s still a work in progress I suppose, but for the most part it’s a completely different interface than what it used to be. Along with interface changes came the addition and deletion of specific features. One of the biggest features they removed was the ability to embed maps via an iframe.

I suppose they have their reasons for removing this feature - the first one being that they can now make money by offer this as a “business” feature. So if you want to have that old functionality you have to pay a monthly fee for their Google Maps for Business. I guess that’s cool since they offer even more fun features along with the plain old ability to embed a nice map.

I must have embedded over 200 maps in the past 3 years. Almost every site I launched needed (or wanted) a map on their site. And for good reason. So for me to pay for Google’s “Business” solution probably could be justified.

However…

Google still technically keeps it’s API open and free for developers to use. They just don’t offer the WSIWYG feature of creating an embeddable iframe. So I found this great little JS library called Gmaps.js. It’s super easy to use and incorporate into any website. Their documentation is fantastic and it’s been super easy to integrate into my WordPress websites. I’ve created a nice little shortcode that I can use in my themes, letting me embed a Google map wherever I want. I know there are a few plugins out there that probably take advantage of this library, but I thought it was much easier to roll my own solution.

So, Kudos to Google for a new source of revenue but thanks for keeping our options open!

My New Responsive Design Workflow - Custom Boilerplates and Grid Systems

Lately, I have been struggling with starting projects and keeping them organized and clean. I have tried using other people’s grid systems, boilerplates, and starter files - only to find myself modifying them to no end. For example - I’ll start off with Bootstrap using their grid system and a few buttons and alerts. But I soon realize that I don’t like their typography. So I edit that. Then I realize I don’t like the padding, margins, and fixed width and height on a few of their input elements. So I edit those. And the list goes on… By the time I end up with a finished product, I would have been better off just writing all the CSS from scratch.

Front End Web Developent Frameworks

What’s even more frustrating is that sometimes I’ll use something like Bootstrap only to end up having about 1000 lines of additional code that just sits in the stylesheet and adds unnecessary weight to the page. I’ll either be too lazy to remove it or it’s so intertwined with the other code that I don’t feel like rooting out what I don’t need. Sure I can create a custom build of bootstrap - but it’s just not the same.

I have also gotten stuck in the same situation when building custom WordPress themes. I’d usually start off with a starter theme like _s (which is probably the best one I have found), then end up modifying it to no end. I DO realize that this is the point of a starter theme - it’s just a place to start - it’s not meant to be your final theme. But again, I find myself wasting a lot of time building in the same functions over and over again that could easily be reused for future themes. This time wasted on repetitive actions could definitely be better spent on building out new functionality, problem solving, or getting creative with designs. The point is - time is money, and I hate wasting money.

So I finally come to the point where I created a boilerplate of my own - a set of files for quickly prototyping single page HTML websites. It includes a mobile-first responsive grid system (which by the way is a fun exercise to create yourself), a reset from Normalize.css, and some other common CSS patterns that I typically use. It also sets the typography to how I usually like it for responsive website. It’s easy for me to modify and best of all, it saves me a bunch of time! I can quickly get a prototype together in a flat HTML file and easily create a mock-up in the browser. This has proven to really get my projects started faster and even speeds up my WordPress theme development. It lets me build something that the client can see and feel right away. Instead of trying to explain a flat PSD to the client, they can actually see some movement.

I frequently make changes to this boilerplate when building new projects too. If there is something I am working on a in a project that I know I will use in another project - I just add it to the master files, then push it to Github. Easy as that - it takes a few minutes to stop what I am working on and add it to the master files - but in the long run it saves a lot of time.

I’ve also done the same thing with a WordPress stater theme. It’s more work than creating a simple set of HTML, CSS, and JS files, but it definitely saves time in the long run. And I keep adding to the master files as I go along. This makes each new project I work on that much faster.

Of course, there will always be a time when certain modifications won’t justify using my starter theme, but for the most part it serves it’s purpose - it starts my project on a faster path than just creating it from scratch.

So my advice? Start your own boilerplate and scratch using everyone else’s. Use your favorite elements from other systems out there and roll it into your own unique system. Here are just a few fun front-end projects that you can pull elements from when deciding how to build your own:

My First Truly Multi-lingual Website

The first time I saw how online translators like Babelfish and Google Translate work, I knew they would never be a good solution. There is simply no way to have a machine properly translate a sentence from one language into another with all the proper grammar, tone, etc. I thought for a second it might work, then quickly realized: nope.

So when my friend was in need of a website in both English and Spanish, I had to find a decent solution. The parameters of the website were as such: develop a multi-lingual website with a responsive design built on a content management system so the client could update content and images. Both languages needed to be easily updated.

So I thought to myself: ‘should I build two different websites?’ Maybe just make things easy and build the spanish version on a sub-domain? Effectively giving the client two different websites to login to and update? This wasn’t exactly the easiest option because future maintenance would require updates to two websites. Plus the client didn’t really want to provide upkeep on two different sites.

Another option was to branch the site at the main level and add sub-folders for each language. I guess this would require the homepage to act as a landing page where the user could choose which language. The only thing I wasn’t crazy about was the fact that this isn’t exactly optimized for SEO.

So what did I do? I found Perch CMS -which lets you build an HTML template first, then insert dynamic content areas later. The content that is served up to each area could then effectively be switched out based on what was in the query string. So all we had to do was create a “language” button to change what was in the URL string. I found a super simple tutorial on how to do this here.

So my silver bullet ended up being a super simple solution. Using Perch allowed me to manipulate the CMS into exactly what was needed for the client. He can login and edit content for each page in both English and Spanish - all in one spot. On the front-end when a user clicks on the different language flag, the content areas are swapped out correctly.

Here is the website: www.zoneimport.com

My Experience with Navigation in Responsive Design

Updated on: 3-9-2013

I’ve looked at a lot of websites on my iPhone. I’ve tried to study how other designers and developers out there are tackling navigation when their website is viewed on a tiny screen. A typical website built for a desktop computer? No problem. You can build whatever the heck you want. Get crazy with Mega Menus and shit. Make your drop downs slide all sexy like - or ease in ever so gently. That’s not the tough part. The tough part is what to do with that huge mega menu once your viewport gets down below let’s say 800px or so. That’s when the fun begins.

So I started to check out what the web had to offer on responsive navigation. I found a few decent resources out there. I found a few interesting techniques (and even made a fancy one myself.) Then I decided I needed to learn more about each technique. So I went ahead and built a little website with a bunch of demos - because we all know that experience is the best teacher.

Here are a few fun things I have learned about how to handle navigation on your responsive projects:


  1. Make ALL of your content accesible from all platforms and devices.

    It may be tempting to simply hide something on your website when you get down to a small screen size - but don’t penalize your users just because they are viewing your website from their phone. I know there’s been a debate going on about what context your users are using your website for - but personally I think it’s crap. If someone wants to view your website they want to find out everything you have to offer - they don’t just visit your website on their phone to grab your address. If I’m at looking for info on a restaurant while on my 24” iMac, I want to be able to find their address, menu, and phone number just as I would if I were walking around downtown and considering eating there in half an hour. So don’t hide your content when you get down to small screens - be creative and find a way to display all of the same information. Decide if you really need that information anyway - responsive design is a great reason to re-visit your content strategy.

  2. Make it easy for the user to find your mobile menu!

    Sounds simple - but sometimes the use of the hamburger icon isn’t too obvious for your Mom to decipher as the button that activates your menu. Case in point - Microsoft’s menu icon. Some people call the button that twitter bootstrap and the facebook app popularized the “hamburger” icon. If that’s the case then Microsoft’s icon is a club sandwich.

    Responsive Web Design Menu Icons

  3. Make your buttons easy to tap.

    The average human finger pad is 10-14mm. Apple suggest making your buttons at least 44x44 points (they say points because they can’t technically say pixels due to their high res retina screens). But this is something really simple - just add more padding to your links if they’re hard to click when on a phone or a tablet.

  4. Take advantage of accordions, lists, other creative elements to hide/show content.

    There are many elements you can use in your menu to hide and show menus and sub-menus. jQuery UI has a simple accordion - heck you don’t even need jQuery UI - you can just use a simple function to add a class to the parent item and use CSS to hide or show something. Simple example code here. There’s also the off-canvas method, which is nice for smaller menus. But don’t forget about the option of keeping your menu really small and utilize landing pages that hold your sub-navigation. This method requires you to really think through your content strategy, but it’s definitely worth it in the end.

  5. There is no hover property on touch devices!

    We can pretty much trace the need for responsive web design back to the creation of smart-phones - and smart-phones are touch enabled devices. They don’t have a mouse - therefore there is no hover state. There is only touch.

    Try to stay away from the hover property when building responsive websites. For years we have built menus with unordered lists that when hovered over, a drop-down will appear. While this is great for a device with a mouse, what about a device without one? I would rather see a drop-down menu activated with a click or a touch event. This creates consistency across your responsive design. Add a caret or some kind of notification to the user so that she knows something will happen when that menu item is clicked.

    I found an interesting bug when I purchased a touch screen Windows 8 Lenovo desktop computer - Internet Explorer did not register touch events. It merely simulated click events. Therefore, hover properties were not handled as they are on iOS devices. I tried to activate a hover-enabled drop-down menu, but it was completely inaccesible. The drop-down wouldn’t stay down long enough for me to click on any of the sub-menus! (Side note: even the Lenovo website wasn’t accesible from their own device! #fail)

    So this leads me to tell you this - optimize your website for TOUCH first, hover second. Don’t hide valuable content behind items where “hovering” is needed.


Should I Hide Menu Items to Make My Navigation Responsive?

The quick answer: probably not. The long answer depends on your situation. How big and complex is your navigation? Do you have tertiary navigation? Is your site jam packed with content on the homepage? Do you already have calls to action on the homepage that can get the user to your “hidden” sub-nav?

The reason I don’t like hiding your sub-nav: why hide content from your users just because they are browsing your website from a mobile device? Odds are, they are searching for the same exact content they would be searching when on a desktop. Don’t penalize your users just because they have a smaller screen.

In Conclusion

So after all of this research, here is a link to the site that I built which contains some examples of navigation patterns.

www.responsivenavigation.net →

Next