Lange Studio Website Refresh

My partner put me in touch with an old client of theirs. They needed help to add a page to their existing WordPress site and fix a few cosmetic issues. I agreed to help and dove in, expecting a simple process. The theme was using a baked in version of page builder which I quickly found was both out-of-date and totally not working.

I was to extract text and images from a PDF and apply them to a page in WordPress. I was able to extract the text as HTML (formatting it with some regular expressions) and gathered the source images from the client.lange-ig-pdf-page

Once I attempted to add it to the page using Page Builder I found that the raw HTML input wouldn’t capture the input text. No wonder the client was having problems! I was able to hack the system by adding the text directly to the input element via the browser’s development console. An impossible task for someone with a only a working knowledge of browsers and web technology.

After shimming the content into the page and fixing some other esoteric theme related issues I was done. This simple act of adding a page to their website cost 300% more than it should. In fact it shouldn’t have taken an engineer to do such a basic operation.

The client had three options. Try to fix the site, recreate the site, or keep using this hobbled site. Because the site hadn’t been maintained the off-the-shelf theme, WordPress core, and many plugins (some integrated with the theme) were all out of date. Updating and fixing the site might introduce a host of new problems and might not even fix the site.

To keep the site as is and just deal with the wonky broken system would cost way more in the long run for the client. The whole point of using a CMS like WordPress is to make tasks like page creation simple enough for a client to manage on their own. The process of adding content to a page was so onerous that it would be faster to just build pages out of HTML!

So my recommendation was to recreate the site in Squarespace. The client accepted this and we began work.

Site Recreation

I opted to use the ishimoto theme as a base to create the site. The original site was very clean and minimal so it was fairly simple to remake using only Squarespace’s theme and design tools, no code necessary.

Original Site
Original Site
Recreated site
Recreated site

By using gallery blocks and the intuitive content tools provided out-of-the-box by Squarespace I was able to quickly recreate all of the pages. Better yet the client was able to jump in and figure out how to use the system without much hassle. The cost was about twice as much as adding a single page to the old site!

On top of this we were able to leverage Squarespace’s e-commerce tools to begin setting up a system to sell prints directly off the site.

Conclusion

I love WordPress. It is a triumph of free open source software and a gift to the world. With a few plugins and a decent theme you can create a powerful website that does anything for a fraction of the price. It puts power into the hands of the user. However it requires some upkeep, there is a cost to maintaining WordPress. I would say that when compared to Squarespace’s monthly cost (~$12) it’s about even.

The power of Squarespace is that it just works, the server and updates are all handled by someone else and requires no intervention. When all you really want to do is display some text and media (and perhaps a store) it can be a very good option.

As a designer I feared that products like Squarespace would take away from my livelihood, but I find that my skills as a “power user” make it worth while for clients to hire me to do the initial setup and design pass. I can then hand it off to them without needing to provide a long term maintenance agreement. It’s easy for me to build and it’s easy for them to edit, a win-win in my book.

Karass Website

After creating The Karass Inn’s logo I set to work creating a website for them. They used checkfront.com to handle the booking side of things so I was left to simply create the presentation side.

http://thekarassinn.com/

Screen Shot 2015-12-27 at 11.34.47 PM

I used the Make Theme with only slight modifications to the CSS. Mainly to create the pop-ut Book Now button. The site looks great on mobile too:

Screen Shot 2015-12-27 at 11.35.02 PM

The address, phone, and email at the top work incredibly well on mobile. By using proper Uniform Resource Identifier schemes with the links available applications will launch when they are clicked. You’re probably already familiar with mailto: which almost all email links use, it looks like this:

<a href=”mailto:TheKarassInn@gmail.com”>TheKarassInn@gmail.com</a>

While the phone uses tel: like so:

<a href=”tel:8028755878″>(802)-875-5878</a>

So when you’re on a phone and click the link it automagically launches the phone application and makes the call.

I love being able to add these little details!

If you’re ever in Chester Vermont you should stay with The Karass Inn

Two Old Guys Go Hiking Book Cover

My dad recently wrote a book about hiking on the Appalachian Trail. He reached out to me to do a book cover, here’s what I made him:

old-men-book-cover-DRAFT1

I used one of my favorite fonts: norwester and integrated a public domain hiking icon from the noun project

The real fun bit was that the original photo he wanted to use only had one old guy hiking, so I used some photoshop magic to add in the other old guy.

Screen Shot 2015-12-27 at 11.57.27 PM

A surprisingly quick project that came together really nicely.

Hate Has No Business Here Poster

msa-welcome_fb-ad-censor-face

So there’s been a bunch of mean people supporting terrorists by spreading xenophobic hate speech in the news recently. In response Common Roots Cafe in Minneapolis put up a sign in their window stating that “All are welcome here“.

All are welcome here

I was contacted by The Main Street Alliance to re-create the poster for the #hatehasnobizhere campaign.

msa-welcome-poster_poster-11x17

