By David Ciccarelli
March 1, 2013
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
Log In With Your Tablet
Log In On Your Laptop or Desktop Computer
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.
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!