Primary Menu

Adobe Responsive Design

On April, Adobe of San Francisco held a 5 hours Responsive Design Workshop presented by Brian Wood. It started with the basics: what is responsive design and why it’s important today, the difference between fluid and adaptive layout, media queries. On media queries Brian explained the importance of the “mobile first” which is basically designing for mobile first and adding the breakpoints as needed for bigger screens.

The entire workshop since held at Adobe was an introduction for their new software Edge Reflow. Adobe has now created a way to translate a layout design in Photoshop into HTML/CSS when opened in Edge Reflow using the generate>assets tool as long as the layers or groups in Photoshop are labeled with jpg, png or gif and organized based on their top-bottom placement in the web design.

Edge Reflow is still under development, they talked about many tools they were going to improve. It’s really a solution for those who don’t know code or are not interested in editing the HTML/CSS of a design. So far it’s only compatible with Safari and Chrome but again it’s still a preview software with a lot of potential. Personally I think it could be used as quick comp layout or for a meeting with a client to explain the design idea but I wouldn’t rely on it for the final code. Let’s see how much they edit and improve it in the future.