Text Overflow

The Caiman Web Design Blog

How Caiman Web Design Makes Websites

I’m a firm believer in the notion that an end product is only as good as the process that created it. Rolls-Royces don’t happen by accident. Nor do Louis Vuitton purses, Rolex watches, or Oppo Blu-ray players (you may have to trust me on that last one). There’s a meticulous, tightly implemented set of procedures, as well as a reliable set of tools, that goes into the production of premium products. Top notch websites are no exception. A quality site absolutely requires a well thought out, organized development workflow. I adhere closely to this attitude and I’d like to share my process with you, including the steps I follow and the tools I use.

My general workflow consists of five steps:

  1. Discovery
  2. Layout Design
  3. Style Design
  4. Development
  5. Testing and Final Tweaks

Let’s dive in.

Discovery

Before an idea starts down the path of becoming a tangible thing, it must be understood. A meeting with the client, whether in person or on the phone, is a mandatory first step. This is where I get to know the business and the people in charge of it; what kinds of products or services they provide, how they conduct their business and the problems they’re needing to solve. What features will the company need on their site? Are they concerned about search engine ranking? Who’s their target audience? Are they a new company needing to gain exposure? This is where I learn these things.

It’s also where I glean an understanding of the attitude and personality of the company and its owners. How do they want to present themselves? Serious and professional? Fun and creative? What’s the mood their website needs to convey? Learning this stuff helps me to form a picture of the kind of site I’ll be crafting. It’s a jumping off point.

Designing the Layout

Once I have an understanding of what the client needs, it’s time to start brainstorming the design. Meanwhile, the client will begin gathering content and images for me (which I may also help out with, depending on what we’ve agreed on). I like to break the design phase into two sub-phases: layout and style. Some designers like to combine these by creating fully detailed site-exact mockups right out of the gate. I much prefer to break the layout and the style into two separate steps. This allows the client to focus on one thing at a time. It’s common to look at a fully rendered home page mockup and get lost in design details, overlooking important layout decisions. It’s a “can’t see the forest for the trees” thing.

I start with the layout. My first step is to sketch. That’s right, actual pencil on paper, no electricity required sketching. This is just for myself. The client won’t see my sketches (unless they want to). It’s where I turn my thoughts into something visual. The sketches are usually pretty rough and ugly, but they allow me to brainstorm in a free-form, unfettered, totally analog manner.

To give you an idea of what a sketch might look like, here’s one from the recent Starfield Ministries project:

Starfield Ministries design sketch
(This is why I didn’t major in fine arts)

After I’ve put some ideas on paper, it’s time to go digital. The next step is to create a wireframe. I do this entirely in the browser. No Photoshop just yet. This allows me to demonstrate the layout of the website in its natural environment: a fluid interactive browser, rather than a static unmovable image file. Here I can show off not only the way the website will be laid out, but also how it will respond to screens and devices of varying widths (for those who don’t know, this is called responsive web design, and it’s incredibly important). The wireframe is essentially a nicer looking, interactive version of the sketches. I consciously avoid using colors or other styling, opting instead for simple shapes, placeholder text and grayscale values. The purpose here is to keep the focus on layout, not style.

Here’s a link to the final Starfield Ministries wireframe

Just like the eventual finished website, the wireframe is written in HTML, CSS and JavaScript. I use PHP as my server-side language. My operating system of choice is Linux. Currently I’m using a distribution of Linux called Xubuntu. I prefer Linux over Windows or OS X because it’s the one that most closely resembles an actual live server environment, which makes development easier and deployment more straight forward. My code editor of choice is Sublime Text because it’s absolutely awesome. Finally, my primary development browser is Google Chrome. It’s great for lots of reasons, but the best thing about it is its robust developer tools and its compliance with web standards.

Once I’m finished with the wireframe, I’ll upload it to a staging server and send it off to the client for feedback. If they love it, we move forward. If they hate it, I start over. But more likely they’ll have some things they like as well as some suggestions on how to make it better. We’ll work together until it’s just right. It’s an iterative process, and I don’t move on until the client is completely happy.

Designing the Style

Now the fun part (who am I kidding, it’s all fun). After the layout is finalized, it’s time to make things pretty. This is where my wife Samantha and I might join forces. If there’s logo design work to be done, she takes the reins on that. Meanwhile I’ll get to work on the website’s look and feel. I like to use what are called Style Tiles. As their website explains, a style tile is “a design deliverable consisting of fonts, colors and interface elements that communicate the essence of a visual brand for the web.”

Here’s an example, again using Starfield Ministries:

Starfield Ministries style tile
(Final Starfield Ministries style tile)

I create these primarily in Adobe Photoshop, which is the gold standard for professional photo and graphic editing software. I’ll also dip into Adobe Illustrator when I need to work with vector graphics (this is the program in which Samantha spends most of her time). Now, you might be thinking, “wait Chris, earlier you said you use Linux, but Photoshop and Illustrator only work in Windows and Mac!” Okay, I sorta doubt you were thinking that, but just in case, here’s how I do it: I run a piece of software on Linux called Virtualbox. This creates a “virtual” desktop environment that can run any operating system of my choosing. Think of it like an operating system within an operating system, ala Inception. Inside Virtualbox I run various instances of Windows, which I use both for browser testing (which I’ll talk about in a minute) and for running Photoshop/Illustrator. It works swimmingly.

