The goal o Voices.com was to cost-eectively deliver consistent user experiences on all devicesand platorms, 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 ater 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 identiy 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 moreunctionality; 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 simpliied 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 platorms 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 uniyproduct releases.
Designing once or dierent 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 speciications 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 Relow CC, where the heavy liting o responsivedesign was made easy. Edge Relow CC templates helped the team understand and visualize expectedbehavior as content adapted on the ly to various screen sizes.
Systems at a glance
Using a combination o Adobe Creative Cloud tools, Voices.com adopted a responsive web design approach, which ocuses on how toaccurately and eciently resize and present content rom one code base to any screen, regardless o its scope or orientation.