I also created social media assets for sharing across the internet.

msa-welcome_prim-fb-ad-stand-with

msa-welcome_fb-ad-just-black

This included Twitter and Facebook cover images and profile pictures.

Screen Shot 2015-12-18 at 2.30.24 PM

I added all these into a shared Google Drive folder.

It’s been amazing to see my poster pop up in small businesses across the country, check it out.

 

The Food System Illustration

Back in the day when I had a desk and a wacom I started an illustration about the current food system. I intended for it to be a 10 panel piece which was “read” from bottom to top. Starting with the extraction of oil and leading up to the removal of food waste.

See the full piece here: http://dhornbein.github.io/food/ (view from bottom to top)

It might still be considered a work in progress, thought the industrial food system might collapse before I finish it…

It starts with Oil:

I modeled this illustration after the Tar Sands in Alberta Canada. Which is one of the most visceral and disgusting human endeavors, maybe ever.

candian-oil-sands-615

 

The oil is then transported. This is an important step when we think about the impact of oil. Simply moving the stuff is dangerous.

Be it by ship:

Exxon Valdez
Exxon Valdez

By pipeline:

List of Pipeline spills in the US
List of Pipeline spills in the US

Or by train:

130729_oil_train_explosion_lg

I drew this in the wake of the Deep Water Horizon oil spill in 2010, which can been see to the right.

Next comes refinement:

This is where we get the gasoline and slurry of petrol chemicals that allow us to perform large scale monocropping. When all these ingredients are put together you get, mostly, corn:

Which uses an incredible amount of water and other precious resources all while making heavy use of poisons:

The unfinished panels then go through the distribution (i.e. burning of more fossil fuel), and sale of food. Which creates an enormous amount of waste from the farm (who can’t sell ugly crops) all the way to our kitchen where much of our food rots, or develops unsightly blemishes and is thrown away.

The final frame then illustrates away, a mystical place where our trash (which consists in large part of organic food waste) is sent. The anaerobic breakdown of this organic matter creates methane, a powerful greenhouse gas.

The dream presentation of this work has the material costs on one side, the oil, water, space, and other resources spent creating commodity crops. The other side lists the corporations who participate in this act of ecocide.

Some day I hope to get back to this project or hand it off to someone else. If you are interested please contact me at hello@dhornbein.com

Website Discovery: Moving Web Sites Forward

Last year I spent a week out at a commune in Central Tennessee called The Farm. I was there visiting The Farm School at the request of the director Peter Kindfield who connected with me because he was looking for wagn developers (an open source wiki project that is awesome!) what he didn’t know was that I was in the middle of going to ALF Summer 2014, a training event from Agile Learning Centers. Along with web help he was also looking to move toward a self directed learning style at the Farm School, it was very serendipitous!

Discovery

In exchange for a place to stay and food I offered to do a discovery process. I have become very fond of discovery, which is a sort of like a first date for freelance web development projects. Discovery has a clear outcome, a document that describes what a client needs and suggestions for how to achieve that. It allows a consultant (me) to better understand the needs of the client by working together to create this valuable outcome. I use it as a way to start projects and get a feel for the working relationship with a client.

For the farm school I wrote a 13 page discovery document which can be viewed here. It outlined the current technological situation of the school, it’s existing websites, and recommendations for moving forward.

Screen Shot 2015-11-05 at 6.01.53 PM

I was able to leave this document in the hands of the Farm School and they were able to pass it on to contractors who could then act on it.

Success

After handing off the document I left and didn’t think much of it. A year later I went back to The Farm and stayed with Peter. I mentioned it and to my surprise he said that it had worked! Two things happened according to Peter:

We used your discovery document in two ways:
1) To support our shared decision making process. The three people most involved (Satellite Campus program coordinator, Solar Campus program coordinator and Principal) and a website developer/parent of satellite campus students all read document and basically decided to follow your advice and do what Drew said. This got us out of a stuck place we had been in for years about how to use wagn.
2) The website developer/parent of satellite campus students used your discovery document as her initial design specifications.
we’d been stuck for years and you got us unstuck!
Great success! The discovery document gave them a foundation to build from.

In the Flow, My Week in Reflection

Shout out to 40 house and Emmas house!
Shout out to 40 house and Emmas house!

What an amazing week! I’ve been in Asheville NC visiting the Endor ALC crew. I was housed by two amazing collective homes full of wonderful and amazing people who kept me well fed and in good company. I spent most of my time co-working with @liam and @rochellehudson which fueled one of my most productive weeks I’ve had in a long time. So, what did I do?

Refreshed ALC.org

I’ve updated the network website to a point where it clearly outlines what ALC is. Gratitudes to my fellow ALFs, especially @tomis, @nancy, @abbyo@artbrock for their contributions in content and design.

new ALC header
new ALC header

We’ve switched to the network theme which is a lot cleaner and clearer now. The front page covers much more about what ALC is and how to get involved.

