Guest Blog Series: Voices.com
Redesigning a website with Adobe Edge Reflow
This article was written by David Ciccarelli, Chief Executive Officer of Voices.com
Redesigning a website is never a small task, but these days the focus on responsive design and making sure customers can have a consistent experience across devices makes it even more daunting. When we set out to redesign the Voices.com website, we knew we needed to focus on mobile, because that’s where a lot of our traffic was coming from. With 85% of mobile site visitors skipping through to visit the full site it was evident that we needed to offer more mobile functionality.
We’d previously created mobile apps, but eventually circled back to the mobile web because we wanted to offer full functionality in a website that would meet the needs of our global target audience. Ultimately, we plan to make the site available in the top five languages spoken on the web. We know that in non-western countries people won’t download apps, so we need something lightweight and accessible.
We chose to work with Adobe Edge Reflow CC and were pleased with how it helped us easily understand and apply the principles of responsive design. Probably the most interesting part of the process was gaining an understanding of the best practices for breakpoints. The 12-grid approach, where every screen had 12 vertical columns, enabled us to standardize the look and feel of the site across devices. For example, the grid helped us to be more consistent with the sidebar menu widths than we’d ever been before. We were also able to take into account factors such as screen resolutions and pixel widths for various designs, which were fundamental to figuring out how the site would behave on different devices.
Seeing where images would drop in and out on a page forced us to make tough decisions about which images worked, and which ones should be removed altogether. To speed loading times even more, we included Sprites in the CSS file that we created in Adobe Photoshop CC. Basically, instead of having 87 files with all different icons, we have one file with all of the icons and only show the ones that are necessary for the page. The browser can cache the one file so it doesn’t need to keep loading individual files. The discipline of creating Sprites also encouraged us to standardize the look and feel of the icons and keep them limited to just the ones we were using.
After we had our proof of concept, we rebuilt the entire site from scratch using Adobe Dreamweaver CC. Overall, we realized considerable time and resource savings with our responsive web design approach, and were able to eliminate lines and lines of code that we weren’t using.
Now that we have responsive concept down, we’re working on trimming the site down as much as possible to maximize reach. Since the launch of our redesigned site, we’ve seen a 17% increase in how long our members stay on the site because of the consistent experience delivered regardless of device. For more details on how our responsive design journey has changed the face of our company, read our case study: http://adobe.ly/19DhG7E