User targeted design and development from mobile to desktop

So you are looking for a new logo?

Getting Started – Thinking About Branding

Let’s talk a bit about logos (and on a related note color schemes). When you are branding your company there are a number of considerations to address. Logo and color scheme are usually the two main ones. Deciding on colors is generally our first step here when helping a client set up their company’s branding. When you approach us to help out it’s good to first ask yourself a few questions about your company, and understand how color helps set a tone for your enterprise. Here are a few examples.

  • Is my company traditional, or conservative? If traditional, you probably want to work with more muted less vibrant color tones.
  • Are you selling yourself to a younger more adventurous client base? Then you’d likely opt for bright colors.
  • What are some of the common trends in color use in my industry? Surf the web to view competitors websites and take stock. Sometimes it’s important to be a pioneer, other times you might want to make sure your branding is inline with industry standards.
  • Save some links, and logos you like to show us as examples. Think about why you like them, what made them catch your eye.

When we are starting any design project, and we need a color scheme, we will spend time visiting some of the excellent color scheme tools available on the web. Here are a few of our favorites to give you a basic idea of what color schemes look like in the raw.

  • Paletton – Gives you a nice overview and complex color control.
  • Colour Lovers – Kind of a social color site, good for browsing schemes created by others.
  • Coolors – A nice modern interface.
  • Color Schemer – A simple old favorite.

Once we have decided on a color scheme we begin the process of creating a logo. Logo design can be challenging because in the end, many times logos can come down to one person’s personal preference. We try to guide you towards a solution that is instantly recognizable and works universally.  It helps to keep in mind these points when thinking or criticizing logo designs.

  • Logos are designed to quickly express a first impression about your company.
  • Your logo design can potentially be used across a number of visual mediums…print/web etc.
  • A good logo will still work when scaled down…and scaled up! you will need it on your website, and potentially a large trade show banner.
  • Logos should work in harmony with your brand colors, and might end up placed on different backgrounds (if so they might require different treatments).
  • Bottom line, think minimal, think simple! We need to help your customers quickly pick you out.

The starting place is usually a font and your business name…after choosing colors the font choice will help represent your brand. Modern styles vs. Traditional styles etc. We often work with Google Fonts as they are hands-down the easiest to use with modern web development.

Also there may be some simple iconic symbolism we can work in to express a particular theme related to your business.

Let’s Work Together on a Logo!

So now you have a bit of insight into process, and you are thinking about colors and fonts. Here are a few questions you might answer to help kickoff the process, and get us rolling.

These are questions we will ask ourselves about your project during initial logo designs, so add your input!

  • Does your organization  lean more towards young/modern, or more traditional/conservative?
  • Do you think cool colors or warm colors will best set the tone for your branding?
  • Make a list of single words that best describe your industry or how your business relates to your industry.
  • Do you have a descriptive “catch phrase” for your business?
  • Can you think of any symbols to express any of these words?

Initially we will present you with a logo/color sheet, with a varied number of ideas. Depending on budget and scale of the project we will work through a number of revisions until we are both happy with a final logo solution.

Here is an example of a brand sheet we prepared for our client Lloyd EcoDistrict, and organization  that is clearly focused on green development (click to enlarge).


Once presented we worked with the project manager through a few revisions to arrive at the final logo. We feel it is a successful easy to read logo, that clearly conveys the eco friendly vibe we were working towards, with an architectural/modern style font to express community development.


We look forward to potentially working with you on your new logo!

Let’s Kill (or at least rethink) the Hamburger Menu Style!


We have recently made updates to our agency website navigation to improve our mobile UI. For the last few years we have been (like many others) married to the “Hamburger” button style menu navigation in which we hide our main nav tabs for mobile and replace them with a small button for access. Clicking on the button slides out the main navigation for mobile users. Initially we did this to free up screen space, which was a measured response due to the smaller screen sizes of mobile devices. Now with all the larger phones and tablets flooding the market, we feel it is a better case of usability to have all our main sections readily available onscreen for a better overall user experience, as opposed to having to click twice to access our main sections.

