Author Archive

At your firm, why would you need version control for designers? Well, as a designer myself, my first experience with version control was a handful of years ago at a software development company. Prior to this, I had never heard of it, despite working for web agencies that were service based. As a web designer in the mid to late 2000’s, there was really no need for me to even fathom using something like Git.

But they weren’t using Git, no, not even SVN. What they were using was Microsoft SourceSafe. Say, what? Yes! It was a much older version and it was a bit of a pain in the ass because you couldn’t actually work on a file at the same time until someone was done with it. I don’t think there were any merging capabilities.

Firstly, if you’re a designer, you might not have ever used version control or know the terms commonly associated with it.

What is version control?

Version control helps you manage changes to your work

Even if you’re working alone, version control can help you manage changes to your documents like source files or graphics, over a period of time. If you’re working on a team, version control is very powerful because it helps you all work in harmony, instead of overwriting each other’s changes. It helps minimize disruption to your teammates working on the same project, or even the same file. When teams or even just you solo aren’t privy to what changes were made and something goes awry in a production environment, it’s very difficult to diagnose what even happened or what changed when you don’t have that history to look back on.

Common terms you might hear about version control

Repository. As the name implies, a repository is a digital receptacle where things may be stored. Many people say/type ‘repo’ as slang when referring to a repository. Essentially a repository is your project. Sometimes teams may use multiple repositories for their whole project if it’s overly complex, however, I recommend using branches instead.

Branch. A branch is like a mini-project or task. You’d create a branch (and branch off, ha) to do things like implementing a new feature (that new navigation perhaps?) or even something small like fix a bug. I’ve made branches to update all the local front-end libraries of a project before. When you’re done, you merge the branch back into the main one (usually called the “master”).

Commit. When you make a change you’re happy with, you commit to it. Your change gets a title, and an optional description. You can line-item commit or commit an entire file or multiple files at once. A commit is a piece of history in your project.

Push/Pull. When you push code, you’re basically “uploading” your changes, your commits, to the central repository that you and all your coworkers have access to. Any time you push, you need to pull down any current changes first so that Git may auto-merge the code together. At times, you might need to deal with conflicts, but we’ll get to that later.

Types of version control systems

The most popular version control system at the time of writing is Git. Not too long ago it used to be SVN, or Subversion by Apache. Mercurial is another system that Facebook uses due to constraints with Git.

So, as a designer, why would you use version control? And for what types of files?

Why use version control as a designer?

1. You must use version control for front-end code to avoid overwriting

Whether your code is CSS, SCSS, HTML, JS, PHP, etc. It doesn’t matter. If it’s code, someone else will probably be touching it at some point and you need to version it so you can look back on important changes, or, if someone else is working on the same file, Git can properly merge the two versions and you and your pal won’t be overwriting each other’s stuff and getting frustrated. I’ve seen that happen far too many times in cowboy coding land.

2. Ability to roll back to changes after the fact

Often times, you may find yourself making changes and then a client or boss or whoever says, “You know what, let’s just go back to the way it was.” Oh, but shoot, you can’t remember how you did that, or really don’t feel like spending a whole hour to get it back to the way it was. Enter: version control! With Git you can easily revert back to an earlier change or commit with a couple clicks if you’re using a Git GUI like I am (I use Tower), or typing in a command in the CLI (Command Line Interface) like my partner does.

3. Your repository is an easy backup source

Things happen. I know. Sites get hacked, things explode, you know… just another day in the life of a web worker. Ah, but your Git repository also serves as a backup source just in case bad things happen! That backup might be sitting on your computer, or ideally, it’s in the cloud in a service like BitBucket, GitHub, or similar.

What kinds of things can I version control?

Any text file for sure. CSS, HTML, JS– all great things to control versions for. However, you can also version graphics, PSD and Sketch files, etc. However, do be aware that large files are discouraged from being tracked. Github, for example, will warn you if you are pushing a file over 50mb, and will forbid you to push something over 100mb. More info about working with large files can be found here. While you can’t normally see differences for graphics in the CLI or even something like Tower, you can see the difference when you do a compare with a program like Kaleidoscope which has that capability.

How to get started with version control as a designer?

