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,
David

Related Topics: iPad, TV


Comments


    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!

      Tom

      Posted by:

Leave a Comment



Recent Articles

Optimus Prime, Sheriff Woody & What Makes A Character Great

Should you Ello?

Do You Dread Public Speaking? Try These Exercises!

Vox Talk wants YOU!

How To Present Yourself As A Native Speaker

Should You Insure Your Voice?

Why Should Radio Stations Hire Freelance Voice Talent?

5 Steps To Building A Great App Preview Video

Bringing Your A-Game and Getting Involved

Vanishing Act: Movie Trailers Are Going Voiceless

   

Radio Advertising Center

Radio Advertising Solution Centre

Explore a new resource hub covering all aspects of planning, scheduling and launching successful radio advertising campaigns.

Radio Advertising Solution Center

Subscribe by Email

About Vox Daily

Vox Daily offers a daily dose of voice acting news, articles, tutorials, interviews, intelligent conversation and business ideas for voice talent and voice actors.


Follow Us

   

Our feed & social options update you with special offers and news as it happens.

New YouTube Video

Watch videos on YouTube