For Love. Part Two.

This is the continuation of “For Love. Part One.

The Time(s)

First, I’ll tell you that all told, making a new, responsive, beautiful (if we do say so ourselves) website for Rocket Dog took over 200 hours. But I’m getting ahead of myself.

The Design: Adobe Flash & Photoshop

Some time ago, we received a great Flash animation for Rocket Dog that was created by a talented designer and animator named Justin Klein. Kathy Allbright, of Allbright Design, then took that animation and created some sketches of what she thought a new website for Rocket Dog might look like, where she included Justin’s great animation in the masthead. Then time passed. Quite a bit of time, honestly, because 200+ hours (of unbillable time) is difficult to find. Unless you make it a priority. A real, concrete, front-of-the-line priority. Which is what we did, this summer. We made making Rocket Dog Rescue a shiny new website into our top priority.

The Process

Choosing Technology

Platform: WordPress

wordpress logoAt MIGHTYminnow, we like to build websites with WordPress. We do this because our clients find WordPress websites easy to maintain and we find them fun and (relatively speaking) easy to build. For some things we think other CMS’s are appropriate (or even better), but for a nonprofit like Rocket Dog Rescue, WordPress is the perfect solution. Using custom post types and Toolset’s Types and Views Plugin, it is easy(ish) for us to build in a structure that makes it simple for RDR volunteers to add dogs and success stories, place or remove slides on the home page slide show, feature news items and especially promote the dogs they have saved (and are trying to place) and highlight the adoption events they hold every month.

Framework: Genesis (plus Cobalt Genesis Extender)

On top of WordPress, we like to add the Genesis Framework. Genesis is great because it has one, two and three column layouts built in to every theme, the home page is pretty easy to lay out (especially if you add Dynamik or Genesis Extender), and many of the base themes are already responsive.

Base Theme: Genesis, but Mobile First

Mobile First Child Theme for Genesis 2.0All that said, one of our preferences is to have our responsive themes use media queries in a “mobile first” way, and therefore to have phones and tablets only load the styles that are relevant to them, with the style sheet defining the universal rules (that apply to all screen resolutions) first, then working its way up to rules that are specific to larger displays. Simply put: we like our theme to load as quickly and efficiently as possible, especially on mobile devices. Genesis has a base child theme that is great, but we decided to rework it to be mobile first. Enter our new Genesis Mobile First Child Theme. This Genesis child theme is what we used as a basis for the Rocket Dog site, but we also made the reworked version available to our community online.

Wireframing / Designopment*

MIGHTYminnow usually follows an approach to website design and development that we call Discover * Develop * Design * Theme. In most cases we first build a website with a “brown paper wrapper” type look, holding off on colors and other design elements, and instead just focusing on getting all of the blocks in the right spots on the page. That’s step one. We then take this plain Jane website (all blocked out and signed off by the client) and we send it to a designer to create a look and feel using Photoshop. We find that giving the designer an actual website to design from makes their job easier and minimizes the number of revisions we need to make, since the layout and visual hierarchy of the page are already established. Even for responsive sites, we usually just ask our designers to submit a desktop design. We then use this base design to extrapolate mobile elements and modifications during our theming phase, working back-and-forth with the designer as needed to decide how the site will reflow on different devices and at different breakpoints.

homeWe followed this process to some extent with the Rocket Dog redesign, but because we were using pre-exisiting sketches from Allbright Design and because we were doing a lot of “design in browser” or “design in Live View of Dreamweaver” to style elements that were not present in the Photoshop comps, what would normally be an un-styled wireframe started to take on a design pretty early in the process. The one place we really “wireframed” before theming was on the home page, where we used Genesis Extender to lay out all of the boxes and then start feeding in the content so that we could determine how the design sketches should be adapted to the real world needs of the client. A lot of the design elements were created in tandem with the development, using a collaborative approach that allowed us to build the features and determine the design for them as we went.

The idea of designing as you go, especially as it relates to responsive breakpoints and media queries is an idea Ethan Marcotte jokingly called “designopment,” about which he says:

Our goal is to get beyond the pixel limitations of Photoshop, and begin building a design that can flex and grow inside a changing browser window, that can scale to different devices. So the development team quickly begins producing a responsive design: converting the fixed grid into a fluid one, discussing ways to flexibly handle different types of media, and then finally applying the media queries that adapt our design to different resolution ranges.