I normally recommend getting started with a GUI program to get used to what it’s all about. I personally use Tower for Mac, but check out other Git GUI’s for Mac & Windows here that are listed, many of them are free. Tower is amazing though, and I’d cry if they ever discontinued it.

From there, you can start tracking a project immediately or create a new one. There are tons of resources to help you get started. Even Tower has their own guide for it and you can choose to learn through the GUI or the CLI.

Ready to push out to the cloud? You need git hosting.

When choosing Git hosting, you’ll need to figure out what your needs are. Do you need private repo’s? Or will they all be public? Is your project open source? All these factor into where you might store it. If your project is open source, the obvious choice is Github. With so many users and an easy system to track issues and make pull requests, Github is a no-brainer.

But maybe most of your projects are private? In that case, you may want to look at GitLab or BitBucket. Both offer unlimited private repositories for free. And while Github also offers private repo’s, they do so at a cost. If you’re budget minded like us, this is probably not an option for you.

Conclusion

All in all, you can get started with version control in a matter of minutes for free. It’s so important to add this to your daily workflow as a designer and certainly very important to add it to your skill set. You will thank me later and ask yourself, ‘How did I ever live without version control?‘.

So, Basecamp vs Asana, which one is really better? Since we started Gobble Logic in 2012, I have been on the quest for the perfect project management tool. I’ve tried all the popular tools, especially the ones designated for web development and design agencies. I settled on Basecamp from 37 Signals because it was simplistic; I could add several people on a project, manage what they see, and include the client on projects and discussions.

During my time with Basecamp, I tried various others: Podio, Trello, Apollo, etc. Podio came close to a replacement because it’s so generic; it can handle just about anything allowing users to make many custom fields and data handlers. Trello came close for just a regular todo list, but for some reason it just left a lot to be desired. Apollo was just as costly as Basecamp, had similar features, but it was a little too cumbersome to use.

These last months I’ve actually used Wunderlist and sometimes Todoist to manage my own personal tasks. Rarely did I even go into Basecamp. I left it for the rest of our team to use (which wasn’t a whole lot of usage, mind you).

Last week during a WordPress co-working day in Tampa, my friend Jim True recommended I try Asana. I had never even heard of it. Maybe in passing, but I never evaluated it, like I had the other 15 pieces of software back in 2013.

I gave Asana a whirl the next day. So out of Basecamp vs Asana, who is the winner? Well, the day after I tried it, I immediately made the decision to kill off Basecamp. Here are some of the major reasons why we switched from Basecamp to Asana:

1. Basecamp can be costly for a firm like ours

We had projects coming in and out like nobody’s business. At any given time I could have had 60 projects open. Granted, a third of those were internal. Basecamp charges a flat $99/mo. No free tier unless you are a teacher, student, non-profit, etc.

What about Asana? It’s free for 15 team members and unlimited projects. Absolutely no project number limitations. At time of this writing we have a team of 4, sometimes 5 or 6 depending on additional contractor help, so the free plan works out perfectly for us. You have to watch your monthly business expenses, because the little things add up! Asana’s premium plan is only $9.99/mo which is only a tenth of what I’d be paying with 37 Signal’s Basecamp.

Bottom line: Basecamp charges a flat $99/mo fee while Asana charges for users when you pass 15 of them. I know which one works better for me there. Ding Ding, Asana wins this round!

Annual savings: $1188 (wow! for a small business that’s mega $)

2. Basecamp has no high-level view

Basecamp’s design is centered around the user focusing on one thing on a screen. I understand why it’s designed like it is, to really rein in your attention to the particular task or discussion at hand, and it creates a clean work environment. For some reason I’m just not happy about that, especially since you can’t get back to the previous screen unless you click around (was I missing some great keyboard shortcut here?) Asana takes the high-level view approach and gives you a three column view. Granted, this makes Asana appear a bit more cluttered, but I do enjoy seeing everything out there in one view, without clicking back to simply view all my to-do lists.

Basecamp’s Typical Workspace

Typical Basecamp task view of project. Tasks and discussions are very similarly laid out where you are unable to see other tasks lists or discussion titles that may be related until your drill in. Makes for an inefficient workflow. Doesn’t this seem like wasted screen real-estate? What gives?

