Adobe Releases Responsive Web Tools for HTML5
Responsive web design is the big buzz word for 2013. As Magento developers, we were involved too. If you don’t have a website which looks and feels great on everything from a widescreen computer monitor to a tablet PC, you are in danger of being left behind. Today, users expect to be able to engage with your website on any device that they own, and they are not willing to put up with hard to read pages, horizontal scrolling, or slow load times. Btw, when it comes to Magento, our Magento support completely takes care of that.
Designing responsive web pages, however, is not easy. Device screen sizes are not yet standardized, and creating responsive, slick pages with traditional HTML and CSS is difficult. Designers face several usability challenges, as well as engineering problems relating to differing display capabilities, and the limitations of older devices will low-powered processors and single-touch capable only screens. That’s why Adobe has released the HTML 5 Edge Reflow tool, which makes it easy for designers to determine what a devices display capabilities are, and then resize or move each element on the page to fit that device.
It’s possible to do all of this in code if you’re so inclined, but Adobe’s Toolkit offers a simple, visual way to set breakpoints and manage CSS without having to trawl through huge amounts of code. You can use Edge Reflow to create working comps for your clients, or to export framework code for your back-end developers to build upon. The visual feedback that the tool offers is a boon for designers with all levels of experience.
Edge Reflow is available for members of the Creative Cloud (both free and paid). Members can also get updates for Dreamweaver and Edge Animate, as well as see a sneak preview of Edge Code.
Edge Reflow won’t completely solve the problems designers face when creating pages for multiple devices. You’ll still need to consider very small and very big screens carefully, and create extra assets for super-high resolution retina displays. With that said, it’s does make responsive design far more accessible, and should be a big time saver for designers.