Ethan Marcotte

This is the approach that we took with the Rocket Dog Rescue redesign, and we think this approach works very well. We hope you agree, and we’d be happy to get feedback on our efforts (on behalf of the dogs). More about our process in part three of this post, coming soon…

« Part One

For Love. Part One.

We are a small company. MIGHTYminnow, small but strong. That’s sort of our unofficial tagline. And at our size, the bottom line is a real consideration. Rent, payroll, expenses… Estimates, calculations, hours, invoices… These mechanisms (which we sometimes find quite tedious, in all honesty) are necessary components of our day-to-day. They are the business counterparts to the creative and technical work we really love to do.

We love making websites. Especially websites that can be easily maintained and that work well on every device and at every size. But making websites takes time and expertise, and for the reasons mentioned above, this usually costs money. Done well, with proper time and care, with tailoring for devices and screen resolutions, it can cost a lot of money.

So here’s the big reveal. And we’re nervous to tell you this, but here goes.

Sometimes money isn’t our motivation. Sometimes we do things for love. (And by “things” I don’t mean sprinkling rose petals on the bedspread, I still mean making websites.) Sometimes we make websites, for love.

Enter Rocket Dog Rescue

rdr-logoMIGHTYminnow and Rocket Dog Rescue have had a long relationship. We haven’t been with them since the start, but we’ve been making them websites since 2007 and in web years (or dog years), that’s a long time. Like MIGHTYminnow, Rocket Dog has an unofficial tagline: for the love of a dog. That’s why they do what they do, and they make nary a dime doing it (in fact, we’re sure it costs them pretty dearly). Out of the depths of their giant hearts, they find the strength to get up every day and rescue – meaning save the lives of – dogs who are destined, by no fault of their own, to be euthanized. That’s huge, generous, and amazing. Rocket Dog saves, one after the other, abused, neglected and abandoned dogs, and to date their courageous and loving volunteers have saved over SIX THOUSAND DOGS. That’s truly inspiring.

It inspires us, and we feel that Rocket Dog deserves all the help it can get. We also believe that the dogs Rocket Dog is working to save *really* deserve all the help they can get. And one of the things that we feel could help Rocket Dog to save more dogs is to have a really great website where people can see the dogs that are up for adoption (or who need a foster home), read their stories, connect with their photos, and see all of the vital information about each dog. And we believe that this website should be beautiful, functional, mobile phone and tablet friendly and overall awesome.

So we made them one…

Part Two »

Website Weekend Success: Karier Design!

karier homeNancy Karier of Karier Design recently completed Website Weekend and now has a unique, beautiful design to showcase her work as a graphic designer. In one weekend, Nancy was able to move her site she built in Dreamweaver to WordPress so it is more flexible and easier to maintain. Now she can add projects and content quickly and is able to get back to what she does best – creating beautiful graphic designs. Read the case study.

Building Websites that are Accessible to Everyone

MIGHTYminnow prides itself on building beautiful websites that are accessible to anyone visiting. When we teach our classes, we emphasize that not everyone on the web is using it the same way; blind and vision impaired users, for example, employ screen readers to navigate through web content.

homepage of ILRCSFOur commitment to, and knowledge of, making accessible websites enabled us to quickly and competently redesign the website of Independent Living Resource Center of San Francisco. ILRCSF is a disability rights advocacy and support organization that works to ensure that people with disabilities are full social and economic partners, within their families and within a fully accessible community. Their new site, designed and developed by MIGHTYminnow, is fully accessible to people with disabilities as well as responsively designed and accessible on mobile devices and tablets!

We very much enjoyed working with ILRCSF, and it seems they enjoyed working with us as well. See their comments below:

The unusual funding cycle of a grant we received gave Kristin a very short time in which to develop quite a detailed website for us, from scratch. The finished product exceeded our expectations in every way, and Kristin also provided clear and detailed training to two staff members who now manage the site. As a disability rights organization, accessibility was a primary concern for us, and I was especially impressed by Kristin’s knowledge of accessibility standards and her attention to details in this area. For her talent as a web designer, excellent communications skills, and ability to work well under pressure and deliver an excellent product within a tight time frame, I highly recommend Kristin as a web designer. We would not hesitate to go with Mighty Minnow again, in the future.”
-Lana, Independent Living Resource Center