Asana’s Typical Workspace

Asana workspace has high level view so you can see projects, task lists and individual tasks on one screen. Easily jump to something else. Your focus moves across the screen easily in a simple listed/nested format.

3. Asana is just faster to create and manage tasks

Keyboard shortcuts anyone? This is also why I clung unto Wunderlist for a long time. The keyboard shortcuts are amazing. I can’t tell you how much time a user can save, by not even touching their mouse. It really is a time hog when you have to keep going back to it. Asana has around 30 or 40 keyboard shortcuts that make your flow faster. In Basecamp, everything is a click click type action. Especially for assigning tasks– it’s fairly cumbersome. We even encountered a bug with the due date and assigning task function. I don’t have this issue in Asana, it’s more like return, type, return, tab, enter, type, etc.

4. Asana’s to-do lists within to-do lists, and tagging

We love making tired lists. Granted, if we want to go crazy we just use something like Workflowy to really get out brains going. But to have the ability to create subtasks within a single task is incredibly helpful and useful. Basecamp doesn’t have this feature. Another small feature that basecamp doesn’t have is task and person linking. Much like Twitter and now Facebook, in Asana, I can type the @ symbol and begin typing the name of a task, project or person to tag them, which will automatically link to a task/project/person in question. I can also merge and copy tasks! Bulk editing of tasks is also handy!

5. Better Slack integration for Asana vs Basecamp

Basecamp: Okay, this makes me sad. A search on Slack repository returns nothing for ‘basecamp’ except Zapier. But aha! Zapier to the rescue because they do in fact have an integration with plenty of options. The only downside to that is the fact that you do have API call limits on Zapier’s end so if you have a lot of things already with their service and are using a free tier, this might be a problem.

No official Slack app for Basecamp 3

Basecamp 3 to Slack integration options

Asana on the other hand has does have a Slack app for easy integration in addition to integrations also available on Zapier. Asana really has this area covered for Slack.

6. Seamless Harvest integration

We use Harvest online time tracking software. It’s an integral part of our business. I generate estimates, turn them into invoices, duplicate them, generate invoices on the fly based on hours, track my time, and view time sheets from my team. Asana has a seamless integration into Harvest, whereas with Basecamp I had to rely on the Chrome plugin that injects itself into Basecamp tasks. The more plugins I can get rid of in Chrome, the better. Occasionally I’ll have hangups in Basecamp or other tools where I’m tracking time because of that plugin. So, it’s nice to have software that simply integrates with it rather than a clunky browser extension.

7. Advanced task search

Frosting on the cake here. It is amazing how many times I’m about to hop on a client call and I need to update them on what was completed by my team. In Basecamp, I can’t seem to find anything. Their search is limited and where are the tasks? Where are John’s tasks? I have no idea. Asana takes a detailed approach. I can easily filter out completed tasks from any project within the system, or several projects. It is especially useful if I’m checking in on specific team members to make sure they’re blasting through their tasks for the week.

Basecamp’s Search Feature

Asana’s search is such a breath of fresh air. Finally I can find what I need.

8. Project templates in Basecamp vs Asana

You can easily create project templates in Basecamp. This has been a long-time feature for many years and very loved. I almost didn’t switch because of this. But guess what? Asana has project templates and some are pre-made which is extremely useful. If you want to create your own template in Asana, just create project as a template, then repeatedly copy the project when you need to. That’s it!

Project Templates in Basecamp

Basecamp project templates are easy to setup

Project Templates in Asana

Asana has pre-made project templates

Conclusion

Asana just works better for what we do. Perhaps for others, Basecamp would be a better choice, but in 2017, I find that hard to believe. Asana is a true task and project management system whereas Basecamp seems like an over glorified inbox when you really look at it since it has a chat feature, message board, post updates, and comments littered everywhere. So when it comes to Basecamp vs Asana, Asana is the clear winner, hands down in terms of features and price.

I would like to say that since this change has happened, we will no longer be inviting clients to view our internal projects. While still entirely possible with Asana, it was never popular, and clients generally preferred sending us feedback via email. There are of course exceptions to that, especially with our software development projects.