I’ll typically create three Style Tiles and present them to the client all at once. This allows them the option of mixing and matching elements from different tiles. If the client isn’t happy with the direction of any of them, I’ll start fresh. Just like with the wireframe, the process doesn’t move forward until the client is totally thrilled with the design. The feedback I receive here (and throughout the entire process) is extremely important, as it’s how I ensure the client is getting exactly what they want.

Development – Putting It All Together

We’ve got the layout. We’ve got the styling. Now it’s time to mash them together into a big heap of awesomeness. Using the decided upon style tile as my guide, I open up Sublime Text again to start applying the style to the wireframe. This is where the largest chunk of my time is spent, chipping away at HTML, CSS and JavaScript to turn the wireframe into a full-fledged website. Depending on the scope of the project, this phase might be broken down into sub phases, each with its own round of client feedback and revisions. If a particular feature is taking longer than expected, I like to stop what I’m doing, upload everything to the staging server and let the client see my progress. I don’t like to let too much time go by between rounds of client feedback.

Let me take another moment to talk about a few more tools I like to use during development. I won’t spend time explaining each of these in detail, but feel free to explore them further if you’re curious: WordPress – a popular, feature-rich content management system around which many of my projects are built; jQuery – an incredibly useful (and pretty ubiquitous) JavaScript library; Git – a version control system; Grunt – an application that automates common development tasks; Sass – a CSS preprocessor; Modernizr – a feature detection script to aid with browser compatibility; Bower – an easy way to fetch dependencies; Imagemin – a Grunt task for optimizing images to help the page load quicker; Uglify – a Grunt task that concatenates and minifies script files, which helps the page load quicker; Beanstalk – a service that makes it super simple to deploy a website to a live server from a Git repository.

That’s not a comprehensive list, and it only represents the stuff I’m using at the time of this writing. My tool set tends to change frequently. I like to play around with new things when they’re released and decide if they’re worth learning. If a new tool makes my life easier, it stands a good chance of becoming a part of my arsenal.

Here’s a screenshot of my development environment (click the image for a larger version):

My development environment
(This is my world)

Testing, Final Tweaks and Launch

Before presenting the client with the finished product, there’s an absolutely vital step: browser and mobile device testing. While I tend to do this periodically throughout the whole process (especially when it comes to checking how the site renders on mobile devices), I make sure to devote a special time at the end to dive deeply into it. The biggest “gotcha” in web design is the tendency for different browsers to render a website differently. This is especially true for older versions of Internet Explorer. Caiman Web Design officially supports all major desktop and mobile browsers (you can read about our browser support here), and we support Internet Explorer back to version 8 (at the time of this writing, that’s four versions back). In order to ensure quality across all supported browsers, I thoroughly check the site in each and every one of them, including mobile browsers. This is done with a combination of physical devices, emulation software, and browsers installed on my development computer, including each version of Internet Explorer in its own Windows installation within Virtualbox. I fix every problem I encounter, and I don’t call it a day until the site is performing as well as it possibly can given the capabilities of each browser.

Once the site has been met with my seal of approval, it’s off to the client for the final rounds of feedback and revisions. Just like always, the client gets the final say. At this point the client is tasked with thoroughly checking the entire site, ensuring that what they’re seeing meets – or hopefully exceeds – their expectations. Does the website fulfill all the requirements we discussed way back in our first meeting? Are they looking at a website that they’ll feel proud showing to the world? Is the website going to help their business in all the ways they need it to? Additionally, they need to check that there are no bugs, rendering problems or broken links. If any issues are found, whether technical or otherwise, I fix them now. I’m not happy until the client is happy.

When I get the green light, I push the site to the live server, point the client’s domain name to the new site, inform the client the site has launched, and we all crack open a beer. But the day the site launches isn’t the end. Communication between the client and myself will remain open. In addition to performing site maintenance and server patches, I’ll provide training for using the content management system, and I’ll remain available to answer any questions the client has and help with any problems they’re having with the site.

Conclusion

Having an organized development process is important for many reasons. First, following a step-by-step procedure makes it easier to meet target deadlines. When everyone knows what step we’re on and how many we have left, it maintains a sense of momentum. Similarly, laying my steps out for the client in the early phases gives them peace of mind. Since they can clearly see that I have a master plan, they’re more likely to feel security that I know what I’m doing, and trust that I’ll be able to keep my promises. But most importantly, a structured process makes for a higher quality end product. When I follow a tried and tested method, fewer mistakes are made, fewer details are overlooked and the finished website is a world-class creation that helps achieve the goals of the client’s business. Like I always say, my number one priority is making my clients happy. One of the surest ways to accomplish this is to follow a process that works.

Share On
facebooktwittergoogle_plusredditpinterestlinkedin