Vox Daily The Official Voices.com Blog

First Look! Responsive Web Design Coming to Voices.com


By David Ciccarelli

March 1, 2013

Comments (2)

Responsive Web Design Splash

One of the challenges of modern web development is designing a website that looks great on a myriad of Internet-enabled devices. Just think of all the ways you access the web today; your mobile phone, a tablet, e-reader, netbook, laptop, desktop and maybe even an HD-TV.

In Voices.com's pursuit of innovation, we have embarked on a web redesign project that will allow our customers to have a consistent experience using Voices.com regardless of which device they are using.

Today, we're going to show you screen shots of an all-new Voices.com that auto-magically reformats the content on page to the dimensions of the web browser. Let's see some responsive web design layouts!

Examples of Responsive Web Design

Before going further, it may be helpful to see this in action.

Step 1. Visit Voice Acting For Dummies or Voice World Toronto
Step 2. Click the bottom corner of your web browser and drag it inwards.
Step 3. Notice the contents on the page automatically readjust based upon the size of the browser? Keep dragging inwards to the size of a tablet such as an iPad and even an iPad Mini, then keep going all the way down to the size of a mobile phone and you'll see what those sites look like on mobile.

Got it? Now, that's the same design principle that we'll be using at Voices.com in the future. Today, we're simply introducing the concept of responsive web design.

Responsive Web Design

Voices.com has explored various approaches to presenting content in a consistent manner across these devices and ultimately settled on what is quickly becoming the new standard, responsive web design.

Voices.com will be launching a re-imagined website using a modern development technique, known as "Responsive Web Design" or RWD for short. Responsive web design allows the content on a page to gracefully adapt to the dimensions of the browser. Broadly speaking, these dimensions fall into three categories; mobile, tablet and desktop.

Log In From Your Mobile Phone

Responsive Web Design on a Mobile

Example of Responsive Web Design on a Mobile Phone

Log In With Your Tablet

Responsive Web Design on a Tablet

Example of Responsive Web Design on a Tablet such as an iPad

Log In On Your Laptop or Desktop Computer

Responsive Web Design on the Desktop

Example of Responsive Web Design on a Desktop

Tools for Responsive Web Design

We're also trying out some new tools. While design and development team already had Photoshop, I didn't. Plus, I prefer Fireworks for rapid prototyping. Adobe Creative Cloud has granted us access to the entire Adobe suite of applications for a monthly subscription. That's been handy! Also in Creative Cloud is a responsive design tool called Edge Reflow. With Edge ReFlow, you can design responsive CSS layouts for all screen sizes and export to an HTML code editor. Even though Reflow is still in pre public release, the tutorials and videos have been helpful in creating some initial prototypes. We'll be using Reflow more as we get further along the project.

Initial Thoughts

When we started this project it was with the promise of being able to offer you, our valued customers, a consistent experience where you can do anything you need to on Voices.com, from any device. Taking the responsive design approach is helping us realize this vision.

What do you think?

Do you have any feedback for us? Do you like the design? How do you use Voices.com on your mobile phone or tablet? Let us know!

Kind regards,

Related Topics: iPad, TV


    I recently updated my own website with a responsive web design, and the results are great! It's so much easier to update the site, and it gives my site a consistent look no matter what device accesses it.

    Looking forward to seeing the new voices.com site!

    Posted by:

      I think it is a great idea. When I have my site redesigned, I am going to make sure that whoever does is can do a responsive web design. I can't wait to see it in action!


      Posted by:

Leave a Comment

Recent Articles

Does Practice Make Perfect? 4 Steps You'll Want to Follow!

Be Our Guest! Unless You Can't Make It - How to Record as if Your Co-Stars Are in the Room

Want to Create Sound? Check out some Foley in Zootopia!

New Features! File Management Made Easier at Voices.com

3 Common (Yet Avoidable) Audio Editing Oversights

Is the Role Right for You? 6 Ways to Know.

Want to Get Noticed? 3 Tips for Featuring Your Vocal Talent

5 Ways to Maximize Your Voice Acting Auditions

What's the #1 Secret Ingredient for Box Office Success?

How To Use Storytelling to Make Science More Accessible