We choose what we feel are pretty universal icons for our sections, and we label the icons at desktop since we have more real estate to play with. This is not to say on a more complex site you would not want to have a slide out menu for your subsections, we just feel the need to continually revisit and simplify our design where we can to optimize UX. One additional benefit of this is faster pagespeed, as we are using all CSS and one less bit of javascript to build our navigation system.

Google Search Result Penalty for Non Mobile Friendly Sites?


Let’s clarify this so you don’t go into full on panic mode, and then let’s discuss why you should be somewhat concerned. Beginning April 21rst Google will start “expanding our use of mobile-friendliness as a ranking signal”. This means searches made from a mobile device will receive results that will take into consideration the mobile friendliness of your website. If you receive all your searches from desktop users then you have absolutely nothing to worry about right? Well sure, but that is definitely not the case.

mobile3We applaud Google for pushing this forward as responsive design and development is at the heart of what we are promoting currently, and have been doing for the past few years. You should be aware of your traffic sources, and use Analytics or at least some sort of service to track your websites visitors. If you do so, you will no doubt notice more and more of your visitors are accessing your site via iOS and Android devices.

You can quickly use this Google tool to test your website URL for mobile friendliness.

If they give you a scary red flare that screams fail (ok it’s not quite that dramatic), contact us and we can take a quick look at your website code and tell you what it will take to get you up to speed. It’s not the end of the world, but it is definitely time for you to start addressing the massive growth of mobile users accessing your content.


Happy New Year 2015!

This year really flew by for us, busy busy busy. That’s a great thing, we really appreciate the support! After a little over 10 years of running a small business in this rapidly changing field of web design and development, most of the time we are just happy to still be able to do what we love on our own terms. We’ve worked with some great new clients over the year and continue to grow and interact with many of our regular clients.

To keep current in this industry requires one to continually invest time learning and experimenting with new technology and code practices. This year as we continue to work responsively in our development we have added a few wonderful new tools to our development flow, and I’d like to give a few quick shout outs, as most of these are open source, developed and shared by other professionals in the industry! How cool is it that we work in a field that is so supportive and innovative?

  • Sass – How did we as front end coders ever get by without it! Sass is an extension language for css which makes our css code much more efficient and easier to understand.
  • Bourbon/Neat/Bitters – Pretty much all of our websites and apps these days utilize these amazing mixin libraries from the Thoughtbot team. Over the year we have tested and deployed sites with frameworks like Bootstrap and Foundation, which are also both awesome, and can be more appropriate in some situations. In the end we find the Thoughtbot mixin approach is more semantically appealing, and leaves us with lighter, more efficient code.
  • Grunt – Nothing has streamlined out development process more efficiently than the addition of Grunt. While it might have a bit of a learning curve, the time is well spent, and you will be rewarded with things like having all your css and js compiled and minified for you automatically.
  • WordPress – WordPress continues to evolve as the most flexible open source CMS, with a huge community supporting it. This continues to make it the goto for us when building client websites (We have been working with WordPress for over 6 years, but I still want to give it a shout out!).
  • GIT – It took us a while to embrace GIT, and work it into our development flow (we’ve been in this business a while and sometimes major changes to the workflow are difficult to implement!). Now it is simply impossible to think we ever had to worry about writing over a fellow developers code on a cooperative project.

That wraps up my little shout out list this year, great stuff one in all! We look forward to a more productive year in 2015 and are excited to see what new technologies are revealed.

Cheers! Eric and Alex

We took a rare weekend vaction out to the Oregon coast! You should visit it sometime it is spectacular.

We took a rare weekend vaction out to the Oregon coast! You should visit it sometime it is spectacular.

Padding fix on form input fields for IE