Final note: if you’re wondering how we migrated all our projects from Basecamp to Asana– we did it manually (as in, copy and pasting tasks over, re-uploading documents, etc). It was a great opportunity to clean them up and trash projects that weren’t necessary to keep around.

Well I had an interesting problem migrating to WP Engine while installing Sucuri WAF this weekend. First of all, WP Engine’s hosting packages now come with a free SSL certificate from Let’s Encrypt. That’s great. More interesting, Sucuri also offers a free Let’s Encrypt SSL. Also cool. I’ve been told with their PRO account, they offer a free COMODO certificate– even better. When migrating to WP Engine with the intention of installing their new SSL certificate and putting it behind Sucuri’s WAF, we’re presented with a small problem: getting the SSL certificate installed…somewhere. But where? So, here’s how to install Sucuri WAF on WP Engine.

You cannot put your secured site behind the firewall before you install the SSL certificate. And you must put the SSL certificate on Sucuri’s end. Putting it on WP Engine will literally do nothing for you.

How to install Sucuri WAF on WP Engine

Step 1

Once you stage/replicate your existing site to WP Engine using their awesome automated tool (via their WordPress plugin), and add your domain to the domain settings dashboard, ensure you have an SSL certificate issued on Sucuri’s end, with either a Let’s Encrypt (FREE) SSL, or a COMODO Certificate. Contact Sucuri’s support to get this rolling.

Step 2

Initiate the DNSchange to point to the IP of the new Sucuri WAF server. Depending on your TTL setting, this may be an hour, two hours, or more. 3600 seconds is an hour.

How will you know when it’s finished? Open up terminal on mac and type this:

nslookup domain.com

Your “Non-authoritative answer:” should contain the IP address. If not, check back in a few minutes. Sometimes it may go back and forth between the two. This is called propagation.

Step 3

There isn’t a step 3, ha!

Conclusion

Well, that’s it. If you attempt to install the WP Engine provided SSL certificate prior to pointing your domain, it will fail. If you attempt to use Sucuri without an SSL on their end, it will fail. So the most important lesson here is: get the SSL installed on Sucuri first, then make the DNS change. Ignore SSL on WP Engine. You don’t need it.

Troubleshooting

In my senior year of high school, my goal that I declared publicly in economics class was: “to own and operate my own advertising agency”. I wanted to build it. I had a dream of having a fancy office (you know, the kind where you get awards for having a “cool” office), working with national big named brands, and having a stellar award winning team. I was already interning in the afternoons at Clarke Advertising, which later merged into Eric & Mower, then merged out.

When we started Gobble Logic in 2012, we briefly romanticized about having a brick and mortar office in either downtown Tampa or Ybor City. However as we started building our team and theorized about how people will be working in the future–we realized that having a physical office is neither economical, practical, nor is it even productive for the average office worker. These are the greater reasons why we don’t have an office:

1. Traffic congestion and concerns reduced

If you live in any metropolis, you’ll at some point during the course of any given year, hear about the traffic problems. An hour and a half commute they say. Huge problem, must fix it, they say. Build more roads (muh roads!) or mass transit, they say. You know what people aren’t saying? No one (to my knowledge) has even suggested to change how the work day functions and where we work.

Imagine that all office workers suddenly telecommuted and perhaps only went into work one day a week, if that. Maybe even once bi-weekly. How many cars would that be off the road in any given city? It’s a hard thing to even measure because each city is different– they all have their focus industries. If the majority of office workers did indeed telecommute, it would be assumed that traffic congestion would significantly be reduced.

This has positive consequences as well. Fuel not used commuting would be used elsewhere–and office workers’ money could be allocated for other budgets. Time is also better spent by the office workers. The one to three hour round trip commute now would possibly be spent with their families, exercising, or spent doing activities that make them happy.

2. Land utility and re-classification

In less dense cities, office space tends to be spread out across many acres of land. If companies elected not to have office space, this land could be used in other ways because it would be freed up. It could be anything– a small farm to help feed the community, a new restaurant, or a multi-dwelling apartment/condo high-rise.

Land is an important resource not to be wasted on unnecessary or redundant activities.

3. General energy use, and decreasing waste

