Today has been a very exciting day for us at Custom Fit Online. Exciting because we have launched two redesigns this week, WAG (Whistler Animals Galore) and Pemberton Valley Lodge. But what makes this week even more noteworthy is how these designs have been brought to life; both Whistler WAG and Pemberton Valley Lodge are our first client-based responsive websites. We're very pleased with them. I will briefly take you through the process of building these sites (look for more detailed posts, coming soon), the process and learning curve on our end, and why we're so excited for future designs. Let's begin.

And In the Beginning…

He said, "these sites are outdated." And they were. When originally built, the sites held up quite well on their own. They were well made for their time, but as is common in both my closet and websites, entropy tends to take a firm grasp and clutter piles up. We definitely got our mileage out of those designs. It had been several years since the last time we (Custom Fit Online) had gotten our hands in the design aspect of the sites, and it was time for a fresh coat of paint.

From the get-go of the redesign process, we knew these sites would have to be responsive. Since my time here at Custom Fit Online, I have been pushing to get a client on board with a responsive site. It is our duty - all of us, as web creators - to educate and prove to our clients that we are able to cater to their needs, as well as satisfy the average site user. I am excited we were able to do so.

We've talked about responsive web design before (The Challenges of Responsive Design and Responsive vs Unique Mobile Websites). Responsive web design (RWD) has become all the rage; all the cool kids are doing it. But they're not doing it because it is just another trend that will eventually fade away (although some argue it will). RWD addresses many problems. Namely, a) multiple sites can now be managed as one site, b) We now have content parity, something both search engines and real human-beings prefer, and c) our sites can be easily upgraded in the future without having to completely overhaul the existing designs. (More on that in a minute.) So you may ask, how did we cope with it? Well, let me tell you.

Wave Goodbye, Photoshop

Traditionally, web design has been made like art; the designers would make it in Photoshop (MS Paint anyone?), get it okay-ed by the client, and hand it off to the developers. The developers would replicate what the designers had done. It was linear. Easy. If someone had a browser too small for the site, well they'd get a scrollbar. If their browser was too big, they'd get a bunch of emptiness on either side. Then mobile devices became popular. And gosh darn it, people actually started using them to browse the web. And then clients asked, "Well how is this going to look on my iPhone?" So designers would mock that up. And then another for the tablets. And gigantic monitors. And refrigerator doors.

… that's starting to be a lot of mockups to create, and a lot of sites needing to be coded. Everyone gets frustrated. It's an awful lot of time and money spent on a process that isn't necessary.

Increasingly, we hear web creators say that Photoshop is on its way out as a web design tool (rephrase: a web mockup tool). And rightly so. Instead of creating static design files and showing them as images, we go directly to coding. We design in the web browser, where we can show the site interactivity. 

And all of this begins with clear goal setting, decided wireframes, and everything laid out in front of you. When you know how things are intended to look and be used, often times the design process will be easy because it is inherent. Of course it's like that, it couldn't be any other way. Planning will be the longest, most difficult challenge when it comes to web design. It's easy to skip it and go start to designing something that looks cool. Don't. Don't overlook it.

Personally, I found using Photoshop beneficial to get a general sense of the design piece. I can draw boxes and place paragraphs faster than I can code. I found it best to play with something a little more in-depth than the wireframe, but not fleshed out enough to be considered a "client-worthy" design. But that's my own opinion, my own process I have experimented with. I've tried many ways, and that's what works best for me.

Just Let It Go

It was one of the most difficult points for me to overcome: letting go of perfecting designs. With static sites, we are used to positioning elements in exactly the "right" spot. Not there. Here. Two pixels over. Ahhh, just right.

With responsive design, all that goes out the window. Perfecting the placement of your elements doesn't matter because you cannot control how someone will view your site.

Going back to those designers who are still making mockups in Photoshop, setting pixel-perfect designs can take a tremendous amount of time and effort. It's unnecessary. We use percentages and relatives to determine how things are to be laid out. As designers, we have to remember that nobody cares if you are off by the slightest amount. Users care about the content on the web page, and whether is it presented in a readable manner.

Letting go also applies to RWD-specific functionality. Spending time, money, and resources on fixing a minute bug that only applies conditionally is not worth it.  Building responsive websites is about creating sites that look and function to the general user. Not your friend the designer that opens up a responsive site and spends five minutes resizing their browser oooh-ing and aaahh-ing over the reflow. Learning to let these small things go can be difficult for perfectionists, but incredibly necessary. Its why we dropped IE6 once upon a time - fixing something for .001% of visitors just isn't worth it. You have to pick your battles.

Always Build for the Future…

As noted, one of strongest points for building responsively is future development. As a responsive site is implemented, we start with the bare bones. Mobile devices first. Which means emphasis on content, linear navigation, and auxiliary items collapsed or otherwise set to a toggle. As our browsers get bigger, we can add more features, more decoration, more spiffy twirling doodads. But we are always building on top of the basic structure set in the beginning. I found a pyramid helpful; as long as you have a sturdy bottom layer, it doesn't matter how many tiers you stack on it, it will hold just fine.

…But Don't Ignore the Past

Yes, we are building towards the future, but we still have to supply functionality to those that came before. Pemberton Valley Lodge averaged at about 35% of users visiting on Internet Explorer (IE), where more than half of said IE users are under version 8. They're browsers that simply don't support modern features. Why not upgrade? I have no idea. But the fact that there is still a large chunk of our audience that needs support, we had to ensure they were included in the redesign process.

Final Thoughts

Practicing what you preach is important: a responsive Custom Fit Online website may be in the pipeline, however we are quite content where we are currently with the separate sites. A responsive site is not always better than a separate mobile site; ultimately it depends on what the needs and requirements of a website are.

I think I speak for the entire team when I say redesigning these two websites simultaneously has been a challenging, stressful, but overall rewarding experience. Learning new things is always fun. We are still working out the kinks in our process, but we've made great headway so far. I know we're all looking forward to learning how we can optimize our RWD sites further, all to obtain better results for our clients.

Be sure to check out our latest web design projects at www.pembertonvalleylodge.com and www.whistlerwag.com, and let us know your thoughts and comments on Facebook and Twitter.

Filed in // Websites, Mobile Website Development, Strategy