Since 2002, Techvibes has been covering social, mobile, and startup news that impacts people all across Canada.

Techvibes is an excellent place to keep read up on the latest tech trends and developments.

And with an average of 49 new posts every week, Techvibes produces a constant stream of new content for engaged local and national markets.

They were one of the first websites to create a mobile website using Mobify back in 2008.

Now with an ever-growing mobile audience, they knew that creating a new mobile site that appealed to Techvibes’ audience wasn't just necessary – it was essential.

In this post, we'll walk you through the design process Techvibes used to go mobile in under a week on the new Mobify Cloud.

1. Understanding the Brand

When creating a mobile site for an existing brand, you can’t start designing the mobile site until you have a feel for styling and branding of the existing website.

So start by reading and reviewing any existing branding guidelines or style guides. Ask for old versions of the design. Use the Wayback Machine to see how the brand has evolved over time.

The purpose of this first step is to get a feel for the current design process and how it's evolved.

Once you feel like you know the brand,  use something similar to a mood board to develop and check concepts.

Ensure that any element from the mobile or desktop site will be immediately identifiable as belonging to the same brand.

2. First-Run Mockups

After the design team has a feel for the brand, begin the process of creating first-run mockups.

Skipping wireframes may seem abrupt if you’re used to working with an agency, but remember – in this context you are not creating new branding or concepts from scratch – you're extending an existing brand to a new screen.

By following existing guidelines and interpreting and adapting those styles for mobile, you are able to turn around sites with remarkable speed and make sure the audience has a consistent and familiar experience.

Powering leading mobile websites worldwide has also taught us that design is as much about performance and usability as branding consistency.

So, make sure your mobile sites not only look amazing but performs flawlessly from a user experience perspective.

3. Critiques and Revisions

After the mockups are completed, the design team meets for a critique.

Some of the questions to consistently arise include:

• Which elements are working – and which aren’t?
• What elements need to be resized or need an ever-so-slight tweak?
• Is the design conducive to finger-friendly browsing?

This designer-led process is all about crafting the best possible user-experience possible.

In the case of Techvibes, a decision was made to move content down a few pixels from the dropdown menu to make sure it didn’t feel cluttered when the menu was opened.

Click area, always a balance of design and finger size, has to be as small as possible to look good, but as big as possible to make sure you click what you intend to the first time.

Another handy tip: to make it obvious what you’re clicking on, use a nice hover state.

4. Presentation to Customer and Approval

After revisions from the critique are incorporated into the design, the new mobile templates are built out in HTML.

Now the designs are ready for final approval.

To start, make sure the prototype mobile site is live on a test server.

Why? Because it’s always better to be able to interact with a mobile site the way in which it was intended – on an actual mobile device, not a laptop or in a simulator.

With the live mobile demo we always get customers to navigate to a test URL of their mobile website on their own phones to give them to as close as possible the live experience their users will get.

Customers are also more familiar with the paths taken by their users and often have suggestions to make the sites easier to use.

With Mobify.js, integrating third-party JavaScript services like Disqus is very easy for developers.

Commenting on articles via mobile is often unintuitive and complicated. With Techvibes, commenting on articles via mobile was made as easy as possible.

Try the site out for yourself by visiting techvibes.com on your smartphone.

For designers and developers, Try Mobify for free.  For businesses looking for an enterprise solution, talk to a mobile expert.