The energy to maintain an office building could be better spent elsewhere. Think about this: your residential home is sitting unoccupied all day long while you are at work. Depending on your locale, you must spend energy to keep your dwelling temperature controlled. Would it not be considered wasteful if you did not occupy your house half of the time? Your house can be multi-functional, and can be used to house you while you work. There is no need to burn through more fuel to power an office building.

4. Productivity increases by cutting down distractions

I have noticed throughout the course of my career that lack of productivity is associated with two things (in regards to environment): being comfortable, and the amount of distractions. When one first starts their job, they are still acclimating to their environment. It’s hard to really jump in and be productive on day 1. While some offices are obnoxiously quiet, others can have extremely…lively…environments that ultimately are toxic to being productive– especially with several people dropping by your desk unannounced to chat about a specific issue–or worse, the latest gossip about Mary Ann from Creative.

At home, it’s obviously a different story. You are already comfortable with your work environment and it’s familiar. You know where you keep office supplies and you have already made an effort (one would hope) to make adjustments for ergonomics and to limit distractions. It’s as quiet or loud as you’d like.

5. Home life balance

It’s frustrating for a typical office worker when they have worked a long day, only to be stuck in traffic for another hour. Some office workers are away from the home 12 hours a day. When you combine that time with regular routines at home that need to be completed, it leaves little time to the modern office worker to enjoy or spend with loved ones. How many times have you planned to get laundry done and cook a decent meal after work, only to get home exhausted, look at the overflowing hamper and declare you’re going to go get Chipotle for dinner instead? We’ve all been there. But if you’re already working remote 100%/full time, cooking dinner and doing chores are already easily factored into the day.

6. Cutting equipment costs

Some companies provide laptops to their remote employees. Some don’t. There are pro’s and con’s to both approaches. We don’t provide equipment to our remote workers because it’s too much of an overhead to our business. I’ve also heard of horror stories about terrible confrontations after remote workers have been terminated and fail to ship back your equipment. But, if your workers’ have their own devices, there is risk of their computers being previously infected with viruses which may compromise your own systems and data.

7. Yearly or Quarterly Meetings

What you save in office space you could use to send your team on a yearly retreat, especially if your team is spread out globally. Your team should be meeting digitally every so often via Hangouts, Skype, or some other software that allows for video chat. If you’re a very large team, host quarterly meetings depending where your concentration of people are located. Perhaps 80% of your team is located in Tampa Bay? So, rent some space to have quarterly meetings. Smaller teams can meet more often locally almost anywhere, restaurants, coffee shops, or even opening up your own home office is desirable.

Well, what are you waiting for?

Close down your offices and follow #RemoteLife! Or start slowly: hire some remote workers. They can be independent contractors to start, then gradually move into part time workers or full time ones. Once you get used to the idea and can cater to it, your current workers can try it out as well. After a while you’ll be paying for an empty office that no one uses. Either rent it out or let it go. Some great examples of companies already working remote are the WordPress companies like Automattic, 10up, Modern Tribe, etc. Are you next?

Many times we work with companies that have no budget for stock photography, or don’t see the value in it. When you can’t afford photography, and stock photography prices seem obnoxious, take a look at these free stock photos that don’t necessarily have that “stock” look. Check out these eight free stock photo resources:

A personal favorite of beautiful free stock photos. Most of the shots have brilliant composition. Unsplash is very much a lively community; you can save your favorite photos, as well as artists and companies. I highly recommend!

Another comprehensive library of free stock photos, they also sport a photoshop plugin that you can use to automatically fill in photos into placeholders. However, when I searched for ‘husky’, nothing came up. This made me sad. Download process is long and annoying, takes about three clicks to get to the image.

Alas, no husky photos. -1. Download of these free stock photos is simple and straight forward. The shots are nicely composed, however they are lacking in a comprehensive library that many of the others have. Still, it’s a good place to find unique shots at no cost.

This free stock library is hilarious. I won’t deduct points for not having any husky photos, only because these photography options are strangely unique. If you’ve been around the advertising block and/or are a traditional ‘mad men’, you’ll remember these types of shots in many of your stock photography catalogs. Remember those?