One of the many annoying things about the IE browser…the disrespect of padding on form inputs! While trying some hacks for this recently (arrgh use a transparent border…really?) I did some testing. If it is an option for you to use display:inline-block; this will seemingly allow IE  to respect the padding you add. Hope that helps some poor soul like myself out of a jam.

No Business is too Small for the benefits of WordPress!

WordPress has emerged as the perfect easy-to-maintain solution for operating and managing websites of all scale. We often get asked the question “Why would I want to use WordPress as a CMS for my small business?”. It seems like it might be overkill for a small business to run a fully vetted platform if you only make a few updates a year, right? The truth is, WordPress offers much more than just the ability to edit text and pages on your website, or maintain a blog. When you use the WordPress platform you gain access to a host of valuable programming code (these applications are called plugins) either free, or at a fraction of the cost it would take to create from scratch. These extend the functionality of WordPress to allow it to be a fully featured e-commerce platform, or add audio and scheduling calendars for band websites…etc etc!

Another reason you want to choose WordPress is it’s popularity. With each release the software platform continues to gain amazing features for both developers and end users. The community available to offer help services is unparalleled, and the online documentation is rich. As a developer I can seemingly jump on Google and find code snippets shared by others for almost any issue I encounter. This is invaluable, and saves us development time…a savings we can pass directly to our clients.

We were converts to the platform early on and have continued to work and grow with it as it has evolved. It’s been fun to watch and learn along with countless other designers and developers. Feel free to contact us if you have any questions about moving your business to WordPress small or large!

What Exactly is Responsive Design and Do I Really Need It?

This is the question on many of our clients minds, and we thought we’d take a second to try and simply explain this new exciting design/development method in layman’s terms. The web design and development field is constantly growing and evolving, as you may be aware. Recently you might have heard about “Responsive Design” and you might be wondering what it is, and does your website do it?

The huge growth of mobile devices has had an impact on how we all perceive and experience this wonderful thing we know as the internet. We are now looking at websites, and using applications on a huge variety of screen sizes. As designers and developers we’ve had to react to this, no longer do we just have to worry about ie8, or the small variety of desktop screen resolutions…it’s a whole new ball field. Traditionally websites were coded at fixed widths, and we would check to see what the widest width was people were viewing sites on using their desktop computers, then we would tailor our designs to that.

When mobile devices took off in popularity, the mobile bowser developers had to figure out a way to show your website, hardcoded to a width of 800px in a much smaller screen. Their solution was to shrink the whole website down to fit (example to the right in the graphic below). The result of this is a nightmarish experience of pinching and scrolling around to navigate through any website. To remedy this in the past few years a few helpful tools have evolved (note my restraint in not using technical terms!) to help us target specific screen sizes and make certain adjustments to the website code which allows us to present a much nicer user experience across multiple devices.

This approach is quickly becoming standard practice for many websites. It is not ALWAYS the right choice, this depends on the needs of your website, and the type of traffic you get. We would be happy to take a look at your website and help you decide if it is the right option for you. You should know this though, mobile traffic is on the rise and will continue to constitute more and more of your visitors. Phone and tablet growth continues to skyrocket, and you want to make sure your site visitors are getting the best possible experience they can from your website.


The graphic above quickly illustrates how much better the phone experience is when a site is coded using responsive techniques. Boston Accountability is just one of many recent responsive websites we’ve designed and built. We’d be happy to show you more, feel free to contact us with any questions you might have on converting your website code to make it responsive.

Website launch, Cherry Sprout Produce Market

Local PDX store owners Amanda and Katie contacted us to help them bring a new look and feel to their wordpress driven website for their produce market, Cherry Sprout.

We created a custom theme based on their logo and colors used at the physical store front. Knowing they wanted to better showcase the local produce they offer to their shoppers, the home page took on an entirely new look which focused on an image slider that was easy to update. Store hours and directions also took center stage, as well as social media connections. Now the home page also showcases posted information, divided into more useful categories and featuring titles and excerpts to show more info in less space.

