Welcome to Scribd. Sign in or start your free trial to enjoy unlimited e-books, audiobooks & documents.Find out more
Download
Standard view
Full view
of .
Look up keyword
Like this
1Activity
0 of .
Results for:
No results containing your search query
P. 1
Responsive Design Case Study

Responsive Design Case Study

Ratings: (0)|Views: 6|Likes:
Published by Voices.com
Talent marketplace uses Adobe Creative Cloud, including Adobe Edge Reflow and Adobe Dreamweaver, to execute responsive web design, also called adaptive design or RWD, that delivers a consistent experience on all platforms and devices.
Talent marketplace uses Adobe Creative Cloud, including Adobe Edge Reflow and Adobe Dreamweaver, to execute responsive web design, also called adaptive design or RWD, that delivers a consistent experience on all platforms and devices.

More info:

Published by: Voices.com on Oct 03, 2013
Copyright:Attribution Non-commercial

Availability:

Read on Scribd mobile: iPhone, iPad and Android.
download as PDF, TXT or read online from Scribd
See more
See less

02/16/2015

pdf

text

original

 
Talent marketplace uses Adobe Creative Cloud, including Adobe EdgeRelow CC and Adobe Dreamweaver® CC, to execute responsiveweb design that delivers a consistent experience on all platormsand devices
Businesses looking or proessional voice-over talent can simply point their mouse,or inger, to Voices.com. Media conglomerates, advertising agencies, and Fortune500 companies use the online marketplace to search or, audition, and hire voice-over artists or a wide variety o projects—commercials, corporate presentations,movie trailers, audio books, and e-learning sotware, to name a ew. Voice actorsuse the website to post demos, send audition audio iles, and collaborate onlineduring the course o projects.
Taking a new approach
Established in 2004, the company was ounded by David Ciccarelli, chie executive oicer andStephanie Ciccarelli, chie marketing oicer. Traic at Voices.com is growing at a ast clip—as is thenumber o dierent devices people use to access the service. With about one third o the site’s twomillion monthly page views coming rom mobile devices and another 20% coming rom tablets,David Ciccarelli and his team are meeting the mobile challenge using creative tools and services inAdobe Creative Cloud to deliver a comprehensive digital presence with the same look, eel, andunctionality regardless o the device used to touch the brand.Using a combination o tools and services in Adobe Creative Cloud—speciically Adobe EdgeRelow CC, Photoshop® CC, and Dreamweaver CC—the company adopted a responsive web designapproach, which ocuses on how to accurately and eiciently resize and present content rom onecode base to any screen, regardless o its scope or orientation.
Voices.com
Responsive design delivers
Voices.com
London, Ontario, Canada
www.voices.com
Adobe® Creative Cloud™Success Story
Results
•Increasedmobileaudience43%yearoveryear•Achievedtwomillionpageviewsamonth•Measureddailymembershiploginsat86%•Increasedsitestickinessby17%•Enhancedvisitorengagement•Streamlineddesign/developmentcollaboration
 
The goal o Voices.com was to cost-eectively deliver consistent user experiences on all devicesand platorms, as well as position the company to meet uture demands as the adoption rate o mobile devices and tablets continues to outpace desktop Internet use.“Seeing the number o users accessing our service rom mobile devices increase 43% year ater yearmade it abundantly clear that we needed to strengthen our mobile presence in a sustainable way,”says Ciccarelli. “Our entire business model relies on customers being able to quickly identiy and hirevoice talent rom any number o touch points that exist today and that have yet to be invented.”
A consistent user experience
Prior to undertaking this responsive design project, Voices.com had a rudimentary mobile site atm.voices.com that ailed to deliver key user experience to its clients. Mobile visitors wanted moreunctionality; 85% o users were skipping through to the website because they couldn’t listen toaudio iles. The company also built a standalone mobile app or iOS, ollowed by one or Android™.User experiences and unctionality varied rom screen to screen, and neither the mobile apps orthe desktop site addressed the unique needs o tablet users.While there were 20,000 downloads o the mobile app, Ciccarelli and his team knew that the utureo the company depended on a more sustainable, scalable web strategy. They needed a plan thatwould maximize the resources o just one design and development team and that simpliied thebuilding and expansion o a single code base deployed to one set o URLs with device detection.The company set out to achieve a “one web” approach that would enable the team to propagatechanges to all devices and platorms at once, keep page load times ast by keeping code clean,move processing rom the server side to the client, eliminate the need to redirect users, and uniyproduct releases.
Designing once or dierent devices
Using a variety o tools and services in Creative Cloud to develop a lexible and luid design that adaptsto all devices, the Voice.com team established product speciications and built wire rames o everypage using Photoshop. A single template served as the basis or three separate iles—phone, desktop,and tablet. Initial layouts were designed in Photoshop, making extensive use o shared assets whilecreating layers or each o the three iles. To help speed page loading, the team also used Photoshop tocreate CSS sprites or icons.The small project team, which included a mobile developer, a ront-end developer, a system administrator,and a web designer, then took the mockups into Edge Relow CC, where the heavy liting o responsivedesign was made easy. Edge Relow CC templates helped the team understand and visualize expectedbehavior as content adapted on the ly to various screen sizes.
Challenge
•Positioncompanyforfuturegrowthandincreasedmobileaccesswithsustainable,scalablewebstrategy•Provideconsistentuserexperience,features,andfunctionalityforallusersacrossplatformsanddevices
Solution
•UseAdobeCreativeCloudandAdobeEdgeReowCCtoplan,design,andimplementresponsivewebdesignproject•CreateCSScodeforresponsivewebsiteusingAdobeDreamweaverCC
Systems at a glance
AdobeCreativeCloud.Componentsusedinclude:•AdobeEdgeReowCC•AdobePhotoshopCC•AdobeDreamweaverCC
Using a combination o Adobe Creative Cloud tools, Voices.com adopted a responsive web design approach, which ocuses on how toaccurately and eciently resize and present content rom one code base to any screen, regardless o its scope or orientation.

You're Reading a Free Preview

Download
scribd
/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->