Co-founders of Twitter made big news this week launching branch.com and medium.com. Branch.com is a new way of sharing content you find on the web, and sparking a conversation. Medium.com sets out to rethink the publishing industry. My one sentence descriptions don't do them justice, so I suggest you check them out yourself if you want to be on the leading edge.
There is a reason I am bringing up branch.com and medium.com (other than just trying to associate Method with up and coming big names). Last week we launched a complete rework of the methodintegration.com website and we used a technique called Responsive Design. It's the same technique that branch.com and medium.com are using, and I imagine it will be a technique used by more and more websites and web apps. The idea behind responsive design is that a website is designed so that it automatically responds to the width of the device that is viewing it. In other words, design a single website so that each page looks great, regardless of whether it is viewed on a mobile phone, a tablet, a regular desktop monitor or a widescreen monitor.
Try it out yourself and you'll see what I mean. Go to methodintegration.com, and gradually make your browser thinner and thinner. Images will drop off or change size, the blue navigation bar at the top will change into a mobile version, and content will change from columns into rows so that it is optimized for viewing on a tablet or a mobile phone.
For our responsive design implementation we used the Twitter Bootstrap framework. It's a revolutionary way of building a website - but it wasn't easy. It's not for the hobbyist. You need a web developer who has a strong understanding of CSS (Cascading Style Sheets), and you need a lot of patience. For us, we originally started the project by trying to add Twitter Bootstrap and making necessary adjustments to our existing website. That was a bad idea that only lasted a couple hours. Responsive design is such a different approach to building websites from what we had done in the past. So we made the decision to start completely from scratch. Without getting into too many details, Bootstrap requires you to think of your site as shared chunks of 12 columns, and these chunks can slide into their own rows when the device width is too thin - this makes you totally rethink how your content can be displayed in various situations, so much so that your old site can hardly be reused.
It was a part time project that spanned 4 months. Now that it's done, I'm excited that Method's home page is nicely accessible from all devices - and that we don't have to maintain a separate site for mobile, tablets and desktops. Whew! But there are a number of other changes we made to the site that are noteworthy:
- New Live Chat - We swaped out Zopim chat for SnapEngage. We found it cleaner, and it worked better on mobile devices. We're still missing a few Zopim features, but SnapEngage is a better product.
- Quotes from real live people using Method - Our old site was missing something.....YOU. On the new site, we wanted to have pictures and quotes from users that had posted their thoughts on social networks or submitted app reviews to Google and Intuit.
- Pics and profiles of real staff that work here - Our old site was missing something else....US. On the new site, we wanted pictures and profiles of real people that work here at Method HQ. We wanted to share what they do here, and also what they do when they are not here. Check out the About Us page, and then click on Meet the Team.
- New movie - We worked with explainthatapp.com to create a new movie that explains the basics of what CRM does. We really enjoyed the experience, and recommend them should you be in the market for your own movie. It's the first of 4 movies we're doing. Next one will highlight the Gmail Gadget.
I hope you enjoy the new site, and maybe that I've inspired you to put responsive design into your website's future!