ResponsiveWeb Design          David Ciccarelli     Founder & Chief Executive Officer                    david@voices.com  ...
IntroductionChallenges in Modern Web DesignOne of the challenges of modern web development is designing a website that loo...
Templates       Page Layoutsfor the three screen sizes
Mobile Template
Mobile Navigation
Tablet Template
Desktop Template
My Account
My Accountwith Your Mobile
My Accountwith Your Tablet
My Accounton Your Desktop
Log In
Log In with Your Mobile
Log In with Your Tablet
Log In on Your Desktop
Jobs
View Your Jobson Your Mobile
View Your Jobson Your Tablet
View Your Jobson Your Desktop
Job Postings
Job Posting Details  on Your Mobile
Job Posting Details  on Your Tablet
Job Posting Details on Your Desktop
Responses
Listen to Auditions  on Your Mobile
Listen to Auditions   on Your Tablet
Listen to Auditions on Your Desktop
Messages
Receive Messages on Your Mobile
Sent Messageson Your Tablet
See All Messageson Your Desktop
Feedback? Send comments to david@voices.com
About Voices.comVoices.com was established in 2004 and is now the technology and industry leading website thatconnects bus...
Upcoming SlideShare
Loading in...5
×

Voices.com Responsive Web Design 2013

459

Published on

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. 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.

Published in: Design
1 Comment
0 Likes
Statistics
Notes
  • Nice! I hope the RWD will also 'gracefully adapt' to my wish for a progressive upload indicator, as on YouSendit and the like.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

No Downloads
Views
Total Views
459
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
2
Comments
1
Likes
0
Embeds 0
No embeds

No notes for slide

Voices.com Responsive Web Design 2013

  1. 1. ResponsiveWeb Design David Ciccarelli Founder & Chief Executive Officer david@voices.com www.voices.com
  2. 2. IntroductionChallenges in Modern Web DesignOne of the challenges of modern web development is designing a website that looks great on amyriad of Internet-enabled devices. Just think of all the ways you access the web today; yourmobile phone, a tablet, e-reader, netbook, laptop, desktop and maybe even an HD-TV.Innovative Design SolutionsIn Voices.com’s pursuit of innovation, we have embarked on a web redesign project that willallow our customers to have a consistent experience using Voices.com regardless of whichdevice they are using.Instead of designing for a single screen size, we are now designing for multiple screen sizes,from smart phones to tablets to desktops.Voices.com has explored various approaches to presenting content in a consistent manneracross these devices and ultimately settled on what is quickly becoming the new standard,responsive web design.Responsive Web DesignVoices.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 thecontent on a page to gracefully adapt to the dimensions of the browser.Broadly speaking, these dimensions fall into three categories; mobile, tablet and desktop.Mobile FirstIn addition to designing for three screen sizes simultaneously, a best practice is to design for themobile device first. While not a hard and fast rule, the premise is to design thinking about mobilefirst. By doing so, designs will be constrained by the lack of screen real estate and only vitalfeatures will be included in a final design.Our Design Mission StatementThe end result of the redesign will be the fulfillment of our design mission statement, givingVoices.com customers a consistent experience across the web, from mobile, to tablet and thedesktop.
  3. 3. Templates Page Layoutsfor the three screen sizes
  4. 4. Mobile Template
  5. 5. Mobile Navigation
  6. 6. Tablet Template
  7. 7. Desktop Template
  8. 8. My Account
  9. 9. My Accountwith Your Mobile
  10. 10. My Accountwith Your Tablet
  11. 11. My Accounton Your Desktop
  12. 12. Log In
  13. 13. Log In with Your Mobile
  14. 14. Log In with Your Tablet
  15. 15. Log In on Your Desktop
  16. 16. Jobs
  17. 17. View Your Jobson Your Mobile
  18. 18. View Your Jobson Your Tablet
  19. 19. View Your Jobson Your Desktop
  20. 20. Job Postings
  21. 21. Job Posting Details on Your Mobile
  22. 22. Job Posting Details on Your Tablet
  23. 23. Job Posting Details on Your Desktop
  24. 24. Responses
  25. 25. Listen to Auditions on Your Mobile
  26. 26. Listen to Auditions on Your Tablet
  27. 27. Listen to Auditions on Your Desktop
  28. 28. Messages
  29. 29. Receive Messages on Your Mobile
  30. 30. Sent Messageson Your Tablet
  31. 31. See All Messageson Your Desktop
  32. 32. Feedback? Send comments to david@voices.com
  33. 33. About Voices.comVoices.com was established in 2004 and is now the technology and industry leading website thatconnects businesses with professional voice talents. Radio and television stations, advertisingagencies and Fortune 500 companies rely upon the Voices.com marketplace to search for,audition and hire voice talents with the assistance of our innovative SurePay™ escrow serviceand our Web application.The winner of several awards, including the 1to1 Impact Award, Customer RelationshipManagement Elite Award, and the DigiFest New Voices Award, Voices.com has raised its profilesignificantly this year ranking on the PROFIT Hot 50 recognizing 534% growth over the past twoyears. In 2012 Voices.com won “Business of the Year” from the Chamber of Commerce.Clients include AT&T, Google, Microsoft, Cisco, Kaiser Permanente, ABC, ESPN, PBS, TheHistory Channel, The Discovery Channel, Reader’s Digest, Comcast, Bell Canada, ING, WesternUnion, Ford, GM, Jaguar, US Army, the US Government and tens of thousands more.

×