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

Microsoft Buying Minecraft Creator Will Drive Mobile Voice

The 3 Things Voice Pros Can Learn From Sir Jony Ive

Don Pardo's Final Voice Lesson

iPhone 6, 6 Plus & Apple Watch: Studio On The Go for Voice Pros

Apple iWatch Could Drive Voice Over Market

How Localization Unlocks Business Growth Potential

Are You a Self-Made Voice Over Actor?

Slate In Character Or Don't Slate At All

Most Common Languages Other Than English and Spanish Spoken in the US

Who's the Voice on the MLB Perfect Inning App?

   

Upcoming Webinar

Localization Webinar

Join us for a free webinar on how localization can help expand the use of all your voice-over work for new markets, new services and reach new heights with your business!

Register for the webinar

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