I did a bit of work on designing visual elements for the page and getting it to a point of being pretty okay.

Some new icons I put together.
Some new icons I put together.

I’m very proud of the ALC directory which I created using Google Fusion Tables. This takes a spreadsheet and outputs it as a map. I did some custom design using a Google Map Style Wizard, it’s pretty fun, try it. Then I implemented some custom code to get it to display real nice on the welcome page:

Screen Shot 2015-08-09 at 3.02.35 PM

 

Each of those icons is generated automagically as new schools are added to the directory. Each icon is clickable and displays information from the directory.

I’m super excited to expand on this work. To tighten and expand on the design and layout. I now feel like I can send people to our website without worrying that they might not “get” what’s going on.

Foldy Release Party!

11824953_10153006435990978_1076280215557515554_n

endor-foldy-kanban-crop
What we could do | what we are going to do | what we are doing | what we have done

@liam and I printed out about 50 of my School, Yay! foldys for a Wednesday event at Fire Storm Books & Coffee. There was a great turn out and even with no planning we were able to pull of a successful info sharing session about ALC and Endor. I used a Kanban to manage the flow of the event.

There was some great questions from our audience and super awesome input from @liam, @rochellehudson, and Keli (a new ALF from Asheville).

The foldy was also a great success!

foldy-grid2

Organizing and Orienting ALFs

I spent a lot of time working on some internal pages for alf.agilelearningcenters.org and our supporting systems to better organize our communication and collaboration within the network.

The Newbie page

I created a page for newbie ALFs (and forgetful ALFs like me). A quick aside: newbie is a term for someone who is new and thus inexperienced, it’s a term of endearment, unlike n00b which describes a person who acts dumb. The newbie page covers all of our internal tools and links to our support documents and other such things.

Im really proud of the icons I made for this!
Im really proud of the icons I made for this!

The Baked ALF checklist

Along with the help of @nancy and other “bakers” I started to develop what I hope to be one of many internal checklists for doing network jobs. This one focuses on what to do once a person has had their peer review, submitted their documents, and been “baked” (a title we are using to indicate a particular status of an ALF).

My page goes through each step and even has pictures to make some tasks more clear.
My page goes through each step and even has pictures to make some tasks more clear.

Added Helpful documentation

I spent a lot of time writing up helpful documentation about how to use some of our internal organizing tools. One that I’m really proud of is the ALF Community Mastery Trello Board that we use to create ALF cultural norms. This board covers how we handles meetings, what meetings there are, what software we use, and the protocol we follow for doing everything from sending emails to adding new people to the network. It’s an interactive tool that makes our community agreements and structure not only visible to all members but changeable (through our monthly change-up meetings) for all members! It’s something that deserves it’s own blog post. You can read about a real ALC example on the Everett page.

Screen Shot 2015-08-09 at 3.42.42 PM

Created “easy links”

Using a redirection plugin I’ve created a number of links to important documents and services that we use. So rather than sending around long links like:

https://plus.google.com/hangouts/_/calendar/dW5oYW5nb3OMFGsOlooongtYWlsLmNvbQ.q74bd9dlknc8qvuib1efk0

I can redirect an easy link:

agilelearningcenters.org/group-chat

to point to the long link. Which is also very helpful if the link has to change! If we find that the hangout link stops working all i’ve got to do is edit the redirect and no one will have to be told about the change, it will just work!

Playing with Slack

We’ve started using this cool service called Slack, which is a group chat room on steroids. It’s really cool! What’s more cool is that is has a bunch of service integrations that can do all sorts of things like listen to a website’s RSS feed or display changes to a Trello card. I spend some time setting up a number of these tools along with @tomis.

Screen Shot 2015-08-09 at 3.59.31 PM

The Great List Migration

Part of the work I did over ALF summer was to migrate from the NYC Google Apps for Education account to the ALC Network Apps for Education account. One of the big items of that migration was to switch over the email list serves that we use to communicate. I wrote up an email about what was going on and what people could expect

Upgraded ALC Everett

I’ve spent a lot of time writing about what happened at ALC Everett but I left the website in a kind of limbo. Anyone who was visiting the site wouldn’t exactly know that the school had become inactive or that I had written a comprehensive debrief on the whole thing, including a bunch of documentation around tools and practices. So I spend some time making the site look nice, adding a bunch of links to the debrief and the tool box as well as explanations of what the current status was and a way to contact folks at ALC incase they were from the area and wanted to learn more.

Screen Shot 2015-08-09 at 4.08.33 PM

ALC Domain Mapping

This didn’t exactly happen this week, but I wanted to share. @artbrock and I managed to finally get some backend features working that allow schools (or anyone with an ALC site) to map the site to their personal domain name. This means that our school sites can use their own domain while still being part of the network!

So now sites like alcoahu.agilelearningcenters.org will show up as alcoahu.org! So cool.


This has been such an energizing week or productivity! I really feel like I’ve been in a great flow and hope to continue it into the rest of the month.