Full Circle Doula Group Creates Calming Site for Expecting Parents

calfeedOn the last Website Weekend (January 26th & 27th), Laila of Full Circle Doula Group came to class with the object of updating her organization’s website, which was out of date. Over the course of two days, Laila was able to create a responsive (adapts to tablets and mobile phones), pretty, calming, and professional website. She was also able to integrate a google calendar of on call doulas in two different ways, making it easy for expectant mothers to get in touch with the right party.

Contact formLaila also integrated a location map to show where prenatal meetings and sessions with the group are. She created this Google map with a plugin that makes it easy for her to add different locations and insert them in any page. She also updated her contact page with a form for getting in touch with the doulas and the form responses are emailed to the doulas and archived on the server for later review (Using a contact form instead of inserting your email address on a page helps to safegaurd your email from spambots).

sign up formIn class, Laila added an email sign-up form from MailChimp to allow visitors of the site to quickly get email updates.

Laila worked very hard for one weekend, and with our help, got a gorgeous new website live. If you think this class will benefit you or your company, our next Website Weekend class is on March 16th and 17th. If you have any questions about the class, be sure to email us or give us a call at 510.629.1440!

Website Weekend brings us a little closer to our community

After another successful Website Weekend, we have some new swag to add to our Mm collection! Patrick Schmidt is a recent graduate of Website Weekend and runs a few projects, including Open Clay Project and Open Fine Arts Gallery in Berkeley. He made us some keychains with the Mm logo using a very interesting technique.

The process he used is called millefiori, which was originally known as a glass technique, but is now also associated with polymer clay.

CaneThe first thing he did was construct a “cane,” which is a big prototype of the 2 dimensional design, but as a 3 dimensional shape.

ReducingThen he pressed and pulled the clay to elongate the cane. This is called “reducing.” Some shapes, like circles and triangles, reduce better than others. This is the hard part of the process, as it is very easy to distort the creation.

Slicing the caneWhen the cane was reduced to the size he wanted, Patrick then used a razor blade to thinly cut it into slices. For our keychains, he added them to another piece of clay, then baked them in an oven for half an hour. After the metal key rings are put on, they are done!

keychainsPatrick uses this technique for jewelry, but also as a great educational tool. Chromosomes, DNA, and RNA can be easily visualized when created using this process.

This was such a cool process, and if you want to learn more, Patrick teaches a free class every week at his art gallery in Berkeley. He will also be teaching classes with Make SF and Workshop Weekend, where we first met him and where we also run a class!

He will also be having an art show this coming Saturday, February 2nd from 6-9pm. Try to stop by, say Hello, and learn a little bit more about the art in our community.

Patrick at Open Clay Project

A Website Weekend Success Story

As we recently wrote in a newsletter, Mm’s New Year’s resolution is to help small businesses and non-profits establish stronger web presences. In this spirit, we offer our “Website Weekend” class as a cost effective and fun way for organizations with lower budgets to get fancy new websites live – quickly and easily!

As a case in point, during our last Website Weekend, Aquarius Pool and Spa created a fabulous new website for their family owned business. Aquarius is a successful outfit that has been serving Contra Costa County for over 40 years. They came to class with content, photos and ideas and came out with a beautiful new website.

Aquarius HomepageEach website that is created in this class is built in WordPress, which makes it very easy to create and maintain the website yourself.

With WordPress you also have lots of options to personalize your site. You can start off with a basic template and change the settings until they fit your requirements and specifications. For example, Aquarius wanted a photo slideshow on their homepage, and they found a template with a slick slider on it. They were also able to add a contact form, a location map (complete with directions), and newsletter signup form to their site.

Contact FormThe next scheduled Website Weekend class is January 26th and 27th. If you are interested in creating a new site and have questions, be sure to contact us for more details. Or simply register online!

We are always so pleased to be affiliated with companies like Aquarius. We know first hand the hard work that goes into running a business, creating a brand, and managing all of the moving parts. It is really nice for us to be able to say that we are a small part of helping great businesses create a web presence that is a more visible, more professional, and easy to maintain in the long run. Maybe we could help your company too?