Excluding StudioPress Themes and the Genesis framework, and obviously not counting skeleton/blank/starter themes either, I’ve outlined several reasons why our firm does not create or maintain websites from pre-made WordPress themes from large marketplaces or independent stores. There are some exceptions to this since I’ve come across really great frameworks, but for the vast majority of themes out there, I have some gripes with you. Here’s six failures of premium WordPress themes:

1. The complete ignorance of SEO practices

I can’t begin to tell you the number of themes I have encountered that either attempt to build their own “SEO Settings” in them, or just completely disregard everything about SEO. In once instance, I had a theme where you’re able to configure the home page “sections” by selecting a page of content to display. It displayed the page content, followed by a button to “learn more” which linked to the page with the same exact content. On a business standpoint, I would say this is of most importance.

2. The lack of decent styles for a multitude of scenarios

This is probably my biggest gripe. Who in their right mind thought letter-spacing:-1 was a good idea on body copy? No one, that’s who. Unless you’re a theme shop cranking out poorly planned and designed themes. With all of these themes I find myself using their “Custom CSS” text box and throwing all sorts of selectors in there to either counteract their bad design and improve legibility, or add in styles they completely forgot about to begin with! I thought I was buying a pre-made theme to avoid writing code. Guess not.

3. The inability to easily remove the footer link-back to the theme store

When I say easily, I mean it for the lay person, not for a developer. If the theme store was any decent I might consider leaving the link there, but alas, I definitely wouldn’t want any other poor person to go to their theme store, see the pretty demos, impulse buy a theme, and later realize what a poor choice they’ve made. Granted, this is a trivial thing, and not a make-it-or break it feature (more of an Alison pet peeve).

4. Pre-made themes are truly custom work with a ridiculous amount of bloated options

I laugh internally when I tell potential clients we build “custom” themes and they look shocked or terrified at first. Pre-made themes from stores are more custom than any custom theme we have ever built. This is mostly due to the crazy option and bloat they have developed in the WordPress dashboard for the abundance of users they try to cater to. With custom code comes flaws and downright security issues. The only reason a theme needs massive support from a dev team is because of the bloated code that was built in to do a lot of different things and functions— most of which you won’t even use. A good theme would use the native WordPress customizer, and overall have a native experience with little to no bloated options. You can see examples of this on WordPress.org.

No theme is perfect, not even ones we build. There’s a false perception among a lot of our clients that the majority of these pre-made themes have great standards, and the options are somehow an added benefit. They are not, they just present a huge obstacle if you are having someone else develop a website for you. In addition, every theme developer has their own sets of theme options that are all coded differently with different coding standards. To even begin to learn and understand them all is impossible (especially from marketplaces with hundreds and thousands of developers).

5. The perceived “cost savings”

Many times clients are looking to save a buck by going with a pre-made theme, and they usually think that just changing a few things here and there won’t be a lot of overhead. In some cases, you really can save development time and money by going with these themes, if you are looking to only change colors and fonts, and other minor cosmetic customizations. Many of the premium themes, if not most, were built with the lay person in mind, to make it easy for them to spring up their own websites. These themes are not friendly to big customizations. If you’re project needs structural changes, more often than not, the cost savings you thought would be beneficial, actually back-fired to the second degree. Suddenly, you may be paying more than what you would have paid if you simply commissioned a theme that was tailored and designed specifically for your business and your customers. Website planning is a big deal, and you don’t want to box yourself into a theme that just doesn’t do it for you.

6. The highway robbery by theme marketplaces

I don’t mean cost per theme that the end user is paying. I mean what the developer gets as a result of a sale. This is a matter of principle to do business with these marketplaces and theme stores. At one point in time I thought I would make a few themes for a popular marketplace and make a lot of passive income. When I was looking into the process, I was shocked to see that these marketplaces take upwards of 70% of the profit. Others are around 50%. That’s worse than taxes in the United States, but of course if you set aside part of what you make from that sale for income taxes, what are you actually getting back here? Why would I want to support a store that is screwing over their best customers: the developers. Those figures just aren’t reasonable. I can’t do business with a company that so blatantly takes so much from the producers.

Conclusion

Pre-made themes remind me of pre-fabricated housing units. You can talk to your “builder” and get various options but you can spot a prefab home practically a mile away.