Knowing many of their customers reach the website using a smart phone or other internet device, we also opted to make the design fully responsive, so no matter what device you view it on, you have a positive and appropriate surfing experience.

Click here to visit the live site.


Website launch, Mirabella Salon and Spa

We were approached by OnThe45 Design Agency for assistance in developing a wordpress driven website for their client, MiraBella Salon and Spa located in Boise, Idaho. OnThe45 created a warm, inviting design for their client and based on the provided design comps BitClone developed a fully responsive custom theme for wordpress. The new website features multiple editable content areas and a variety of navigation interfaces, which all have to respond properly to different screen viewports.

MiraBella’s new custom wordpress theme is now live to the public and generating rave reviews from their clients.

Click here to visit the live site.


December Babies

Both Alex and I are December’s children, and this year we decided to pack up and head out to Long Beach, Washington to celebrate our cake day. It was cold rainy and best of all pretty much deserted! One of the bonuses of Long Beach in the winter is you can drive your vehicle on the beach, which is great when it is cold and rainy. We had a blast and stayed at the Inn at Discovery Coast which was quite nice. Merry Christmas to all you wonderful people who have helped us keep this small company going for over 7 years now! Huzzah.

the seagulls are ferocious!


Website launch, Audios Amigos

When the musicians from Portland’s own Audios Amigos contacted us to create their website, we were excited. Getting to design a website for an awesome western surf instrumental band, who recently released their first EP – The Reacharound, which features artwork from Chris Cilla – Fun! Bitclone created a custom wordpress theme, and utilized the Reacharound artwork to good effect. You can listen to some of their audio tracks which feature Lucky Brown, purchase a digital copy of the Reacharound EP, or purchase a hardcopy of the EP to be mailed to your lucky self. Their custom theme also features a sticky navigation bar, so no one has to scroll back up to the top of the page to see the primary navigation.

Click here to visit the live site.

My laptop battery is so swollen: trapped in right click hell

Yep, we are having a scorching August here in the Pacific Northwest, with what feels like record temps. You know who hates this damp steamy heat? My MacBook laptop. How do I know? Well, late yesterday afternoon my wireless mouse stopped working. Actually the mouse controls seemed to be locked in some sort of right-click nightmare where I could not escape the webpage I was on, nor could I close the page. Initial thoughts: time to change the batteries in my Targus. Fresh batteries inserted. No dice, still trapped in right-click hell. Due to a similar incident earlier this summer, I knew what the issue probably was. Swollen laptop battery. Our PHP developer ran into this exact right-click entrapment during one of the first hot spells here at the studio. Seems the old swollen battery is a known Mac issue, and removing it from my laptop alleviated the right-click hell immediately. Now I am running battery free, which will be fine provided we don’t lose power and all that. Seems it’s past time to replace my MacBook laptop battery.

Website launch, EcoLloyd (Lloyd EcoDistrict)

Sarah Heinicke, Executive Director of the Lloyd EcoDistrict approached the BitClone design and development team to create a new website for the emerging inner Northeast Portland Lloyd neighborhood. We worked with her to create an appealing design and branding for her vision of EcoLloyd. Focused on a sleek, uncluttered site design with a home page image slider to show off the the Portland Lloyd district visually, the new website is up and live to the public. EcoLloyd is housed in the wordpress content management system, ensuring Sarah and her staff will be able to easily update pages as new information regarding the Lloyd EcoDistrict becomes available. With a focus on breaking district news relevant to the Portland Lloyd quarter, we created a custom post type for the News section of her website.

What the heck is the Lloyd EcoDistrict you ask? Per their nifty new site – “The Lloyd EcoDistrict works to move the business district toward its “triple bottom line” goals. Triple bottom line is a way of measuring progress in terms of financial, environmental and socially just outcomes.”

Check out what’s happening over at EcoLloyd.

Website Refresh, WordPress Theme Redesign for Birdfight!

