The most important thing you can do is adapt.
Our industry is changing. I say our, because it is an inherently collaborative environment. Code is written and tweaked, hacks and adjustments are created to solve Problems in the code, and those hacks are forked and rewritten.
Arguably, one of the most influential new techniques of our current web era is responsive design. This was, just as other coding techniques, born of collaboration – born of a collaborator in our environment: Mr. Ethan Marcotte.
Now, this won’t be another “what is responsive design” post or a why is this good/bad/spawnofsatan – I could point you to any number of posts about it. No – this is about adapting. Taking a long and intricate project and rebuilding it 50 percent of the way through to take advantage of a great new technique.
The RevSystems website used to be a representation of our company – a solid design, built and applied to wordpress. Since its launch, we have taken monumental strides in redefining our brand, advancing our way to the edge of modern technology and opened our arms to the phenomenal new techniques that are coming into existence in conjunction with HTML 5 and CSS 3.
Naturally, with these upgrades, our website needed to be recreated to represent those changes. The site you are currently reading this text on, is our new website. We completely redesigned it – we didn’t rework it – we started from scratch, designed comps in fireworks and the browser and pushed our knowledge of current design and progressive enhancement to a new level.
Starting and Restarting
When we started the redesign, back in February, we had only begun to dive into responsive web design. I had taken an expectational amount of my free time to investigate this new technique that had the web buzzing, and decided that it would be a fantastic challenge to apply this technique on our agency website. So we took all of our fireworks & browser mockups and scrapped them. Reread that sentence. We took months of our designs and in-browser comps and trashed them all. We knew that our markup would be bloated if we tried to make it responsive as it currently was. So, we bit the bullet knowing (Lie. We had no idea. ) that it was going to be worth it in a long run.
We had chosen a framework (expect a post on that process in the near future) and redesigned the comps based on it. We then restarted the browser comps on top of the same framework. This was certainly frustrating, as any designer can tell you, but we marched on and started building us a website.
Advanced Web Design With New Techniques
We were already pushing ourselves to our limits with this site. We had never completed a website using the responsive design methodology so, naturally, tackling a complicated one such as this and making everything efficient in our process was borderline impossible. But we soldiered on and made it work. What ensued was an exceptional display of destruction. We took all of our scripts and code and began butchering them – making sticky footers work on a responsive framework, having sliders respond to their containers and adapt touch events for iOS devices, using an almost excessive set of typekit fonts for live text with live masking (we wow’ed ourselves with that one – go ahead, try to highlight the header on this page.) and much much more.
What we ended up with was our original design with a huge set of live text effects and cross-browser functioning scripts, all of which respond from 1600 pixel wide resolutions down to iphone views. We even began serving high resolution assets to the iphone 4′s retina display.
Essentially, this project has shown us that things we generally take the safe route on can be flipped on their heads. Text blocks are no longer images – typekit, css3 (or even simple css margins) lets us create anything we want as long as we put in the time and effort. Markup can be kept simple and adapted for any screen – instead of having 2 sets of everything being serviced to either desktop or mobile.
What’s our goal? Make people think. Stop being comfortable with design and start challenging yourself more. The web is evolving even faster than it has in the past decade – the only way to stay on top is to push your limits and start using these exciting new technologies today.