A Year In Sites: 2010 Recap

We’ve been lucky enough to work with some fabulous small businesses in 2010. Here’s a quick recap of the sites we’ve created and updated in the last twelve months.

Choosing Health Now

Choosing Health Now

My sister Rebecca needed a website to go along with her book, Choosing Health. We created a custom Wordpress theme as well as illustrations for the site and the book itself. She's easily able to update with content and videos to keep visitors coming back.

molly meow- the cat bed duvet company

molly meow- the cat bed duvet company

We worked with Molly on the molly mutt site, so when she needed a companion site for cat duvets we were delighted to help! The shop integrates smoothly with her existing dog bed duvet shop, sharing a cart so cat and dog owners can finally coexist in harmony.

Baktuli

Baktuli

Henry needed a clean, modern site to showcase his fabulous luxury yoga towels. We created this custom Shopify theme to make it as easy as possible for him to keep the content fresh while providing a great experience for his customers.

Savvima

Savvima

Using Avi and Naomi's existing graphics we created a lovely custom WordPress theme to complement their fast-moving magazine-style site.

Moody Eyes Online

Moody Eyes Online

The Moody Eyes Online folks needed a custom site to go with their fabulous selection of fashion frames. We created this design to give the feel of a high-end eyewear shop while enabling easy navigation and fun social features.

WeVillage

WeVillage

WeVillage Urban Playcare is a modern, minimalist space for kids - so we created a modern, minimalist identity that perfectly complements their facilities. The custom photos really drive home the fact that this isn't your average drop-in daycare.

The Clink Room

The Clink Room

Using the gorgeous mock-ups provided by the Clink Room guys, we created both a custom WordPress theme and a matching Shopify shop. The extraordinary cap and shirt designs can be presented to the public with minimal back-end hassle.

Selective Premiums

Selective Premiums

Stace had an existing logo and identity scheme that she liked, but her site was woefully outdated. We moved her to a new e-commerce platform and created a site that's clean, modern and easy to navigate - a must when you have 3000+ products!

Prewired Controls

Prewired Controls

Stu liked the layout and design of his existing site but wanted to be able to update and edit things himself. We duplicated his site on WordPress (replacing a lot of outdated code as we went - no more table-based layout!) and Stu and his team finally have full control over their content!

amy mcmullen photography

amy mcmullen photography

Amy started out just wanting a blog but ended up having us redesign her entire site! This simple WordPress template puts Amy's gorgeous photographs in the spotlight and enables her to easily update the look and feel every time she does a new shoot.

Trends Under $10

Trends Under $10

The Trends Under $10 site started its life as a custom Shopify theme for a business venture that never quite saw the light of day - which made us sad, because it was a really great site! So when the owner asked us if we'd update the theme to reflect the new business, we were only too hapy to oblige!

Choosing Health Now | Molly Meow | Baktuli | WeVillage | The Clink Room | Savvima | Moody Eyes Online | PreWired Controls | Selective Premiums | Amy Mcmullen Photography | Trends Under $10

2011 is already off to a great start. We’ve got some seriously exciting new projects in the works & have been in talks with some other fabulous small businesses about creating or converting their online presences. We can’t wait to tell you about what’s coming next!

Improving Site Design and Usability

Business Blogging for Non-Writers

We had a blast at WordCamp PDX! My presentation (complete with audio) is embedded below. You can also click here to view it on Slideshare, where you can download it if you’re into that sort of thing.

Questions? Feedback? We’d love to hear from you.

Site Launch: Amy Mcmullen Photography

Amy Mcmullen needed a new site to showcase her gorgeous photography, and we were only too happy to oblige! Her requirements: simple, creative, and no Flash – she wanted to be able to show off her portfolio on the go.

We stuck with Amy’s existing color palette of light blue and white, and Amy chose a fabulous font for her text (Typekit makes that part a breeze). Using WordPress’ new Custom Header feature, we were able to it up so Amy can switch out her blog’s header whenever the mood strikes – and with all these beautiful photos to choose from, the mood will strike often!

The slideshow on the home page and the portfolio pages uses jQuery rather than Flash, so it can be viewed on devices like the iPhone and the iPad. But we didn’t stop there: using WPTouch Pro, we created a mobile-specific version of Amy’s site that gives smartphone users a customized landing page and a special reduced-size image gallery.

Shopify + Wufoo: Add a form to your site

Shopify is a fantastic e-commerce solution for small businesses. One thing it doesn’t have? An integrated contact form. But it’s easy to add one to your site using a third-party service like Wufoo (which offers a free account level as well as several paid tiers with ever-increasing levels of fabulosity).

Add a simple form to your site

new form buttonLet’s take a look at adding a contact form to our ‘About Us’ page in Shopify. First, we need to create the form in Wufoo. Log in (or create a new account) and click “New Form.”

building a form in WufooAdd some fields (for a contact form, it’s a good idea to at least ask for an email address and a message, but you can add any fields you think you may need – name, phone number, whatever). Keep in mind, the shorter your form, the more likely it is people will fill it out!

Once you’re happy with the fields in your form, click the “Form Settings” tab and give your form a name and (optionally) a description. In this section you can also decide on your confirmation options: you can have your users redirected to a page on your site once they’ve successfully submitted the form, or replace the form with a message (“Success!” or something similar). You can also opt to send your users a confirmation email.

Wufoo embed codesClick “Save Form” when you’re all done. A pop-up will ask you what you want to do next. Choose the option that returns you to the Form Manager.

In the Form Manager (otherwise known as your Wufoo dashboard), choose the “Code” button and click the tab for “Embed Form Code.” Select the code under “JavaScript Version” and copy it to your clipboard.

Now, log in to your Shopify admin area and click “Blogs & Pages.” Choose your Contact Us page and click “Edit.”

insert script in ShopifyIn the Edit screen, click the “Insert” button and choose “Script.” You will see a box open up with an example of a JavaScript code snippet. Delete the sample snippet and paste the entire JavaScript code you selected from the Code section in Wufoo (it will be two separate JavaScript snippets). Insert the code into your page and click “Save.”

a Wufoo form on a Shopify pageVoilĂ ! You now have a Wufoo contact form on your Contact Us page. User submissions will be saved to your Wufoo account. You can tweak the settings in Wufoo to dictate where submissions are sent (for example, you can opt to have each submission emailed to you or texted to your phone) and whether you want to integrate your form with a third-party add-on like Highrise or Campaign Monitor. Keep in mind, any changes you make to the form in Wufoo will be reflected on your Shopify site!

Tickets still available for WordCamp PDX 2010

Click here to get your tickets! Don’t wait too long; the event sold out last year and it’s almost certain to do the same this time around. I’ll be talking about Business Blogging for Non-Writers & we’ll be giving away copies of our book as well. Hope to see you there!

PHP Tip: styles2array

Today I needed to write a bit of code to take the style attribute off of an HTML tag and convert it into something I could use inside PHP.

My first thought was to use regular expressions, but it occurred to me that there might be a simpler way to do it with just a couple of explodes.

Just in case this might help someone else out there, I thought I’d post it.

So, assuming you will pass something like “width:1090px;left:-340px;top:-144px;” to the function
you should get back the following:


Array
(
    [width] => 1090px
    [left] => -340px
    [top] => -144px
)


function styles2array($styles){
	$styles = rtrim($styles, "; ");
	$arr = explode(";", $styles);
	$return = array();
	for($i=0; $i<sizeof($arr); $i++)
		{
		$split = explode(":", $arr[$i]);
		$return[$split[0]] = $split[1];
		}
	return $return;
	}

Cheers!

-Matt