We recently did a major design and code overhaul to the hip, eco minded,  blog site The challenges presented were to roll out a new WordPress design to a live site that has over 4 years of content. The process we usually use (for those of you interested) for this type of job is to set up a local development site and export all the data from the existing WordPress database. One of the many reasons we love working with WordPress is that is makes this task unbelievably easy, which will also help you back up all your data…you are backing up all your data RIGHT? Click here to visit the live site.

New Facebook plugin for WordPress…blarrgh.

Facebook has released their own plugin for WordPress which on one hand is GREAT…However, as is pretty much everything Facebook developer related it is confusing to work with and buggy as a warm wet Oregon summer evening. We have the plugin up and running here in the studio and have been working with the various functions to test them out and see what they offer. On the surface this appears to be really cool, as ultimately it will make connecting and interacting with Facebook a bit easier for everyone, which is a pretty popular request from our clients. Here is the link to the official plugin page, if you need help setting it up give us a holler.

Coda 2! All I can say is Hallelujah

There is simply no application I use more as a web developer than Panic software’s Coda. It is the cornerstone of our production here at Bitclone, and we are slap happy that the new version is finally out. If you are thinking of getting into the web development industry…I can’t recommend this application enough. They have simultaneously released Diet Coda for the iPad…I can’t wait to give that a spin, once I am comfortable with the new Coda2 interface. It’s been a long wait, but it seems like they have addressed a number of my main complaints.

  • Better site management (you can group sites)
  • Support for GIT!
  • Built in MySQL support. Awesome.

Ok that is all…enjoy the holiday friends.

Website launch, autoctona design

We were approached by Alesandra to help her refresh her current website design and develop a WordPress theme. We were able to work together with a limited budget, and help create something that was both aesthetically loyal to her keen design sense, while offering her all the functionality of a WordPress CMS. The main challenge was creating some templates for some unconventional layouts that would allow the client to dynamically update content with various image sizes.  We really enjoy working with talented artists, especially ones located right here in Portland. You should take a visit to her website to learn more about Autoctona and view some of her amazing work.

New website launched! Arena Rock Photos

I remember my first concert back in junior high school, it was Ted Nugent. He came flying out over the audience in a loincloth howling away like the madman he is. I was hooked, and soon after that I’d go almost every weekend up to New Haven to camp out for good seats, Van Halen, Queen, The Police, all the big arena rock bands that came through…it was part of growing up, something exciting to do in a pretty boring area of the country for a restless teen, and it inspired me to get into playing music (later on punk rock gave me the confidence to actually do it in public). Those were the days of big hair and men dressed in ridiculous outfits playing God on an extravagant stage. We were happy to help Portland Oregon photographer Pat Goebel set up a simple ecommerce website to sell high quality prints of his colorful images of this wondrous era of rock music. Take a look through Pat’s website and if you like what you see pick up a print or two for someone nostalgic in your life. They will enjoy it.


Upgrading to WordPress 3.2!

Well we just pulled the switch here and upgraded to WordPress 3.2. It’s a pretty hefty upgrade, and our Media Temple DV server is always a bit finicky when I run WordPress upgrades, however all went pretty well (You can feel free to contact us if you need help upgrading your WordPress system). The new dashboard is quite a big change, and a few things to note with this upgrade.

The WordPress team has officially dropped support for IE6 (hooray I say) and they now include a little browser check right there in the dashboard to help give you a little poke if your browser is in need of an update (you’ll see in the screenshot my version of Firefox is outdated…yes I know, shame on me, I was waiting for a 1Password update). Next thing of import, your server will now need php5 AND mySQL 5. This will require those of you running older Media Temple Gridservers to upgrade. I’m sure MT support phones have been ringing off the hook, and they have already been addressing the issue diligently. As a matter of fact they just posted a video to Facebook which should help you on your way.

Last bit of advice should always be the first bit of advice. BACK SHIT UP! You’ll feel better about the whole process.

Here is a screenshot of the new Admin Dashboard, pretty slick!

Wordpress 3.2 Dashboard

Older Posts »